@sigmaott/base-next 1.0.6

package/src/components/FilterQuerySchema/FilterQuerySchemaForm.vue

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { nanoid } from 'nanoid'
+import { klona } from 'klona'
+import { defaultConfig, getMongo, getRulesFromMongo } from '../QueryBuilder/utils'
+import type { Config, FieldConfigMap, JsonGroup } from '../QueryBuilder/types'
+import QueryBuilder from '../QueryBuilder/QueryBuilder.vue'
+
+const props = defineProps<{
+  fieldConfigs: FieldConfigMap
+  hasFilter?: boolean
+  hiddenFilter?: boolean
+}>()
+
+const emit = defineEmits<{
+  clearFilter: []
+}>()
+
+const query = defineModel<Record<string, any>>()
+const { fieldConfigs } = toRefs(props)
+const config = computed<Config>(() => {
+  return {
+    ...defaultConfig,
+    fields: fieldConfigs.value,
+    settings: {
+      ...defaultConfig.settings,
+      showAddGroup: false,
+      maxHeight: '400px',
+    },
+  }
+})
+
+function getDefaultFilter(): JsonGroup {
+  return {
+    id: nanoid(),
+    input: 'group',
+    condition: 'AND',
+    rules: [],
+    not: false,
+    valid: false,
+  }
+}
+
+const data = ref<JsonGroup>(klona(getDefaultFilter()))
+const { t } = useI18n()
+const visible = ref(false)
+
+function onMutateQuery() {
+  if (data.value.rules.length > 0)
+    query.value = getMongo(data.value)
+  else query.value = {}
+}
+
+watch(query, (newQuery) => {
+  if (Object.values(newQuery).length > 0)
+    data.value = { ...klona(data.value), ...getRulesFromMongo(newQuery, fieldConfigs.value) }
+  else data.value = klona(getDefaultFilter())
+}, { deep: true, immediate: true })
+
+watch(fieldConfigs, () => {
+  data.value = { ...data.value, ...getRulesFromMongo(query.value, fieldConfigs.value) }
+})
+
+function onClear() {
+  visible.value = false
+  data.value = klona(getDefaultFilter())
+  onMutateQuery()
+}
+
+function onSubmit() {
+  onMutateQuery()
+  visible.value = false
+}
+
+function cleanQuery(query: Record<string, any>) {
+  return Object.values(query)?.filter((item) => {
+    return (item && item.key) || Array.isArray(item)
+  })
+}
+
+function handleClose() {
+  if (cleanQuery(query.value).length > 0 && data.value.valid) {
+    data.value = { ...klona(data.value), ...getRulesFromMongo(query.value, fieldConfigs.value) }
+  }
+  else {
+    data.value = klona(getDefaultFilter())
+  }
+  visible.value = false
+}
+
+const hasFilter = computed(() => data.value.rules.length > 0 || props.hasFilter)
+
+function clearAll() {
+  data.value = klona(getDefaultFilter())
+  onMutateQuery()
+  emit('clearFilter')
+}
+</script>
+
+<template>
+  <slot
+    name="trigger"
+    :has-filter="hasFilter"
+    :on-click="() => visible = true"
+    :data="data"
+    :on-edit="() => visible = true"
+    :on-delete="() => onMutateQuery()"
+    :on-update-data="(newData) => data = newData"
+  >
+    <div class="mb-2 flex flex-col items-end gap-4px">
+      <div class="flex items-center justify-end gap-8px">
+        <slot name="quickFilter" />
+        <slot />
+        <el-button
+          v-if="!props.hiddenFilter"
+          type="primary"
+          plain
+          @click="visible = true"
+        >
+          <div class="flex space-x-1">
+            <span v-if="!hasFilter" class="i-carbon:filter h-[14px] w-[14px]" />
+            <span v-else class="i-carbon:filter-edit h-[14px] w-[14px]" />
+            <span v-if="hasFilter"> {{ t('QuerySchemaForm.status.hasFilter') }} </span>
+            <span v-else> {{ t('QuerySchemaForm.status.internalFilter') }} </span>
+          </div>
+        </el-button>
+        <el-button
+          v-if="hasFilter"
+          class="text-center ml-0!"
+          link
+          @click="clearAll"
+        >
+          <template #icon>
+            <div class="i-carbon:close" />
+          </template>
+          {{ $t('QuerySchemaForm.filter.clearAll') }}
+        </el-button>
+        <div v-if="hasFilter" class="flex gap-1">
+          <el-tag v-if="data.not" type="danger">
+            NOT
+          </el-tag>
+          <el-tag>
+            {{ data.condition }}
+          </el-tag>
+        </div>
+        <slot name="add" />
+      </div>
+      <el-scrollbar v-if="hasFilter" max-height="60px" always>
+        <div class="flex flex-wrap justify-end gap-4px pr-10px">
+          <SSFilterQuerySchemaQueryTag v-model:query-group="data" @edit="visible = true" @delete="onMutateQuery()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </slot>
+  <el-dialog
+    v-model="visible"
+    :title="t('QuerySchemaForm.title')"
+    class="min-w-900px"
+    append-to-body
+    :before-close="handleClose"
+  >
+    <QueryBuilder v-model:config="config" :quick-action-on-empty="false" :value="data" />
+    <template #footer>
+      <div class="dialog-footer flex justify-center space-x-2">
+        <el-button @click="onClear">
+          {{ t('QuerySchemaForm.actions.remove') }}
+        </el-button>
+        <el-button type="primary" :disabled="!data.valid" @click="onSubmit()">
+          {{ t('QuerySchemaForm.actions.submit') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  QuerySchemaForm:
+    title: Filter setting
+    actions:
+      remove: Remove filter
+      submit: Submit
+    status:
+      hasFilter: Change filter
+      noFilter: No filter
+      internalFilter: Filter
+    filter:
+      clearAll: Clear filter
+vi:
+  QuerySchemaForm:
+    title: Thiết lập bộ lọc
+    actions:
+      remove: Xóa bộ lọc
+      submit: Xác nhận
+    status:
+      hasFilter: Sửa bộ lọc
+      noFilter: Không có bộ lọc
+      internalFilter: Lọc
+    filter:
+      clearAll: Xoá bộ lọc
+</i18n>

package/src/components/FilterQuerySchema/QueryTag.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { JsonGroup, JsonRule } from '../QueryBuilder/types'
+import { defaultConfig } from '../QueryBuilder/utils/index'
+
+const props = defineProps<{ queryGroup: JsonGroup }>()
+const emit = defineEmits(['delete', 'edit'])
+
+const { t } = useI18n()
+const queryGroup = useVModel(props, 'queryGroup')
+
+function onRemoveQuery(index: number) {
+  queryGroup.value.rules.splice(index, 1)
+  emit('delete')
+}
+
+const queryTagList = computed(() => {
+  return queryGroup.value.rules.filter((query: JsonRule) => query.field && query.operator)
+})
+
+function isNullValue(operator: string) {
+  return !['is_empty', 'is_not_empty', 'is_null', 'is_not_null'].includes(operator)
+}
+const timezone = computed(() => APP_DETAIL_STORAGE.value?.[1]?.user?.timezone)
+const timezoneOffset = computed(() => dayjs().tz(dayjs.tz.guess()).utcOffset() - dayjs().tz(timezone.value).utcOffset())
+
+function formatDateTime(value: string) {
+  return dayjs(value).subtract(timezoneOffset.value, 'minute').format('YYYY-MM-DD HH:mm:ss')
+}
+
+function mapValue(value: string[], input: string) {
+  switch (value.length) {
+    case 0:
+      if (['select', 'multiselect'].includes(input))
+        return []
+      return ''
+    case 1:
+      if (value[0] === '' || value[0] === null)
+        return
+
+      if (['select', 'multiselect'].includes(input))
+        return `[ ${value[0]} ]`
+      if (['datetime', 'date'].includes(input)) {
+        return value[0].length === 2
+          ? `[ ${formatDateTime(value[0][0])} -> ${formatDateTime(value[0][1])} ]`
+          : formatDateTime(value[0])
+      }
+
+      return value[0]
+    default:
+      return value
+  }
+}
+
+function getTooltipContent(query: JsonRule) {
+  const field = query.label || query.field
+  const operator = t(`Filter.operator.${defaultConfig.operators[query.operator].type}`)
+  const value = isNullValue(query.operator) ? `"${mapValue(query.value, query.input)}"` : ''
+  return `${field} ${operator} ${value}`
+}
+</script>
+
+<template>
+  <el-tag
+    v-for="(query, idx) in queryTagList"
+    :key="query.id"
+    type="info"
+    class="tag-query"
+    closable
+    @close="onRemoveQuery(idx)"
+  >
+    <el-tooltip
+      :content="getTooltipContent(query)"
+      placement="top"
+      :show-after="500"
+    >
+      <div class="cursor-pointer" @click="emit('edit')">
+        <span class="mr-1 font-semibold">{{ query.label || query.field }}</span>
+        <span class="mr-1 text-red-500">{{ t(`Filter.operator.${defaultConfig.operators[query.operator].type}`) }}</span>
+        <span v-if="isNullValue(query.operator)" class="text-green-500">
+          "{{ mapValue(query.value, query.input) }}"
+        </span>
+      </div>
+    </el-tooltip>
+  </el-tag>
+</template>
+
+<style>
+.tag-query {
+  max-width: 900px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.tag-query .el-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  display: block;
+}
+
+.tag-query .cursor-pointer {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+</style>

package/src/components/FilterQuerySchema/Tag.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { JsonGroup, JsonRule } from '../QueryBuilder/types'
+import { defaultConfig } from '../QueryBuilder/utils/index'
+
+const props = defineProps<{ queryGroup: JsonGroup }>()
+const emit = defineEmits(['delete', 'edit'])
+
+const { t } = useI18n()
+const queryGroup = useVModel(props, 'queryGroup')
+
+function onRemoveQuery(index: number) {
+  queryGroup.value.rules.splice(index, 1)
+  emit('delete', index)
+}
+
+const queryTagList = computed(() => {
+  return queryGroup.value.rules.filter((query: JsonRule) => query.field && query.operator)
+})
+
+function isNullValue(operator: string) {
+  return !['is_empty', 'is_not_empty', 'is_null', 'is_not_null'].includes(operator)
+}
+
+function mapValue(value: string[], input: string) {
+  switch (value.length) {
+    case 0:
+      if (['select', 'multiselect'].includes(input))
+        return []
+      return ''
+    case 1:
+      if (value[0] === '' || value[0] === null)
+        return
+
+      if (['select', 'multiselect'].includes(input))
+        return `[ ${value[0]} ]`
+      if (['datetime', 'date'].includes(input)) {
+        return value[0].length === 2
+          ? `[ ${formatDateTime(value[0][0])} -> ${formatDateTime(value[0][1])} ]`
+          : formatDateTime(value[0])
+      }
+
+      return value[0]
+    default:
+      return value
+  }
+}
+</script>
+
+<template>
+  <el-tag v-for="(query, idx) in queryTagList" :key="query.id" type="info" class="tag-query" closable @close="onRemoveQuery(idx)">
+    <span class="cursor-pointer" @click="emit('edit')">
+      <span class="mr-1 font-semibold">{{ query.label || query.field }}</span>
+      <span class="mr-1 text-red-500">{{ t(`Filter.operator.${defaultConfig.operators[query.operator].type}`) }}</span>
+      <span v-if="isNullValue(query.operator)" class="text-green-500">
+        "{{ mapValue(query.value, query.input) }}"
+      </span>
+    </span>
+  </el-tag>
+</template>
+
+<style>
+  .tag-query .el-tag__content{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+</style>

package/src/components/FilterTimeDimensions.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { TimeDimension } from '@cubejs-client/core'
+import { dayjs } from 'element-plus'
+import type { TimeRange } from '@/constants/filterable'
+
+const props = withDefaults(defineProps<{
+  hideTimeUnit?: boolean
+  hideTimeRange?: boolean
+  dateType: 'datetimerange' | 'daterange'
+  title?: string
+  rangeDefault?: string
+  maxDays?: number
+  timeRange: string
+}>(), {
+  hideTimeUnit: false,
+  hideTimeRange: false,
+  dateType: 'datetimerange',
+  rangeDefault: 'Today',
+  maxDays: 90,
+})
+const emit = defineEmits<{
+  (e: 'update:time-range', value: string): void
+  (e: 'update:modelValue', value: TimeDimension): void
+}>()
+
+const { modelValue: timeDimensionQuery } = defineModels<{
+  modelValue: TimeDimension
+}>()
+
+const { t } = useI18n()
+
+const timeRange = useVModel(props, 'timeRange', emit, { defaultValue: props.rangeDefault, passive: true })
+const timeDimensionForm = reactive<TimeDimension>({
+  dimension: timeDimensionQuery.value.dimension,
+  granularity: timeDimensionQuery.value.granularity || 'day',
+  dateRange: timeDimensionQuery.value.dateRange,
+})
+
+function getDateRangeFromTime(dateRange: TimeRange) {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  let query: [string, string]
+
+  switch (dateRange) {
+    case 'Today':
+      query = [
+        now.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Yesterday':
+      query = [
+        now.subtract(1, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This week':
+      query = [
+        now.startOf('week').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('week').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This month':
+      query = [
+        now.startOf('month').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('month').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 7 days':
+      query = [
+        now.subtract(7, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'last_14_days':
+      query = [
+        now.subtract(14, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 30 days':
+      query = [
+        now.subtract(30, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    default:
+      query = [
+        now.subtract(6, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'), // Lấy hết ngày hôm nay
+      ]
+      break
+  }
+
+  const timeRangeEpg = ref([0, 23])
+  query[0] = formatTime(`${query[0].split('T')[0]} ${timeRangeEpg.value[0]}:00:00`)
+  query[1] = formatTime(`${query[1].split('T')[0]} ${timeRangeEpg.value[1]}:59:59`)
+
+  return query
+}
+
+const isTimeRangeToday = computed(() => {
+  return ['Today', 'Yesterday'].includes(timeRange.value)
+})
+
+// granularity
+const TimeUnitOpts = computed(() => {
+  return TimeUnitOptions.map((time) => {
+    if (isTimeRangeToday.value && time.value === 'hour')
+      return { ...time, disabled: false }
+
+    if (['custom', 'This month'].includes(timeRange.value) && time.value === 'month')
+      return { ...time, disabled: false }
+
+    return time
+  })
+})
+
+watch(timeDimensionForm, (newValue) => {
+  if (props.hideTimeUnit)
+    newValue.granularity = undefined
+
+  timeDimensionQuery.value = newValue
+  emit('update:modelValue', timeDimensionQuery.value)
+}, { deep: true })
+
+watch(() => timeDimensionForm.dateRange, (newValue, oldValue) => {
+  const ONE_DAY = 24 * 60 * 60 * 1000
+  const isOverMaxDays = (dayjs(newValue[1]) - dayjs(newValue[0])) / ONE_DAY > props.maxDays
+  if (isOverMaxDays) {
+    timeDimensionForm.dateRange = getDateRangeFromTime()
+    ElNotification.warning(t('TimeRangeDimension.message.isOverMaxDays', { max: props.maxDays }))
+  }
+})
+
+watch(timeRange, (newTypeTimeRange) => {
+  if (newTypeTimeRange === 'custom') {
+    if (timeDimensionForm.granularity === 'hour')
+      timeDimensionForm.granularity = 'day'
+    timeDimensionForm.dateRange = getDateRangeFromTime()
+  }
+  else {
+    if (isTimeRangeToday.value)
+      timeDimensionForm.granularity = 'hour'
+
+    if ((!isTimeRangeToday.value && timeDimensionForm.granularity === 'hour')
+      || (!['custom', 'This month'].includes(timeRange.value) && timeDimensionForm.granularity === 'month')) {
+      timeDimensionForm.granularity = 'day'
+    }
+
+    timeDimensionForm.dateRange = getDateRangeFromTime(newTypeTimeRange)
+  }
+})
+
+const renderTimes = computed(() => {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  const dayOfWeek = now.day() - 1
+  const firstOfWeek = now.add(-dayOfWeek, 'day')
+
+  switch (timeRange.value) {
+    case 'Today':
+      return `${t('TimeRangeDimension.day')} ${now.format('YYYY-MM-DD')}`
+    case 'Yesterday':
+      return `${t('TimeRangeDimension.day')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'This week':
+      return `${t('TimeRangeDimension.from')} ${firstOfWeek.format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${firstOfWeek.add(6, 'day').format('YYYY-MM-DD')}`
+    case 'This month':
+      return `${t('TimeRangeDimension.month')} ${now.format('MM-YYYY')}`
+    case 'This year':
+      return `${t('TimeRangeDimension.year')} ${now.format('YYYY')}`
+    case 'Last 7 days':
+      return `${t('TimeRangeDimension.from')} ${now.add(-7, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'Last 30 days':
+      return `${t('TimeRangeDimension.from')} ${now.add(-30, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'Last year':
+      return `${t('TimeRangeDimension.year')} ${now.add(-1, 'year').format('YYYY')}`
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <el-form :model="timeDimensionForm" label-position="left">
+    <div class="flex flex-wrap gap-x-2">
+      <el-form-item
+        v-if="!hideTimeRange"
+        :label="props.title ?? t('DateTime.timeRange')"
+        :show-message="false"
+        class="mb-0!"
+      >
+        <el-select v-model="timeRange" fit-input-width class="w-150px!">
+          <el-option
+            v-for="item in TimeRangeOptions"
+            :key="item.value"
+            :label="t(`TimeRangeOptions.${item.key}`)"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="timeRange === 'custom'" :show-message="false" class="mb-0!">
+        <el-date-picker
+          v-model="timeDimensionForm.dateRange"
+          :type="dateType"
+          :clearable="false"
+          :popper-options="{
+            placement: 'bottom-end',
+            modifiers: [
+              { name: 'flip', enabled: false },
+            ],
+          }"
+          :start-placeholder="t('DateTime.startDate')"
+          :end-placeholder="t('DateTime.endDate')"
+          value-format="YYYY-MM-DDTHH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item v-else class="mb-0!">
+        {{ renderTimes }}
+      </el-form-item>
+    </div>
+  </el-form>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  TimeRangeDimension:
+    day: Day
+    from: From
+    to: To
+    month: Month
+    year: Year
+    message:
+      isOverMaxDays: Time query filter does not exceed {max} days
+  TimeRangeOptions:
+    all_time: All time
+    custom: Custom
+    last_30_days: Last 30 days
+    last_7_days: Last 7 days
+    last_year: Last year
+    this_month: This month
+    this_week: This week
+    this_year: This year
+    today: Today
+    yesterday: Yesterday
+
+vi:
+  TimeRangeDimension:
+    day: Ngày
+    from: Từ
+    to: Đến
+    month: Tháng
+    year: Năm
+    message:
+      isOverMaxDays: Bộ lọc truy vấn thời gian không vượt quá {max} ngày
+  TimeRangeOptions:
+    all_time: Tất cả thời gian
+    custom: Tùy chỉnh
+    last_30_days: 30 ngày trước
+    last_7_days: 7 ngày trước
+    last_year: Năm trước
+    this_month: Tháng này
+    this_week: Tuần này
+    this_year: Năm nay
+    today: Hôm nay
+    yesterday: Hôm qua
+</i18n>