eztech-core-components 1.0.0

package/comps/CoreSelectTree.vue

@@ -0,0 +1,183 @@
+<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-tree-list
+      v-model="modelValue"
+      :visible.sync="visible"
+      :project-id="projectId"
+      :table_name="table_name"
+      :ref_column="ref_column + ',parent_id'"
+      :size="size"
+      :disabled="disabled"
+      @select="handleSelect"
+    />
+    <el-input
+      slot="reference"
+      v-model="itemName"
+      class="focus:text-coreSecondaryText"
+      placeholder="Сонгох.."
+      :size="size"
+      :disabled="disabled"
+      clearable
+      @clear="modelValue = null; visible = false;"
+    />
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'CoreSelecTree',
+  props: {
+    value: { type: [String, Object], 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 },
+    disabled: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      visible: false,
+      list: [],
+      loading: false,
+      item: null,
+      timeout: 0,
+      searchText: '',
+      searchTimeout: 0
+    }
+  },
+  computed: {
+    itemName: {
+      get () {
+        if (this.searchText) {
+          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)
+      }
+    }
+  },
+  watch: {
+    // visible (val) {
+    //   if (val) {
+    //     this.refresh()
+    //   }
+    // },
+    // modelValue () {
+    //   this.getItem()
+    // }
+    searchText () {
+      clearTimeout(this.searchTimeout)
+      this.searchTimeout = setTimeout(this.refresh, 1000)
+    }
+  },
+  mounted () {
+    // this.getItem()
+    // this.refresh()
+  },
+  methods: {
+    handleChange (val) {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.visible = val
+      }, 100)
+    },
+    handleSelect (item) {
+      this.searchText = null
+      this.item = item
+      this.modelValue = { ...item }
+      // this.modelValue = item._id
+      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 { data: { list } } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+        process: false,
+        params: {
+          search: JSON.stringify(Object.assign({ parent_id: { val: row ? row._id : 'null', t: 'number', op: 'eq' } })),
+          // 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>

package/comps/CoreSelectTreeItem.vue

@@ -0,0 +1,129 @@
+<template>
+  <ul :class="['w-full', { 'pl-2 pr-[6px]': treeCount <= 1, 'pl-[16px] ': treeCount > 1 }]">
+    <li
+      v-for="item in list"
+      :key="item._id"
+      :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
+          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
+            :class="['px-1 py-2 rounded hover:bg-coreBgHover cursor-pointer leading-4 break-normal text-left', {
+              'font-medium': item.hasChildren,
+              'text-corePrimary': multiple ? value && value.includes(item._id) : item._id === value
+            }]"
+            @click="() => handleSelect(item, treeCount)"
+          >
+            {{ 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 class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText" @click.stop="() => $emit('select', item, treeCount)">
+                <i :class="['el-icon-check duration-200']" />
+                Сонгох
+              </div>
+              <div class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText" @click.stop="() => handleLoadChildren(item, treeCount)">
+                <i :class="['el-icon-caret-bottom duration-200', item.expand ? 'rotate-0' : '-rotate-90']" />
+                {{ item.expand ? 'Хураах' : 'Задлах' }}
+              </div>
+              <div class="border rounded py-[2px] px-1 bg-white cursor-pointer text-coreRegularText text-xs hover:text-corePrimary active:text-coreRegularText" @click.stop="() => expandedItems = []">
+                <i :class="['el-icon-close']" />
+              </div>
+            </div>
+          </el-collapse-transition>
+        </div>
+      </div>
+      <el-collapse-transition>
+        <core-select-tree-item
+          v-if="item.expand && !item.loading && item.list.length > 0"
+          :tree-count="treeCount + 1"
+          :list="item.list"
+          :value="value"
+          :multiple="multiple"
+          @load="($event, $eventTreeCount) => handleLoadChildren($event, $eventTreeCount)"
+          @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">
+          Өгөгдөл байхгүй
+        </div>
+      </el-collapse-transition>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'CoreSelectTreeItem',
+  props: {
+    list: { type: Array, default: () => { return [] } },
+    value: { type: [String, Array, Object], default: null },
+    treeCount: { type: Number, default: 0 },
+    multiple: { type: Boolean, default: false },
+    selectedValues: { type: Array, default: () => { return [] } }
+  },
+  data () {
+    return {
+      expandedItems: []
+    }
+  },
+  methods: {
+    handleLoadChildren (item, treeCount) {
+      this.$emit('load', item, treeCount)
+    },
+    handleSelectCheckbox (item, treeCount) {
+      this.$emit('select-checkbox', item, treeCount)
+    },
+    handleSelect (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/CoreSelectTreeList.vue

@@ -0,0 +1,149 @@
+<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 :class="['py-2 px-1 overflow-y-auto', {'h-80': !autoHeight}]">
+    <core-select-tree-item
+      :list="list"
+      :value="value"
+      :multiple="multiple"
+      :selected-values="selectedValues"
+      @load="handleLoad"
+      @select="handleSelect"
+      @select-checkbox="handleSelectCheckbox"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CoreSelectTreeList',
+  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 },
+    selectedValues: { type: Array, default: () => { return [] } }
+  },
+  data () {
+    return {
+      list: [],
+      loading: false,
+      item: null,
+      timeout: 0
+    }
+  },
+  computed: {
+    // 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()
+    }
+  },
+  mounted () {
+    // this.getItem()
+    this.refresh()
+  },
+  methods: {
+    handleSelect (item, treeCount) {
+      this.$emit('select', item, treeCount)
+    },
+    handleSelectCheckbox (item, treeCount) {
+      this.$emit('select-checkbox', item, treeCount)
+    },
+    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: '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 { data: { list } } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+        process: false,
+        params: {
+          search: JSON.stringify({ parent_id: { val: row ? row._id : 'null', t: 'number', op: 'eq' } }),
+          // selectedId: String(this.value),
+          fields,
+          isHasChildren: true
+        }
+      })
+      return list.map((c) => {
+        c.loading = false
+        c.expand = false
+        c.list = []
+        return c
+      })
+    }
+  }
+}
+</script>

package/comps/CoreSelectYear.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-select v-model="modelValue" placeholder="Select year">
+    <el-option
+      v-for="year in options"
+      :key="year"
+      :label="year"
+      :value="year"
+    />
+  </el-select>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Number, default: 0 },
+    min: { type: Number, default: 2020 },
+    max: {
+      type: Number,
+      default () {
+        return parseInt(this.$moment().format('YYYY'))
+      }
+    }
+  },
+  computed: {
+    options () {
+      const years = []
+      for (let y = this.max; y >= this.min; y--) {
+        years.push(y)
+      }
+      return years
+    },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreSignCertificate.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-if="!!parentRow?._id">
+    <el-button v-if="isSkipSign" :loading="uploadingPdf" :disabled="isDisabledButton" :icon="'el-icon-document'" plain type="primary" @click="handleSkipSignPdf">
+      PDF Файлруу хөрвүүлэх
+    </el-button>
+    <el-button v-else :disabled="isDisabledButton" :loading="uploadingPdf" :icon="'el-icon-key'" type="success" plain @click="handleSignPdf">
+      Тоон гарын үсгээр баталгаажуулах
+    </el-button>
+    <sign-dialog
+      v-if="visibleSign"
+      ref="signDialog"
+      :visible.sync="visibleSign"
+      :dialog-title="'Тоон гарын үсэг зурах'"
+      @onCertificateSelect="handleBase64Response"
+      @onSignedPdf="handleSignedPdf"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { get } from 'lodash'
+import { base64ToBlob, blobToBase64 } from '../utils/helpers'
+export default {
+  name: 'CoreSignCertificatePdf',
+  props: {
+    parentRow: { type: Object, default: () => { return null } },
+    pdfUrls: { type: Array, default: () => { return [] } }, // id, filename, url, pageSize/A4,A5/
+    isSkipSign: { type: Boolean, default: false },
+    uploadUrl: { type: String, default: 'upload/signed/pdf' },
+    ptoken: { type: String, default: null }
+  },
+  data () {
+    return {
+      visibleSign: false,
+      uploadingPdf: false,
+      pdfFiles: []
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env', 'unsavedChanges']),
+    ...mapGetters('user', ['token']),
+    isDisabledButton () { return this.pdfFiles.length === this.pdfUrls.length }
+  },
+  methods: {
+    handleSignPdf () {
+      this.pdfFiles = []
+      this.visibleSign = true
+    },
+    async handleSignedPdf (pdkId, responseBase64, filename, subject) {
+      try {
+        if (this.unsavedChanges) {
+          this.$customError('Та эхлээд өөрчлөлтийг хадгална уу')
+        }
+        const blob = base64ToBlob(responseBase64, 'application/pdf')
+        const formData = new FormData()
+        formData.append('file', blob, filename)
+        const headers = { 'Content-Type': 'multipart/form-data' }
+        if (this.ptoken) {
+          headers.Authorization = `Bearer ${this.ptoken}`
+        } else if (this.token) {
+          headers.Authorization = `Bearer ${this.token}`
+        }
+        const instance = this.$axios.create({ baseURL: this.env.baseUrl, headers })
+        const { data } = await instance.post(`file/${this.uploadUrl}`, formData)
+        this.pdfFiles.push(data)
+        const index = this.pdfUrls.findIndex(c => c.filename === filename)
+        const nextPdfUrl = get(this.pdfUrls, `[${index + 1}]`)
+        if (nextPdfUrl) {
+          const responsePdf = (await this.$axios.get(nextPdfUrl.url, { responseType: 'blob', params: { pageSize: nextPdfUrl.pageSize, subject } }))
+          const base64String = await blobToBase64(responsePdf.data)
+          this.$refs.signDialog.handleSignRequest(pdkId, null, null, base64String, nextPdfUrl.filename, nextPdfUrl.id, subject)
+        } else {
+          this.$showSuccess('Тоон гарын үсэг амжилттай зурлаа.')
+          this.visibleSign = false
+          this.$emit('success', this.pdfFiles)
+        }
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    async handleBase64Response (response) {
+      try {
+        const pdfUrl = this.pdfUrls[0]
+        const responsePdf = (await this.$axios.get(pdfUrl.url, { responseType: 'blob', params: { pageSize: pdfUrl.pageSize, subject: response.subject } }))
+        const base64String = await blobToBase64(responsePdf.data)
+        this.$refs.signDialog.handleSignRequest(response.pkId, null, null, base64String, pdfUrl.filename, pdfUrl.id, response.subject)
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    async handleSkipSignPdf () {
+      try {
+        if (this.unsavedChanges) {
+          this.$customError('Та эхлээд өөрчлөлтийг хадгална уу')
+        }
+        if (this.uploadingPdf) {
+          return
+        }
+        this.uploadingPdf = true
+        for (const r of this.pdfUrls) {
+          await this.handleSkipPdf(r)
+        }
+        this.$showSuccess('Амжилттай хөрвүүллээ.')
+        this.$emit('success', this.pdfFiles)
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.uploadingPdf = false
+      }
+    },
+    async handleSkipPdf (pdfUrl) {
+      const responsePdf = (await this.$axios.get(pdfUrl.url, { responseType: 'blob', params: { pageSize: pdfUrl.pageSize, subject: {} } }))
+      const base64String = await blobToBase64(responsePdf.data)
+      const blob = base64ToBlob(base64String, 'application/pdf')
+      const formData = new FormData()
+      formData.append('file', blob, pdfUrl.filename)
+      const headers = { 'Content-Type': 'multipart/form-data' }
+      if (this.ptoken) {
+        headers.Authorization = `Bearer ${this.ptoken}`
+      } else if (this.token) {
+        headers.Authorization = `Bearer ${this.token}`
+      }
+      const instance = this.$axios.create({ baseURL: this.env.baseUrl, headers })
+      const { data } = await instance.post(`file/${this.uploadUrl}`, formData)
+      this.pdfFiles.push(data)
+    }
+  }
+}
+</script>

package/comps/CoreSpan.vue

@@ -0,0 +1,31 @@
+<template>
+  <span
+    ref="editable"
+    class="p-1 leading-3 outline-none"
+    contenteditable
+    @input="updateContent"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: String, default: '' }
+  },
+  watch: {
+    value (newValue) {
+      if (this.$refs.editable.innerHTML !== newValue) {
+        this.$refs.editable.innerHTML = newValue
+      }
+    }
+  },
+  mounted () {
+    this.$refs.editable.innerHTML = this.value
+  },
+  methods: {
+    updateContent (event) {
+      this.$emit('custom-change', { newValue: event.target.innerText?.trim(), oldValue: this.value })
+    }
+  }
+}
+</script>

package/comps/CoreStatus.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="flex items-start justify-start">
+    <span
+      :style="{
+        background: color + '11',
+        borderColor: color + '33',
+        color: color
+      }"
+      class="flex flex-row items-center px-1 py-[3px] text-xs font-medium gap-1 border rounded leading-3"
+    >
+      <i v-if="status?.icon" :class="status.icon" />
+      <span v-if="status?.name">{{ status.name }}</span>
+      <span v-else>{{ placeholder }}</span>
+    </span>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    status: { type: Object, default: () => { return null } },
+    placeholder: { type: String, default: () => { return '' } }
+  },
+  computed: {
+    color () {
+      return this.status?.color || '#606266'
+    }
+  }
+}
+</script>