eztech-core-components 1.0.0

package/comps/CoreSelect.vue

@@ -0,0 +1,249 @@
+<template>
+  <el-select
+    ref="refComponent"
+    v-model="modelValue"
+    class="w-full"
+    clearable
+    filterable
+    remote
+    :loading="loading"
+    :disabled="disabled"
+    :remote-method="handleDebounce"
+    :multiple="isMultiple"
+    :size="size"
+    :value-key="pk_field_name"
+    :placeholder="placeholder"
+    @clear="handleClear"
+    @visible-change="handleVisibleChange"
+    @keydown.native.enter="$emit('keydown-enter')"
+    @keydown="$emit('keydown', $event)"
+  >
+    <el-option
+      v-for="item of list"
+      :key="item[pk_field_name]"
+      :label="get(item, columnName)"
+      :value="item"
+      :style="{ color: columnName1 && columnName1.toLowerCase().includes('color') ? item[columnName1] : null }"
+      class="h-auto max-w-[500px] h-auto whitespace-normal break-normal"
+    >
+      {{ get(item, columnName) }}
+      <!-- <span
+        v-if="columnName1 && !columnName1.toLowerCase().includes('color')"
+        class="text-gray-400 text-xs font-bold"
+      >
+        {{ item[columnName1] }}
+      </span> -->
+    </el-option>
+  </el-select>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { get, isEqual } from 'lodash'
+import { getFormBoolean, getTriggerFields } from '../utils/data-helper'
+export default {
+  name: 'CoreSelect',
+  props: {
+    parentTemp: { type: Object, default: () => { return null } },
+    value: { type: [String, Array, Number, Object], default: null },
+    table_name: { type: String, default: null },
+    ref_column: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' },
+    projectId: { type: [String, Number], default: null },
+    col_multiple: { type: [Boolean, Number, String], default: false },
+    trigger_fields: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    isSearch: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Сонгох' },
+    customUrl: { type: String, default: null }
+  },
+  data () {
+    return {
+      list: [],
+      loading: false,
+      timeout: 0,
+      timeoutDebounce: 0
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['references']),
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    clonedTemp () {
+      return Object.assign({ ...this.parentTemp })
+    },
+    columnName () {
+      return this.ref_column.split(',')[0].split('*')[0]
+    },
+    columnName1 () {
+      if (this.ref_column.split(',').length <= 1) {
+        return null
+      }
+      return this.ref_column.split(',')[1].split('*')[0]
+    },
+    referenceName () {
+      return `${this.projectId}-${this.table_name}`
+    },
+    stringValue () {
+      if (this.isMultiple) {
+        if (!this.value) {
+          return ''
+        }
+        if (typeof this.value === 'object') {
+          return this.value.join(',')
+        }
+        return this.value
+      } else {
+        return this.value
+      }
+    },
+    modelValue: {
+      get () {
+        if (this.isMultiple) {
+          if (!this.value) {
+            return []
+          }
+          if (typeof this.value === 'object' && Array.isArray(this.value)) {
+            return this.value
+          }
+          return this.value.split(',')
+        } else {
+          return this.value && this.value[this.pk_field_name] ? this.value : null
+        }
+      },
+      set (val) {
+        if (!val) {
+          this.$emit('input', val)
+        } else if (this.isMultiple) {
+          this.$emit('input', val)
+        } else {
+          this.$emit('input', val)
+        }
+      }
+    }
+  },
+  watch: {
+    clonedTemp: {
+      handler: function (newVal, oldVal) {
+        this.handleDefault()
+        const trigger_fields = getTriggerFields(this.trigger_fields)
+        for (const { localVal } of trigger_fields) {
+          if (localVal.includes('#')) {
+            const tempKey = localVal.substring(1)
+            let newValue = get(newVal, tempKey)
+            let oldValue = get(oldVal, tempKey)
+            if (newValue && typeof newValue === 'object') {
+              newValue = newValue[this.pk_field_name]
+            }
+            if (oldValue && typeof oldValue === 'object') {
+              oldValue = oldValue[this.pk_field_name]
+            }
+            if (!isEqual(newValue, oldValue)) {
+              if (oldValue) {
+                this.modelValue = null
+              }
+              this.list = []
+              this.set_references({ referenceName: this.referenceName, list: this.list })
+              clearTimeout(this.timeout)
+              this.timeout = setTimeout(this.getList, 200)
+            }
+          }
+        }
+      },
+      deep: true
+    },
+    value: {
+      handler () {
+        this.handleDefault()
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.handleDefault()
+  },
+  methods: {
+    get,
+    ...mapActions('settings', ['set_references']),
+    focus () {
+      this.$refs.refComponent.focus()
+    },
+    handleDefault () {
+      let vals = []
+      if (this.isMultiple) {
+        vals = this.value ? [...this.value] : []
+      } else if (typeof this.value === 'object') {
+        vals = this.value && this.value[this.pk_field_name] ? [this.value] : []
+      }
+      for (const val of vals) {
+        if (!this.list.some(c => c[this.pk_field_name] === val[this.pk_field_name])) {
+          this.list.unshift(val)
+        }
+      }
+    },
+    handleVisibleChange (val) {
+      if (val) {
+        this.getList()
+      }
+    },
+    handleDebounce (query) {
+      clearTimeout(this.timeoutDebounce)
+      this.loading = true
+      this.timeoutDebounce = setTimeout(() => this.getList(query), 500)
+    },
+    async getList (query) {
+      try {
+        const triggerSearch = {}
+        const trigger_fields = getTriggerFields(this.trigger_fields)
+        for (const { localKey, localVal, type, operation } of trigger_fields) {
+          if (localVal.startsWith('#')) {
+            const tempKey = localVal.substring(1)
+            const newValue = get(this.clonedTemp, tempKey)
+            if ([null, undefined].includes(newValue) && !this.isSearch) {
+              return
+            }
+            if (newValue && typeof newValue === 'object' && Array.isArray(newValue)) {
+              const vals = newValue.map(c => c._id)
+              triggerSearch[localKey] = { val: vals, t: type, op: operation }
+            } else if (newValue) {
+              const val = typeof newValue === 'object' ? newValue[this.pk_field_name] : newValue
+              if (localKey === 'reg_type_id' && this.table_name === 'ref_reg_sub_types' && this.isSearch && val === '5') {
+                triggerSearch[localKey] = { val: '7,8,9,10,5', t: type, op: 'in' }
+              } else {
+                triggerSearch[localKey] = { val, t: type, op: operation }
+              }
+            }
+          } else {
+            triggerSearch[localKey] = { val: localVal, t: type, op: operation }
+          }
+        }
+        this.loading = true
+        const { data } = await this.$axios.get(this.customUrl || `reference/${this.projectId}/${this.table_name}`, {
+          params: {
+            search: JSON.stringify(Object.assign({ [this.columnName]: { val: query, t: 'string' } }, triggerSearch)),
+            fields: this.ref_column,
+            locale_id: this.parentTemp?.locale_id
+          }
+        })
+        const list = this.value ? (this.isMultiple ? [...this.value] : (this.value[this.pk_field_name] ? [this.value] : [])) : []
+        for (const r of data.list) {
+          const index = list.findIndex(c => c[this.pk_field_name] === r[this.pk_field_name])
+          if (index > -1) {
+            list.splice(index, 1)
+          }
+        }
+        this.list = [...list, ...data.list]
+        this.set_references({ referenceName: this.referenceName, list: this.list })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleClear () {
+      this.getList()
+    }
+  }
+}
+</script>

package/comps/CoreSelectEnum.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-autocomplete
+    v-model="modelValue"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="w-full"
+  />
+  <!-- <el-select
+    v-model="modelValue"
+    :disabled="disabled"
+    :size="size"
+    :multiple="isMultiple"
+    clearable
+    filterable
+    default-first-option
+    class="w-full"
+  >
+    <el-option
+      v-for="item in enumOptions"
+      :key="item"
+      :value="item"
+      :label="item"
+    />
+  </el-select> -->
+</template>
+<script>
+import { getFormBoolean } from '../utils/data-helper'
+export default {
+  name: 'CoreSelectEnum',
+  props: {
+    disabled: { type: Boolean, default: false },
+    value: { type: [Number, String, Array], default: () => { return null } },
+    size: { type: String, default: null },
+    col_type: { type: String, default: 'string' },
+    col_multiple: { type: [Boolean, Number, String], default: false },
+    enum_values: { type: String, default: null },
+    placeholder: { type: String, default: null }
+  },
+  computed: {
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    enumOptions () {
+      return this.enum_values.split(',').map((c) => {
+        if (['number', 'decimal'].includes(this.col_type)) {
+          return Number(c)
+        }
+        return c
+      })
+    },
+    modelValue: {
+      get () {
+        if (!this.value) {
+          if (this.isMultiple) {
+            return []
+          }
+          return null
+        }
+        if (['number', 'decimal'].includes(this.col_type)) {
+          if (this.isMultiple) {
+            if (Array.isArray(this.value)) {
+              return this.value.map(c => Number(c.value))
+            } else {
+              return this.value.split(',').map(c => Number(c.value))
+            }
+          }
+          return Number(this.value)
+        }
+        if (this.isMultiple) {
+          if (Array.isArray(this.value)) {
+            return this.value
+          } else {
+            return this.value.split(',')
+          }
+        }
+        return this.value
+      },
+      set (val) {
+        if (!val) {
+          this.$emit('input', null)
+        } else if (this.isMultiple) {
+          this.$emit('input', val)
+        } else {
+          this.$emit('input', val)
+        }
+      }
+    }
+  },
+  methods: {
+    querySearch (queryString, cb) {
+      const list = this.enumOptions
+      const results = queryString && list?.length ? list.filter(this.createFilter(queryString)) : list
+      cb(results?.map((c) => { return { value: c } })) // eslint-disable-line n/no-callback-literal
+    },
+    createFilter (queryString) {
+      return (item) => {
+        return (item.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreSelectGroup.vue

@@ -0,0 +1,237 @@
+<template>
+  <el-popover
+    :value="visible"
+    placement="bottom-start"
+    width="400"
+    popper-class="popper-notification"
+    trigger="focus"
+    :disabled="disabled"
+    @show="handleChange(true)"
+    @hide="handleChange(false)"
+  >
+    <core-select-group-list
+      ref="refComponent"
+      v-model="modelValue"
+      :visible.sync="visible"
+      :project-id="projectId"
+      :table_name="table_name"
+      :ref_column="ref_column + ',parent_id'"
+      :size="size"
+      :disabled="disabled"
+      :col_field="col_field"
+      :trigger_fields="trigger_fields"
+      :search-text="searchVal"
+      :parent-focused-item.sync="focusedItem"
+      @select="handleSelect"
+    />
+    <el-input
+      ref="refSearch"
+      slot="reference"
+      v-model="itemName"
+      class="focus:text-coreSecondaryText"
+      placeholder="Сонгох.."
+      :size="size"
+      :disabled="disabled"
+      clearable
+      @clear="handleClearSearch"
+      @keydown.native.enter.prevent="handleSearch"
+      @keydown.native.down.prevent="handleNavigate('next')"
+      @keydown.native.up.prevent="handleNavigate('prev')"
+    />
+  </el-popover>
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  name: 'CoreSelecGroup',
+  props: {
+    value: { type: [String, Object], default: null },
+    projectId: { type: [String, Number], default: '5' },
+    table_name: { type: String, default: 'ref_reg_types' },
+    ref_column: { type: String, default: 'name,parent_id' },
+    size: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    trigger_fields: { type: String, default: null }
+  },
+  data () {
+    return {
+      visible: false,
+      list: [],
+      loading: false,
+      item: null,
+      timeout: 0,
+      searchText: null,
+      searchVal: null,
+      searchTimeout: 0,
+      focusedItem: null
+    }
+  },
+  computed: {
+    itemName: {
+      get () {
+        if (this.searchText !== null) {
+          return this.searchText
+        }
+        if (typeof this.value === 'object') {
+          return this.value?.name
+        }
+        return this.value ? this.item?.name : null
+      },
+      set (val) {
+        this.searchText = val
+      }
+    },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    isSelectableParent () {
+      return ['parent_id', 'resolution_org_id'].includes(this.col_field)
+    }
+  },
+  watch: {
+    visible () {
+      this.searchText = null
+      this.focusedItem = null
+    },
+    // modelValue () {
+    //   this.getItem()
+    // }
+    searchText (val) {
+      this.$refs.refComponent.setLoading(true)
+      clearTimeout(this.searchTimeout)
+      const that = this
+      this.searchTimeout = setTimeout(() => {
+        that.searchVal = val
+      }, 1000)
+    }
+  },
+  mounted () {
+    // this.getItem()
+    // this.refresh()
+  },
+  methods: {
+    async handleClearSearch () {
+      this.modelValue = null
+      await this.$nextTick()
+      this.$refs.refSearch.focus()
+    },
+    handleNavigate (type) {
+      this.$refs.refComponent.handleNavigate(type)
+    },
+    isSelectable (item) {
+      return !item.hasChildren || (item.hasChildren && this.isSelectableParent && get(item, 'type_id.code') !== '999')
+    },
+    handleSearch () {
+      if (!this.visible) {
+        this.visible = true
+      } else if (this.focusedItem) {
+        if (!this.isSelectable(this.focusedItem)) {
+          return
+        }
+        this.handleSelect(this.focusedItem)
+      } else {
+        clearTimeout(this.searchTimeout)
+        this.searchVal = this.searchText
+      }
+    },
+    handleChange (val) {
+      if (val) {
+        this.visible = true
+      } else {
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(() => {
+          this.visible = val
+        }, 100)
+      }
+    },
+    handleSelect (item) {
+      this.searchText = null
+      this.searchVal = null
+      this.item = item
+      this.modelValue = { ...item }
+      this.visible = false
+    },
+    async handleLoad (item) {
+      try {
+        if (item.loading) {
+          return
+        }
+        item.loading = true
+        if (!item.expand && item.list.length === 0) {
+          item.list = await this.getList(item)
+        }
+        item.expand = !item.expand
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        item.loading = false
+      }
+    },
+    async refresh () {
+      try {
+        if (!this.visible) {
+          return
+        }
+        // if (this.loading || this.list.length > 0) {
+        //   return
+        // }
+        this.loading = true
+        this.list = await this.getList()
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getItem () {
+      try {
+        if (!this.modelValue || this.item) {
+          return
+        }
+        const { data: { list } } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+          params: {
+            search: JSON.stringify(Object.assign({ _id: { val: this.modelValue, t: 'number', op: 'eq' } })),
+            fields: this.ref_column,
+            isHasChildren: true
+          }
+        })
+        if (list.length > 0) {
+          this.item = list[0]
+        }
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    async getList (row) {
+      const search = Object.assign({})
+      if (this.searchText) {
+        search.name = { val: this.searchText, t: 'string', op: 'like' }
+      } else {
+        search.parent_id = { val: row ? row._id : 'null', t: 'number', op: 'eq' }
+      }
+      const { data: { list } } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+        process: false,
+        params: {
+          search: JSON.stringify(search),
+          // selectedId: String(this.value),
+          fields: this.ref_column,
+          isHasChildren: true
+        }
+      })
+      return list.map((c) => {
+        // c.hasChildren = true
+        c.loading = false
+        c.expand = false
+        c.list = []
+        return c
+      })
+    }
+  }
+}
+</script>