eztech-core-components 1.0.0

package/comps/CoreTableColumn.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-table-column
+    v-bind="col.props"
+    :key="col.col_field"
+    :prop="col.col_key"
+    :sortable="false"
+    :class-name="col.hasChildren ? 'core-group-column' : ''"
+  >
+    <template slot="header" slot-scope="scope">
+      <core-table-column-header :label="scope.column.label" :col_key="col.col_key" :sortable="!col.hasChildren && sorts?.length && (has(col.props, 'sortable') ? col.props.sortable : true)" @sort-change="$emit('sort-change', $event)" />
+      <div v-if="!col.hasChildren && search && !noSearch" class="font-normal">
+        <core-table-search :search="search" :col="col" :project-id="projectId" :table_name="table_name" @search-input="$emit('search-input', $event)" @search="$emit('search')" />
+      </div>
+    </template>
+    <el-table-column
+      v-for="child in col.columns?.filter(c1 => col.hasChildren && !c1.tableHidden)"
+      v-bind="child.props"
+      :key="child.col_field"
+      :prop="child.col_key"
+      :sortable="false"
+      class-name="core-subgroup-column"
+    >
+      <template slot="header" slot-scope="scope">
+        <core-table-column-header
+          :label="scope.column.label"
+          :col_key=" child.col_key"
+          :sortable="sorts && sorts.length > 0 && (has(child.props, 'sortable') ? child.props.sortable : true)"
+          @sort-change="$emit('sort-change', $event)"
+        />
+        <div v-if="search && !noSearch" class="font-normal">
+          <core-table-search :search="search" :col="child" :project-id="projectId" :table_name="table_name" @search-input="$emit('search-input', $event)" @search="$emit('search')" />
+        </div>
+      </template>
+      <template slot-scope="scope">
+        <core-table-column-row
+          :col="child"
+          :scope="scope"
+          :fill-fields="fillFields"
+          :selectable="selectable"
+          @detail="(isNewTab) => handleDetail(scope.row, child, isNewTab)"
+        />
+      </template>
+    </el-table-column>
+    <template v-if="!col.hasChildren" slot-scope="scope">
+      <core-table-column-row
+        :col="col"
+        :scope="scope"
+        :fill-fields="fillFields"
+        :edit-fields="editFields"
+        :selectable="selectable"
+        @detail="(isNewTab) => handleDetail(scope.row, col, isNewTab)"
+        @change-cell-value="($event) => $emit('change-cell-value', $event)"
+      />
+    </template>
+  </el-table-column>
+</template>
+<script>
+import { has } from 'lodash'
+export default {
+  props: {
+    projectId: { type: [String, Number], default: '5' },
+    col: { type: Object, default: () => { return null } },
+    search: { type: Object, default: () => { return null } },
+    noSearch: { type: Boolean, default: false },
+    fillFields: { type: Array, default: () => { return [] } },
+    sorts: { type: Array, default: () => { return [] } },
+    table_name: { type: String, default: null },
+    editFields: { type: Array, default: () => { return [] } },
+    selectable: { type: Boolean, default: false }
+  },
+  methods: {
+    has,
+    handleDetail (row, col, isNewTab) {
+      this.$emit('detail', row, col, isNewTab)
+    }
+  }
+}
+</script>

package/comps/CoreTableColumnHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="h-full flex items-center w-full">
+    <div
+      class="flex-1 pl-1.5 text-xs leading-4 line-clamp-2 whitespace-normal break-normal"
+      :title="label"
+    >
+      {{ label }}
+        <!-- {{ col_key }} -->
+    </div>
+    <div v-if="sortable" class="caret-wrapper w-6">
+      <i class="sort-caret ascending" @click.stop="$emit('sort-change', { prop: col_key, order: 'ascending' })" />
+      <i class="sort-caret descending" @click.stop="$emit('sort-change', { prop: col_key, order: 'descending' })" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['sortable', 'col_field', 'label', 'col_key'],
+  computed: {
+    isGroup () {
+      return this.col_key === 'is_group'
+    }
+  }
+}
+</script>

package/comps/CoreTableColumnRow.vue

@@ -0,0 +1,234 @@
+<template>
+  <div v-if="editFields.includes(col.col_field)" @dblclick.prevent.stop>
+    <core-form-item
+      :col="col"
+      :temp="scope.row"
+      project-id="5"
+      pk_field_name="_id"
+      default-size="small"
+      com-type="inline"
+      @temp-change="modelValue = $event"
+    />
+  </div>
+  <div v-else-if="col.col_field.endsWith('duration_justified')">
+    <core-duration-justified :value="getValue(col, scope.row)" />
+  </div>
+  <div
+    v-else-if="['image', 'profileImage'].includes(col.col_type)"
+    :class="['h-full flex items-center w-full', {
+      'justify-center': col.props.align === 'center',
+      'justify-end': col.props.align === 'right'
+    }]"
+  >
+    <core-table-image
+      :value="getValue(col, scope.row)"
+      :col_multiple="col.col_multiple"
+      :col_type="col.col_type"
+    />
+  </div>
+  <moment-add-code v-else-if="col.col_field.startsWith('moment')" :value="getValue(col, scope.row)" view-type="table" />
+  <core-vimeo-label v-else-if="col.col_field.includes('vimeo')" :value="getValue(col, scope.row)" />
+  <div v-else-if="col.col_field.includes('html')" v-html="getValue(col, scope.row)" />
+  <div
+    v-else
+    :class="['flex flex-row items-center w-full flex-wrap gap-x-2 h-full', {
+      'justify-center': col.props.align === 'center',
+      'justify-end': col.props.align === 'right'
+    }]"
+  >
+    <core-table-image v-if="col.refColumnImage" :value="scope.row[col.refColumnImage]" size="mini" hide-border circle />
+    <boolean-label v-if="col.col_type === 'boolean'" :value="scope.row[col.col_field]" :col_field="col.col_field" :label="getValue(col, scope.row)" />
+    <div
+      v-else
+      :class="['h-12 w-full flex items-center flex-wrap', {
+        'text-green-500 font-semibold': col.showStatus && isValue(col, scope.row),
+        'text-red-500 font-semibold': col.showStatus && !isValue(col, scope.row),
+        'justify-center': col.props.align === 'center',
+        'justify-end': col.props.align === 'right'
+      }]"
+    >
+      <div
+        v-if="isColor(col, scope.row) && isValue(col, scope.row)"
+        :style="{
+          color: getColor(col, scope.row),
+          background: getColor(col, scope.row) + '11',
+          borderColor: getColor(col, scope.row) + '33'
+        }"
+        class="rounded text-white px-1 py-[3px] text-xs leading-3 font-medium text-center w-full border relative"
+      >
+        <span>{{ getValue(col, scope.row) }}</span>
+        <div v-if="isPingExpired(col, scope.row)" class="absolute h-2 w-2 -top-1 -right-1">
+          <span class="relative flex h-2 w-2">
+            <!-- <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" /> -->
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-coreWarning" />
+          </span>
+        </div>
+        <div v-else-if="isPing(col, scope.row)" class="absolute h-2 w-2 -top-1 -right-1">
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :style="{ background: getColor(col, scope.row) + 'AA' }" />
+            <span class="relative inline-flex rounded-full h-2 w-2" :style="{ background: getColor(col, scope.row) + 'CC' }" />
+          </span>
+        </div>
+      </div>
+      <div
+        v-else
+        :class="['py-[2px] max-h-12 line-clamp-3 whitespace-pre-wrap break-words leading-[14px]', {
+          'text-coreBlue cursor-pointer hover:underline underline-offset-2': fillFields.includes(col.col_key)
+        }]"
+        @click="handleDetail"
+      >
+        <!-- <nuxt-link
+          v-if="col.col_key === 'student_id.given_name'"
+          :to="{ name: 'systemCode-tableDetail-id',
+                 params: { systemCode: 'training', tableDetail: 'service_students', id: get(scope.row, 'student_id._id') } }"
+          class="text-blue-500 underline underline-offset-4"
+        >
+          {{ getValue(col, scope.row) }}
+        </nuxt-link> -->
+        <span v-if="col.col_key.includes('custom_')" v-html="getValue(col, scope.row)" />
+        <span v-else>{{ getValue(col, scope.row) }}</span>
+        <span v-if="col.col_key === 'seq_num' && scope.row.is_group">
+          <i class="isax isax-profile-2user" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { get, has } from 'lodash'
+export default {
+  props: {
+    col: { type: Object, default: () => { return null } },
+    scope: { type: Object, default: () => { return null } },
+    fillFields: { type: Array, default: null },
+    editFields: { type: Array, default: () => { return [] } },
+    selectable: { type: Boolean, default: false }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return get(this.scope.row, this.col.col_field)
+      },
+      set (val) {
+        this.$emit('change-cell-value', { row: this.scope.row, col_field: this.col.col_field, value: val })
+      }
+    },
+    isGroup () {
+      return this.col.col_key === 'is_group'
+    }
+  },
+  methods: {
+    get,
+    isPingExpired (col, row) {
+      if (row.custom_is_end && row.custom_is_expired) {
+        return true
+      }
+      const regEndDate = get(row, 'reg_end_date')
+      if (!regEndDate) {
+        return false
+      }
+      const endDate = this.$moment(get(row, 'end_date'))
+      const dangerDay = 0
+      if (endDate) {
+        const dangerDate = this.$moment(regEndDate).add(dangerDay, 'days').startOf('days')
+        return dangerDate.isAfter(endDate, 'days')
+      }
+      return false
+    },
+    isPing (col, row) {
+      if (!col.child_key?.includes('.')) {
+        return false
+      }
+      const keys = col.child_key.split('.').slice(0, -1)
+      keys.push('is_ping')
+      const pingKey = keys.join('.')
+      return get(row, pingKey)
+    },
+    isColor (col, row) {
+      if (!col.child_key?.includes('.')) {
+        return false
+      }
+      const keys = col.child_key.split('.').slice(0, -1)
+      keys.push('color')
+      const colorKey = keys.join('.')
+      return has(row, colorKey)
+    },
+    getColor (col, row) {
+      if (!col.child_key?.includes('.')) {
+        return undefined
+      }
+      const keys = col.child_key.split('.').slice(0, -1)
+      keys.push('color')
+      const colorKey = keys.join('.')
+      return get(row, colorKey) || '#606266'
+    },
+    isValue (col, row) {
+      const colKey = col.child_key || col.col_key
+      const value = get(row, colKey) // || get(row, col.col_field)
+      return !!value
+    },
+    getValue (col, row) {
+      const colKey = col.child_key || col.col_key
+      if (col.col_multiple) {
+        const value = get(row, colKey) || get(row, col.col_field)
+        if (['manyToOne'].includes(col.col_type)) {
+          const ref_column_key = col.ref_column?.split(',')[0]
+          if (!value) {
+            return value
+          }
+          const len1 = value.length
+          const min1 = Math.min(len1, 4)
+          let txt = value.slice(0, min1).map(c => get(c, ref_column_key)).join(', ')
+          if (len1 > min1) {
+            txt += ', +' + (len1 - min1)
+          }
+          return txt
+        } else if (['file'].includes(col.col_type)) {
+          return value ? value.map(c => c.originalname).join(', ') : value
+        } else if (['image'].includes(col.col_type)) {
+          return value
+        } else {
+          return value ? value.join(', ') : value
+        }
+      }
+      const value = get(row, colKey)
+      if (['manyToOne'].includes(col.col_type)) {
+        return value
+      } else if (['file'].includes(col.col_type)) {
+        return value?.originalname
+      } else if (['boolean', 'booleannull'].includes(col.col_type)) {
+        return value ? 'Тийм' : 'Үгүй'
+      } else if (col.col_type === 'date') {
+        if (value && col.col_field?.endsWith('_month')) {
+          return this.$moment(value).format('YYYY-MM')
+        }
+        if (!value) {
+          return ''
+        }
+        return value
+      } else if (col.col_type === 'datetime') {
+        if (!value) {
+          return ''
+        }
+        return value
+      } else if (['seq_num'].includes(col.col_field)) {
+        return value
+      } else if (['number', 'decimal'].includes(col.col_type) && value) {
+        if (col.col_field?.includes('year') || col.col_field?.endsWith('duration_justified')) {
+          return value
+        } else {
+          return value.$format()
+        }
+      }
+      return value
+    },
+    handleDetail (event) {
+      if (this.fillFields.includes(this.col.col_key) && !this.selectable) {
+        this.$emit('detail', (event.ctrlKey || event.metaKey))
+        event.stopPropagation()
+        event.preventDefault()
+      }
+    }
+  }
+}
+</script>

package/comps/CoreTableConfig.vue

@@ -0,0 +1,248 @@
+<template>
+  <client-only>
+    <el-dialog v-el-drag-dialog :visible.sync="visible" title="Баганын тохиргоо" width="600px" append-to-body>
+      <div v-loading="loading" class="bg-white p-4 rounded">
+        <Container drag-handle-selector=".column-drag-handle" class="flex flex-col gap-2" @drop="onDrop">
+          <Draggable v-for="col in configColumns" :key="col._id">
+            <div class="flex flex-row border rounded px-2 items-center gap-2 bg-white py-2">
+              <div class="column-drag-handle text-lg">
+                <i class="el-icon-s-fold" />
+              </div>
+              <div>
+                <el-checkbox :value="!getConfigHidden(col)" @change="onChangeHidden(col)" />
+              </div>
+              <div class="flex-1">
+                {{ col.props.label }}
+              </div>
+              <div class="w-20">
+                <el-input :value="getConfigWidth(col)" size="mini" @input="onInputWidth(col, $event)" @change="onChangeWidth(col, $event)" />
+              </div>
+            </div>
+          </Draggable>
+        </Container>
+      </div>
+      <div slot="footer" class="flex">
+        <el-button icon="el-icon-refresh-left" size="small" :disabled="loading" @click="handleReset">
+          Тохиргоо буцаах
+        </el-button>
+        <div class="flex-1">
+          <el-button type="primary" icon="el-icon-refresh" :disabled="loading" size="small" @click="handleReload">
+            Дахин ачаалах
+          </el-button>
+          <el-button
+            icon="el-icon-close"
+            size="small"
+            :disabled="loading"
+            @click="visible = false"
+          >
+            Буцах
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </client-only>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { cloneDeep, has, isInteger } from 'lodash'
+import { Container, Draggable } from 'vue-smooth-dnd'
+import { applyDrag } from '../utils/helpers'
+export default {
+  name: 'CoreTableConfig',
+  components: { Container, Draggable },
+  props: {
+    api_id: { type: String, default: null },
+    table_id: { type: String, default: null },
+    sub_col_id: { type: String, default: null },
+    columns: { type: Array, default: () => { return [] } },
+    isShow: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      loading: false,
+      list: []
+    }
+  },
+  computed: {
+    ...mapGetters('user', ['user']),
+    ...mapGetters('settings', ['ignoreTableConfig']),
+    configTableId () {
+      return this.table_id.replace('F', '')
+    },
+    configColumns () {
+      const cols = this.columns.filter(c => c.props && !c.tableHidden && (this.showPkid || !['pkid', 'uuid'].includes(c.col_type))).map((col) => {
+        const item = this.list.find(c => c.column_id?._id === col.col_id)
+        const col_order = item && has(item, 'sort_order') && item?.sort_order !== null ? item?.sort_order : col.col_order
+        return { ...col, col_order }
+      })
+      cols.sort((a, b) => {
+        if (a.col_order !== b.col_order) { return Number(a.col_order) - Number(b.col_order) }
+        return Number(a._id) - Number(b._id)
+      })
+      return cols
+    },
+    visible: {
+      get () {
+        return this.isShow
+      },
+      set (val) {
+        this.$emit('update:isShow', val)
+      }
+    }
+  },
+  watch: {
+    visible () {
+      this.handleRefresh()
+    }
+  },
+  mounted () {
+    this.handleRefresh()
+  },
+  methods: {
+    handleReload () {
+      location.reload(true)
+    },
+    onInputWidth (col, $event) {
+      this.onSave({ column_id: col.col_id, col_width: $event }, false)
+    },
+    changeHeaderWidth ({ property, newWidth }) {
+      const col = this.configColumns.find(c => c.col_key === property)
+      if (col) {
+        this.onChangeWidth(col, newWidth)
+      }
+    },
+    onChangeWidth (col, $event) {
+      let colWidth = $event
+      if (!colWidth) {
+        colWidth = 'auto'
+      } else if (isInteger(parseInt(colWidth))) {
+        colWidth = parseInt(colWidth) + 'px'
+      } else {
+        colWidth = 'auto'
+      }
+      this.onSave({ column_id: col.col_id, col_width: colWidth })
+    },
+    getConfigWidth (col) {
+      const item = this.list.find(c => c.column_id === col.col_id)
+      const colWidth = [null, undefined].includes(item?.col_width) ? col.props.width : item.col_width
+      if (colWidth === 'auto') {
+        return ''
+      }
+      return colWidth?.replace('px', '')
+    },
+    onChangeHidden (col) {
+      const hidden = this.getConfigHidden(col)
+      this.onSave({ column_id: col.col_id, hidden: !hidden })
+    },
+    getConfigHidden (col) {
+      const item = this.list.find(c => c.column_id === col.col_id)
+      return [null, undefined].includes(item?.hidden) ? col.configHidden : item?.hidden
+    },
+    onDrop (e) {
+      if (!this.user) {
+        return
+      }
+      const cols = cloneDeep(this.configColumns)
+      const sortedCols = applyDrag(cols, e)
+      let i = 0
+      for (const col of sortedCols) {
+        const item = this.list.find(c => c.column_id === col.col_id)
+        if (item) {
+          item.sort_order = i
+        } else {
+          this.list.push({
+            api_id: this.api_id,
+            table_id: this.configTableId,
+            user_id: this.user._id,
+            _id: item?._id,
+            column_id: col.col_id,
+            sort_order: i
+          })
+        }
+        i++
+      }
+      this.handleSave()
+    },
+    onSave (cc, isSave = true) {
+      if (!this.user) {
+        return
+      }
+      const item = this.list.find(c => c.column_id === cc.column_id)
+      if (item) {
+        for (const key in cc) {
+          item[key] = cc[key]
+        }
+      } else {
+        this.list.push({
+          api_id: this.api_id,
+          table_id: this.configTableId,
+          user_id: this.user._id,
+          _id: item?._id,
+          ...cc
+        })
+      }
+      if (isSave) {
+        this.handleSave()
+      }
+    },
+    async handleReset () {
+      try {
+        if (this.loading) {
+          return
+        }
+        await this.$showConfirm('Та тухайн хүснэгтийн анхны тохиргоонд буцаах уу?')
+        this.loading = true
+        for (const r of this.list) {
+          await this.$axios.delete(`1/config_table_users/${r._id}`)
+        }
+        this.handleReload()
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleSave () {
+      try {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.post('multiple/1/config_table_users', this.list)
+        this.list = data
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleRefresh () {
+      try {
+        if (this.ignoreTableConfig) {
+          return
+        }
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get('list/1/config_table_users', {
+          params: {
+            search: JSON.stringify({
+              api_id: { val: this.api_id || 'null', t: 'number', op: 'eq' },
+              table_id: { val: this.configTableId || 'null', t: 'number', op: 'eq' },
+              sub_col_id: { val: this.sub_col_id || 'null', t: 'number', op: 'eq' },
+              user_id: { val: this.user._id || 'null', t: 'number', op: 'eq' }
+            })
+          },
+          fields: ['_id', 'column_id', 'hidden', 'sort_order', 'col_width', 'sub_col_id._id'].join(',')
+        })
+        this.list = data
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreTableImage.vue

@@ -0,0 +1,89 @@
+<template>
+  <div :class="['flex gap-1 items-center', { 'justify-center': !col_multiple }]">
+    <div
+      v-if="images.length === 0"
+      :class="['flex items-center justify-center bg-coreBgInput text-coreBaseBorder', {
+        'rounded': !hideBorder,
+        'rounded-full': circle,
+        'w-10 h-10': size === 'medium',
+        'w-8 h-8': size === 'small',
+        'w-6 h-6': size === 'mini'
+      }]"
+    >
+      <i v-if="['profileImage'].includes(col_type)" class="isax isax-user text-3xl" />
+      <i v-else class="isax isax-image text-lg" />
+    </div>
+    <div
+      v-for="image in tableImages"
+      :key="image._id"
+      :class="['flex items-center justify-center bg-gray-200', {
+        'rounded': !hideBorder,
+        'rounded-full': circle,
+        'w-10 h-10': size === 'medium',
+        'w-8 h-8': size === 'small',
+        'w-6 h-6': size === 'mini'
+      }]"
+    >
+      <img
+        :class="['object-cover h-full w-full object-top', {
+          'rounded': !hideBorder,
+          'rounded-full': circle
+        }]"
+        :src="`/api/file/thumbnail/${image?._id}?tid=${image?.tid}`"
+      >
+    </div>
+    <div v-if="images.length > 1" class="font-bold text-gray-500">
+      +{{ images.length - 1 }}
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    value: {
+      type: [String, Object, Array],
+      default: ''
+    },
+    col_multiple: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: val => ['mini', 'medium', 'large'].includes(val)
+    },
+    hideBorder: {
+      type: Boolean,
+      default: false
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    col_type: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env']),
+    images () {
+      if (!this.value) {
+        return []
+      }
+      if (typeof this.value === 'object' && !Array.isArray(this.value)) {
+        return [this.value]
+      }
+      if (typeof this.value === 'object' && Array.isArray(this.value)) {
+        return this.value
+      }
+      return this.value
+    },
+    tableImages () {
+      return this.images.slice(0, 2)
+    }
+  }
+}
+</script>