refactor: rename settings-i18n to view-settings

src/composables/view-settings.js

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+const SORT_ORDER_KEY = Object.freeze({
+  ASC: 'asc',
+  DESC: 'desc'
+})
+const SORT_TYPE_KEY = Object.freeze({
+  DEFAULT: 'default',
+  ALPHA: 'alpha',
+  NUMBER: 'number',
+  QUANTITY: 'quantity',
+  DATE: 'date'
+})
+
+export function useViewSettings() {
+  const { t } = useI18n()
+  const sortByLabel = computed(() => t('viewSettings.sortBy.label'))
+  const visiblePropertiesLabel = computed(() => t('viewSettings.properties'))
+
+  function tSortByOption(name, order = SORT_ORDER_KEY.ASC, type = SORT_TYPE_KEY.DEFAULT) {
+    return computed(() =>
+      t(`viewSettings.sortBy.format`, {
+        name: t(`viewSettings.options.${name}`),
+        order: t(`viewSettings.order.${type}.${order}`)
+      })
+    )
+  }
+  const tLayout = {
+    label: computed((_) => t('viewSettings.view.label')),
+    grid: computed((_) => t('viewSettings.view.grid')),
+    table: computed((_) => t('viewSettings.view.table'))
+  }
+  const perPageLabel = (titleKey) => computed((_) => t('viewSettings.perPage', { title: t(titleKey) }))
+  return { SORT_ORDER_KEY, SORT_TYPE_KEY, tSortByOption, sortByLabel, visiblePropertiesLabel, tLayout, perPageLabel }
+}

src/views/Task/TasksListSettings.vue

@@ -1,18 +1,20 @@
 <script setup>
 import { noop } from 'lodash'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { useCore } from '@/composables/core'
 import { useUrlParamWithStore, useUrlParamsWithStore } from '@/composables/url-params'
 import PageSettings from '@/components/PageSettings/PageSettings'
 import PageSettingsSection from '@/components/PageSettings/PageSettingsSection'
-import { useSettingsI18n } from '@/composables/settings-i18n'
+import { useViewSettings } from '@/composables/view-settings'
+import { useTaskSettings } from '@/composables/task-settings'
 
 const { core } = useCore()
-const { SORT_ORDER_KEY, SORT_TYPE_KEY, sortByLabel, tSortByOption, perPageLabel } = useSettingsI18n()
+const { SORT_ORDER_KEY, SORT_TYPE_KEY, sortByLabel, tSortByOption, perPageLabel, visiblePropertiesLabel } =
+  useViewSettings()
 const settingName = 'taskList'
 const perPage = ref({
-  label: perPageLabel('tasks.title'),
+  label: perPageLabel('task.title'),
   type: 'radio',
   open: true,
   modelValue: useUrlParamWithStore('perPage', {
@@ -79,6 +81,24 @@ const sortBy = ref({
     }
   ]
 })
+const { propertiesOrder, propertiesLabel, propertiesIcon } = useTaskSettings()
+
+const properties = ref({
+  label: visiblePropertiesLabel,
+  type: 'checkbox',
+  open: true,
+  modelValue: computed({
+    get: () => core?.store.getters['app/getSettings']('settingName', 'properties'),
+    set: (properties) => core?.store.commit('app/setSettings', { view: 'search', properties })
+  }),
+  options: computed(() => {
+    return propertiesOrder.map((value) => {
+      const text = propertiesLabel.value[value]
+      const icon = propertiesIcon[value]
+      return { value, icon, text }
+    })
+  })
+})
 
 defineProps({
   hide: {
@@ -110,5 +130,13 @@ defineProps({
       :options="perPage.options"
       :label="perPage.label"
     />
+
+    <page-settings-section
+      v-model="properties.modelValue"
+      v-model:open="properties.open"
+      :type="properties.type"
+      :options="properties.options"
+      :label="properties.label"
+    />
   </page-settings>
 </template>