@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/FilterQuerySchema/FilterQuerySchemaForm.vue

@@ -1,200 +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>
+<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

@@ -1,109 +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>
+<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>