Support memory function of the filter items (#168)

sheepzh · sheepzh · commit f0dc410b33a7 · 2022-11-27T15:37:13.000+08:00
diff --git a/src/app/components/common/filter-item-history-wrapper.ts b/src/app/components/common/filter-item-history-wrapper.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+/**
+ * The wrapper of filter item history
+ * 
+ * @param path path of route
+ * @param paramName the name of param
+ */
+class FilterItemHistoryWrapper {
+    private key: string
+
+    constructor(path: string, paramName: string) {
+        if (!path || !paramName) {
+            this.key = undefined
+        } else {
+            this.key = `__filter_item_history_value_${path}_${paramName}`
+        }
+    }
+
+    /**
+     * get the value
+     * 
+     * @returns val of undefined
+     */
+    getValue(): string {
+        if (!this.key) {
+            return undefined
+        }
+        return localStorage.getItem(this.key)
+    }
+
+    /**
+     * Set new value
+     * 
+     * @param newVal 
+     */
+    setValue(newVal: string) {
+        newVal && this.key && localStorage.setItem(this.key, newVal)
+    }
+
+    /**
+     * Do something if the value exists
+     * 
+     * @param callback 
+     */
+    ifPresent(callback: (historyVal: string) => void) {
+        const val = this.getValue()
+        val && callback?.(val)
+    }
+}
+
+export default FilterItemHistoryWrapper
diff --git a/src/app/components/common/select-filter-item.ts b/src/app/components/common/select-filter-item.ts
@@ -1,19 +1,49 @@
 
-import { PropType, Ref, watch } from "vue"
+import type { PropType, Ref } from "vue"
+import type { RouteLocation } from "vue-router"
 
+import { watch } from "vue"
 import { ElOption, ElSelect } from "element-plus"
-import { defineComponent, h, ref } from "vue"
+import { defineComponent, h, ref, nextTick } from "vue"
+import { useRoute } from "vue-router"
+import FilterItemHistoryWrapper from "./filter-item-history-wrapper"
+
+const PREFIX = "__filter_select_history_value_"
+
+function calcHistoryKey(route: RouteLocation, historyName: string): string {
+    if (!historyName) {
+        return undefined
+    } else {
+        return PREFIX + route.path + '_' + historyName
+    }
+}
 
 const _default = defineComponent({
     name: "SelectFilterItem",
     props: {
         defaultValue: String,
+        /**
+         * Whether to save the value in the localstorage with {@param historyName}
+         */
+        historyName: {
+            type: String,
+            required: false
+        },
         options: Object as PropType<Record<string | number, string>>
     },
     emits: ['select'],
     setup(props, ctx) {
         const modelValue: Ref<string> = ref(props.defaultValue)
-        watch(modelValue, () => ctx.emit('select', modelValue.value))
+        const historyWrapper = new FilterItemHistoryWrapper(useRoute().path, props.historyName)
+        // Initiliaze value
+        historyWrapper.ifPresent(
+            historyVal => nextTick(() => ctx.emit('select', (modelValue.value = historyVal)))
+        )
+
+        watch(modelValue, () => {
+            ctx.emit('select', modelValue.value)
+            historyWrapper.setValue(modelValue.value)
+        })
         return () => h(ElSelect, {
             class: 'filter-item',
             modelValue: modelValue.value,
diff --git a/src/app/components/common/switch-filter-item.ts b/src/app/components/common/switch-filter-item.ts
@@ -4,10 +4,23 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import type { Ref } from "vue"
+import { nextTick, Ref } from "vue"
+import type { RouteLocation } from "vue-router"
 
 import { ElSwitch } from "element-plus"
 import { defineComponent, h, ref } from "vue"
+import { useRoute } from "vue-router"
+import FilterItemHistoryWrapper from "./filter-item-history-wrapper"
+
+const PREFIX = "__filter_select_history_value_"
+
+function calcHistoryKey(route: RouteLocation, historyName: string): string {
+    if (!historyName) {
+        return undefined
+    } else {
+        return PREFIX + route.path + '_' + historyName
+    }
+}
 
 const _default = defineComponent({
     name: "SwitchFilterItem",
@@ -16,17 +29,32 @@ const _default = defineComponent({
             type: Boolean,
             default: false
         },
+        /**
+         * Whether to save the value in the localstorage with {@param historyName}
+         */
+        historyName: {
+            type: String,
+            required: false
+        },
         label: String
     },
     emits: ["change"],
     setup(props, ctx) {
         const modelValue: Ref<boolean> = ref(props.defaultValue)
+        const historyWrapper = new FilterItemHistoryWrapper(useRoute().path, props.historyName)
+        // Initiliaze value
+        historyWrapper.ifPresent(
+            historyVal => nextTick(() => ctx.emit('change', (modelValue.value = historyVal === 'true')))
+        )
         return () => h("span", { class: "filter-switch" }, [
             h('a', { class: 'filter-name' }, props.label),
             h(ElSwitch, {
                 class: 'filter-item',
                 modelValue: modelValue.value,
-                onChange: (val: boolean) => ctx.emit("change", modelValue.value = val)
+                onChange(val: boolean) {
+                    ctx.emit("change", modelValue.value = val)
+                    historyWrapper.setValue(modelValue.value?.toString?.())
+                }
             })
         ])
     }
diff --git a/src/app/components/habit/component/filter.ts b/src/app/components/habit/component/filter.ts
@@ -5,14 +5,16 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElOption, ElSelect } from "element-plus"
-import { ref, Ref, h, defineComponent, PropType } from "vue"
+import type { PropType } from "vue"
+import type { HabitMessage } from "@app/locale/components/habit"
+
+import { ref, Ref, h, defineComponent } from "vue"
 import { daysAgo } from "@util/time"
 import { t } from "@app/locale"
-import { HabitMessage } from "@app/locale/components/habit"
 import SwitchFilterItem from "@app/components/common/switch-filter-item"
 import { ElementDatePickerShortcut } from "@src/element-ui/date"
 import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
+import SelectFilterItem from "@app/components/common/select-filter-item"
 
 export type HabitFilterOption = {
     periodSize: number
@@ -46,17 +48,17 @@ const DATE_RANGE_END_PLACEHOLDER = t(msg => msg.trend.endDate)
 // [value, label]
 type _SizeOption = [number, keyof HabitMessage['sizes']]
 
-const SIZE_OPTIONS: _SizeOption[] = [
-    [1, 'fifteen'],
-    [2, 'halfHour'],
-    [4, 'hour'],
-    [8, 'twoHour']
-]
-
-const renderSizeOption = ([size, msg]: _SizeOption) => h(ElOption, {
-    label: t(root => root.habit.sizes[msg]),
-    value: size
-})
+function allOptions(): Record<number, string> {
+    const allOptions = {}
+    const allSizes: _SizeOption[] = [
+        [1, 'fifteen'],
+        [2, 'halfHour'],
+        [4, 'hour'],
+        [8, 'twoHour'],
+    ]
+    allSizes.forEach(([size, msg]) => allOptions[size] = t(root => root.habit.sizes[msg]))
+    return allOptions
+}
 
 const _default = defineComponent({
     name: "HabitFilter",
@@ -67,7 +69,6 @@ const _default = defineComponent({
     },
     emits: ["change"],
     setup(props, ctx) {
-        const trendSearching: Ref<boolean> = ref(false)
         const periodSize: Ref<number> = ref(props.periodSize || 1)
         // @ts-ignore
         const dateRange: Ref<Date[]> = ref(props.dateRange || [])
@@ -81,21 +82,19 @@ const _default = defineComponent({
         }
         return () => [
             // Size select
-            h(ElSelect, {
-                placeholder: t(msg => msg.trend.hostPlaceholder),
-                class: 'filter-item',
-                modelValue: periodSize.value,
-                filterable: true,
-                loading: trendSearching.value,
-                onChange: (val: string) => {
+            h(SelectFilterItem, {
+                historyName: 'periodSize',
+                defaultValue: periodSize.value?.toString?.(),
+                options: allOptions(),
+                onSelect(val: string) {
                     const newPeriodSize = parseInt(val)
                     if (isNaN(newPeriodSize)) {
                         return
                     }
                     periodSize.value = newPeriodSize
                     handleChange()
                 },
-            }, () => SIZE_OPTIONS.map(renderSizeOption)),
+            }),
             // Date range picker
             h(DateRangeFilterItem, {
                 startPlaceholder: DATE_RANGE_START_PLACEHOLDER,
@@ -111,6 +110,7 @@ const _default = defineComponent({
             }),
             // Average by date
             h(SwitchFilterItem, {
+                historyName: 'average',
                 label: AVERAGE_LABEL,
                 defaultValue: averageByDate.value,
                 onChange: (newVal: boolean) => {
diff --git a/src/app/components/limit/filter.ts b/src/app/components/limit/filter.ts
@@ -44,6 +44,7 @@ const _default = defineComponent({
                 },
             }),
             h(SwitchFilterItem, {
+                historyName: 'onlyEnabled',
                 label: onlyEnabledLabel,
                 defaultValue: onlyEnabled.value,
                 onChange(newVal: boolean) {
diff --git a/src/app/components/report/filter/index.ts b/src/app/components/report/filter/index.ts
@@ -100,6 +100,7 @@ const _default = defineComponent({
                 }
             }),
             h(SelectFilterItem, {
+                historyName: 'timeFormat',
                 defaultValue: timeFormat.value,
                 options: timeFormatLabels,
                 onSelect(newVal: timer.app.TimeFormat) {
@@ -108,6 +109,7 @@ const _default = defineComponent({
                 }
             }),
             h(SwitchFilterItem, {
+                historyName: 'mergeDate',
                 label: mergeDateLabel,
                 defaultValue: mergeDate.value,
                 onChange(newVal: boolean) {
@@ -116,6 +118,7 @@ const _default = defineComponent({
                 }
             }),
             h(SwitchFilterItem, {
+                historyName: 'mergeHost',
                 label: mergeHostLabel,
                 defaultValue: mergeHost.value,
                 onChange(newVal: boolean) {
diff --git a/src/app/components/trend/components/filter.ts b/src/app/components/trend/components/filter.ts
@@ -131,6 +131,7 @@ const _default = defineComponent({
             disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
         }),
         h(SelectFilterItem, {
+            historyName: 'timeFormat',
             defaultValue: timeFormat.value,
             options: TIME_FORMAT_LABELS,
             onSelect(newVal: timer.app.TimeFormat) {
