From 9c556662fe98ca3d664a86b5ff669b127de8fc32 Mon Sep 17 00:00:00 2001
From: negue <eugen.bolz@gmail.com>
Date: Sun, 11 Dec 2022 00:25:30 +0100
Subject: [PATCH] prepare header settings but still hidden

---
 .../components/genericSettingMixin.js         |  2 +-
 .../src/pages/settings/generalSettings.vue    | 14 +----
 .../inlineSettings/dateFormatSetting.vue      |  2 +-
 .../inlineSettings/headerSettings.vue         | 62 +++++++++++++++++++
 .../inlineSettings/languageSetting.vue        |  2 +-
 5 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 website/client/src/pages/settings/inlineSettings/headerSettings.vue

diff --git a/website/client/src/pages/settings/components/genericSettingMixin.js b/website/client/src/pages/settings/components/genericSettingMixin.js
index f1aa64994f..ec57ef6e30 100644
--- a/website/client/src/pages/settings/components/genericSettingMixin.js
+++ b/website/client/src/pages/settings/components/genericSettingMixin.js
@@ -1,6 +1,6 @@
 export const GenericSettingMixin = {
   methods: {
-    set (preferenceType, subtype) {
+    setUserPreference (preferenceType, subtype) {
       const settings = {};
       if (!subtype) {
         settings[`preferences.${preferenceType}`] = this.user.preferences[preferenceType];
diff --git a/website/client/src/pages/settings/generalSettings.vue b/website/client/src/pages/settings/generalSettings.vue
index c2e26666d3..d7a49290e9 100644
--- a/website/client/src/pages/settings/generalSettings.vue
+++ b/website/client/src/pages/settings/generalSettings.vue
@@ -50,16 +50,6 @@
             Audio TODO
           </td>
         </tr>
-        <tr>
-          <td colspan="3">
-            Show header TODO
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3">
-            Sticky Header TODO
-          </td>
-        </tr>
       </table>
 
 
@@ -122,8 +112,8 @@ import ResetAccount from './inlineSettings/resetAccount';
 import DeleteAccount from './inlineSettings/deleteAccount';
 import { sharedInlineSettingStore } from './components/inlineSettingMixin';
 import LanguageSetting from './inlineSettings/languageSetting';
-import DateFormatSetting from '@/pages/settings/inlineSettings/dateFormatSetting';
-import DayStartAdjustmentSetting from '@/pages/settings/inlineSettings/dayStartAdjustmentSetting.vue';
+import DateFormatSetting from './inlineSettings/dateFormatSetting';
+import DayStartAdjustmentSetting from './inlineSettings/dayStartAdjustmentSetting.vue';
 
 export default {
   components: {
diff --git a/website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue b/website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue
index 7cbfc3606d..3d085510b0 100644
--- a/website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue
@@ -106,7 +106,7 @@ export default {
     },
     async changeFormatAndClose () {
       this.user.preferences.dateFormat = this.selectedFormat;
-      await this.set('dateFormat');
+      await this.setUserPreference('dateFormat');
       this.closeModal();
     },
     /**
diff --git a/website/client/src/pages/settings/inlineSettings/headerSettings.vue b/website/client/src/pages/settings/inlineSettings/headerSettings.vue
new file mode 100644
index 0000000000..4c5f945b6d
--- /dev/null
+++ b/website/client/src/pages/settings/inlineSettings/headerSettings.vue
@@ -0,0 +1,62 @@
+<template>
+  <fragment>
+    <tr>
+      <td class="settings-label">
+        {{ $t("showHeader") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <toggle-switch
+          v-model="user.preferences.showHeader"
+          @change="setUserPreference('showHeader')"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td class="settings-label">
+        {{ $t("stickyHeader") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <toggle-switch
+          v-model="user.preferences.stickyHeader"
+          @change="setUserPreference('stickyHeader')"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+::v-deep {
+   .toggle-switch-outer {
+     display: inline-block;
+   }
+}
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+import { GenericSettingMixin } from '../components/genericSettingMixin';
+
+
+export default {
+  components: { ToggleSwitch },
+  mixins: [InlineSettingMixin, GenericSettingMixin],
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+  methods: {
+
+  },
+};
+</script>
diff --git a/website/client/src/pages/settings/inlineSettings/languageSetting.vue b/website/client/src/pages/settings/inlineSettings/languageSetting.vue
index a54bc549b0..fcc69dc9c8 100644
--- a/website/client/src/pages/settings/inlineSettings/languageSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/languageSetting.vue
@@ -137,7 +137,7 @@ export default {
     },
     async changeLanguageAndClose () {
       this.user.preferences.language = this.selectedLanguage;
-      await this.set('language');
+      await this.setUserPreference('language');
       setTimeout(() => window.location.reload(true));
     },
   },