eztech-core-components 1.0.0

package/comps/CoreFormTable.vue

@@ -0,0 +1,197 @@
+<template>
+  <div v-if="initted && table" class="w-full">
+    <core-table
+      :project-id="projectId"
+      :table_id="`${table._id}`"
+      :table_name="table_name"
+      :list="list"
+      :count="count"
+      :columns="columns"
+      :loading="loading"
+      :sorts="sorts"
+      :current-page="currentPage"
+      :list-page="listPage"
+      :search="search"
+      :pk_field_name="project.pk_field_name"
+      :sub-column="subColumn"
+      :current-row-id="id"
+      :loading-excel="loadingExcel"
+      :auto-height="autoHeight"
+      :hide-excel="hideExcel"
+      :no-search="noSearch"
+      :plain-button="plainButton"
+      default-size="small"
+      :level="parentLevel || level"
+      :selectable="selectable || table_name === 'hrm_users'"
+      :all-selectable="allSelectable"
+      :locales="locales"
+      :locale.sync="locale"
+      :is-admin="isAdmin"
+      :statuses="statuses"
+      :status-count="statusCount"
+      @load="handleRefreshList"
+      @excel="handleExcel"
+      @create="handleCreateRow"
+      @update="handleUpdate"
+      @detail="(event) => handleUpdate(event)"
+      @search-input="handleSearchInput"
+      @search="handleSearch"
+      @refresh="handleRefresh"
+      @sort-change="handleSortChange"
+      @size-change="handleChangeSize"
+      @current-change="handleCurrentChange"
+      @current-row-change="handleCurrentRowChange"
+      @delete="handleDelete"
+    >
+      <slot slot="actions" name="actions" />
+    </core-table>
+    <core-form-dialog
+      :temp="temp"
+      :saving="saving"
+      :pk_field_name="project.pk_field_name"
+      :has-password="hasPassword"
+      :loading-form="loadingForm"
+      default-size="small"
+      append-to-body
+      :level="parentLevel || level"
+      :unsaved-changes="unsavedChanges"
+      :is-admin="isAdmin"
+      @set-unsaved-changes="set_unsaved_changes"
+      @restore-password="handleRestorePassword"
+      @close="handleClose"
+      @save="handleSave"
+    >
+      <core-form
+        ref="coreForm"
+        :temp="temp"
+        :columns="columns"
+        :rules="rules"
+        :table="table"
+        :pk_field_name="project.pk_field_name"
+        :has-password="hasPassword"
+        :project-id="project._id"
+        :root-api-id="rootApiId"
+        :root-temp-id="rootTempId"
+        :ref-columns="refColumns"
+        :config_group_fields="config_group_fields"
+        :config_form_menus="config_form_menus"
+        :update-group-name="updateGroupName"
+        :level="parentLevel || level"
+        :locales="locales"
+        default-size="small"
+        no-padding
+        @temp-change="handleTempChange"
+        @locale-change="handleLocaleChange"
+      />
+    </core-form-dialog>
+  </div>
+</template>
+<script>
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreFormTable',
+  props: {
+    groupName: { type: String, default: '' },
+    table_name: { type: String, default: '' },
+    projectId: { type: [Number, String], default: '' },
+    sub: { type: String, default: null },
+    tempId: { type: String, default: null },
+    rootApiId: { type: String, default: null },
+    rootTempId: { type: String, default: null },
+    refColumn: { type: Object, default: () => { return null } },
+    autoHeight: { type: Boolean, default: false },
+    hideExcel: { type: Boolean, default: false },
+    noSearch: { type: Boolean, default: false },
+    plainButton: { type: Boolean, default: false },
+    apiName: { type: String, default: null },
+    parentLevel: { type: Object, default: () => { return null } },
+    isLog: { type: Boolean, default: false },
+    textWhere: { type: String, default: null },
+    tempLocaleId: { type: String, default: null },
+    selectable: { type: Boolean, default: false },
+    allSelectable: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      ...tableData,
+      id: null,
+      configProjectId: null,
+      project: null,
+      table: null,
+      formWidth: null,
+      columns: null,
+      locales: [],
+      configTableName: null,
+      configColFields: null,
+      hasPassword: null,
+      refColumns: null,
+      subColumn: null,
+      parentRow: null,
+      readOnly: null,
+      config_group_fields: null,
+      config_form_menus: null,
+      initted: false,
+      currentPage: 1
+    }
+  },
+  computed: {
+    ...tableComputed,
+    tableName () {
+      return this.apiName?.startsWith('service_') ? this.apiName : this.table?.name
+    },
+    isAdmin () {
+      return this.groupName === 'EXPERTS' && this.tableName === 'reg_expert_types'
+    }
+  },
+  watch: {
+    ...tableWatch,
+    tempId () {
+      this.handleGetConfig()
+    },
+    currentRow (val) {
+      this.$emit('current-row-change', val)
+    }
+  },
+  mounted () {
+    this.handleGetConfig()
+  },
+  methods: {
+    ...tableMethods,
+    handleCreateRow ($event) {
+      if (!!this.subColumn && !this.parentRow?._id) {
+        return this.$message({ type: 'warning', message: 'Та эхлээд үндсэн бүртгэлийг үүсгэнэ үү!' })
+      }
+      this.handleCreate($event)
+    },
+    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,
+          isLog: this.isLog,
+          $axios: this.$axios,
+          id: this.tempId,
+          rootApiId: this.rootApiId,
+          apiName: this.apiName,
+          parentLevel: this.parentLevel,
+          skipFormReadonly: true
+        })
+        for (const configKey in config) {
+          this[configKey] = config[configKey]
+        }
+        this.$nextTick(() => {
+          this.resetSearch()
+          this.resetDefaultTemp()
+          this.resetTemp()
+        })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.initted = true
+      }
+    }
+  }
+}
+</script>

package/comps/CoreFormTableInline.vue

@@ -0,0 +1,300 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <div v-if="initted && table">
+      <el-table
+        :data="temps"
+        class="core-table-inline rounded"
+        width="100%"
+        :border="false"
+        :resizable="false"
+      >
+        <el-table-column
+          v-for="(col, index) 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
+                  :ref="'ref_' + index + '_' + scope.$index"
+                  :col="col"
+                  :parent-temp="parentTemp"
+                  :temp="scope.row"
+                  :project-id="projectId"
+                  :pk_field_name="pk_field_name"
+                  default-size="small"
+                  :disabled="disabled || col.disabled || col.form?.col_readonly || !buttons.textEdit || readOnly"
+                  @temp-change="($event) => handleChangeRow(scope.$index, col, $event)"
+                  @keydown-enter="handleKeydownEnter(scope.$index)"
+                  @keydown="handleKeydown($event, index, scope.$index)"
+                />
+                <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"
+              v-show="buttons.textEdit && !readOnly"
+              icon="el-icon-minus" size="small" plain type="warning" circle
+              tabindex="-1"
+              @click="() => handleRemoveRow(scope.$index)"
+            />
+            <el-button
+              v-else-if="buttons.textCreate && !readOnly"
+              icon="el-icon-plus" size="small" plain type="success" circle
+              tabindex="-1"
+              @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 { getButtons } from './../utils/role-helper'
+import { tableData, tableMethods, tableComputed, tableWatch, getAsyncData } from '@/../core-components/utils/table-helper'
+export default {
+  name: 'CoreFormTableInline',
+  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 },
+    rootApiId: { type: String, default: null },
+    parentTemp: { type: Object, default: () => { return null } },
+    parentLevel: { 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
+    },
+    buttons () {
+      return getButtons(this.parentLevel, this.table_name)
+    }
+  },
+  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,
+    async handleKeydown ($event, colIndex, rowIndex) {
+      if ($event.key === '-' && this.table_name === 'reg_resolution_objects') {
+        await this.$nextTick()
+        let refComponents = this.$refs[`ref_${colIndex + 1}_${rowIndex}`]
+        let refComponent = get(refComponents, '[0]') || refComponents
+        if (!refComponent) {
+          refComponents = this.$refs['ref_0_' + (rowIndex + 1)]
+          refComponent = get(refComponents, '[0]') || refComponents
+        }
+        if (refComponent) {
+          refComponent.focus()
+        }
+      }
+    },
+    async handleKeydownEnter (rowIndex) {
+      await this.$nextTick()
+      const refComponents = this.$refs['ref_0_' + (rowIndex + 1)]
+      const refComponent = get(refComponents, '[0]') || refComponents
+      if (refComponent) {
+        refComponent.focus()
+      }
+    },
+    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 () {
+      // let isChanged = false
+      const trigger_fields = getTriggerFields(this.subColumn.trigger_fields)
+      for (const { localKey, localVal } of trigger_fields) {
+        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) {
+      if (!this.buttons.textCreate || this.readOnly) {
+        return
+      }
+      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('temp-change', this.temps.filter(c => !this.isEqualTemp(c, this.defaultTemp)))
+      // 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('temp-change', this.temps.filter(c => !this.isEqualTemp(c, this.defaultTemp)))
+        // 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,
+          rootApiId: this.rootApiId,
+          isInline: true,
+          parentLevel: this.parentLevel,
+          inlineParentTemp: this.parentTemp,
+          skipFormReadonly: true
+        })
+        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>