eztech-core-components 1.0.0

package/comps/CoreSelectGroupItem.vue

@@ -0,0 +1,168 @@
+<template>
+  <ul ref="list" :class="['w-full', { 'pl-2 pr-[6px]': treeCount <= 1, 'pl-[16px] ': treeCount > 1 }]">
+    <li
+      v-for="(item, index) in list"
+      :key="treeCount + '_' + index"
+      :class="{
+        'border-top-half relative flex-col': !!item.parent_id
+      }"
+    >
+      <div :class="['flex overflow-hidden flex-row', {}]">
+        <div v-if="!!item.parent_id" class="h-full">
+          <div class="w-[8px] border-b border-coreSecondaryText/[.6] h-[17.5px]" />
+        </div>
+        <!-- <div v-if="item.hasChildren" class="pr-1 w-[18px] flex flex-col justify-between">
+          <div class="pt-[7px]">
+            <i v-if="item.loading" class="text-lg cursor-pointer el-icon-loading text-coreSecondaryText" />
+            <i v-else :class="['text-lg cursor-pointer el-icon-caret-bottom duration-200 text-corePrimary hover:text-coreSecondaryText', item.expand ? 'rotate-0' : '-rotate-90']" @click="() => handleLoadChildren(item)" />
+          </div>
+          <div class="h-[8px] flex-1 pl-[2px]">
+            <div :class="['w-[7px] border-r border-coreSecondaryText/[.6] leading-1 text-xs', { 'h-full': item.expand, 'h-0 duration-100 delay-300': !item.expand }]"></div>
+          </div>
+        </div> -->
+        <div
+          v-if="multiple" :class="['pt-[6px]', {
+            'px-1': !item.hasChildren,
+            'pr-1': item.hasChildren,
+          }]"
+        >
+          <el-checkbox :value="value.includes(item._id)" @change="() => handleSelectCheckbox(item, treeCount)" />
+        </div>
+        <div
+          :class="['flex-1 flex-col', {
+            'bg-coreBgHover text-corePrimary mb-2 rounded': expandedItems.includes(item._id),
+          }]"
+        >
+          <div
+            :id="'item_' + item._id"
+            :class="['px-1 py-2 rounded leading-4 break-normal text-left outline-none', {
+              'font-medium text-coreSecondaryText': !isSelectable(item),
+              'bg-coreBgHover': focusedItem?._id === item._id || ((multiple ? value && value.includes(item._id) : item._id === value?._id) && !focusedItem?._id),
+              'hover:bg-coreBgHover cursor-pointer ': isSelectable(item),
+              'text-corePrimary font-medium': multiple ? value && value.includes(item._id) : item._id === value?._id
+            }]"
+            role="button"
+            tabindex="1"
+            @click="() => handleSelect(item, treeCount)"
+            @keydown.up.prevent="handleNavigate('prev')"
+            @keydown.down.prevent="handleNavigate('next')"
+            @keydown.enter.prevent="handleSelect(item, treeCount)"
+            @mouseenter.prevent="handleNavigate('focus', item)"
+          >
+            {{ item.name }}
+          </div>
+          <!-- <el-collapse-transition>
+            <div v-if="expandedItems.includes(item._id)" class="w-full flex justify-end pb-1 gap-1 px-2 mb-[2px]">
+              <div @click.stop="() => $emit('select', item, treeCount)" class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText">
+                <i :class="['el-icon-check duration-200']"></i>
+                Сонгох
+              </div>
+              <div @click.stop="() => handleLoadChildren(item, treeCount)" class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText">
+                <i :class="['el-icon-caret-bottom duration-200', item.expand ? 'rotate-0' : '-rotate-90']"></i>
+                {{ item.expand ? 'Хураах' : 'Задлах' }}
+              </div>
+              <div @click.stop="() => expandedItems = []" class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText">
+                <i :class="['el-icon-close']"></i>
+              </div>
+            </div>
+          </el-collapse-transition> -->
+        </div>
+      </div>
+      <el-collapse-transition>
+        <core-select-group-item
+          v-if="item.expand && !item.loading && item.list.length > 0"
+          :tree-count="treeCount + 1"
+          :list="item.list"
+          :value="value"
+          :multiple="multiple"
+          :col_field="col_field"
+          :focused-item="focusedItem"
+          :table_name="table_name"
+          @load="($event, $eventTreeCount) => handleLoadChildren($event, $eventTreeCount)"
+          @navigate="handleNavigate"
+          @select="($event, $eventTreeCount) => $emit('select', $event, $eventTreeCount)"
+          @select-checkbox="($event, $eventTreeCount) => $emit('select-checkbox', $event, $eventTreeCount)"
+        />
+        <div v-else-if="item.expand && !item.loading && item.list.length === 0" class="text-center text-coreSecondaryText">
+          Өгөгдөл байхгүй {{ item.expand }}
+        </div>
+      </el-collapse-transition>
+    </li>
+  </ul>
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  name: 'CoreSelectGroupItem',
+  props: {
+    list: { type: Array, default: () => { return [] } },
+    value: { type: [String, Array, Object], default: null },
+    treeCount: { type: Number, default: 0 },
+    multiple: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    focusedItem: { type: Object, default: null },
+    table_name: { type: String, default: '' }
+  },
+  data () {
+    return {
+      expandedItems: []
+    }
+  },
+  computed: {
+    isSelectableParent () {
+      return ['parent_id', 'resolution_org_id'].includes(this.col_field) || ['ref_reg_types'].includes(this.table_name)
+    }
+  },
+  watch: {
+    focusedItem (val) {
+      this.$nextTick(() => {
+        const item = document.getElementById('item_' + val?._id)
+        item?.focus()
+      })
+    }
+  },
+  methods: {
+    handleNavigate ($event, item) {
+      this.$emit('navigate', $event, item)
+    },
+    handleLoadChildren (item, treeCount) {
+      this.$emit('load', item, treeCount)
+    },
+    handleSelectCheckbox (item, treeCount) {
+      this.$emit('select-checkbox', item, treeCount)
+    },
+    isSelectable (item) {
+      return !item.hasChildren || (item.hasChildren && this.isSelectableParent && get(item, 'type_id.code') !== '999')
+    },
+    handleSelect (item, treeCount) {
+      if (!this.isSelectable(item)) {
+        return
+      }
+      this.$emit('select', item, treeCount)
+      // if (item.hasChildren && !item.expand) {
+      //   const index = this.expandedItems.indexOf(item._id)
+      //   if (index > -1) {
+      //     this.expandedItems.splice(item._id, 1)
+      //   }
+      //   this.expandedItems = [item._id]
+      // } else {
+      //   this.$emit('select', item, treeCount)
+      // }
+    }
+  }
+}
+</script>
+<style>
+.border-top-half::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-left: 1px solid #90939999;
+  /* border-left: 1px solid #DCDFE6; */
+}
+.border-top-half:last-child::before {
+  height: 18px;
+}
+</style>

package/comps/CoreSelectGroupList.vue

@@ -0,0 +1,386 @@
+<template>
+  <div v-if="loading" class="py-4 px-4 flex text-coreSecondaryText items-center">
+    <i class="el-icon-loading pr-1" />
+    <div class="text-sm px-1">
+      Түр хүлээнэ үү..
+    </div>
+  </div>
+  <div v-else-if="list.length" :class="['py-2 overflow-y-auto', {'h-80': !autoHeight}]">
+    <core-select-group-item
+      :list="list"
+      :value="value"
+      :multiple="multiple"
+      :col_field="col_field"
+      :focused-item="focusedItem"
+      :table_name="table_name"
+      @navigate="handleNavigate"
+      @load="handleLoad"
+      @select="handleSelect"
+      @select-checkbox="handleSelectCheckbox"
+    />
+  </div>
+  <div v-else>
+    <el-empty description="Хайлтанд утга олдсонгүй" :image-size="100" />
+  </div>
+</template>
+<script>
+import { get } from 'lodash'
+import { getTriggerFields } from '../utils/data-helper'
+export default {
+  name: 'CoreSelecGroupList',
+  props: {
+    value: { type: [String, Array, Object], default: () => { return null } },
+    projectId: { type: [String, Number], default: '5' },
+    table_name: { type: String, default: 'hrm_organizations' },
+    ref_column: { type: String, default: 'name,parent_id' },
+    size: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    visible: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    autoHeight: { type: Boolean, default: false },
+    col_field: { type: String, default: null },
+    trigger_fields: { type: String, default: null },
+    searchText: { type: String, default: null },
+    parentFocusedItem: { type: Object, default: () => { return null } }
+  },
+  data () {
+    return {
+      list: [],
+      loading: false,
+      item: null,
+      timeout: 0,
+      searchTimeout: 0,
+      cancel: null
+    }
+  },
+  computed: {
+    focusedItem: {
+      get () { return this.parentFocusedItem },
+      set (val) { this.$emit('update:parentFocusedItem', val) }
+    },
+    // itemName () {
+    //   return this.value ? this.item?.name : null
+    // },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  watch: {
+    visible (val) {
+      this.refresh()
+    },
+    modelValue () {
+      // this.getItem()
+    },
+    searchText () {
+      this.focusedItem = null
+      this.list = []
+      this.refresh()
+      // clearTimeout(this.searchTimeout)
+      // this.searchTimeout = setTimeout(() => {
+      //   this.list = []
+      //   this.refresh()
+      // }, 1000)
+    }
+  },
+  mounted () {
+    // this.getItem()
+    this.refresh()
+  },
+  methods: {
+    setLoading (val) {
+      this.loading = val
+    },
+    handleNavigate (type, focusItem) {
+      const next = (list) => {
+        if (!this.focusedItem) {
+          // If no item is selected, start with the first item in the list
+          this.focusedItem = list[0]
+          return
+        }
+
+        if (!this.focusedItem.hasChildren) {
+          // If the selected item has no children, move to the next sibling
+          const index = list.findIndex(c => c._id === this.focusedItem._id)
+          if (index >= 0 && index < list.length - 1) {
+            this.focusedItem = list[index + 1]
+            return
+          } else {
+            const getNextItem = (parentId) => {
+              const parentList1 = getCurrentList(this.list, parentId)
+              if (parentList1) {
+                const parentIndex1 = parentList1.findIndex(c => c._id === parentId)
+                if (parentIndex1 >= 0 && parentIndex1 < parentList1.length - 1) {
+                  return parentList1[parentIndex1 + 1]
+                } else if (parentIndex1 > 0) {
+                  const item2 = parentList1[parentIndex1]
+                  return getNextItem(item2.parent_id)
+                }
+              }
+            }
+            const item1 = getNextItem(this.focusedItem?.parent_id)
+            if (item1) {
+              this.focusedItem = item1
+            }
+          }
+        } else if (this.focusedItem.list && this.focusedItem.list.length > 0) {
+          // If the selected item has children, navigate to the first child
+          this.focusedItem = this.focusedItem.list[0]
+          return
+        }
+
+        // If no more siblings, move up to the parent's context
+        const parentList = getParentList(this.list, this.focusedItem.parent_id)
+        if (parentList) {
+          const parentIndex = parentList.findIndex(c => c._id === this.focusedItem?.parent_id)
+          if (parentIndex >= 0 && parentIndex < parentList.length - 1) {
+            this.focusedItem = parentList[parentIndex + 1]
+          }
+        }
+      }
+
+      const prev = (list) => {
+        if (!this.focusedItem) {
+          // If no item is selected, start with the last item in the list
+          this.focusedItem = list[list.length - 1]
+          return
+        }
+
+        const index = list.findIndex(c => c._id === this.focusedItem._id)
+        if (index > 0) {
+          // Move to the previous sibling
+          const getLastItem = (item) => {
+            if (item.hasChildren && item.list.length > 0) {
+              const lastItem = item.list[item.list.length - 1]
+              return getLastItem(lastItem)
+            } else {
+              return item
+            }
+          }
+          const item = list[index - 1]
+          this.focusedItem = getLastItem(item)
+          return
+        }
+
+        // If it's the first item, move up to the parent context
+        const parentList = getParentList(this.list, this.focusedItem?.parent_id)
+        if (parentList) {
+          const parentIndex = parentList.findIndex(c => c._id === this.focusedItem?.parent_id)
+          if (parentIndex > 0) {
+            const prevSibling = parentList[parentIndex - 1]
+            if (prevSibling.hasChildren && prevSibling.list?.length > 0) {
+              // Move to the last child of the previous sibling
+              let lastChild = prevSibling
+              while (lastChild.hasChildren && lastChild.list?.length > 0) {
+                lastChild = lastChild.list[lastChild.list.length - 1]
+              }
+              this.focusedItem = lastChild
+            } else {
+              this.focusedItem = prevSibling
+            }
+          } else {
+            const parentList1 = getCurrentList(this.list, this.focusedItem.parent_id)
+            if (parentList1) {
+              const parentItem1 = parentList1.find(c => c._id === this.focusedItem.parent_id)
+              if (parentItem1) {
+                this.focusedItem = parentItem1
+              }
+            }
+          }
+        }
+      }
+
+      const getParentList = (list, parentId) => {
+        if (!parentId) {
+          return this.list
+        }
+        for (const item of list) {
+          if (item._id === parentId) {
+            return item.list
+          } else if (item.hasChildren && item.list && item.list.length > 0) {
+            const foundList = getParentList(item.list, parentId)
+            if (foundList) {
+              return foundList
+            }
+          }
+        }
+        return null
+      }
+      const getCurrentList = (list = this.list, parentId) => {
+        if (!parentId) {
+          return this.list
+        }
+        for (const item of list) {
+          if (item._id === parentId) {
+            return list
+          } else if (item.hasChildren && item.list && item.list.length > 0) {
+            const foundList = getCurrentList(item.list, parentId)
+            if (foundList) {
+              return foundList
+            }
+          }
+        }
+        return null
+      }
+
+      if (type === 'next') {
+        const parentList = getParentList(this.list, this.focusedItem?.parent_id)
+        if (parentList) {
+          next(parentList)
+        }
+      } else if (type === 'prev') {
+        const parentList = getParentList(this.list, this.focusedItem?.parent_id)
+        if (parentList) {
+          prev(parentList)
+        }
+      } else if (type === 'focus') {
+        this.focusedItem = focusItem
+      }
+    },
+    handleSelect (item, treeCount) {
+      this.$emit('select', item, treeCount)
+    },
+    handleSelectCheckbox (item, treeCount) {
+      this.$emit('select-checkbox', item, treeCount)
+    },
+    async handleLoad (item) {
+      try {
+        if (item.loading || !item.hasChildren) {
+          return
+        }
+        item.loading = true
+        if (!item.expand && item.list.length === 0) {
+          item.list = await this.getList(item)
+          for (const r of item.list) {
+            await this.handleLoad(r)
+          }
+        }
+        if (item.list.length) {
+          item.expand = !item.expand
+        }
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        item.loading = false
+      }
+    },
+    async refresh () {
+      try {
+        if (!this.visible) {
+          return
+        }
+        clearTimeout(this.searchTimeout)
+        // if (this.loading || ) {
+        //   return
+        // }
+        if (this.list.length > 0) {
+          return
+        }
+        this.loading = true
+        this.list = await this.getList()
+        if (!this.searchText) {
+          for (const r of this.list) {
+            await this.handleLoad(r)
+          }
+        }
+      } 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: 'string', op: 'eq' } })),
+    //         fields: this.ref_column.split(','),
+    //         isHasChildren: true
+    //       }
+    //     })
+    //     if (list.length > 0) {
+    //       this.item = list[0]
+    //     }
+    //   } catch (err) {
+    //     this.$showError(err)
+    //   }
+    // },
+    async getList (row) {
+      let fields = null
+      if (this.ref_column) {
+        fields = this.ref_column
+      }
+      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 (!newValue) {
+            return
+          } else if (typeof newValue === 'object' && Array.isArray(newValue)) {
+            const vals = newValue.map(c => c._id)
+            triggerSearch[localKey] = { val: vals, t: type, op: operation }
+          } else {
+            const val = typeof newValue === 'object' ? newValue[this.pk_field_name] : newValue
+            triggerSearch[localKey] = { val, t: type, op: operation }
+          }
+        } else {
+          triggerSearch[localKey] = { val: localVal, t: type, op: operation }
+        }
+      }
+      const search = Object.assign({ ...triggerSearch })
+      if (row) {
+        search.parent_id = { val: row._id, t: 'number', op: 'eq' }
+      } else if (this.searchText?.trim()) {
+        search.name = { val: this.searchText?.trim(), t: 'string', op: 'like' }
+        if (this.table_name === 'hrm_organizations') {
+          search['type_id.code'] = { val: '999', t: 'string', op: 'ne' }
+        }
+      } else if (!search.root_id) {
+        search.parent_id = { val: 'null', t: 'number', op: 'eq' }
+      } else {
+        search.parent_id = { val: search.root_id.val, t: 'number', op: 'eq' }
+      }
+      const that = this
+      const CancelToken = this.$axios.CancelToken
+      if (that.cancel) {
+        that.cancel()
+      }
+      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,
+          isHasChildren: true
+        },
+        cancelToken: new CancelToken(function executor (c) {
+          that.cancel = c
+        })
+      })
+      this.cancel = null
+      return list.map((c) => {
+        c.loading = false
+        c.expand = false
+        c.list = []
+        if (!row) {
+          delete c.parent_id
+        }
+        if (this.searchText?.trim()) {
+          c.hasChildren = false
+        }
+        return c
+      })
+    }
+  }
+}
+</script>