@sigmaott/base-next 1.0.6

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

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { dayjs } from 'element-plus'
+import * as R from 'remeda'
+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 isRange = computed(() => {
+  return props.inputLength === 2
+})
+
+const _value = ref<Date | [Date, Date]>(props.inputLength === 2 ? [dayjs(), dayjs()] : dayjs())
+
+// watch(rule.value, (val, oldVal) => {
+//   // if (!R.equals(val.value, oldVal?.value)) {
+//   console.log('🚀 ~ file: TimeInputField.vue:29 ~ watch ~ rule.value:', rule.value, dayjs().set('hour', 0).set('minute', 0).set('second', 0).valueOf())
+//   console.log('🚀 ~ file: TimeInputField.vue:29 ~ watch ~ rule.value:', isRange.value, val.value, val.value?.[0])
+//   if (isRange.value && val.value && val.value?.[0]?.length === 2) {
+//     _value.value[0] = [dayjs(dayjs(dayjs().format('YYYY-MM-DD')).valueOf() + Number(val.value[0][0] * 1000)),
+//       dayjs(dayjs(dayjs().format('YYYY-MM-DD')).valueOf() + Number(val.value[0][1] * 1000))]
+//   }
+//   // if (!isRange.value && val.value && val.value.length === 1) {
+//   //   _value.value = dayjs(dayjs(dayjs().format('YYYY-MM-DD')).valueOf() + Number(val.value[0][0] * 1000)),
+//   // }
+//   // }
+// }, { deep: true, immediate: true })
+
+function calculatorDurationSeconds(millisecond: number) {
+  return Math.ceil(millisecond / 1000)
+}
+
+function handleChangeTime(params: Date | [Date, Date]) {
+  if (isRange.value && params.length === 2) {
+    rule.value.value[0] = [calculatorDurationSeconds(dayjs(params[0]).valueOf() - dayjs(dayjs().format('YYYY-MM-DD')).valueOf()),
+      calculatorDurationSeconds(dayjs(params[1]).valueOf() - dayjs(dayjs().format('YYYY-MM-DD')).valueOf())]
+  }
+  else {
+    rule.value.value[0] = calculatorDurationSeconds(dayjs(params).valueOf() - dayjs(dayjs().format('YYYY-MM-DD')).valueOf())
+  }
+}
+</script>
+
+<template>
+  <!-- v-frag -->
+  <div>
+    <el-form-item class="!mb-0" :rules="_rule">
+      <el-time-picker
+        v-if="inputLength === 1"
+        v-model="_value"
+        :is-range="isRange"
+        :clearable="false"
+        class="!w-240px"
+        :placeholder="t('placeholder')"
+        @change="handleChangeTime"
+      />
+    </el-form-item>
+
+    <el-form-item class="!mb-0" :rules="_rule">
+      <el-time-picker
+        v-if="inputLength === 2"
+        v-model="_value"
+        :is-range="isRange"
+        :clearable="false"
+        class="!w-380px"
+        :placeholder="t('placeholder')"
+        @change="handleChangeTime"
+      />
+    </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/logics.ts

@@ -0,0 +1,27 @@
+import type { Config } from '../../types'
+
+export function getOperator(field: Ref<string>, config: Config) {
+  function showOperator(operator: string) {
+    if (
+      config.fields
+      && config.operators[operator].apply_to.findIndex(
+        value => field.value && value === config.fields[field.value]?.input,
+      ) !== -1
+    )
+      return true
+    return false
+  }
+
+  const operatorOptions = computed(() => {
+    return (Object.keys(config.operators) || [])
+      .filter(item => showOperator(item))
+      .map((operator) => {
+        return {
+          label: config.operators[operator].label,
+          value: config.operators[operator].type,
+        }
+      })
+  })
+
+  return operatorOptions
+}

package/src/components/QueryBuilder/components/item/InputMultiOptions.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { useConfigStore } from '../../useConfigStore'
+
+const emit = defineEmits<{
+  (e: 'submit', result: string[]): void
+}>()
+
+const multipleInputRaw = ref('')
+const innerVisible = ref(false)
+const { config } = useConfigStore()
+
+function submit() {
+  const result = multipleInputRaw.value.split('\n').filter(item => item)
+  emit('submit', result)
+  innerVisible.value = false
+}
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="px-2">
+    <el-button :size="config.settings.size" @click="innerVisible = true">
+      {{ t('Enter') }}
+    </el-button>
+    <el-dialog
+      v-model="innerVisible"
+      :title="t('EnterList')"
+      width="600px"
+      append-to-body
+      :before-close="() => (innerVisible = false)"
+    >
+      <div class="flex flex-col px-4 space-y-2">
+        <el-input
+          v-model="multipleInputRaw"
+          type="textarea"
+          :rows="10"
+          :placeholder="t('EnterList')"
+        />
+        <el-button @click="submit">
+          {{ t('Submit') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  Enter: Enter
+  EnterList: Enter list
+  Submit: Submit
+vi:
+  Enter: Nhập
+  EnterList: Nhập danh sách
+  Submit: Xác nhận
+</i18n>

package/src/components/QueryBuilder/components/item/QueryGroup.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { useConfigStore } from '../../useConfigStore'
+import type { JsonGroup } from '../../types'
+import QueryRule from './QueryRule.vue'
+import QueryGroupActions from './QueryGroupActions.vue'
+
+const props = withDefaults(
+  defineProps<{ value: JsonGroup; deletable?: boolean }>(),
+  {
+    deletable: false,
+  },
+)
+const emit = defineEmits(['delete'])
+
+const group = useVModel(props, 'value')
+const { config } = useConfigStore()
+
+watch(
+  group,
+  (newValue) => {
+    const validValue = newValue.rules.map(item => item.valid)
+    group.value.valid = validValue.every(v => v)
+  },
+  { deep: true, immediate: true },
+)
+
+function onDeleteRule(index: number) {
+  group.value.rules.splice(index, 1)
+}
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'QueryGroup',
+  components: {
+    QueryRule,
+  },
+})
+</script>
+
+<template>
+  <div
+    class="mb-3 overflow-x-auto border border-border rounded"
+  >
+    <div class="flex justify-between p-4">
+      <div class="flex items-center space-x-2">
+        <el-checkbox v-if="config.settings.showNot" v-model="group.not">
+          NOT
+        </el-checkbox>
+        <el-radio-group v-if="config.settings.showCondition" v-model="group.condition" :size="config?.settings?.size">
+          <el-radio-button
+            v-for="condition in Object.keys(config.conditions)" :key="condition"
+            :label="config.conditions[condition].value"
+          >
+            {{ config.conditions[condition].label }}
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <QueryGroupActions :config="config" :value="group" :deletable="deletable" @delete="deletable && emit('delete')" />
+    </div>
+    <div :style="{ maxHeight: config.settings.maxHeight }">
+      <div class="px-4">
+        <component
+          :is="rule.input === 'group' ? 'QueryGroup' : 'QueryRule'" v-for="(rule, index) in group.rules"
+          :key="`${rule.id}_${rule.operator}_${index}`" :value="group.rules[index]" :deletable="true" @delete="() => onDeleteRule(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/QueryBuilder/components/item/QueryGroupActions.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { nanoid } from 'nanoid'
+import { useConfigStore } from '../../useConfigStore'
+import type { JsonGroup } from '../../types'
+
+const props = withDefaults(defineProps<{ value: JsonGroup; deletable?: boolean }>(), {
+  deletable: false,
+})
+
+const emit = defineEmits(['delete'])
+const { t } = useI18n()
+const group = useVModel(props, 'value')
+const { config } = useConfigStore()
+
+function onAddRule() {
+  group.value.rules.unshift({
+    id: `${group.value.id}.${nanoid()}`,
+    field: undefined,
+    input: undefined,
+    operator: undefined,
+    validation: undefined,
+    value: undefined,
+    valid: true,
+  })
+}
+
+function onAddGroup() {
+  group.value.rules.push({
+    id: `${group.value.id}.${nanoid()}`,
+    input: 'group',
+    condition: 'AND',
+    not: false,
+    valid: true,
+    rules: [],
+  })
+}
+
+function deleteRuleGroup() {
+  props.deletable && emit('delete')
+}
+</script>
+
+<template>
+  <el-button-group v-if="config.settings.showActions">
+    <el-button v-if="config.settings.showAddRule" @click="onAddRule">
+      <div class="flex items-center">
+        <span class="i-carbon:add" />
+        <span class="ml-2"> {{ t('AddRule') }}</span>
+      </div>
+    </el-button>
+    <el-button v-if="config.settings.showAddGroup" @click="onAddGroup">
+      <div class="flex items-center">
+        <span class="i-carbon:add-alt" />
+        <span class="ml-2">
+          {{ t('AddGroup') }}
+        </span>
+      </div>
+    </el-button>
+
+    <el-button
+      v-if="deletable && config.settings.showDelGroup" :title="config.settings.delRuleLabel" type="danger"
+      @click="deleteRuleGroup"
+    >
+      <span class="i-carbon:delete" />
+    </el-button>
+  </el-button-group>
+</template>
+
+<i18n lang="yaml">
+en:
+  AddRule: Add rule
+  AddGroup: Add group
+vi:
+  AddRule: Thêm rule
+  AddGroup: Thêm group
+</i18n>

package/src/components/QueryBuilder/components/item/QueryRule.vue

@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import { useConfigStore } from '../../useConfigStore'
+import type { JsonRule } from '../../types'
+import FieldSelect from '../inputs/FieldSelect.vue'
+import OperatorSelect from '../inputs/OperatorSelect.vue'
+import TextInput from '../inputs/TextInput.vue'
+import NumberInputField from '../inputs/NumberInputField.vue'
+import DateInputField from '../inputs/DateInputField.vue'
+import InputSelect from '../inputs/InputSelect.vue'
+import InputMultiSelect from '../inputs/InputMultiSelect.vue'
+import TimeInputField from '../inputs/TimeInputField.vue'
+import { getOperator } from '../inputs/logics'
+import InputMultiOptions from './InputMultiOptions.vue'
+
+const props = defineProps<{ value: JsonRule }>()
+const emit = defineEmits(['delete'])
+
+const { config } = useConfigStore()
+const rule = useVModel(props, 'value')
+
+onBeforeUnmount(() => {
+  rule.value.valid = true
+})
+
+const fieldInfo = computed(() => rule.value.field ? config.value.fields[rule.value.field] : null)
+
+watch(
+  () => rule.value.field,
+  (newField) => {
+    if (newField) {
+      const fieldConfig = config.value.fields[newField]
+      rule.value.id = newField
+      rule.value.label = fieldConfig.label
+      rule.value.options = fieldConfig.options
+      rule.value.validation = fieldConfig.validation
+      rule.value.input = fieldConfig.input
+      rule.value.value = []
+      const operatorOptions = getOperator({ value: newField }, config.value)
+      rule.value.operator = operatorOptions.value[0].value
+    }
+  },
+)
+
+watch(
+  () => rule.value,
+  (newValue) => {
+    rule.value.valid = checkFieldValid(newValue)
+  },
+  { deep: true, immediate: true },
+)
+
+/*
+Set value to empty if new operator is selected or if field is changed
+*/
+watch(
+  [() => rule.value.operator, () => rule.value.field],
+  ([newOperator, newField], [prevOperator, prevField]) => {
+    if (newField !== prevField) {
+      rule.value.operator = undefined
+      rule.value.value = []
+
+      // if newField input is boolean set default value as true
+      if (fieldInfo.value?.input === 'boolean')
+        rule.value.value = [true]
+    }
+    else if (newOperator) {
+      const preValue = rule.value.value
+      rule.value.value = getValueByOperator(prevOperator, newOperator, preValue)
+    }
+  },
+)
+
+function getFieldInfo(field: string) {
+  return config.value.fields[field]
+}
+
+function checkFieldValid(rule: JsonRule): boolean {
+  if (!rule.field || !rule.operator || !rule.value || rule.value?.findIndex(v => v === null) > -1)
+    return false
+
+  // validate two value number
+  if (
+    rule.input === 'number'
+    && ['between', 'not_between'].includes(rule.operator)
+    && rule.value.length !== 2
+  ) {
+    return false
+  }
+
+  if (rule.input === 'number' && (rule.value[0] > rule.value[1] || rule.value[1] < rule.value[0]))
+    return false
+
+  // validate check value exists (null , "" ,[] )
+  if (rule.value.length > 0 && !rule.value.includes('') && rule.value.some(r => r !== null))
+    return true
+
+  // validate value is allow null or empty
+  if (
+    ['is_not_empty', 'is_empty', 'is_null', 'is_not_null'].includes(rule.operator)
+    && rule.value.length === 0
+  ) {
+    return true
+  }
+
+  return false
+}
+
+function getValueByOperator(preOperator: string | any, newOperator: string, value: string[] | any) {
+  if (
+    ['between', 'not_between'].includes(preOperator)
+    && !['between', 'not_between'].includes(newOperator)
+  ) {
+    return []
+  }
+
+  if (
+    ['between', 'not_between'].includes(newOperator)
+    && !['between', 'not_between'].includes(preOperator)
+  ) {
+    return []
+  }
+
+  if (['is_not_empty', 'is_empty', 'is_null', 'is_not_null'].includes(newOperator))
+    return []
+
+  if (['in', 'not_in'].includes(preOperator) && !['in', 'not_in'].includes(newOperator))
+    return []
+  return value
+}
+
+const inputLength = computed(() => {
+  return rule.value.operator ? config.value.operators[rule.value.operator].nb_input : 0
+})
+const inputType = computed(() => {
+  return rule.value.input
+})
+
+const isOperatorEmpty = computed(() => {
+  return ['is_not_empty', 'is_empty', 'is_null', 'is_not_null'].includes(rule.value.operator)
+})
+
+function deleteRule() {
+  emit('delete')
+}
+
+function onSubmitOptions(result: string[]) {
+  const newElements = result.filter(item => !rule.value.value.includes(item))
+
+  const commonElements = result.filter(item => rule.value.value.includes(item))
+
+  rule.value.value = [...newElements, ...commonElements]
+}
+</script>
+
+<template>
+  <div class="mb-2 flex items-start overflow-x-auto border border-border rounded px-4 pt-4">
+    <!-- DRAG -->
+    <template v-if="config.settings.showDrag">
+      <span class="i-carbon:drag-vertical mr-1" />
+    </template>
+    <!-- FIELD -->
+    <template v-if="config.settings.isFieldSelect">
+      <FieldSelect v-model:value="rule" :config="config" />
+    </template>
+
+    <template v-else>
+      <div v-if="rule.field" class="line-clamp-2 mx-1 w-[250px]" style="word-break: break-word">
+        {{ getFieldInfo(rule.field).label }}
+      </div>
+    </template>
+
+    <!-- OPERATOR -->
+    <template v-if="rule.field">
+      <OperatorSelect v-model:value="rule.operator" :rule="rule" />
+    </template>
+    <!-- INPUT -->
+    <template v-if="rule.operator && rule.value && !isOperatorEmpty">
+      <!-- TEXT INPUT -->
+      <div v-if="inputType === 'text'" class="mx-1 flex">
+        <TextInput v-model:value="rule" :config="config" :input-length="inputLength" />
+      </div>
+      <!-- NUMBER INPUT -->
+      <div v-if="inputType === 'number'" class="mx-1 flex">
+        <NumberInputField v-model:value="rule" :config="config" :input-length="inputLength" />
+      </div>
+      <!-- DATETIME INPUT -->
+      <div v-if="inputType === 'datetime'" class="mx-1 flex">
+        <DateInputField v-model:value="rule" :config="config" :input-length="inputLength" />
+      </div>
+      <!-- TIME INPUT -->
+      <div v-if="inputType === 'time'" class="mx-1 flex">
+        <TimeInputField v-model:value="rule" :config="config" :input-length="inputLength" />
+      </div>
+      <!-- SELECT INPUT -->
+      <div v-if="inputType === 'select'" class="mx-1 flex">
+        <template v-if="inputLength === 1">
+          <InputSelect v-model:value="rule" :config="config" />
+        </template>
+      </div>
+      <!-- BOOLEAN INPUT -->
+      <div v-if="inputType === 'boolean' && rule.options" class="mx-1 flex">
+        <el-switch
+          v-model="rule.value[0]"
+          class="!w-[150px]"
+          active-text="True"
+          inactive-text="False"
+        />
+      </div>
+      <!-- MULTISELECT INPUT -->
+      <div v-if="inputType === 'multiselect' && rule.options" class="mx-1 flex items-start">
+        <template v-if="inputLength === 1">
+          <InputMultiSelect v-model:value="rule" />
+          <InputMultiOptions v-if="rule.options.length === 0" @submit="onSubmitOptions" />
+        </template>
+      </div>
+    </template>
+    <!-- FLEX move delete to right -->
+    <div class="flex-1" />
+    <!-- DELETE -->
+    <template v-if="config.settings.showDelRule">
+      <div>
+        <el-button
+          :title="config.settings.delRuleLabel"
+          type="danger"
+          :size="config.settings.size"
+          @click="deleteRule"
+        >
+          <span class="i-carbon:delete" />
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/QueryBuilder/useConfigStore.ts

@@ -0,0 +1,27 @@
+import type { MaybeRef } from '@vueuse/core'
+import type { Config } from './types'
+
+interface Options {
+  config: MaybeRef<Config>
+}
+
+const [useProvideConfigStore, useStore] = createInjectionState((options: Options) => {
+  // state
+  const config = ref(options.config || '')
+  // getters
+
+  // actions
+
+  return {
+    config,
+  }
+})
+
+export { useProvideConfigStore }
+
+export function useConfigStore() {
+  const store = useStore()
+  if (store == null)
+    throw new Error('Please call `useProvideConfigStore` on the appropriate parent component')
+  return store
+}