eztech-core-components 1.0.0

package/comps/CoreForm.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="max-w-full flex-1 flex flex-row gap-4 overflow-hidden">
+    <div v-if="!temp && loadingForm" class="text-center py-10 text-coreSecondaryText ">
+      <core-loader />
+    </div>
+    <el-form
+      v-if="temp"
+      ref="REF_FORM"
+      v-loading="loadingForm"
+      :label-width="labelWidth"
+      :model="temp"
+      :rules="rules"
+      :label-position="labelPosition === 'top' ? labelPosition : null"
+      :class="[`flex-1 max-w-full flex flex-col gap-2 flex-wrap items-start justify-start label-position-${labelPosition}`]"
+      :style="`width: ${formWidth}`"
+    >
+      <div v-if="locales.length > 0" class="px-2">
+        <el-button
+          v-for="l in locales" :key="l._id"
+          size="small"
+          plain
+          :type="temp.locale_id === l._id ? 'primary' : 'default'"
+          @click="() => handleLocaleChange(l)"
+        >
+          {{ l.name }}
+        </el-button>
+      </div>
+      <div v-if="!!$slots.actions" class="flex flex-row flex-wrap items-center w-full gap-4">
+        <div class="flex-1">
+          <slot name="status" />
+          <el-alert v-if="hasPassword && buttons && buttons.textRestorePassword" show-icon :closable="false">
+            <div class="text-sm">
+              "Нууц үг үүсгэх холбоос"-ыг бүртгэсэн Имэйл хаяг руу илгээх болно.
+            </div>
+          </el-alert>
+        </div>
+        <div>
+          <slot name="actions" />
+        </div>
+      </div>
+      <div v-if="isTabMenu && !!temp?._id" class="flex flex-row bg-background py-2 rounded w-full px-2 gap-2">
+        <!-- <nuxt-link
+          v-for="col in mainFormMenus.filter(c => !c.is_hidden)"
+          :key="col.name"
+          replace
+          :to="{ query: { ...$route.query, submenu: col.name } }"
+          :class="['flex gap-2 px-2 py-2 cursor-pointer items-center text-sm hover:text-corePrimary group hover:bg-coreBgMain rounded', {
+            'bg-coreBgMain text-corePrimary font-medium': col.name === submenu,
+            'text-coreRegularText': col.name !== submenu
+          }]"
+        >
+          <span>{{ col.title }} </span>
+        </nuxt-link> -->
+        <div
+          v-for="col in mainFormMenus.filter(c => !c.is_hidden)"
+          :key="col.name"
+          replace
+          :class="['flex gap-2 px-2 py-2 cursor-pointer items-center text-sm hover:text-corePrimary group hover:bg-coreBgMain rounded', {
+            'bg-coreBgMain text-corePrimary font-medium': col.name === submenu,
+            'text-coreRegularText': col.name !== submenu
+          }]"
+          @click="submenu = col.name"
+        >
+          <span>{{ col.title }} </span>
+        </div>
+      </div>
+      <slot name="form-header" />
+      <div v-if="temp?.work_families?.length || temp?.employee_history_text || temp?.employee_degree_text || temp?.all_history_text" class="flex gap-2 flex-wrap items-start justify-start">
+        <custom-employee-work-families :list="temp?.work_families || []" />
+        <custom-employee-text v-if="temp?.employee_history_text">
+          {{ temp.employee_history_text }}
+        </custom-employee-text>
+        <custom-employee-text v-if="temp?.employee_degree_text">
+          {{ temp.employee_degree_text }}
+        </custom-employee-text>
+        <custom-employee-text v-if="temp?.all_history_text">
+          {{ temp.all_history_text }}
+        </custom-employee-text>
+      </div>
+      <div
+        v-for="group in mainColumns.filter(c => {
+          if ((isTabMenu && !!temp?._id) || c.is_hidden) { return false }
+          if (!visibleLog && c.name === 'LOG') { return false }
+          if (c.group_type === 'GROUP_FIELD' && !c.columns?.length) { return false }
+          return true
+        })"
+        :key="group.name"
+        :class="['w-full empty:hidden', { 'p-2': !noPadding }]"
+      >
+        <core-form-fields
+          :ref="`REF_GROUP_${group.name}`"
+          :table="table"
+          :project-id="projectId"
+          :root-api-id="rootApiId"
+          :root-temp-id="rootTempId"
+          :pk_field_name="pk_field_name"
+          :default-size="defaultSize"
+          :temp="temp"
+          :group="group"
+          :searching="searching"
+          :disabled="disabled || group.disabled"
+          :ref-column="refColumns.find(c => c.tableName === group.group_fields)"
+          :ref-columns="refColumns"
+          :is-sub-menu="false"
+          :show-pkid="showPkid"
+          :level="level"
+          :is-locale-label="isLocaleLabel"
+          :no-padding-all="noPaddingAll"
+          :parent-form-col="parentFormCol"
+          @temp-change="handleTempChange"
+          @temp-change-all="$emit('temp-change-all', $event)"
+          @form-search="handleFormSearch"
+        />
+      </div>
+      <div
+        v-if="mainFormMenus.length > 0 && tempId !== 'create'"
+        :class="['w-full flex flex-col md:flex-row gap-4 items-start justify-start', {
+          'p-2': !noPadding
+        }]"
+      >
+        <div
+          v-if="!isTabMenu"
+          :class="['w-full md:w-52 rounded bg-background p-2', {
+            // 'p-2': !noPadding
+          }]"
+        >
+          <div
+            v-for="(groupTitle, index) in groupTitles"
+            :key="index"
+            class="flex flex-col gap-2"
+          >
+            <div
+              :class="['cursor-pointer hover:bg-coreBgMain rounded px-2 py-1 text-sm font-semibold flex flex-row overflow-hidden items-center', {
+                'text-coreSecondaryText': visibleMenu !== groupTitle,
+                'text-coreRegularText': visibleMenu === groupTitle
+              }]"
+              @click="visibleMenu === groupTitle ? visibleMenu = '-1' : visibleMenu = groupTitle"
+            >
+              <div class="flex-1">
+                {{ groupTitle || 'Цэс' }}
+              </div>
+              <i :class="[' el-icon-arrow-down duration-200', { '-rotate-180': visibleMenu === groupTitle }]" />
+            </div>
+            <el-collapse-transition>
+              <div v-if="visibleMenu === groupTitle" class="gap-2 flex flex-col">
+                <nuxt-link
+                  v-for="col in mainFormMenus.filter(c => c.group_title === groupTitle && !c.is_hidden)"
+                  :key="col.name"
+                  replace
+                  :to="{ query: { ...$route.query, submenu: col.name } }"
+                  :class="['flex gap-2 px-2 py-1 cursor-pointer items-center text-sm hover:text-corePrimary group hover:bg-coreBgMain rounded-lg', {
+                    'bg-coreBgMain text-corePrimary': col.name === submenu,
+                    'text-coreRegularText': col.name !== submenu
+                  }]"
+                >
+                  <div class="text-lg group-hover:text-corePrimary">
+                    <i v-if="col.group_type === 'group'" class="isax isax-tick-square" />
+                    <i v-else class="isax isax-tick-square" />
+                  </div>
+                  <span>{{ col.title }}</span>
+                </nuxt-link>
+              </div>
+            </el-collapse-transition>
+          </div>
+        </div>
+        <div class="flex-1 bg-background rounded overflow-hidden w-full">
+          <transition name="el-fade-in-linear">
+            <div v-if="visible && selectedSubmenu && selectedSubmenu.group_type === 'group'">
+              <div
+                v-for="group in selectedColumns.filter(c => !c.is_hidden && (visibleLog || c.name !== 'LOG'))"
+                :key="group.name"
+                class="w-full"
+              >
+                <div :class="['rounded bg-background px-0 pb-2', { 'pt-2': !group.title, 'pt-0': group.title }]">
+                  <core-form-fields
+                    :ref="`REF_GROUP_${group.name}`"
+                    :table="table"
+                    :project-id="projectId"
+                    :pk_field_name="pk_field_name"
+                    :default-size="defaultSize"
+                    :root-api-id="rootApiId"
+                    :root-temp-id="rootTempId || tempId || temp?._id"
+                    :temp="temp"
+                    :group="group"
+                    :searching="searching"
+                    :ref-columns="refColumns"
+                    :is-sub-menu="true"
+                    :show-pkid="showPkid"
+                    :level="level"
+                    :is-locale-label="isLocaleLabel"
+                    :no-padding-all="noPaddingAll"
+                    :disabled="disabled || group.disabled"
+                    :parent-form-col="parentFormCol"
+                    @temp-change="handleTempChange"
+                    @temp-change-all="$emit('temp-change-all', $event)"
+                    @form-search="handleFormSearch"
+                  />
+                </div>
+              </div>
+              <slot name="footer-actions" />
+            </div>
+            <div
+              v-if="visible && selectedSubmenu && selectedSubmenu.group_type === 'subtable'"
+              class="pt-1 px-2 pb-2 w-full overflow-hidden"
+            >
+              <fieldset
+                class="grid rounded w-full px-2 border border-coreLightBorder pt-2 overflow-hidden"
+              >
+                <legend class="font-default text-sm font-medium text-coreSecondaryText ml-5 px-2">
+                  {{ selectedSubmenu.title }}
+                </legend>
+                <div class="w-full overflow-hidden">
+                  <core-form-table
+                    :table_name="selectedSubmenu.group_fields"
+                    :ref-column="refColumns.find(c => c.tableName === selectedSubmenu.group_fields)"
+                    :project-id="projectId"
+                    :temp-id="tempId"
+                    :root-api-id="rootApiId"
+                    :root-temp-id="rootTempId || tempId || temp?._id"
+                    :auto-height="true"
+                    :hide-excel="true"
+                    :no-search="true"
+                    :plain-button="true"
+                    :parent-level="level"
+                  />
+                </div>
+              </fieldset>
+            </div>
+          </transition>
+        </div>
+      </div>
+      <el-alert
+        v-if="!!temp.xyp_log_id"
+        type="success"
+        :closable="!disabled"
+        show-icon
+        effect="light"
+        @close="$emit('reset-temp')"
+      >
+        ХУР системээс дуудсан талбаруудыг засварлах боломжгүй.
+      </el-alert>
+    </el-form>
+    <slot name="right" />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { get } from 'lodash'
+import { getButtons, groupFieldLog } from './../utils/role-helper'
+export default {
+  name: 'CoreForm',
+  props: {
+    tempId: { type: String, default: null },
+    hasPassword: { type: Boolean, default: false },
+    table: { type: Object, default: () => { return null } },
+    rootApiId: { type: String, default: () => { return null } },
+    rootTempId: { type: String, default: () => { return null } },
+    columns: { type: Array, default: () => { return [] } },
+    temp: { type: Object, default: () => { return {} } },
+    saving: { type: Boolean, default: false },
+    loadingForm: { type: Boolean, default: false },
+    width: { type: String, default: '700px' },
+    rules: { type: Object, default: () => { return {} } },
+    labelWidth: { type: String, default: '140px' },
+    formLabelPosition: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' },
+    showPkid: { type: Boolean, default: false },
+    projectId: { type: String, default: null },
+    fullWidth: { type: Boolean, default: false },
+    refColumns: { type: Array, default: () => { return [] } },
+    defaultSize: { type: String, default: null },
+    config_group_fields: { type: Array, default: () => { return [] } },
+    config_form_menus: { type: Array, default: () => { return [] } },
+    searching: { type: Boolean, default: false },
+    noPadding: { type: Boolean, default: false },
+    noPaddingAll: { type: Boolean, default: false },
+    hideLog: { type: Boolean, default: false },
+    level: { type: Object, default: () => { return null } },
+    updateGroupName: { type: String, default: null },
+    isTabMenu: { type: Boolean, default: false },
+    isTableHidden: { type: Boolean, default: false },
+    locales: { type: Array, default: () => { return [] } },
+    isLocaleLabel: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    parentFormCol: { type: Number, default: 0 },
+    isDialog: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      groupLog: {
+        name: 'LOG',
+        group_type: 'GROUP_FIELD',
+        col_fields: groupFieldLog.col_fields.join(',')
+      },
+      submenuDialog: '',
+      visible: false,
+      visibleMenu: ''
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['windowWidth']),
+    isEdit () {
+      return !!this.temp?._id
+    },
+    formWidth () {
+      if (this.columns.some(c => c.col_field.startsWith('html_'))) {
+        return '1024px'
+      }
+      return this.width
+    },
+    labelPosition () {
+      if (this.formLabelPosition) {
+        return this.formLabelPosition
+      }
+      if (this.windowWidth <= 640) {
+        return 'top'
+      }
+      return this.table?.form_label_position || 'left'
+    },
+    visibleLog () {
+      return !this.hideLog && this.temp && this.temp[this.pk_field_name]
+    },
+    groupTitles () {
+      const list = []
+      for (const r of this.mainFormMenus) {
+        if (!list.includes(r.group_title) && (r.name !== 'LOG' || this.isShowLogButton)) {
+          list.push(r.group_title)
+        }
+      }
+      return list
+    },
+    mainColumns () {
+      const list = []
+      const groupFields = [...this.config_group_fields]
+      let columns = []
+      if (this.isTableHidden) {
+        columns = [...this.columns.filter(c => !c.tableHidden)]
+      } else {
+        columns = [...this.columns]
+      }
+      groupFields.push(this.groupLog)
+      const formMenus = [...this.config_form_menus]
+      const mainCols = columns.filter(c => !c.col_field.startsWith('custom_') && !groupFields.some(k => k.col_fields.split(',').includes(c.col_field)))
+      if (mainCols.length > 0) {
+        list.push({ name: 'MAIN', columns: mainCols, disabled: !!this.updateGroupName })
+      }
+      for (const group of groupFields.filter((c) => {
+        if (c.name === 'DOC_INDEX_UNITS' && this.temp?.number_type_id?.code !== 'UNIT') {
+          return false
+        }
+        if (c.name === 'DOC_INDEX_POSITIONS' && this.temp?.number_type_id?.code !== 'POSITION') {
+          return false
+        }
+        // ХЭРВЭЭ ҮЗЛЭГ, ЗАДЛАН БАЙВАЛ ӨМНӨХ ДҮГНЭЛТ ОБЪЕКТ БҮРТГЭХГҮЙ
+        if (['PREVS', 'RESOLUTION_OBJECTS'].includes(c.name) && ['06', '07'].includes(this.temp?.reg_type_id?.code)) {
+          return false
+        }
+        if (c.is_disabled) {
+          return false
+        }
+        const isGroupField = !this.updateGroupName && c.group_type !== 'UPDATE_FORM'
+        const isUpdateForm = c.name === this.updateGroupName && c.group_type === 'UPDATE_FORM'
+        return (isGroupField || isUpdateForm) && !formMenus.some(k => k.group_fields.split(',').includes(c.name))
+      })) {
+        const groupCols = columns.filter(c => !c.col_field.startsWith('custom_') && group.col_fields.split(',').includes(c.col_field))
+        if (groupCols.length > 0) {
+          list.push({ ...group, columns: groupCols })
+        } else {
+          list.push({ ...group })
+        }
+      }
+      return list
+    },
+    mainFormMenus () {
+      if (this.isTabMenu) {
+        return [{ group_type: 'group', group_fields: 'MAIN', name: 'MAIN', title: 'Ерөнхий мэдээлэл' }].concat(this.config_form_menus)
+      } else {
+        return this.config_form_menus
+      }
+    },
+    submenu: {
+      get () {
+        if (this.isDialog) {
+          return this.submenuDialog || get(this.mainFormMenus, '[0].name')
+        }
+        return this.$route.query.submenu || get(this.mainFormMenus, '[0].name')
+      },
+      set (val) {
+        if (this.isDialog) {
+          this.submenuDialog = val
+        } else {
+          this.$router.replace({ query: { ...this.$route.query, submenu: val } })
+        }
+      }
+    },
+    selectedSubmenu () {
+      return this.mainFormMenus.find(c => c.name === this.submenu)
+    },
+    isShowLogButton () {
+      return this.level?.isAdmin || this.level?.actions?.some(c => c.code === 'LOG') || this.isDevelopment
+    },
+    selectedColumns () {
+      if (!this.selectedSubmenu) {
+        return []
+      }
+      if (this.selectedSubmenu.name === 'MAIN') {
+        return this.mainColumns
+      }
+      const list = []
+      const groupFields = [...this.config_group_fields]
+      let columns = []
+      if (this.isTableHidden) {
+        columns = [...this.columns.filter(c => !c.tableHidden)]
+      } else {
+        columns = [...this.columns]
+      }
+      groupFields.push(this.groupLog)
+      for (const group of groupFields.filter(c => this.selectedSubmenu.group_fields.split(',').includes(c.name))) {
+        if (group.name === 'LOG' && !this.isShowLogButton) {
+          continue
+        }
+        if (group.name === 'PREVS') {
+          continue
+        }
+        const groupCols = columns.filter(c => group.col_fields.split(',').includes(c.col_field))
+        if (groupCols.length > 0) {
+          list.push({ ...group, columns: groupCols })
+        } else {
+          list.push({ ...group })
+        }
+      }
+      return list
+    },
+    buttons () {
+      return getButtons(this.level)
+    },
+    isDevelopment () {
+      return process.env.NODE_ENV === 'development'
+    }
+  },
+  watch: {
+    submenu () {
+      this.visible = false
+      this.$nextTick(() => {
+        this.visible = true
+      })
+    }
+  },
+  mounted () {
+    this.visible = true
+    this.visibleMenu = this.selectedSubmenu?.group_title
+  },
+  methods: {
+    get,
+    async clearValidate () {
+      await this.$nextTick()
+      await this.$nextTick()
+      const refForm = get(this.$refs, 'REF_FORM')
+      if (refForm) {
+        refForm.clearValidate()
+      }
+    },
+    async isValidate () {
+      let validated = true
+      const refForm = get(this.$refs, 'REF_FORM')
+      if (refForm) {
+        const validForm = await new Promise(resolve => refForm.validate().then(() => resolve(true)).catch(() => resolve(false)))
+        if (!validForm) {
+          validated = false
+        }
+      }
+      for (const group of this.mainColumns.concat(this.selectedColumns)) {
+        const refs = get(this.$refs, `REF_GROUP_${group.name}`)
+        const ref = Array.isArray(refs) ? get(refs, '[0]') : refs
+        if (ref && ref.isValidate) {
+          const isValid = await ref.isValidate()
+          if (!isValid) {
+            validated = false
+          }
+        }
+      }
+      return validated
+    },
+    handleFormSearch (col) {
+      if (col.form.searchAction) {
+        this.$emit(col.form.searchAction, { prop: col.col_field })
+      } else {
+        this.$emit('form-search', { col_field: col.col_field })
+      }
+    },
+    handleTempChange (col, value) {
+      this.$emit('temp-change', col, value)
+    },
+    handleLocaleChange (locale) {
+      this.$emit('locale-change', locale)
+    }
+  }
+}
+</script>

package/comps/CoreFormDialog.vue

@@ -0,0 +1,140 @@
+<template>
+  <div v-if="visible">
+    <el-dialog
+      v-loading="loadingForm"
+      v-el-drag-dialog
+      :visible.sync="visible"
+      :title="title || (temp && !temp[pk_field_name] ? (buttons.textCreate || 'Бүртгэх') : (buttons.textEdit || 'Харах'))"
+      :width="width"
+      :append-to-body="appendToBody"
+      :close-on-click-modal="false"
+      :before-close="beforeClose"
+      @close="$emit('close')"
+    >
+      <slot />
+      <div slot="footer" class="flex justify-between">
+        <div>
+          <el-button
+            v-if="hasPassword && isEdit && buttons.textRestorePassword"
+            type="warning"
+            icon="el-icon-key"
+            :loading="restoringPassword"
+            :size="sizeButton || defaultSize"
+            @click="$emit('restore-password')"
+          >
+            {{ buttons.textRestorePassword }}
+          </el-button>
+          <slot name="action-buttons" />
+        </div>
+        <div>
+          <!-- <el-button
+            v-if="!readOnly && isEdit && buttons.textDecision"
+            type="success"
+            :loading="saving"
+            :size="sizeButton || defaultSize"
+            icon="el-icon-check"
+            @click="$emit('save')"
+          >
+            {{ buttons.textDecision }}
+          </el-button> -->
+          <el-button
+            v-if="!readOnly && isEdit && buttons.textEdit"
+            type="success"
+            :loading="saving"
+            :disabled="restoringPassword"
+            :size="sizeButton || defaultSize"
+            icon="el-icon-check"
+            @click="$emit('save')"
+          >
+            <!-- {{ buttons.textEdit }} -->
+            Хадгалах
+          </el-button>
+          <el-button
+            v-if="!readOnly && isCreate && buttons.textCreate"
+            type="primary"
+            :loading="saving"
+            :size="sizeButton || defaultSize"
+            icon="el-icon-check"
+            @click="$emit('save')"
+          >
+            {{ buttons.textCreate }}
+          </el-button>
+          <el-button
+            :disabled="saving"
+            icon="el-icon-close"
+            :size="sizeButton || defaultSize"
+            @click="handleClose"
+          >
+            Буцах
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getButtons } from './../utils/role-helper'
+export default {
+  props: {
+    title: { type: String, default: '' },
+    appendToBody: { type: Boolean, default: false },
+    hasPassword: { type: Boolean, default: false },
+    temp: { type: Object, default: () => { return null } },
+    saving: { type: Boolean, default: false },
+    restoringPassword: { type: Boolean, default: false },
+    width: { type: String, default: '700px' },
+    pk_field_name: { type: String, default: '_id' },
+    loadingForm: { type: Boolean, default: false },
+    readOnly: { type: Boolean, default: false },
+    sizeButton: { type: String, default: null },
+    defaultSize: { type: String, default: null },
+    level: { type: Object, default: () => { return null } },
+    unsavedChanges: { type: Boolean, default: () => false },
+    isAdmin: { type: Boolean, default: false },
+    isLocalDefault: { type: Boolean, default: false }
+  },
+  computed: {
+    isCreate () {
+      return this.temp && !this.temp[this.pk_field_name]
+    },
+    isEdit () {
+      return this.temp && this.temp[this.pk_field_name]
+    },
+    visible: {
+      get () {
+        return !!this.temp
+      },
+      set () {
+        this.$emit('close')
+      }
+    },
+    buttons () {
+      return getButtons(this.level, '', this.isAdmin)
+    }
+  },
+  methods: {
+    async checkUnsavedChanges () {
+      if (this.unsavedChanges) {
+        await this.$showConfirm('Та өөрчлөлтийг хадгалахгүй хаах уу?')
+        this.$emit('set-unsaved-changes', false)
+      }
+    },
+    async handleClose () {
+      try {
+        await this.checkUnsavedChanges()
+        this.$emit('close')
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    async beforeClose (done) {
+      try {
+        await this.checkUnsavedChanges()
+        done()
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>