@sigmaott/base-next 1.0.6

package/src/components/NoticeAddLicense.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const emit = defineEmits(['add-license'])
+</script>
+
+<template>
+  <el-card class="[&_.el-card\_\_body]:!p-6px">
+    <div class="flex items-center justify-between text-sm">
+      <slot />
+      <el-button type="primary" @click="emit('add-license')">
+        {{ $t('addLicense') }}
+      </el-button>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-card__body) {
+  padding: 6px;
+}
+</style>

package/src/components/NoticeRunningOutResources.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const emit = defineEmits(['upgrade-now'])
+</script>
+
+<template>
+  <el-card class="[&_.el-card\_\_body]:!p-6px">
+    <div class="flex items-center justify-between text-sm">
+      <slot />
+      <el-button type="primary" @click="emit('upgrade-now')">
+        {{ $t('seeMoreOptions') }}
+      </el-button>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-card__body){
+  padding: 6px;
+}
+</style>

package/src/components/Pagination.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    total: number
+    layout?: string
+  }>(),
+  { layout: 'total, sizes, prev, pager, next, jumper' },
+)
+
+const emit = defineEmits<{
+  refresh: []
+  currentChange: [page: number]
+  sizeChange: [size: number]
+}>()
+
+const { params } = defineModels<{
+  params: {
+    page: number
+    perPage: number
+  }
+  total: number
+}>()
+
+const { total, layout } = toRefs(props)
+
+function handleSizeChange(value: number) {
+  params.value.perPage = value
+  params.value.page = 1
+  emit('sizeChange', value)
+}
+
+const refreshForm = reactive({
+  enabled: true,
+  duration: 10,
+})
+</script>
+
+<template>
+  <div class="mt-16px flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <slot name="total" />
+      <el-pagination
+        :key="`${params.perPage}`"
+        v-model:current-page="params.page"
+        class="bottom-2"
+        background
+        :page-sizes="[10, 15, 20, 50, 100]"
+        :page-size="params.perPage"
+        :layout
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="(page : number) => (emit('currentChange', page))"
+      />
+    </div>
+    <div class="flex-shrink-0">
+      <slot>
+        <SSAutoRefreshOld :duration="refreshForm.duration" :enabled="refreshForm.enabled" @on-refresh="emit('refresh')" />
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/QueryBuilder/QueryBuilder.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { nanoid } from 'nanoid'
+import { getOperator } from './components/inputs/logics'
+import QueryGroup from './components/item/QueryGroup.vue'
+import type { Config, JsonGroup, JsonRule, Option } from './types'
+import { useProvideConfigStore } from './useConfigStore'
+
+const props = withDefaults(defineProps<{
+  config: Config
+  value: JsonGroup
+  showQuickAction?: boolean
+  quickActionOnEmpty?: boolean
+}>(), {
+  showQuickAction: true,
+  quickActionOnEmpty: true,
+})
+
+const group = useVModel(props, 'value')
+const config = useVModel(props, 'config')
+const { t } = useI18n()
+useProvideConfigStore({
+  config,
+})
+
+const options = computed(() => {
+  return Object.keys(config.value.fields).map((field) => {
+    return {
+      label: config.value.fields[field].label,
+      value: config.value.fields[field].value,
+    }
+  })
+})
+
+const nonSelectFieldOptions = computed(() => {
+  return options.value.filter((option) => {
+    const isSelectOption = (group.value.rules as JsonRule[]).some((rule) => {
+      return rule.field === option.value
+    })
+    return !isSelectOption
+  })
+})
+
+function quickAction(options: Option[]) {
+  const _options = nonSelectFieldOptions.value
+    .filter((option) => {
+      return options.some((opt) => {
+        return opt.value === option.value
+      })
+    })
+    .reverse()
+  group.value.rules = [
+    ..._options.map((fieldOption) => {
+      const field = config.value.fields[fieldOption.value]
+      const fieldRef = ref(`${fieldOption.value}`)
+      const operatorOptions = getOperator(fieldRef, config.value)
+
+      let value: string[] | number[] | undefined
+
+      switch (field.input) {
+        case 'boolean':
+          value = ['true']
+          break
+        case 'number':
+          value = [0]
+          break
+        case 'date':
+          value = [new Date().getTime()]
+          break
+        case 'datetime':
+          value = [new Date().getTime()]
+          break
+        case 'time':
+          value = [new Date().getTime()]
+          break
+        case 'text':
+          value = ['']
+          break
+        case 'select':
+          value = field.options?.[0]?.value ? [field.options?.[0]?.value] : undefined
+          break
+        case 'multiselect':
+          value = field.options?.map(option => option.value)
+          break
+        default:
+          break
+      }
+
+      const rule: JsonRule = {
+        id: `${group.value.id}.${nanoid()}`,
+        field: fieldRef.value,
+        operator: operatorOptions.value[0].value,
+        input: field.input,
+        validation: field.validation,
+        options: field.options,
+        value,
+        valid: true,
+      }
+
+      return rule
+    }),
+    ...group.value.rules,
+  ]
+}
+
+function quickActionOne() {
+  quickAction([nonSelectFieldOptions.value[0]])
+}
+
+if (props.quickActionOnEmpty && group.value.rules.length === 0)
+  quickActionOne()
+</script>
+
+<template>
+  <el-form>
+    <div v-if="showQuickAction" class="mb-2 space-x-2">
+      <el-button size="default" @click="quickActionOne()">
+        <div class="flex space-x-1">
+          <span class="i-carbon:table-shortcut" />
+          <span>{{ t('QuickFill') }}</span>
+        </div>
+      </el-button>
+      <el-button size="default" @click="quickAction(options)">
+        <div class="flex space-x-1">
+          <span class="i-carbon:table-shortcut" />
+          <span>{{ t('FillAll') }}</span>
+        </div>
+      </el-button>
+    </div>
+
+    <QueryGroup v-model:value="group" />
+  </el-form>
+</template>
+
+<i18n lang="yaml">
+en:
+  QuickFill: Quick Fill
+  FillAll: Fill All
+vi:
+  QuickFill: Nhập nhanh
+  FillAll: Nhập tất cả
+</i18n>

package/src/components/QueryBuilder/components/inputs/DateInputField.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { Config, JsonRule } from '../../types'
+
+const props = defineProps<{
+  config: Config
+  value: JsonRule
+  inputLength: number
+}>()
+
+const rule = useVModel(props, 'value')
+const { t } = useI18n()
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.value![0])
+      return new Error(t('required'))
+  },
+}
+
+const dateTypePicker = computed(() => {
+  if (props.inputLength === 2)
+    return props.value.input === 'date' ? 'daterange' : 'datetimerange'
+  else return props.value.input
+})
+const timezone = computed(() => APP_DETAIL_STORAGE.value?.[1]?.user?.timezone)
+const timezoneOffset = computed(() => dayjs().tz(dayjs.tz.guess()).utcOffset() - dayjs().tz(timezone.value).utcOffset())
+
+const proxyValue = computed({
+  get() {
+    if (rule.value.value[0])
+      return dayjs(rule.value.value[0]).subtract(timezoneOffset.value, 'minute').toISOString()
+    return undefined
+  },
+  set(value) {
+    rule.value.value[0] = dayjs(value).add(timezoneOffset.value, 'minute').toISOString()
+  },
+})
+</script>
+
+<template>
+  <div>
+    <el-form-item class="!mb-0" :rules="_rule">
+      <el-date-picker
+        v-if="inputLength === 1"
+        v-model="proxyValue"
+        :type="dateTypePicker"
+        class="!w-240px"
+        :placeholder="t('placeholder')"
+        popper-class="custom-date-popper"
+        :popper-options="{
+          placement: 'bottom-end',
+          modifiers: [
+            { name: 'flip', enabled: false },
+          ],
+        }"
+      />
+    </el-form-item>
+
+    <el-form-item class="!mb-0" :rules="_rule">
+      <el-date-picker
+        v-if="inputLength === 2"
+        v-model="rule.value[0]"
+        :type="dateTypePicker"
+        class="!w-380px"
+        :placeholder="t('placeholder')"
+        popper-class="custom-date-popper"
+        :popper-options="{
+          placement: 'bottom-end',
+          modifiers: [
+            { name: 'flip', enabled: false },
+          ],
+        }"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  required: Please enter value
+  placeholder: Enter value
+vi:
+  required: Vui lòng nhập giá trị
+  placeholder: Nhập giá trị
+</i18n>
+
+<style lang="scss">
+.custom-date-popper {
+  background: red;
+  transform: translateY(-50%);
+  transition-duration: 0s !important;
+
+  .el-date-table th {
+    padding: 0;
+  }
+
+  .el-popper__arrow {
+    display: none;
+  }
+
+  .el-date-table td {
+    padding: 0;
+  }
+}
+</style>

package/src/components/QueryBuilder/components/inputs/FieldSelect.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Config, JsonRule } from '../../types'
+
+const props = defineProps<{ config: Config, value: JsonRule }>()
+const rule = useVModel(props, 'value')
+
+const options = computed(() => {
+  return Object.keys(props.config.fields).map((field) => {
+    return {
+      label: props.config.fields[field].label,
+      value: props.config.fields[field].value,
+    }
+  })
+})
+
+const { t } = useI18n()
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.field)
+      return new Error(t('required'))
+  },
+}
+</script>
+
+<template>
+  <el-form-item class="w-[175px]" :rules="_rule">
+    <el-select-v2
+      v-model="rule.field"
+      :options="options"
+      :placeholder="t('placeholder')"
+      v-bind="popoverSelectAttrs"
+    />
+  </el-form-item>
+</template>
+
+<i18n lang="yaml">
+en:
+  required: Please select field
+  placeholder: Select field
+vi:
+  required: Vui lòng chọn trường
+  placeholder: Chọn trường
+</i18n>

package/src/components/QueryBuilder/components/inputs/InputMultiSelect.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { JsonRule } from '../../types'
+
+const props = defineProps<{ value: JsonRule }>()
+const rule = useVModel(props, 'value')
+
+const options = computed(() => {
+  return (rule.value.options || []).map((item) => {
+    return {
+      label: item.label,
+      value: item.value,
+    }
+  })
+})
+const { t } = useI18n()
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.value)
+      return new Error(t('required'))
+  },
+}
+</script>
+
+<template>
+  <el-form-item v-if="rule.value" class="w-[150px]" :rules="_rule">
+    <el-select
+      v-model="rule.value"
+      multiple
+      filterable
+      allow-create
+      default-first-option
+      :collapse-tags-tooltip="true"
+      :placeholder="t('placeholder')"
+      :collapse-tags="rule.value.length > 5"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<style>
+/* .el-select__selection {
+  max-width: 800px;
+} */
+</style>
+
+<i18n lang="yaml">
+en:
+  required: Please select value
+  placeholder: Select value
+vi:
+  required: Vui lòng chọn giá trị
+  placeholder: Chọn giá trị
+</i18n>

package/src/components/QueryBuilder/components/inputs/InputSelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Config, JsonRule } from '../../types'
+
+const props = defineProps<{ value: JsonRule; config: Config }>()
+const rule = useVModel(props, 'value')
+const { t } = useI18n()
+const options = computed(() => {
+  return (rule.value.options || []).map((item) => {
+    return {
+      label: item.label,
+      value: item.value,
+    }
+  })
+})
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.field)
+      return new Error(t('required'))
+  },
+}
+</script>
+
+<template>
+  <el-form-item v-if="rule.value" class="w-[150px]" :rules="_rule">
+    <el-select v-model="rule.value[0]" filterable :placeholder="t('placeholder')">
+      <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value" />
+    </el-select>
+  </el-form-item>
+</template>
+
+<i18n lang="yaml">
+en:
+  required: Please select value
+  placeholder: Select value
+vi:
+  required: Vui lòng chọn giá trị
+  placeholder: Chọn giá trị
+</i18n>

package/src/components/QueryBuilder/components/inputs/NumberInputField.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Config, JsonRule } from '../../types'
+
+const props = defineProps<{
+  config: Config
+  value: JsonRule
+  inputLength: number
+}>()
+
+const rule = useVModel(props, 'value')
+const { t } = useI18n()
+
+const _ruleNumber1 = {
+  type: 'number',
+  trigger: ['blur', 'change'],
+  validator() {
+    if (!rule.value.validation)
+      return true
+    if (rule.value.value[0] === null)
+      return new Error(t('required'))
+    if (rule.value.validation.min && rule.value.value![0] < rule.value.validation.min)
+      return new Error(`${t('min')} ${rule.value.validation.min}`)
+    if (rule.value.validation.max && rule.value.value![0] > rule.value.validation.max)
+      return new Error(`${t('max')} ${rule.value.validation.max}`)
+    if (rule.value.value[0] > rule.value.value[1])
+      return new Error(`${t('greater_or_equal')} ${rule.value.value[1]}`)
+  },
+}
+
+const _ruleNumber2: FormItemRule = {
+  type: 'number',
+  trigger: ['blur', 'change'],
+  validator() {
+    if (!rule.value.validation)
+      return true
+    if (rule.value.value[1] === null)
+      return new Error(t('required'))
+    if (rule.value.validation.min && rule.value.value![1] < rule.value.validation.min)
+      return new Error(`${t('min')} ${rule.value.validation.min}`)
+    if (rule.value.validation.max && rule.value.value![1] > rule.value.validation.max)
+      return new Error(`${t('max')} ${rule.value.validation.max}`)
+    if (rule.value.value[1] < rule.value.value[0])
+      return new Error(`${t('greater_or_equal')} ${rule.value.value[0]}`)
+  },
+}
+</script>
+
+<template>
+  <el-form-item class="!mb-0" :rules="_ruleNumber1">
+    <el-input-number
+      v-if="inputLength === 1"
+      v-model="rule.value[0]"
+      class="!w-[150px]"
+      :min="rule.validation?.min ?? undefined"
+      :max="rule.validation?.max ?? undefined"
+    />
+  </el-form-item>
+  <template v-if="inputLength === 2">
+    <el-form-item class="!mb-0" :rules="_ruleNumber1">
+      <el-input-number
+        v-model="rule.value[0]"
+        class="!w-[150px]"
+        :min="rule.validation?.min ?? undefined"
+        :max="rule.validation?.max ?? undefined"
+      />
+    </el-form-item>
+    <span class="mx-1" />
+    <el-form-item class="!mb-0" :rules="_ruleNumber2">
+      <el-input-number
+        v-model="rule.value[1]"
+        class="!w-[150px]"
+        :min="rule.validation?.min ?? undefined"
+        :max="rule.validation?.max ?? undefined"
+      />
+    </el-form-item>
+  </template>
+</template>
+
+<i18n lang="yaml">
+en:
+  min: Not less than
+  max: Not greater than
+  placeholder: Enter value
+  greater_or_equal: Value should be greater than or equal to
+vi:
+  required: Vui lòng nhập giá trị
+  placeholder: Nhập giá trị
+  min: Không thể nhỏ hơn
+  max: Không thể lớn hơn
+  greater_or_equal: Giá trị phải lớn hơn hoặc bằng
+</i18n>

package/src/components/QueryBuilder/components/inputs/OperatorSelect.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { JsonRule } from '../../types'
+import { useConfigStore } from '../../useConfigStore'
+import { getOperator } from './logics'
+
+interface Props {
+  rule: JsonRule
+  value?: string
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+const rule = useVModel(props, 'rule')
+const operator = useVModel(props, 'value')
+
+const { config } = useConfigStore()
+
+const operatorOptions = getOperator(
+  computed(() => rule.value.field!),
+  config.value,
+)
+
+watch(() => rule.value.field, (newField, preField) => {
+  if (!operator.value || (preField && preField !== newField))
+    operator.value = operatorOptions.value[0].value
+}, { immediate: true })
+
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.operator)
+      return new Error(t('required'))
+  },
+}
+
+function resetValueOnChangeEvent() {
+  rule.value.value = []
+}
+</script>
+
+<template>
+  <el-form-item class="ml-2 w-[150px]" :rules="_rule">
+    <el-select v-model="rule.operator" :placeholder="config.settings.operatorsSelectPlaceholder" @change="resetValueOnChangeEvent ">
+      <el-option
+        v-for="item in operatorOptions"
+        :key="item.label"
+        :label="t(`Filter.operator.${item.value}`)"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<i18n lang="yaml">
+en:
+  required: Please select operator
+vi:
+  required: Vui lòng chọn toán tử
+</i18n>

package/src/components/QueryBuilder/components/inputs/TextInput.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { Config, JsonRule } from '../../types'
+
+const props = defineProps<{
+  config: Config
+  value: JsonRule
+  inputLength: number
+}>()
+
+const rule = useVModel(props, 'value')
+const { t } = useI18n()
+const _rule = {
+  trigger: ['blur', 'input'],
+  validator: () => {
+    if (!rule.value.value![0])
+      return new Error(t('required'))
+  },
+}
+</script>
+
+<template>
+  <el-form-item :class="rule.validation?.max ? 'w-220px' : 'w-150px'" :rules="_rule">
+    <el-input
+      v-if="inputLength === 1"
+      v-model="rule.value[0]"
+      :placeholder="t('placeholder')"
+      :maxlength="rule.validation?.max === null ? undefined : rule.validation?.max ?? 50"
+      :show-word-limit="Boolean(rule.validation?.max)"
+    />
+  </el-form-item>
+</template>
+
+<i18n lang="yaml">
+en:
+  required: Please enter value
+  placeholder: Enter value
+vi:
+  required: Vui lòng nhập giá trị
+  placeholder: Nhập giá trị
+</i18n>