@sigmaott/base-next 1.0.6

package/src/components/AdvancedFilter/SSAdvancedFilterItemSchedule.vue

@@ -0,0 +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>

package/src/components/AdvancedFilter/SSAdvancedFilterMain.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+import { createDefaultFilter } from './types'
+
+const props = defineProps<{
+  disabled?: boolean
+  startDate?: string
+  endDate?: string
+}>()
+
+const $emit = defineEmits<{
+  submit: []
+}>()
+
+provide('startDate', props.startDate)
+provide('endDate', props.endDate)
+
+const modelAnd = defineModel<Array<AdvancedFilterItem>>('and', {
+  default: () => [],
+})
+const modelOr = defineModel<Array<AdvancedFilterItem>>('or', {
+  default: () => [],
+})
+
+const filtersAnd = ref<Array<AdvancedFilterItem>>([])
+const filtersOr = ref<Array<AdvancedFilterItem>>([])
+
+onMounted(() => {
+  filtersAnd.value = klona(modelAnd.value.map(item => ({
+    ...item,
+    valid: true,
+  })))
+  filtersOr.value = klona(modelOr.value.map(item => ({
+    ...item,
+    valid: true,
+  })))
+})
+
+watch(modelAnd, () => {
+  filtersAnd.value = klona(modelAnd.value)
+})
+
+watch(modelOr, () => {
+  filtersOr.value = klona(modelOr.value)
+})
+
+const { t: $t } = useI18n()
+const MAX_FILTERS = 10
+
+function addFilter(type: 'and' | 'or') {
+  const newFilter = createDefaultFilter()
+  if (type === 'and') {
+    filtersAnd.value.push(newFilter)
+  }
+  else {
+    filtersOr.value.push(newFilter)
+  }
+}
+
+function removeFilter(type: 'and' | 'or', id: string) {
+  if (type === 'and') {
+    filtersAnd.value = filtersAnd.value.filter(filter => filter.id !== id)
+  }
+  else {
+    filtersOr.value = filtersOr.value.filter(filter => filter.id !== id)
+  }
+}
+
+const isValid = ref(true)
+
+const refsAnd = useTemplateRefsList()
+const refsOr = useTemplateRefsList()
+function validFilterAndSubmit() {
+  const validationsAnd = refsAnd.value.map(item => item.validateFilter())
+  const validationsOr = refsOr.value.map(item => item.validateFilter())
+
+  if (validationsAnd.every(item => item) && validationsOr.every(item => item)) {
+    modelAnd.value = klona(filtersAnd.value.map(item => applyNullForEmptyString(item)))
+    modelOr.value = klona(filtersOr.value.map(item => applyNullForEmptyString(item)))
+    $emit('submit')
+    isValid.value = true
+  }
+}
+
+function duplicateFilter(type: 'and' | 'or', filter: AdvancedFilterItem) {
+  const newFilter = createDefaultFilter()
+  const targetArray = type === 'and' ? filtersAnd : filtersOr
+  const index = targetArray.value.findIndex(f => f.id === filter.id)
+
+  if (index !== -1) {
+    targetArray.value.splice(index + 1, 0, newFilter)
+  }
+  else {
+    targetArray.value.push(newFilter)
+  }
+}
+</script>
+
+<template>
+  <div class="relative rounded-md pl-2 space-y-4">
+    <!-- AND filters -->
+    <div
+      class="relative border rounded-md px-2 py-2"
+      :class="[
+        disabled ? 'bg-disabled-bg cursor-not-allowed pointer-events-none min-h-8' : 'bg-secondary',
+      ]"
+    >
+      <el-tag class="absolute left-0 top-0 -translate-x-2 -translate-y-2">
+        AND
+      </el-tag>
+
+      <div class="flex justify-end">
+        <el-button
+          v-if="filtersAnd.length < MAX_FILTERS && !disabled"
+          variant="text"
+          plain
+          type="primary"
+          @click="() => addFilter('and')"
+        >
+          <template #icon>
+            <div class="i-lucide:plus" />
+          </template>
+          <span>
+            {{ $t('VastControl.add_condition') }}
+          </span>
+        </el-button>
+      </div>
+
+      <div class="mt-1">
+        <SSAdvancedFilterItem
+          v-for="(filter, index) in filtersAnd"
+          :key="filter.id"
+          :ref="refsAnd.set"
+          v-model="filtersAnd[index]"
+          :disabled="disabled"
+          @remove="() => removeFilter('and', filter.id)"
+          @duplicate="() => duplicateFilter('and', filter)"
+        />
+      </div>
+    </div>
+
+    <!-- OR filters -->
+    <div
+      class="relative border rounded-md px-2 py-2"
+      :class="[
+        disabled ? 'bg-disabled-bg cursor-not-allowed pointer-events-none min-h-8' : 'bg-secondary',
+      ]"
+    >
+      <el-tag type="success" class="absolute left-0 top-0 -translate-x-2 -translate-y-2">
+        OR
+      </el-tag>
+      <div class="flex justify-end">
+        <el-button
+          v-if="filtersOr.length < MAX_FILTERS && !disabled"
+          variant="text"
+          plain
+          type="primary"
+          :disabled="disabled"
+          @click="() => addFilter('or')"
+        >
+          <template #icon>
+            <div class="i-lucide:plus" />
+          </template>
+          <span>
+            {{ $t('VastControl.add_condition') }}
+          </span>
+        </el-button>
+      </div>
+
+      <div class="mt-1">
+        <SSAdvancedFilterItem
+          v-for="(filter, index) in filtersOr"
+          :key="filter.id"
+          :ref="refsOr.set"
+          v-model="filtersOr[index]"
+          :disabled="disabled"
+          @remove="() => removeFilter('or', filter.id)"
+          @duplicate="() => duplicateFilter('or', filter)"
+        />
+      </div>
+    </div>
+    <div v-if="!disabled" class="flex justify-end">
+      <el-button
+        :disabled="!isValid"
+        type="primary"
+        plain
+        @click="validFilterAndSubmit()"
+      >
+        <template #icon>
+          <div class="i-lucide:check" />
+        </template>
+        {{ $t('VastControl.apply') }}
+      </el-button>
+    </div>
+  </div>
+</template>

package/src/components/AdvancedFilter/types.ts

@@ -0,0 +1,37 @@
+import { nanoid } from 'nanoid'
+
+export interface AdvancedFilterItem {
+  id: string
+  key: string
+  value: string
+  valueArray?: string[]
+  policyType: 'DEFINED_PARAMETER' | 'CUSTOM' | 'SCHEDULE' | ''
+  isNot: boolean
+  operator: string
+  valid: boolean
+  dataType?: 'string' | 'number' | 'boolean' | 'enum'
+  timeType?: 'daily' | 'weekly' | 'customize'
+  timeRange?: [string, string]
+  timeRangeCustomize?: [string, string]
+  weekdays?: string[]
+  timezone?: string
+}
+
+export function createDefaultFilter(options: Partial<AdvancedFilterItem> = {}) {
+  return defu(options, {
+    id: nanoid(),
+    policyType: null,
+    not: false,
+    key: null,
+    operator: null,
+    value: null,
+    valueArray: null,
+    answer: null,
+    valid: true,
+    timeType: null,
+    timeRange: null,
+    timeRangeCustomize: null,
+    weekdays: [],
+    timezone: null,
+  })
+}

package/src/components/AdvancedFilterReport/SSAdvancedFilterReportItem.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  remove: []
+  duplicate: [any]
+}>()
+
+const filter = defineModel<AdvancedFilterItem>({
+  required: true,
+})
+
+function removeFilter() {
+  emit('remove')
+}
+
+const memberOptions = [
+  {
+    value: 'vast_tag',
+    label: 'Vast tag',
+  },
+  {
+    value: 'agency',
+    label: 'Agency',
+  },
+  {
+    value: 'country',
+    label: 'Country',
+  },
+  {
+    value: 'platform',
+    label: 'Platform',
+  },
+]
+
+function setValueAndReturn(value: boolean) {
+  filter.value.valid = value
+  return filter.value.valid
+}
+const filterRef = ref()
+
+function validateFilter() {
+  if (!filter.value.member) {
+    filterRef.value?.validateFilter()
+    return setValueAndReturn(false)
+  }
+  else if (!filter.value.values?.length) {
+    return setValueAndReturn(false)
+  }
+  return setValueAndReturn(true)
+}
+
+watch(() => filter.value.member, () => {
+  filter.value.values = []
+})
+
+defineExpose({
+  validateFilter,
+})
+</script>
+
+<template>
+  <DevOnly>
+    <details open>
+      <summary>filter</summary>
+      <pre>{{ JSON.stringify(filter, null, 2) }}</pre>
+    </details>
+  </DevOnly>
+  <div
+    class="flex items-center gap-2 border rounded px-2 py-2"
+    :class="[
+      !filter.valid ? 'border-danger' : '',
+    ]"
+  >
+    <div class="grid grid-cols-[1fr_1fr_2fr] flex-1 gap-2">
+      <div class="flex flex-col gap-1">
+        <div class="text-sm">
+          Field
+        </div>
+        <el-select-v2
+          v-model="filter.member"
+          :options="memberOptions"
+          filterable
+          placeholder="Select field"
+        />
+      </div>
+
+      <SSAdvancedFilterReportItemDefined
+        v-if="filter.member"
+        ref="filterRef"
+        v-model="filter"
+      />
+    </div>
+
+    <div v-if="!disabled" class="h-full flex flex-shrink-0 flex-col gap-1">
+      <div class="h-3.5" />
+      <el-button
+        size="small"
+        circle
+        @click="removeFilter"
+      >
+        <div class="i-lucide:x" />
+      </el-button>
+    </div>
+  </div>
+</template>