@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/AdvancedFilter/SSAdvancedFilterItemSchedule.vue

@@ -1,293 +1,293 @@
-<script lang="ts" setup>
-import { getTimeZones } from '@vvo/tzdb'
-import type { AdvancedFilterItem } from './types'
-
-const filter = defineModel<AdvancedFilterItem>({
-  required: true,
-})
-
-const errorKey = ref('')
-
-const startDate = inject('startDate')
-const endDate = inject('endDate')
-
-watch(() => filter.value.key, (value) => {
-  nameValidator('key')(null, value, (error: string | undefined) => {
-    errorKey.value = error || ''
-    filter.value.valid = !error
-  })
-})
-
-const timeTypeOptions = [
-  { label: 'Daily', value: 'daily' },
-  { label: 'Weekly', value: 'weekly' },
-  { label: 'Customize', value: 'customize' },
-]
-
-watch(() => filter.value.dataType, () => {
-  filter.value.operator = ''
-  filter.value.value = ''
-})
-
-function makeRange(start: number, end: number) {
-  const result: number[] = []
-  for (let i = start; i <= end; i++)
-    result.push(i)
-
-  return result
-}
-
-function disabledHours(role: string) {
-  if (role === 'start') {
-    return []
-  }
-  if (!filter.value.timeRange) {
-    return []
-  }
-  const [startHour] = filter.value.timeRange[0].split(':')
-  return makeRange(0, Number(startHour) - 1)
-}
-
-function disabledMinutes(hour: number, role: string) {
-  if (!filter.value.timeRange) {
-    return []
-  }
-  const [startHour, startMinute] = filter.value.timeRange[0].split(':')
-
-  if (role === 'start') {
-    if (Number(startHour) === 23) {
-      return [59]
-    }
-    return []
-  }
-  if (hour === Number(startHour)) {
-    return makeRange(0, Number(startMinute))
-  }
-  return []
-}
-
-function disabledSeconds(hour: number, minute: number, role: string) {
-  if (!filter.value.timeRange) {
-    return []
-  }
-  const [startHour, startMinute, startSecond] = filter.value.timeRange[0].split(':')
-  if (role === 'start') {
-    if (Number(startHour) === 23 && Number(startMinute) === 58) {
-      return [59]
-    }
-    return []
-  }
-  if (hour === Number(startHour) && minute === Number(startMinute) + 1) {
-    return makeRange(0, Number(startSecond))
-  }
-  return []
-}
-
-const tzOptions = computed(() => getTimeZones().map((item) => {
-  const formatMinutes = Math.floor(item.currentTimeOffsetInMinutes / 60)
-  const formatSeconds = item.currentTimeOffsetInMinutes % 60
-  return {
-    label: `${item.name} (${formatMinutes >= 0 ? '+' : ''}${formatMinutes}:${formatSeconds.toString().padStart(2, '0')})`,
-    value: item.name,
-  }
-}))
-
-// disabledCustom
-
-// add this condition startDate (inject) <= time:date<= stopDate(inject)
-// stopDate inject could be undefined
-
-const calendarTime = ref<Date | null>(null)
-function onCalendarChange(time: Date) {
-  calendarTime.value = time
-}
-
-function disabledDateCustom(time: Date) {
-  const isBeforeNowDay = dayjs(time).isBefore(dayjs().startOf('day'))
-  const isBeforeStartDate = dayjs(time).isBefore(dayjs(startDate).startOf('day'))
-  const isAfterEndDate = endDate ? dayjs(time).isAfter(dayjs(endDate).startOf('day')) : false
-  return isBeforeNowDay || isBeforeStartDate || isAfterEndDate
-}
-
-function disabledHoursCustom(role: string): number[] {
-  const currentTime = dayjs()
-
-  if (!calendarTime.value?.[0]) {
-    return []
-  }
-
-  const startDate = dayjs(calendarTime.value?.[0])
-  const endDate = dayjs(calendarTime.value?.[1])
-
-  if (role === 'start') {
-    if (startDate.isSame(currentTime, 'day')) {
-      return makeRange(0, currentTime.hour() - 1)
-    }
-  }
-
-  return []
-}
-
-function disabledMinutesCustom(hour: number, role: string): number[] {
-  const currentTime = dayjs()
-
-  if (!calendarTime.value?.[0]) {
-    return []
-  }
-
-  const startDate = dayjs(calendarTime.value?.[0])
-  const endDate = dayjs(calendarTime.value?.[1])
-
-  if (!startDate.isSame(endDate, 'day')) {
-    return []
-  }
-
-  if (startDate.isSame(currentTime, 'day') && hour === currentTime.hour()) {
-    return makeRange(0, currentTime.minute() - 1)
-  }
-
-  return []
-}
-
-function disabledSecondsCustom(hour: number, minute: number, role: string): number[] {
-  if (!filter.value.timeRangeCustomize?.[0]) {
-    return []
-  }
-  const startDate = dayjs(filter.value.timeRangeCustomize[0])
-  const endDate = dayjs(filter.value.timeRangeCustomize[1])
-
-  if (!startDate.isSame(endDate, 'day')) {
-    return []
-  }
-
-  const [startHour, startMinute, startSecond] = startDate.format('HH:mm:ss').split(':')
-  if (role === 'start') {
-    if (Number(startHour) === 23 && Number(startMinute) === 58) {
-      return [59]
-    }
-    return []
-  }
-
-  if (hour === Number(startHour) && minute === Number(startMinute) + 1) {
-    return makeRange(0, Number(startSecond))
-  }
-
-  return []
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-1">
-    <div class="text-sm">
-      Time Type
-    </div>
-    <el-select v-model="filter.timeType" class="max-w-200px!">
-      <el-option
-        v-for="item in timeTypeOptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-  </div>
-
-  <div v-if="filter.timeType === 'daily'" class="flex flex-col gap-1">
-    <div class="text-sm">
-      Time range
-    </div>
-
-    <el-time-picker
-      v-model="filter.timeRange"
-      is-range
-      range-separator="To"
-      start-placeholder="Start time"
-      end-placeholder="End time"
-      value-format="HH:mm:ss"
-      :disabled-hours="disabledHours"
-      :disabled-minutes="disabledMinutes"
-      :disabled-seconds="disabledSeconds"
-      :clearable="false"
-      @keydown.backspace.prevent
-    />
-  </div>
-
-  <template
-    v-if="filter.timeType === 'weekly'"
-  >
-    <div class="flex flex-col gap-1">
-      <div class="text-sm">
-        Days of week
-      </div>
-      <el-checkbox-group v-model="filter.weekdays" size="small">
-        <el-checkbox-button label="Mo" value="monday" />
-        <el-checkbox-button label="Tu" value="tuesday" />
-        <el-checkbox-button label="We" value="wednesday" />
-        <el-checkbox-button label="Th" value="thursday" />
-        <el-checkbox-button label="Fr" value="friday" />
-        <el-checkbox-button label="Sa" value="saturday" />
-        <el-checkbox-button label="Su" value="sunday" />
-      </el-checkbox-group>
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <div class="text-sm">
-        Time range
-      </div>
-      <el-time-picker
-        v-model="filter.timeRange"
-        is-range
-        range-separator="To"
-        start-placeholder="Start time"
-        end-placeholder="End time"
-        value-format="HH:mm:ss"
-        :disabled-hours="disabledHours"
-        :disabled-minutes="disabledMinutes"
-        :disabled-seconds="disabledSeconds"
-        :clearable="false"
-        @keydown.backspace.prevent
-      />
-    </div>
-  </template>
-  <div v-if="filter.timeType === 'customize'" class="flex flex-col gap-1">
-    <DevOnly>
-      <details open>
-        <summary>filter.timeRangeCustomize</summary>
-        <pre>{{ JSON.stringify(filter.timeRangeCustomize, null, 2) }}</pre>
-      </details>
-    </DevOnly>
-    <div class="text-sm">
-      Customize
-    </div>
-    <el-date-picker
-      v-model="filter.timeRangeCustomize"
-      type="datetimerange"
-      range-separator="To"
-      start-placeholder="Start date"
-      end-placeholder="End date"
-      value-format="YYYY-MM-DD HH:mm:ss"
-      :disabled-date="disabledDateCustom"
-      :disabled-hours="disabledHoursCustom"
-      :disabled-minutes="disabledMinutesCustom"
-      :disabled-seconds="disabledSecondsCustom"
-      @calendar-change="onCalendarChange"
-    />
-  </div>
-  <div class="flex flex-col gap-1">
-    <div class="text-sm">
-      Timezone
-    </div>
-    <el-select
-      v-model="filter.timezone"
-      filterable
-      clearable
-      class="w-full"
-    >
-      <el-option
-        v-for="item in tzOptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-  </div>
-</template>
+<script lang="ts" setup>
+import { getTimeZones } from '@vvo/tzdb'
+import type { AdvancedFilterItem } from './types'
+
+const filter = defineModel<AdvancedFilterItem>({
+  required: true,
+})
+
+const errorKey = ref('')
+
+const startDate = inject('startDate')
+const endDate = inject('endDate')
+
+watch(() => filter.value.key, (value) => {
+  nameValidator('key')(null, value, (error: string | undefined) => {
+    errorKey.value = error || ''
+    filter.value.valid = !error
+  })
+})
+
+const timeTypeOptions = [
+  { label: 'Daily', value: 'daily' },
+  { label: 'Weekly', value: 'weekly' },
+  { label: 'Customize', value: 'customize' },
+]
+
+watch(() => filter.value.dataType, () => {
+  filter.value.operator = ''
+  filter.value.value = ''
+})
+
+function makeRange(start: number, end: number) {
+  const result: number[] = []
+  for (let i = start; i <= end; i++)
+    result.push(i)
+
+  return result
+}
+
+function disabledHours(role: string) {
+  if (role === 'start') {
+    return []
+  }
+  if (!filter.value.timeRange) {
+    return []
+  }
+  const [startHour] = filter.value.timeRange[0].split(':')
+  return makeRange(0, Number(startHour) - 1)
+}
+
+function disabledMinutes(hour: number, role: string) {
+  if (!filter.value.timeRange) {
+    return []
+  }
+  const [startHour, startMinute] = filter.value.timeRange[0].split(':')
+
+  if (role === 'start') {
+    if (Number(startHour) === 23) {
+      return [59]
+    }
+    return []
+  }
+  if (hour === Number(startHour)) {
+    return makeRange(0, Number(startMinute))
+  }
+  return []
+}
+
+function disabledSeconds(hour: number, minute: number, role: string) {
+  if (!filter.value.timeRange) {
+    return []
+  }
+  const [startHour, startMinute, startSecond] = filter.value.timeRange[0].split(':')
+  if (role === 'start') {
+    if (Number(startHour) === 23 && Number(startMinute) === 58) {
+      return [59]
+    }
+    return []
+  }
+  if (hour === Number(startHour) && minute === Number(startMinute) + 1) {
+    return makeRange(0, Number(startSecond))
+  }
+  return []
+}
+
+const tzOptions = computed(() => getTimeZones().map((item) => {
+  const formatMinutes = Math.floor(item.currentTimeOffsetInMinutes / 60)
+  const formatSeconds = item.currentTimeOffsetInMinutes % 60
+  return {
+    label: `${item.name} (${formatMinutes >= 0 ? '+' : ''}${formatMinutes}:${formatSeconds.toString().padStart(2, '0')})`,
+    value: item.name,
+  }
+}))
+
+// disabledCustom
+
+// add this condition startDate (inject) <= time:date<= stopDate(inject)
+// stopDate inject could be undefined
+
+const calendarTime = ref<Date | null>(null)
+function onCalendarChange(time: Date) {
+  calendarTime.value = time
+}
+
+function disabledDateCustom(time: Date) {
+  const isBeforeNowDay = dayjs(time).isBefore(dayjs().startOf('day'))
+  const isBeforeStartDate = dayjs(time).isBefore(dayjs(startDate).startOf('day'))
+  const isAfterEndDate = endDate ? dayjs(time).isAfter(dayjs(endDate).startOf('day')) : false
+  return isBeforeNowDay || isBeforeStartDate || isAfterEndDate
+}
+
+function disabledHoursCustom(role: string): number[] {
+  const currentTime = dayjs()
+
+  if (!calendarTime.value?.[0]) {
+    return []
+  }
+
+  const startDate = dayjs(calendarTime.value?.[0])
+  const endDate = dayjs(calendarTime.value?.[1])
+
+  if (role === 'start') {
+    if (startDate.isSame(currentTime, 'day')) {
+      return makeRange(0, currentTime.hour() - 1)
+    }
+  }
+
+  return []
+}
+
+function disabledMinutesCustom(hour: number, role: string): number[] {
+  const currentTime = dayjs()
+
+  if (!calendarTime.value?.[0]) {
+    return []
+  }
+
+  const startDate = dayjs(calendarTime.value?.[0])
+  const endDate = dayjs(calendarTime.value?.[1])
+
+  if (!startDate.isSame(endDate, 'day')) {
+    return []
+  }
+
+  if (startDate.isSame(currentTime, 'day') && hour === currentTime.hour()) {
+    return makeRange(0, currentTime.minute() - 1)
+  }
+
+  return []
+}
+
+function disabledSecondsCustom(hour: number, minute: number, role: string): number[] {
+  if (!filter.value.timeRangeCustomize?.[0]) {
+    return []
+  }
+  const startDate = dayjs(filter.value.timeRangeCustomize[0])
+  const endDate = dayjs(filter.value.timeRangeCustomize[1])
+
+  if (!startDate.isSame(endDate, 'day')) {
+    return []
+  }
+
+  const [startHour, startMinute, startSecond] = startDate.format('HH:mm:ss').split(':')
+  if (role === 'start') {
+    if (Number(startHour) === 23 && Number(startMinute) === 58) {
+      return [59]
+    }
+    return []
+  }
+
+  if (hour === Number(startHour) && minute === Number(startMinute) + 1) {
+    return makeRange(0, Number(startSecond))
+  }
+
+  return []
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm">
+      Time Type
+    </div>
+    <el-select v-model="filter.timeType" class="max-w-200px!">
+      <el-option
+        v-for="item in timeTypeOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+
+  <div v-if="filter.timeType === 'daily'" class="flex flex-col gap-1">
+    <div class="text-sm">
+      Time range
+    </div>
+
+    <el-time-picker
+      v-model="filter.timeRange"
+      is-range
+      range-separator="To"
+      start-placeholder="Start time"
+      end-placeholder="End time"
+      value-format="HH:mm:ss"
+      :disabled-hours="disabledHours"
+      :disabled-minutes="disabledMinutes"
+      :disabled-seconds="disabledSeconds"
+      :clearable="false"
+      @keydown.backspace.prevent
+    />
+  </div>
+
+  <template
+    v-if="filter.timeType === 'weekly'"
+  >
+    <div class="flex flex-col gap-1">
+      <div class="text-sm">
+        Days of week
+      </div>
+      <el-checkbox-group v-model="filter.weekdays" size="small">
+        <el-checkbox-button label="Mo" value="monday" />
+        <el-checkbox-button label="Tu" value="tuesday" />
+        <el-checkbox-button label="We" value="wednesday" />
+        <el-checkbox-button label="Th" value="thursday" />
+        <el-checkbox-button label="Fr" value="friday" />
+        <el-checkbox-button label="Sa" value="saturday" />
+        <el-checkbox-button label="Su" value="sunday" />
+      </el-checkbox-group>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <div class="text-sm">
+        Time range
+      </div>
+      <el-time-picker
+        v-model="filter.timeRange"
+        is-range
+        range-separator="To"
+        start-placeholder="Start time"
+        end-placeholder="End time"
+        value-format="HH:mm:ss"
+        :disabled-hours="disabledHours"
+        :disabled-minutes="disabledMinutes"
+        :disabled-seconds="disabledSeconds"
+        :clearable="false"
+        @keydown.backspace.prevent
+      />
+    </div>
+  </template>
+  <div v-if="filter.timeType === 'customize'" class="flex flex-col gap-1">
+    <DevOnly>
+      <details open>
+        <summary>filter.timeRangeCustomize</summary>
+        <pre>{{ JSON.stringify(filter.timeRangeCustomize, null, 2) }}</pre>
+      </details>
+    </DevOnly>
+    <div class="text-sm">
+      Customize
+    </div>
+    <el-date-picker
+      v-model="filter.timeRangeCustomize"
+      type="datetimerange"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      :disabled-date="disabledDateCustom"
+      :disabled-hours="disabledHoursCustom"
+      :disabled-minutes="disabledMinutesCustom"
+      :disabled-seconds="disabledSecondsCustom"
+      @calendar-change="onCalendarChange"
+    />
+  </div>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm">
+      Timezone
+    </div>
+    <el-select
+      v-model="filter.timezone"
+      filterable
+      clearable
+      class="w-full"
+    >
+      <el-option
+        v-for="item in tzOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>