eztech-core-components 1.0.0

package/comps/CoreFormTableList.vue

@@ -0,0 +1,268 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <div v-if="initted && table">
+      <div v-if="groupName === 'QUESTIONS'" class="px-2">
+        <el-alert show-icon :closable="false">
+          <div class="text-sm">
+            Шинжилгээ хийх нийт хугацаа <b>
+              "{{ temps.reduce((n, {duration_total}) => n + duration_total, 0) }}"</b> өдөр. Шалгах хугацааг объектын тоог жишиг хугацаагаар үржүүлж зөвхөн ажлын өдрөөр тооцно.
+          </div>
+        </el-alert>
+      </div>
+      <el-table
+        :data="temps"
+        class="core-table-inline rounded"
+        width="100%"
+        :border="false"
+        :resizable="false"
+      >
+        <el-table-column
+          v-for="col in showColumns"
+          v-bind="col.props"
+          :key="col.col_field"
+          :prop="col.col_field"
+          :sortable="false"
+        >
+          <template slot="header" slot-scope="scope">
+            <div class="h-full flex items-center w-full">
+              <div
+                class="flex-1 text-xs leading-4 line-clamp-2 whitespace-normal break-normal text-left"
+                :title="scope.column.label"
+              >
+                {{ scope.column.label }}
+              </div>
+            </div>
+          </template>
+          <template slot-scope="scope">
+            <div :class="['el-form-item !mb-0 text-left', { 'is-error': validates.length > scope.$index && validates[scope.$index].isError && validates[scope.$index][col.col_field] }]">
+              <div class="el-form-item__content text-center">
+                <core-form-item
+                  :col="col"
+                  :parent-temp="parentTemp || scope.row"
+                  :temp="scope.row"
+                  :project-id="projectId"
+                  :pk_field_name="pk_field_name"
+                  default-size="small"
+                  :disabled="disabled || col.disabled || col.form?.col_readonly || ['duration_days', 'duration_total'].includes(col.col_field)"
+                  @temp-change="($event) => handleChangeRow(scope.$index, col, $event)"
+                />
+                <div v-if="validates.length > scope.$index && validates[scope.$index].isError && validates[scope.$index][col.col_field]" class="el-form-item__error !leading-4 !static !line-clamp-2 w-full !whitespace-normal text-left">
+                  {{ validates.length > scope.$index && validates[scope.$index].isError && validates[scope.$index][col.col_field] }}
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="!disabled" label="#" width="40px" :align="'center'">
+          <template slot-scope="scope">
+            <el-button
+              v-if="!isEqualTemp(scope.row, defaultTemp) || temps.length - 1 > scope.$index"
+              icon="el-icon-minus" size="small" plain type="warning" circle
+              @click="() => handleRemoveRow(scope.$index)"
+            />
+            <el-button
+              v-else
+              icon="el-icon-plus" size="small" plain type="success" circle
+              @click="() => handleAddRow(true)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </transition>
+</template>
+<script>
+import { isEqual, get, has, cloneDeep } from 'lodash'
+import Schema from 'async-validator'
+import { getTriggerFields } from '../utils/data-helper'
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreFormTableList',
+  props: {
+    groupName: { type: String, default: '' },
+    value: { type: Array, default: () => { return [] } },
+    table_name: { type: String, default: '' },
+    projectId: { type: [Number, String], default: '' },
+    sub: { type: String, default: null },
+    tempId: { type: String, default: null },
+    parentTemp: { type: Object, default: () => { return null } },
+    refColumn: { type: Object, default: () => { return null } },
+    apiName: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      ...tableData,
+      currentPage: 1,
+      id: null,
+      configProjectId: null,
+      project: null,
+      table: null,
+      formWidth: null,
+      columns: null,
+      configTableName: null,
+      configColFields: null,
+      hasPassword: null,
+      refColumns: null,
+      subColumn: null,
+      parentRow: null,
+      readOnly: null,
+      config_group_fields: null,
+      config_form_menus: null,
+      initted: false,
+      temps: [],
+      validates: []
+    }
+  },
+  computed: {
+    ...tableComputed,
+    showColumns () {
+      const cols = this.columns.filter(c => !c.form.col_readonly && c.props && !c.props.hidden && (this.showPkid || !['pkid', 'uuid'].includes(c.col_type)))
+      cols.sort((a, b) => {
+        if (a.col_order !== b.col_order) { return a.col_order - b.col_order }
+        return Number(a._id) - Number(b._id)
+      })
+      return cols
+    }
+  },
+  watch: {
+    ...tableWatch,
+    parentTemp: {
+      handler (val) {
+        this.parentRow = cloneDeep(val)
+      },
+      deep: true
+    },
+    'parentTemp.reg_type_id': {
+      handler () {
+        this.defaultTemp[this.subColumn.col_field] = cloneDeep(this.parentTemp) // { ...this.parentTemp }
+        for (const r of this.temps) {
+          r[this.subColumn.col_field] = cloneDeep(this.parentTemp)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.handleGetConfig()
+  },
+  methods: {
+    ...tableMethods,
+    isEqual,
+    isEqualTemp (obj1, obj2) {
+      const getObj = (obj) => {
+        const newObj = {}
+        for (const key in obj) {
+          if (typeof obj[key] === 'object' && Array.isArray(obj[key])) {
+            newObj[key] = obj[key].map(c => getObj(c))
+          } else if (typeof obj[key] === 'object' && has(obj[key], this.pk_field_name)) {
+            newObj[key] = obj[key][this.pk_field_name]
+          } else {
+            newObj[key] = obj[key]
+          }
+        }
+        return newObj
+      }
+      return isEqual(getObj(obj1), getObj(obj2))
+    },
+    async isValidate () {
+      const trigger_fields = getTriggerFields(this.subColumn.trigger_fields)
+      for (const c of trigger_fields) {
+        const cc = c.split(':')
+        const localKey = cc[0]
+        const localVal = cc[1]
+        if (localVal.includes('#')) {
+          const tempKey = localVal.substring(1)
+          for (const r of this.temps) {
+            if (!r[localKey] !== this.parentRow[tempKey]) {
+              r[localKey] = this.parentRow[tempKey] || null
+            }
+          }
+        }
+      }
+      const values = this.temps.slice(0, this.temps.length - 1) // .filter(c => !isEqualTemp(c, this.defaultTemp))
+      const promises = []
+      for (const val of values) {
+        const promise = new Promise((resolve) => {
+          const validator = new Schema(this.rules)
+          validator.validate({ ...val }, (errors, fields) => {
+            if (errors) {
+              const errorMessages = { isError: true }
+              for (const r in fields) {
+                errorMessages[r] = get(fields[r], '[0].message')
+              }
+              resolve(errorMessages)
+            } else {
+              resolve({ isError: false })
+            }
+          })
+        })
+        promises.push(promise)
+      }
+      this.validates = await Promise.all(promises)
+      return !this.validates.some(c => c.isError)
+    },
+    handleAddRow (isForce) {
+      const lastTemp = { ...this.temps[this.temps.length - 1] }
+      if (!this.disabled && (isForce || !this.isEqualTemp(lastTemp, this.defaultTemp))) {
+        this.temps.push({ ...this.defaultTemp })
+      }
+    },
+    handleChangeRow (index, { col_field }, $event) {
+      if (this.disabled) {
+        return
+      }
+      const temp = { ...this.temps[index], [col_field]: $event }
+      if (this.groupName === 'QUESTIONS') {
+        temp.duration_days = temp.question_id?.duration_days || 0
+        temp.duration_total = temp.duration_days * temp.object_count
+      }
+      this.temps.splice(index, 1, temp)
+      this.handleAddRow()
+      this.$emit('input', this.temps.filter(c => !this.isEqualTemp(c, this.defaultTemp)))
+    },
+    handleRemoveRow (index) {
+      const temp = { ...this.temps[index] }
+      if (this.isEqualTemp(temp, this.defaultTemp)) {
+        this.temps.splice(index, 1)
+        this.isValidate()
+        return
+      }
+      this.$showConfirm('Тухайн мөрийг хасах уу?').then(() => {
+        this.temps.splice(index, 1)
+        this.isValidate()
+        this.handleAddRow()
+        this.$emit('input', this.temps.filter(c => !this.isEqualTemp(c, this.defaultTemp)))
+      })
+    },
+    async handleGetConfig () {
+      try {
+        this.initted = false
+        const config = await getAsyncData({
+          tableName: this.refColumn ? this.refColumn.ref_table : this.table_name,
+          projectId: this.projectId,
+          sub: this.refColumn ? this.refColumn._id : this.sub,
+          $axios: this.$axios,
+          id: this.tempId,
+          apiName: this.apiName,
+          isInline: true,
+          error: this.$nuxt.error
+        })
+        for (const configKey in config) {
+          this[configKey] = config[configKey]
+        }
+        this.$nextTick(() => {
+          this.resetDefaultTemp()
+          this.temps = [...this.value]
+          this.handleAddRow()
+        })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.initted = true
+      }
+    }
+  }
+}
+</script>

package/comps/CoreIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-9 h-9 p-[3px] bg-[#f6f6f6] flex items-center justify-center rounded-full">
+    <span class="text-gray-600"><slot /></span>
+  </div>
+</template>

package/comps/CoreImage.vue

@@ -0,0 +1,37 @@
+<template>
+  <img v-if="src" :src="fullSrc" style="object-fit: cover;">
+  <div v-else class="bg-bellPrimary items-center flex justify-center text-bellGray3">
+    <span v-if="letter" class="uppercase text-white">{{ letter.slice(0, 1) }}</span>
+    <i v-else class="el-icon-picture-outline-round" />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    thumbnail: {
+      type: Boolean,
+      default: false
+    },
+    letter: {
+      type: String,
+      default: ''
+    },
+    tid: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env']),
+    fullSrc () {
+      const path = this.thumbnail ? `/api${this.env.fileRoutePath}/thumbnail` : `/api${this.env.fileRoutePath}/`
+      return path + this.src + '?tid=' + this.tid
+    }
+  }
+}
+</script>

package/comps/CoreInlineNumber.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-input
+    ref="refComponent"
+    v-model="modelValue"
+    :disabled="disabled"
+    :size="size"
+    @keydown.native.enter="handleKeydownEnter"
+    @keydown="$emit('keydown', $event)"
+    @focus="selectAllText"
+  />
+</template>
+<script>
+import { isNaN, get } from 'lodash'
+export default {
+  name: 'CoreInlineNumber',
+  props: {
+    value: { type: Number, default: null },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: '' }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value.$format()
+      },
+      set (val) {
+        const parseVal = Number(val?.toString().replace(/,/g, ''))
+        const val1 = isNaN(parseVal) ? (isNaN(this.value) ? 0 : this.value) : parseVal
+        if (parseVal !== this.value) {
+          this.$emit('input', val1)
+        }
+      }
+    }
+  },
+  methods: {
+    async selectAllText ($event) {
+      $event.preventDefault()
+      await new Promise(reject => setTimeout(reject), 100)
+      $event.target.select()
+    },
+    async focus () {
+      await this.$nextTick()
+      const refComponents = this.$refs.refComponent
+      const refComponent = get(refComponents, '[0]') || refComponents
+      if (refComponent.focus) {
+        this.$refs.refComponent.focus()
+      }
+    },
+    handleKeydownEnter () {
+      this.$emit('keydown-enter')
+    }
+  }
+}
+</script>

package/comps/CoreInputNumber.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-input-number
+    ref="refComponent"
+    v-model="modelValue"
+    :min="min"
+    :max="max"
+    :clearable="clearable"
+    :controls-position="controlsPosition"
+    :precision="precision"
+    :size="size"
+    :pk_field_name="pk_field_name"
+    :disabled="disabled"
+    @change="$emit('change', $event)"
+    @keydown.native.enter="$emit('keydown-enter', $event)"
+    @keydown="$emit('keydown', $event)"
+  />
+</template>
+<script>
+export default {
+  props: {
+    value: { type: [Number, String], default: 0 },
+    min: { type: Number, default: -Infinity },
+    max: { type: Number, default: Infinity },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    controlsPosition: { type: String, default: 'right' },
+    precision: { type: Number, default: null },
+    size: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        if (Number(val) !== Number(this.value)) {
+          this.$emit('input', val)
+        }
+      }
+    }
+  },
+  method: {
+    focus () {
+      this.$refs.refComponent.focus()
+    }
+  }
+}
+</script>

package/comps/CoreInputSearch.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-input
+    v-model="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :size="size"
+    clearable
+    :validate-event="false"
+    @clear="$emit('form-search')"
+    @change="$emit('change')"
+    @keydown.native.enter.prevent="$emit('form-search')"
+  >
+    <el-button
+      slot="append"
+      tabindex="-1"
+      icon="el-icon-search"
+      :disabled="disabled"
+      :loading="loading"
+      @click="$emit('form-search')"
+    />
+  </el-input>
+</template>
+<script>
+export default {
+  name: 'CoreInputSearch',
+  props: {
+    disabled: { type: Boolean, default: false },
+    value: { type: [Number, String, Boolean], default: null },
+    loading: { type: Boolean, default: false },
+    placeholder: { type: String, default: null },
+    size: { type: String, default: null }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreJson.vue

@@ -0,0 +1,10 @@
+<template>
+  <pre class="border rounded w-full p-2 leading-4 text-sm max-w-[440px] overflow-auto">{{ value }}</pre>
+</template>
+<script>
+export default {
+  props: {
+    value: { type: [String, Object], default: null }
+  }
+}
+</script>

package/comps/CoreLoader.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="sk-fading-circle">
+    <div class="sk-circle1 sk-circle" />
+    <div class="sk-circle2 sk-circle" />
+    <div class="sk-circle3 sk-circle" />
+    <div class="sk-circle4 sk-circle" />
+    <div class="sk-circle5 sk-circle" />
+    <div class="sk-circle6 sk-circle" />
+    <div class="sk-circle7 sk-circle" />
+    <div class="sk-circle8 sk-circle" />
+    <div class="sk-circle9 sk-circle" />
+    <div class="sk-circle10 sk-circle" />
+    <div class="sk-circle11 sk-circle" />
+    <div class="sk-circle12 sk-circle" />
+  </div>
+</template>
+<style lang="css">
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: var(--foreground-regular);
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+</style>