Optmize for codebeat

Author: sheepzh

README.md

@@ -1,6 +1,7 @@
 # 网费很贵
 
 [![codecov](https://codecov.io/gh/sheepzh/timer/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/timer)
+[![codebeat badge](https://codebeat.co/badges/69a88b51-2a07-4944-98dc-603a99d8a9f9)](https://codebeat.co/projects/github-com-sheepzh-timer-main)
 [![](https://www.travis-ci.com/sheepzh/timer.svg?branch=main)](https://www.travis-ci.com/sheepzh/timer.svg?branch=main)
 [![](https://img.shields.io/badge/license-Anti%20996-blue)](https://github.com/996icu/996.ICU)
 [![](https://img.shields.io/github/v/release/sheepzh/timer)](https://github.com/sheepzh/timer/releases)

src/app/components/clear/filter.ts

@@ -0,0 +1 @@
+export const stepNoClz = 'step-no'

src/app/components/clear/filter/consts.ts

@@ -0,0 +1,54 @@
+import { ElDatePicker } from "element-plus"
+import { Ref, h } from "vue"
+import { formatTime, MILL_PER_DAY } from "../../../../util/time"
+import { t, tN } from "../../../locale"
+import { stepNoClz } from "./consts"
+
+export type DateFilterProps = {
+    dateRangeRef: Ref<Date[]>
+}
+
+const yesterday = new Date().getTime() - MILL_PER_DAY
+const yesterdayMsg = formatTime(yesterday, '{y}/{m}/{d}')
+const daysBefore = (days: number) => new Date().getTime() - days * MILL_PER_DAY
+
+const birthdayOfBrowser = new Date()
+birthdayOfBrowser.setFullYear(1994)
+birthdayOfBrowser.setMonth(12 - 1)
+birthdayOfBrowser.setDate(15)
+
+const datePickerShortcut = (msg: string, days: number) => {
+    const text = t(messages => messages.clear.dateShortcut[msg])
+    const value = [birthdayOfBrowser, daysBefore(days)]
+    return { text, value }
+}
+
+const pickerShortcuts = [
+    datePickerShortcut('tillYesturday', 1),
+    datePickerShortcut('till7DaysAgo', 7),
+    datePickerShortcut('till30DaysAgo', 30)
+]
+
+const basePickerProps = {
+    size: 'mini',
+    style: 'width:250px;',
+    startPlaceholder: '1994/12/15',
+    endPlaceholder: yesterdayMsg,
+    type: 'daterange',
+    disabledDate(date: Date) { return date.getTime() > yesterday },
+    shortcuts: pickerShortcuts,
+    rangeSeparator: '-'
+}
+
+const picker = ({ dateRangeRef }: DateFilterProps) => h(ElDatePicker, {
+    modelValue: dateRangeRef.value,
+    "onUpdate:modelValue": (date: Array<Date>) => dateRangeRef.value = date,
+    ...basePickerProps
+})
+
+const dateFilter = (props: DateFilterProps) => h('p', [
+    h('a', { class: stepNoClz }, '1.'),
+    tN(msg => msg.clear.filterDate, { picker: picker(props) })
+])
+
+export default dateFilter

src/app/components/clear/filter/date-filter.ts

@@ -0,0 +1,84 @@
+import { defineComponent, h, ref, Ref, SetupContext } from "vue"
+import TimerDatabase from "../../../../database/timer-database"
+import timerService from "../../../../service/timer-service"
+import { t } from "../../../locale"
+import '../style/filter'
+import dateFilter from "./date-filter"
+import numberFilter from "./number-filter"
+import operationButton, { BaseFilterProps } from "./operation-button"
+
+const timerDatabase = new TimerDatabase(chrome.storage.local)
+
+const dateRangeRef: Ref<Array<Date>> = ref([])
+const focusStartRef: Ref<string> = ref('0')
+const focusEndRef: Ref<string> = ref('2')
+const totalStartRef: Ref<string> = ref('0')
+const totalEndRef: Ref<string> = ref('')
+const timeStartRef: Ref<string> = ref('0')
+const timeEndRef: Ref<string> = ref('')
+
+const title = h('h3', t(msg => msg.clear.filterItems))
+
+const filterRefs: BaseFilterProps = {
+    dateRangeRef,
+    focusStartRef, focusEndRef,
+    totalStartRef, totalEndRef,
+    timeStartRef, timeEndRef,
+}
+
+const archiveButton = (onDateChanged: () => void) => operationButton({
+    ...filterRefs,
+    onDateChanged,
+
+    confirm: {
+        message: 'archiveConfirm',
+        operation: result => timerService.archive(result),
+        resultMessage: 'archiveSuccess'
+    },
+
+    button: {
+        message: 'archive',
+        icon: 'document-add',
+        type: 'primary'
+    },
+
+    tooltipMessage: 'archiveAlert'
+})
+
+const deleteButton = (onDateChanged: () => void) => operationButton({
+    ...filterRefs,
+    onDateChanged,
+
+    confirm: {
+        message: 'deleteConfirm',
+        operation: result => timerDatabase.delete(result),
+        resultMessage: 'deleteSuccess'
+    },
+
+    button: {
+        message: 'delete',
+        icon: 'delete',
+        type: 'danger'
+    }
+})
+
+const _default = defineComponent((_props, ctx: SetupContext) => {
+    const onDateChanged = ctx.attrs.onDateChanged as () => void
+
+    const buttons = () => [archiveButton(onDateChanged), deleteButton(onDateChanged)]
+
+    const footer = () => h('div', { class: 'filter-container', style: 'padding-top: 40px;' }, buttons())
+
+    return () => h('div', { style: 'text-align:left; padding-left:30px; padding-top:20px;' },
+        [
+            title,
+            dateFilter({ dateRangeRef }),
+            numberFilter('filterFocus', focusStartRef, focusEndRef, 2),
+            numberFilter('filterTotal', totalStartRef, totalEndRef, 3),
+            numberFilter('filterTime', timeStartRef, timeEndRef, 4),
+            footer()
+        ]
+    )
+})
+
+export default _default

src/app/components/clear/filter/index.ts

@@ -0,0 +1,27 @@
+import { ElInput } from "element-plus"
+import { Ref, h } from "vue"
+import { I18nKey, t, tN } from "../../../locale"
+import { ClearMessage } from "../../../locale/components/clear"
+import { stepNoClz } from "./consts"
+
+const elInput = (valRef: Ref<string>, placeholder: string, min?: Ref<string>) =>
+    h(ElInput, {
+        class: 'filter-input',
+        placeholder: placeholder,
+        min: min !== undefined ? min.value || '0' : undefined,
+        clearable: true,
+        size: 'mini',
+        modelValue: valRef.value,
+        onInput: (val: string) => valRef.value = val.trim(),
+        onClear: () => valRef.value = ''
+    })
+
+const numberFilter = (translateKey: keyof ClearMessage, startRef: Ref<string>, endRef: Ref<string>, lineNo: number) => h('p', [
+    h('a', { class: stepNoClz }, `${lineNo}.`),
+    tN(msg => msg.clear[translateKey], {
+        start: elInput(startRef, '0'),
+        end: elInput(endRef, t(msg => msg.clear.unlimited), startRef)
+    })
+])
+
+export default numberFilter