@sigmaott/base-next 1.0.6

package/src/components/AdvancedFilterReport/SSAdvancedFilterReportItemDefined.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+
+const filter = defineModel<AdvancedFilterItem>({
+  required: true,
+})
+
+const { t: $t } = useI18n()
+
+const errorValue = ref('')
+
+const campainId = inject('campainId') as Ref<string>
+
+const { data: dataCampaign, isInitialLoading } = useQuery({
+  queryKey: [campainId],
+  queryFn: () => $vastControlApi('/api/app/vast-control/campaigns/{id}', {
+    method: 'GET',
+    pathParams: {
+      id: campainId.value,
+    },
+  }),
+  enabled: computed(() => !!campainId.value && (filter.value.member === 'vast_tag' || filter.value.member === 'agency')),
+  refetchOnWindowFocus: false,
+  retry: 0,
+  cacheTime: 0,
+})
+
+const operatorOptions = computed(() => {
+  return [
+    { label: 'In', value: 'equals' },
+    { label: 'Not In', value: 'notEquals' },
+  ]
+})
+
+const vastTagValues = computed(() => {
+  return (dataCampaign.value?.vastTags || [])?.map((item: any) => {
+    return {
+      label: item.name,
+      value: item.name,
+    }
+  })
+})
+
+const agencyValues = computed(() => {
+  const vastTag = dataCampaign.value?.vastTags || []
+  console.log('[LOG] ~ vastTag:', vastTag)
+  const val = Array.from(new Set(vastTag.map((item: any) => item.agency).filter(Boolean)))
+  return val.map((item) => {
+    return {
+      label: item,
+      value: item,
+    }
+  })
+})
+const { data } = useQuery({
+  queryKey: ['/api/app/vast-control/defined-parameters'],
+  queryFn: () => $vastControlApi('/api/app/vast-control/defined-parameters', {
+    query: {
+      page: 1,
+      perPage: 1000,
+    },
+  }),
+  keepPreviousData: true,
+})
+
+const countryValues = computed(() => {
+  return data.value?.data.find((item: any) => item.key === 'session.country')?.enumValues.map((item: any) => {
+    return {
+      label: item.title,
+      value: item.value,
+    }
+  })
+})
+
+const platformValues = computed(() => {
+  return data.value?.data.find((item: any) => item.key === 'session.platform')?.enumValues.map((item: any) => {
+    return {
+      label: item.title,
+      value: item.value,
+    }
+  })
+})
+
+const enumValues = computed(() => {
+  if (filter.value.member === 'vast_tag') {
+    return vastTagValues.value
+  }
+  else if (filter.value.member === 'country') {
+    return countryValues.value
+  }
+  else if (filter.value.member === 'platform') {
+    return platformValues.value
+  }
+  else if (filter.value.member === 'agency') {
+    return agencyValues.value
+  }
+  return []
+})
+
+function validateValue(value: string[]) {
+  if (!value.length) {
+    errorValue.value = $t('VastControl.please_input_value')
+    filter.value.valid = false
+  }
+  else {
+    errorValue.value = ''
+    filter.value.valid = true
+  }
+}
+
+watch(() => filter.value.values, (value) => {
+  validateValue(value)
+})
+
+function validateFilter() {
+  if (filter.value.operator) {
+    validateValue(filter.value.values)
+  }
+}
+
+defineExpose({
+  validateFilter,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm">
+      Operator
+    </div>
+
+    <el-select v-model="filter.operator">
+      <el-option
+        v-for="item in operatorOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+
+  <div class="max-w-400px flex flex-col gap-1">
+    <div class="text-sm">
+      Values
+    </div>
+    <el-form-item :error="errorValue">
+      <el-select-v2
+        v-model="filter.values"
+        :options="enumValues"
+        filterable
+        multiple
+        placeholder="Select values"
+        :max-collapse-tags="5"
+        collapse-tags
+        collapse-tags-tooltip
+      />
+    </el-form-item>
+  </div>
+</template>

package/src/components/AdvancedFilterReport/SSAdvancedFilterReportMain.vue

@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+import { createDefaultFilter } from './types'
+
+const props = defineProps<{
+  disabled?: boolean
+  campainId?: string
+}>()
+
+const $emit = defineEmits<{
+  submit: []
+}>()
+
+provide('campainId', toRef(props, 'campainId'))
+
+const modelFilters = defineModel<
+  Array<AdvancedFilterItem | { or: AdvancedFilterItem[] }>
+>('filters', {
+  default: () => [],
+})
+
+function combineFilters(andFilters: AdvancedFilterItem[], orFilters: AdvancedFilterItem[]) {
+  const filters = [
+    ...andFilters,
+  ]
+  if (orFilters.length) {
+    filters.push({
+      or: orFilters,
+    })
+  }
+  return filters
+}
+
+const filtersAnd = ref<Array<AdvancedFilterItem>>([])
+const filtersOr = ref<Array<AdvancedFilterItem>>([])
+
+onMounted(() => {
+  filtersAnd.value = klona(modelFilters.value.filter(item => item.or === undefined))
+  const orFilters = modelFilters.value.find(item => item.or !== undefined)
+  filtersOr.value = orFilters?.or || []
+})
+
+watch(modelFilters, () => {
+  filtersAnd.value = klona(modelFilters.value.filter(item => item.or === undefined))
+  const orFilters = modelFilters.value.find(item => item.or !== undefined)
+  filtersOr.value = orFilters?.or || []
+})
+
+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)) {
+    modelFilters.value = combineFilters(filtersAnd.value, filtersOr.value)
+    $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">
+        <SSAdvancedFilterReportItem
+          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">
+        <SSAdvancedFilterReportItem
+          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/AdvancedFilterReport/types.ts

@@ -0,0 +1,19 @@
+import { nanoid } from 'nanoid'
+
+export interface AdvancedFilterItem {
+  id: string
+  valid: boolean
+  member: string
+  operator: string
+  values: string[]
+}
+
+export function createDefaultFilter(): AdvancedFilterItem {
+  return {
+    id: nanoid(),
+    valid: true,
+    member: '',
+    operator: 'equals',
+    values: [],
+  }
+}

package/src/components/AdvancedFilterSsai/SSAdvancedFilterSsaiItem.vue

@@ -0,0 +1,102 @@
+<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: '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>
+
+      <SSAdvancedFilterSsaiItemDefined
+        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>

package/src/components/AdvancedFilterSsai/SSAdvancedFilterSsaiItemDefined.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+
+const filter = defineModel<AdvancedFilterItem>({
+  required: true,
+})
+
+const { t: $t } = useI18n()
+
+const errorValue = ref('')
+
+const operatorOptions = computed(() => {
+  return [
+    { label: 'In', value: 'equals' },
+    { label: 'Not In', value: 'notEquals' },
+  ]
+})
+
+const { data } = useQuery({
+  queryKey: ['/api/app/vast-control/defined-parameters'],
+  queryFn: () => $vastControlApi('/api/app/vast-control/defined-parameters', {
+    query: {
+      page: 1,
+      perPage: 1000,
+    },
+  }),
+  keepPreviousData: true,
+})
+
+const countryValues = computed(() => {
+  return data.value?.data.find((item: any) => item.key === 'session.country')?.enumValues.map((item: any) => {
+    return {
+      label: item.title,
+      value: item.value,
+    }
+  })
+})
+
+const platformValues = computed(() => {
+  return data.value?.data.find((item: any) => item.key === 'session.platform')?.enumValues.map((item: any) => {
+    return {
+      label: item.title,
+      value: item.value,
+    }
+  })
+})
+
+const enumValues = computed(() => {
+  if (filter.value.member === 'country') {
+    return countryValues.value || []
+  }
+  else if (filter.value.member === 'platform') {
+    return platformValues.value || []
+  }
+  else {
+    return []
+  }
+})
+
+function validateValue(value: string[]) {
+  if (!value.length) {
+    errorValue.value = $t('VastControl.please_input_value')
+    filter.value.valid = false
+  }
+  else {
+    errorValue.value = ''
+    filter.value.valid = true
+  }
+}
+
+watch(() => filter.value.values, (value) => {
+  validateValue(value)
+})
+
+function validateFilter() {
+  if (filter.value.operator) {
+    validateValue(filter.value.values)
+  }
+}
+
+defineExpose({
+  validateFilter,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm">
+      Operator
+    </div>
+
+    <el-select v-model="filter.operator">
+      <el-option
+        v-for="item in operatorOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+
+  <div class="max-w-400px flex flex-col gap-1">
+    <div class="text-sm">
+      Values
+    </div>
+    <el-form-item :error="errorValue">
+      <el-select-v2
+        v-model="filter.values"
+        :options="enumValues"
+        filterable
+        multiple
+        placeholder="Select values"
+        :max-collapse-tags="5"
+        collapse-tags
+        collapse-tags-tooltip
+      />
+    </el-form-item>
+  </div>
+</template>