eztech-core-components 1.0.0

package/comps/Custom/UserRoles.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="w-full px-4 pt-2 pb-4">
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :border="false"
+      class="w-full custom-table"
+      :empty-text="loading ? 'Түр хүлээнэ үү..' : 'Албаны мэдээлэл оруулна уу.'"
+    >
+      <el-table-column label="№" type="index">
+        <template slot="header" slot-scope="scope">
+          <div class="flex h-full items-center justify-center">
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex h-full items-center justify-center">
+            {{ scope.$index + 1 }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="Албан тушаал" prop="position_id.name" width="240">
+        <template slot="header" slot-scope="scope">
+          <div class="flex h-full items-center justify-center">
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex h-full items-center leading-3 break-words whitespace-normal">
+            {{ get(scope.row, scope.column.property) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="Эрхийн бүлгүүд">
+        <template slot="header" slot-scope="scope">
+          <div class="flex h-full items-center justify-center">
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <div class="flex h-full items-center justify-center">
+            <core-select
+              :value="roles.filter(c => c.user_id._id === scope.row._id).map(c => c.role_group_id)"
+              :temp="temp"
+              table_name="role_groups"
+              project-id="5"
+              :col_multiple="true"
+              :disabled="!isSetRole"
+              ref_column="name"
+              :trigger_fields="roleTriggerFields"
+              @input="($event) => handleChangeRole(scope.row._id, $event)"
+            />
+            <div class="w-5 pl-2">
+              <i v-if="loadingRoles.includes(scope.row._id)" class="el-icon-loading text-coreSecondaryText" />
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import { get } from 'lodash'
+export default {
+  props: {
+    temp: { type: Object, default: () => { return null } },
+    level: { type: Object, default: () => { return null } }
+  },
+  data () {
+    return {
+      list: [],
+      roles: [],
+      loading: false,
+      loadingRoles: []
+    }
+  },
+  computed: {
+    isSetRole () {
+      return this.level?.actions?.some(c => c.code === 'SET_ROLE')
+    },
+    isAdmin () {
+      return this.level?.is_admin
+    },
+    roleTriggerFields () {
+      if (this.isAdmin) {
+        return null
+      }
+      return 'is_admin:false:boolean:eq'
+    }
+  },
+  watch: {
+    'temp._id' () {
+      this.getList()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    get,
+    async handleChangeRole (userId, roles) {
+      try {
+        if (this.loadingRoles.includes(userId)) {
+          return
+        }
+        this.loadingRoles.push(userId)
+        const checkItem = roles.find(c => !this.roles.some(k => k.role_group_id._id === c._id && k.user_id._id === userId))
+        if (checkItem) {
+          const item = { employee_id: this.temp._id, user_id: { _id: userId }, role_group_id: checkItem }
+          this.roles.push(item)
+          const { data } = await this.$axios.post('5/hrm_user_role_groups', item)
+          item._id = data._id
+          item.tid = data.tid
+        } else {
+          const removeIndex = this.roles.findIndex(c => c && c.user_id._id === userId && !roles.some(k => k._id === c.role_group_id._id))
+          if (removeIndex > -1) {
+            const itemId = this.roles[removeIndex]._id
+            const itemTid = this.roles[removeIndex].tid
+            this.roles.splice(removeIndex, 1)
+            await this.$axios.delete(`5/hrm_user_role_groups/${itemId}`, {
+              data: { tid: itemTid }
+            })
+          }
+        }
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        const index = this.loadingRoles.indexOf(userId)
+        if (index > -1) {
+          this.loadingRoles.splice(index, 1)
+        }
+      }
+    },
+    async getList () {
+      try {
+        this.roles = []
+        this.list = []
+        if (!this.temp || !this.temp._id) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get('list/5/hrm_users', {
+          params: {
+            search: JSON.stringify({
+              employee_id: { op: 'eq', val: this.temp._id, t: 'number' },
+              end_date: { op: 'eq', val: 'null', t: 'date' }
+            })
+          }
+        })
+        if (data.length > 0) {
+          const { data: roles } = await this.$axios.get('list/5/hrm_user_role_groups', {
+            params: {
+              search: JSON.stringify({
+                user_id: { op: 'in', val: data.map(c => c._id).join(','), t: 'number' }
+              })
+            }
+          })
+          this.roles = roles
+          this.list = data
+        }
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/Custom/UserSelect.vue

@@ -0,0 +1,423 @@
+<template>
+  <span v-if="type === 'table'">{{ itemName }} {{ itemPositionName }}</span>
+  <el-popover
+    v-else
+    :value="visible"
+    placement="bottom-start"
+    :width="!isRoleUsers ? '512' : '300'"
+    popper-class="popper-notification"
+    :trigger="isMultiple ? 'focus' : 'focus'"
+    :disabled="disabled"
+    @show="handleChange(true)"
+    @hide="handleChange(false)"
+  >
+    <div class="h-80">
+      <div class="flex flex-row h-full overflow-hidden">
+        <div v-if="!isRoleUsers" class="w-64 border-r">
+          <core-select-tree-list
+            v-model="orgId"
+            :visible.sync="visible"
+            project-id="5"
+            table_name="hrm_organizations"
+            ref_column="name,parent_id"
+            :selected-values="selectedValues"
+            :size="size"
+            :disabled="disabled"
+            @select="handleSelectOrg"
+          />
+        </div>
+        <div class="flex-1 flex flex-col gap-2 p-2 h-full overflow-auto relative">
+          <!-- <div v-if="isMultiple">
+            <el-input
+              v-model="searchText"
+              :size="size"
+              placeholder="Хайх.."
+              clearable
+              @keydown.native.enter="handleSearch"
+            />
+          </div> -->
+          <div
+            v-loading="loading"
+            class="flex-1 flex flex-col gap-2 h-full overflow-auto relative"
+          >
+            <transition name="el-fade-in">
+              <div
+                v-if="!loading && list.length === 0"
+                class="left-0 top-0 h-full w-full py-4 text-center font-medium text-coreSecondaryText break-normal absolute"
+              >
+                <div v-if="!!orgId">
+                  Албан хаагч<br>бүртгээгүй байна!.
+                </div>
+                <div v-else>
+                  Бүтэц<br>сонгоно уу!.
+                </div>
+              </div>
+            </transition>
+            <!-- <transition-group name="el-fade-in"> -->
+            <div
+              v-for="item1 of list"
+              :key="item1._id"
+              :class="['hover:bg-coreBgHover cursor-pointer rounded px-2 py-1 leading-3 flex flex-col gap-1', {
+                'font-medium bg-coreBgHover': selectedValues.some(c => c._id === item1._id),
+              }]"
+              @click="() => handleSelect(item1)"
+            >
+              <div>
+                <span v-if="item1.employee_id.surname">{{ item1.employee_id.surname.slice(0, 1) }}.</span>
+                <span>{{ item1.employee_id.given_name }}</span>
+              </div>
+              <div class="text-xs text-coreSecondaryText leading-3 whitespace-normal break-normal">
+                {{ item1.position_id.name }}
+              </div>
+              <div v-if="item1.organization_id" class="text-xs text-coreSecondaryText leading-3 whitespace-normal break-normal">
+                {{ item1.organization_id.name }}
+              </div>
+            </div>
+            <!-- </transition-group> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="isMultiple"
+      slot="reference"
+      class="flex flex-col items-start justify-start border border-coreInputBorder bg-coreBgInput px-1 rounded gap-1 flex-wrap min-h-8 cursor-pointer w-full"
+      tabindex="11"
+    >
+      <div
+        v-for="item1 in modelValue"
+        :key="item1._id"
+        class="flex flex-row items-start justify-start bg-white border rounded text-xs leading-3 gap-1 pl-1 pr-1 p-1 max-w-64"
+      >
+        <core-image class="w-[28px] h-8 rounded bg-coreBgInput border" :src="item1.employee_id.image?._id || item1.employee_id.image" />
+        <div class="flex flex-col gap-1 flex-1">
+          <div class="flex flex-row w-full items-start justify-start gap-2 flex-1">
+            <div class="flex-1">
+              <span class="text-coreRegularText font-medium">{{ item1.employee_id.full_name }}</span>
+              <span v-if="item1.position_id" class="font-medium text-coreSecondaryText">- {{ item1.position_id.name }}</span>
+            </div>
+            <div v-if="!disabled" class="rounded-full bg-gray-500/40 p-[1px] hover:bg-gray-300 cursor-pointer" @click="() => handleRemove(item1)">
+              <i class="el-icon-close text-xs" />
+            </div>
+          </div>
+          <div v-if="item1.organization_id">
+            {{ item1.organization_id.name }}
+          </div>
+        </div>
+      </div>
+      <input v-if="!disabled" v-model="searchText" placeholder="Хайх..." class="outline-0 bg-transparent flex-1 border-1 px-2 w-full">
+      <!-- <el-button class="justify-self-end self-end" icon="el-icon-plus" circle size="small"></el-button> -->
+    </div>
+    <el-input
+      v-else
+      slot="reference"
+      v-model="itemName"
+      class="focus:text-coreSecondaryText"
+      placeholder="Сонгох.."
+      :size="size"
+      :disabled="disabled"
+      autocomplete="off"
+      clearable
+      @clear="modelValue = null; visible = false;"
+      @keydown.native.enter="handleSearch"
+    />
+  </el-popover>
+</template>
+<script>
+import { get } from 'lodash'
+import { getFormBoolean, getTriggerFields } from '../../utils/data-helper'
+export default {
+  name: 'CustomUserSelect',
+  props: {
+    type: { type: String, default: 'input' },
+    value: { type: [String, Object, Array], default: 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 },
+    col_field: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    parentTemp: { type: Object, default: null },
+    col_multiple: {
+      type: [Boolean, Number, String],
+      default: false
+    },
+    trigger_fields: { type: String, default: null },
+    pk_field_name: { type: String, default: null }
+  },
+  data () {
+    return {
+      visible: false,
+      list: [],
+      loading: false,
+      orgId: null,
+      org: null,
+      item: null,
+      timeout: 0,
+      cancel: null,
+      searchText: null,
+      searchTimer: 0
+    }
+  },
+  computed: {
+    isRegUsers () {
+      return this.col_field?.includes('reg_user')
+    },
+    isExpertUsers () {
+      return this.col_field?.includes('expert')
+    },
+    isFirearmExpert () {
+      return this.col_field?.includes('firearm_expert')
+    },
+    isGrantExpert () {
+      return this.col_field?.includes('grant_expert')
+    },
+    isPsychologists () {
+      return this.col_field?.includes('psychologist')
+    },
+    isRegConfirmUser () {
+      return this.col_field?.includes('reg_confirm_user_id')
+    },
+    isRoleUsers () {
+      return this.isRegUsers || this.isExpertUsers || this.isPsychologists || this.isFirearmExpert || this.isGrantExpert || this.isRegConfirmUser
+    },
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    itemName: {
+      get () {
+        if (this.searchText !== null) {
+          return this.searchText
+        }
+        if (this.isMultiple) {
+          if (!this.value) {
+            return ''
+          }
+          return this.value.map((c) => {
+            const fullName = get(c, 'employee_id.full_name')
+            if (fullName) {
+              return fullName
+            }
+            const surname = get(c, 'employee_id.surname')
+            const givenName = get(c, 'employee_id.given_name')
+            let name = ''
+            if (surname) {
+              name += surname.slice(0, 1) + '.'
+            }
+            return name + givenName
+          }).join(', ')
+        }
+        if (!this.value) {
+          return ''
+        }
+        // if (!this.item) {
+        //   return ''
+        // }
+        let name = ''
+        if (this.value.employee_id.full_name) {
+          return this.value.employee_id.full_name
+        }
+        if (this.value.employee_id.surname) {
+          name += this.value.employee_id.surname.slice(0, 1) + '.'
+        }
+        return name + (this.value.employee_id.given_name || '')
+      },
+      set (val) {
+        this.searchText = val
+      }
+    },
+    itemPositionName () {
+      if (!this.item) {
+        return null
+      }
+      return ` - ${this.item.position_id.name}`
+    },
+    modelValue: {
+      get () {
+        if (this.isMultiple && !this.value) {
+          return []
+        }
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedValues () {
+      if (!this.value) {
+        return []
+      }
+      return this.isMultiple ? this.value : [this.value]
+    }
+  },
+  watch: {
+    visible () {
+      this.searchText = null
+    },
+    searchText () {
+      this.loading = true
+      clearTimeout(this.searchTimer)
+      this.searchTimer = setTimeout(this.handleSearch, 300)
+    }
+  },
+  mounted () {
+    // if (this.type === 'table') {
+    // this.getItem()
+    // }
+  },
+  methods: {
+    handleKeydownSearchDiv ($event) {
+      if ($event.key === 'Backspace') {
+        this.searchText = this.searchText.slice(0, -1)
+      } else if ($event.key.length === 1) {
+        this.searchText = (this.searchText || '') + $event.key
+      }
+    },
+    async getItem () {
+      try {
+        if (!this.modelValue || this.item) {
+          return
+        }
+        const id = typeof this.value === 'object' ? this.value?._id : this.value
+        if (!id) {
+          return
+        }
+        const { data: item } = await this.$axios.get('one/5/hrm_users', {
+          process: false,
+          params: {
+            search: JSON.stringify({
+              _id: { val: id, t: 'number', op: 'eq' }
+            })
+          }
+        })
+        if (item) {
+          this.item = item
+          if (!this.list.some(c => c._id === item._id)) {
+            this.list.unshift({ ...item })
+          }
+        }
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    handleRemove (item) {
+      this.handleSelect(item)
+    },
+    handleSelect (item) {
+      // this.modelValue = item._id
+      if (this.isMultiple) {
+        const vals = [...this.modelValue]
+        const ind = vals.findIndex(c => c._id === item._id)
+        if (ind > -1) {
+          vals.splice(ind, 1)
+        } else {
+          vals.push(item)
+        }
+        this.modelValue = [...vals]
+      } else {
+        this.modelValue = item
+        this.item = item
+        this.visible = false
+      }
+      this.searchText = null
+    },
+    handleSelectOrg (item) {
+      if (item._id !== this.orgId) {
+        this.orgId = item._id
+        this.org = item
+        this.handleSearch()
+      }
+    },
+    handleChange (val) {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        if (!this.visible && val) {
+          if (this.isRoleUsers) {
+            this.handleSearch()
+          }
+        }
+        this.visible = val
+      }, 100)
+    },
+    async handleSearch () {
+      let isCancel = false
+      clearTimeout(this.searchTimer)
+      try {
+        this.loading = true
+        this.list = []
+        await this.getList()
+      } catch (err) {
+        isCancel = this.$axios.isCancel(err)
+        if (!isCancel) {
+          this.$showError(err)
+        }
+      } finally {
+        if (!isCancel) {
+          this.loading = false
+        }
+      }
+    },
+    async getList () {
+      const that = this
+      const CancelToken = this.$axios.CancelToken
+      if (that.cancel) {
+        that.cancel()
+      }
+      const orgId = this.orgId && typeof this.orgId === 'object' ? this.orgId._id : this.orgId
+      const triggerFields = getTriggerFields(this.trigger_fields)
+      const triggerSearch = {}
+      for (const { localKey, localVal, operation, type } of triggerFields) {
+        if (localKey === 'custom_user_sub_type_id') {
+          const newValues = get(this.parentTemp, 'forensics')
+          if (newValues?.length === 0) {
+            return
+          }
+          triggerSearch[localKey] = { val: newValues.map(c => c.sub_type_id), t: type, op: operation }
+        } else {
+          triggerSearch[localKey] = { val: localVal, t: type, op: operation }
+        }
+      }
+      if (this.isRoleUsers) {
+        const { data: list } = await this.$axios.get('forensic/role/users', {
+          process: false,
+          cancelToken: new CancelToken(function executor (c) {
+            that.cancel = c
+          }),
+          params: {
+            isExpertUsers: this.isExpertUsers,
+            isRegUsers: this.isRegUsers,
+            isFirearmExpert: this.isFirearmExpert,
+            isGrantExpert: this.isGrantExpert,
+            isPsychologists: this.isPsychologists,
+            isRegConfirmUser: this.isRegConfirmUser,
+            searchText: this.searchText,
+            search: JSON.stringify(triggerSearch)
+          }
+        })
+        this.list = list
+      } else {
+        const { data: list } = await this.$axios.get('list/5/hrm_users', {
+          process: false,
+          params: {
+            search: JSON.stringify({
+              organization_id: { val: orgId, t: 'number', op: 'eq' },
+              end_date: { val: 'null', t: 'date', op: 'eq' },
+              'employee_id.given_name': { val: this.searchText, t: 'string' }
+            }),
+            extraFields: 'employee_id.full_name'
+            // sorts: [{
+            //   prop: 'position_id.order_id.sort_order',
+            //   order: 'asc'
+            // }]
+          },
+          cancelToken: new CancelToken(function executor (c) {
+            that.cancel = c
+          })
+        })
+        this.list = list
+      }
+      this.cancel = null
+    }
+  }
+}
+</script>

package/comps/Custom/UserSkills.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="w-full pb-4 grid grid-cols-1 lg:grid-cols-2 gap-2">
+    <div v-for="item in skillTypes" :key="item._id" class="">
+      <div
+        v-if="item.is_active || list.some(c => c.skill_type_id === item._id)"
+        class="flex gap-4 items-center overflow-hidden"
+      >
+        <el-select
+          :value="getValue(item)"
+          size="mini"
+          class="w-28"
+          :disabled="!item.is_active"
+          @change="($event) => handleChange(item, $event)"
+        >
+          <el-option v-for="val in [0, 1, 2, 3]" :key="val" :label="val" :value="val" />
+        </el-select>
+        <div class="text-sm text-coreRegularText leading-3 flex-1">
+          {{ item.name }}
+        </div>
+        <i v-if="loadingTypes.includes(item._id)" class="el-icon-loading text-coreSecondaryText" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: { temp: { type: Object, default: () => { return null } } },
+  data () {
+    return {
+      list: [],
+      skillTypes: [],
+      loading: false,
+      loadingTypes: []
+    }
+  },
+  watch: {
+    'temp._id' () {
+      this.getList()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getValue (item) {
+      const r = this.list.find(c => c.skill_type_id._id === item._id)
+      return r?.rate_value
+    },
+    async handleChange (item, $event) {
+      try {
+        if (this.loadingTypes.includes(item._id)) {
+          return
+        }
+        this.loadingTypes.push(item._id)
+        let changedItem = this.list.find(c => c.skill_type_id._id === item._id)
+        if (changedItem) {
+          changedItem.rate_value = $event
+        } else {
+          changedItem = { employee_id: this.temp._id, skill_type_id: item, rate_value: $event }
+          this.list.push({ ...changedItem })
+        }
+        await this.$axios.post('5/hrm_employee_skill_types', { ...changedItem })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        const index = this.loadingTypes.indexOf(item._id)
+        if (index > -1) {
+          this.loadingTypes.splice(index, 1)
+        }
+      }
+    },
+    async getList () {
+      try {
+        this.skillTypes = []
+        this.list = []
+        if (!this.temp || !this.temp._id) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get('list/5/hrm_employee_skill_types', {
+          params: {
+            search: JSON.stringify({
+              employee_id: { op: 'eq', val: this.temp._id, t: 'number' }
+            })
+          }
+        })
+        const { data: skillTypes } = await this.$axios.get('list/5/ref_hrm_skill_types')
+        this.skillTypes = skillTypes
+        this.list = data
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>