eztech-core-components 1.0.0

package/comps/Animation/Checkbox.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="w-5 h-5 border-2 rounded-sm flex items-center justify-center cursor-pointer transition-all duration-200
+          border-gray-400 hover:border-coreBlue"
+    :class="isChecked ? '!bg-coreBlue !border-coreBlue scale-110' : ''"
+    @click="isChecked = !isChecked"
+  >
+    <svg
+      v-if="isChecked"
+      class="w-3 h-3 text-white transition-opacity duration-200"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3"
+      viewBox="0 0 24 24"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AnimationCheckBox',
+  props: {
+    value: { type: Boolean, default: false }
+  },
+  computed: {
+    isChecked: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/Animation/Radio.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    :class="['w-5 h-5 rounded-full border-2 flex items-center justify-center cursor-pointer transition-all duration-200 border-gray-400 hover:border-coreBlue', {
+      '!border-coreBlue scale-110': isChecked
+    }]"
+    @click="isChecked = !isChecked"
+  >
+    <div
+      :class="['w-2.5 h-2.5 rounded-full bg-coreBlue transition-opacity duration-200', isChecked ? 'opacity-100' : 'opacity-0']"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'AnimationCheckBox',
+  props: {
+    value: { type: Boolean, default: false }
+  },
+  computed: {
+    isChecked: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/BooleanLabel.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-tag :type="value ? yesType : noType" size="small" disable-transitions>
+    <span class="font-semibold">{{ label }}</span>
+  </el-tag>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: [Boolean, Number],
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    col_field: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    yesType () {
+      if (this.col_field === 'custom_is_expired') {
+        return 'warning'
+      }
+      return 'success'
+    },
+    noType () {
+      if (this.col_field === 'custom_is_expired') {
+        return 'info'
+      }
+      if (this.col_field === 'is_active') {
+        return 'warning'
+      }
+      return 'info'
+    }
+  }
+}
+</script>

package/comps/CardButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <button
+    class="border-white/[0.7] hover:border-white active:border-white/[0.9]  border-2 rounded-full h-10 w-10 flex items-center justify-center text-white/[0.7] hover:text-white active:text-white/[0.9]"
+    @click="$emit('click')"
+  >
+    <i :class="icon" />
+  </button>
+</template>
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/comps/CardImage.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="rounded-t group text-gray-300 bg-gray-100 border object-cover h-40 w-64 flex items-center justify-center text-6xl relative">
+    <img
+      v-if="image"
+      :src="`/api/${env.fileRoutePath}/thumbnail/` + image"
+      class="rounded-t h-40 w-64 object-cover"
+    >
+    <i v-else class="el-icon-picture" />
+    <transition name="el-zoom-in-bottom">
+      <div class="absolute hidden group-hover:flex bg-black/[.5] top-0 left-0 w-full h-full rounded-t flex-row items-center justify-center text-xl gap-4">
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['env']),
+    images: {
+      get () {
+        if (!this.value) {
+          return []
+        }
+        return this.value.split(',')
+      }
+    },
+    image () {
+      return this.images.length > 0 ? this.images[0] : null
+    }
+  }
+}
+</script>

package/comps/CardItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="w-64 flex flex-col">
+    <card-image :value="item.image">
+      <card-button
+        icon="el-icon-edit"
+        @click="$emit('update')"
+      />
+      <card-button
+        icon="el-icon-delete"
+        @click="$emit('delete')"
+      />
+    </card-image>
+    <div class="flex-1 p-1 border-r border-l">
+      <div v-if="nameField" class="text-gray-700 text-sm line-clamp-2 text-center">
+        {{ item[nameField] }}
+      </div>
+      <div v-if="noteField" class="text-gray-400 text-xs text-justify line-clamp-2">
+        {{ item[noteField] }}
+      </div>
+    </div>
+    <div v-if="numberFields.length > 0" class="bg-gray-100 flex text-xs font-bold text-gray-500">
+      <card-number
+        v-for="field in numberFields.slice(0, 3)"
+        :key="field.name"
+        :text="item[field.name]"
+        :label="field.props.label"
+        :col-type="field.type"
+      />
+    </div>
+    <button
+      class="rounded-b bg-emerald-500 hover:bg-emerald-700 active:bg-emerald-800 text-white text-center py-2 w-full text-xs font-semibold"
+      @click="$emit('detail')"
+    >
+      Дэлгэрэнгүй үзэх
+    </button>
+  </div>
+</template>
+<script>
+import CardImage from './CardImage.vue'
+import CardNumber from './CardNumber.vue'
+export default {
+  name: 'CardItem',
+  components: { CardImage, CardNumber },
+  props: {
+    item: {
+      type: Object,
+      default: () => { return null }
+    },
+    nameField: {
+      type: String,
+      default: ''
+    },
+    noteField: {
+      type: String,
+      default: ''
+    },
+    numberFields: {
+      type: Array,
+      default: () => { return [] }
+    }
+  }
+}
+</script>

package/comps/CardList.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-wrap gap-4 w-full min-h-[108px] justify-center">
+    <div v-if="!loading && list.length === 0" class="w-full text-gray-300 text-lg gap-2 text-center py-10">
+      <span class="font-semibold">
+        <i class="el-icon-edit-outline mr-2" />
+        Бүртгэл хоосон байна.
+      </span>
+    </div>
+    <card-item
+      v-for="item in list"
+      :key="item[pk_field_name]"
+      :item="item"
+      :name-field="nameField"
+      :note-field="noteField"
+      :number-fields="numberFields"
+      @update="$emit('update', item)"
+      @delete="$emit('delete', item)"
+      @detail="$emit('detail', item)"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => { return [] }
+    },
+    columns: {
+      type: Array,
+      default: () => { return [] }
+    },
+    pk_field_name: {
+      type: String,
+      default: '_id'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    fillFields () {
+      return this.columns.filter(c => c.props.width === 'auto')
+    },
+    nameField () {
+      return this.fillFields.length > 0 ? this.fillFields[0].name : null
+    },
+    noteField () {
+      return this.fillFields.length > 1 ? this.fillFields[1].name : null
+    },
+    numberFields () {
+      return this.columns.filter(c => c.props.width !== 'auto' && !['sortOrder'].includes(c.name) && ['number', 'date'].includes(c.type))
+    }
+  }
+}
+</script>

package/comps/CardNumber.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex-1 class text-center py-1 border-t border-l last:border-r">
+    <div class="text-xs font-normal">
+      {{ label }}
+    </div>
+    <div>{{ colType === 'date' ? $moment(text).format('YYYY-MM-DD') : text }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CardNumber',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    colType: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/comps/Config/SelectColumns.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="max-h-48 overflow-y-auto border rounded px-2 py-1 flex flex-col gap-1">
+      <div
+        v-for="(item, index) of sortedList"
+        :key="item.col_field + index"
+        class="flex items-center gap-2 "
+      >
+        <el-checkbox :value="valueList.some(c => c.col_field === item.col_field)" @change="($event) => handleChangeSelect(item, $event)" />
+        <div class="flex-1 flex-col flex leading-2  text-sm">
+          <span class="font-normal">{{ item.col_title }}</span>
+          <span class="font-normal text-coreSecondaryText">{{ item.col_field }}</span>
+        </div>
+      </div>
+    </div>
+    <el-checkbox v-model="isEditor">
+      Is Editor
+    </el-checkbox>
+    <div v-if="isEditor">
+      <el-input v-model="modelValue" type="textarea" />
+    </div>
+    <div v-else>
+      {{ selectedList.length }} / {{ sortedList.length }}
+      <Container class="max-h-48 overflow-y-auto border rounded w-full py-1 px-2" drag-handle-selector=".column-drag-handle" @drop="onDrop">
+        <Draggable
+          v-for="(item, index) of selectedList"
+          :key="item.col_field + '' + index"
+        >
+          <div
+            class="flex flex-row items-center justify-center gap-2"
+          >
+            {{ index + 1 }}
+            <el-checkbox :value="valueList.some(c => c.col_field === item.col_field)" @change="($event) => handleChangeSelect(item, $event)" />
+            <div class="flex-1 flex-col flex leading-2  text-sm">
+              <span class="font-normal">{{ item.col_title }}</span>
+              <span class="font-normal text-coreSecondaryText">{{ item.col_field }}</span>
+            </div>
+            <div class="column-drag-handle text-lg p-3 cursor-grab">
+              <i class="el-icon-s-fold" />
+            </div>
+          </div>
+        </Draggable>
+      </Container>
+    </div>
+  </div>
+</template>
+<script>
+import { get } from 'lodash'
+import { Container, Draggable } from 'vue-smooth-dnd'
+import { applyDrag } from '../../utils/helpers'
+export default {
+  components: { Container, Draggable },
+  props: {
+    parentTemp: { type: Object, default: () => { return null } },
+    value: { type: String, default: () => { return null } }
+  },
+  data () {
+    return {
+      isEditor: false,
+      list: []
+    }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    valueList () {
+      return this.value
+        ? this.value.split(',').map((c) => {
+          const k = c.split('*')
+          const k0 = get(k, '[0]')
+          const k1 = get(k, '[1]')
+          return { col_field: k0, col_alias: k1 }
+        }).filter(c => c.col_field)
+        : []
+    },
+    selectedList () {
+      const list = [...this.list].filter(c => this.valueList.some(k => c.col_field === k.col_field)).map((c) => {
+        c.index = this.valueList.findIndex(k => c.col_field === k.col_field)
+        return c
+      })
+      list.sort((a, b) => a.index > b.index ? 1 : -11)
+      return list
+    },
+    sortedList () {
+      return this.list.filter(c => !this.valueList.some(k => c.col_field === k.col_field))
+    }
+  },
+  watch: {
+    'parentTemp.table_id' () {
+      this.getList()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChangeSelect ({ col_field, col_alias }, checked) {
+      if (checked) {
+        const index = this.selectedList.findIndex(c => c.col_field === col_field)
+        if (index === -1) {
+          const list = [...this.valueList].filter(c => this.list.some(k => c.col_field === k.col_field))
+          list.push({ col_field, col_alias })
+          this.$log('list', list)
+          this.$emit('input', list.map(c => c.col_field + (c.col_alias ? '*' + c.col_alias : '')).join(','))
+        }
+      } else {
+        const index = this.selectedList.findIndex(c => c.col_field === col_field)
+        if (index > -1) {
+          const list = [...this.valueList].filter(c => this.list.some(k => c.col_field === k.col_field))
+          const index = list.findIndex(c => c.col_field === col_field)
+          list.splice(index, 1)
+          this.$log('list', list)
+          this.$emit('input', list.map(c => c.col_field + (c.col_alias ? '*' + c.col_alias : '')).join(','))
+        }
+      }
+    },
+    onDrop (e) {
+      const list = [...this.valueList]
+      const newList = applyDrag(list, e)
+      this.$emit('input', newList.map(c => c.col_field + (c.col_alias ? '*' + c.col_alias : '')).join(','))
+    },
+    async getList () {
+      if (!this.parentTemp || !this.parentTemp.table_id) {
+        this.list = []
+      } else {
+        this.list = (await this.$axios.get(`config/columns/${this.parentTemp.table_id._id}`)).data
+      }
+    }
+  }
+}
+</script>

package/comps/CoreAgeMonth.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-row gap-1">
+    <core-inline-number v-model="age" :disabled="disabled" />
+    <div>Сар</div>
+    <core-inline-number v-model="month" :disabled="disabled" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CoreAgeMonth',
+  props: {
+    value: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  computed: {
+    age: {
+      get () {
+        return parseInt(this.value)
+      },
+      set (val) {
+        if (val < 0) {
+          return
+        }
+        this.$emit('input', Number(String(val) + '.' + String(this.month).padStart(2, '0')))
+      }
+    },
+    month: {
+      get () {
+        if (this.value) {
+          const fractionPart = Number(this.value) % 1
+          return Math.floor(fractionPart * 100)
+        }
+        return 0
+      },
+      set (val) {
+        if (val < 0 || val > 11) {
+          return
+        }
+        this.$emit('input', Number(String(this.age) + '.' + String(val).padStart(2, '0')))
+      }
+    }
+  }
+}
+</script>

package/comps/CoreAppPassword.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-input v-model="modelValue">
+    <el-button slot="append" icon="el-icon-refresh" @click="handleRefresh" />
+  </el-input>
+</template>
+<script>
+import { generateAppPassword } from '../utils/data-helper'
+export default {
+  name: 'CoreAppPassword',
+  props: {
+    value: { type: String, default: '' }
+  },
+  computed: {
+    modelValue: {
+      get () { return this.value },
+      set (val) { this.$emit('input', val) }
+    }
+  },
+  methods: {
+    async handleRefresh () {
+      try {
+        this.modelValue = generateAppPassword()
+        await navigator.clipboard.writeText(this.value)
+        // this.$showSuccess('Нууц үг хуулагдлаа')
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreAutocomplete.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-autocomplete
+    v-model="modelValue"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :maxlength="maxlength"
+    class="w-full"
+  />
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { get } from 'lodash'
+export default {
+  name: 'CoreAutocomplete',
+  props: {
+    value: { type: [String], default: null },
+    table_name: { type: String, default: null },
+    ref_column: { type: String, default: null },
+    pk_field_name: { type: String, default: '_id' },
+    projectId: { type: [String, Number], default: '5' },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    placeholder: { type: String, default: 'Сонгох' },
+    maxlength: { type: Number, default: null }
+  },
+  data () {
+    return {
+      list: [],
+      loading: false,
+      timeout: 0,
+      timeoutDebounce: 0
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['references']),
+    referenceName () {
+      return `${this.projectId}-${this.table_name}`
+    },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    ...mapActions('settings', ['set_references']),
+    get,
+    querySearch (queryString, cb) {
+      const list = this.list
+      const results = queryString ? list.filter(this.createFilter(queryString)) : list
+      cb(results?.map((c) => { return { value: c.name } })) // eslint-disable-line n/no-callback-literal
+    },
+    createFilter (queryString) {
+      return (item) => {
+        return (get(item, this.ref_column).toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    focus () {
+      this.$refs.refComponent.focus()
+    },
+    async getList () {
+      try {
+        if (this.references[this.referenceName]) {
+          this.list = this.references[this.referenceName]
+          return
+        }
+        this.loading = true
+        const { data } = await this.$axios.get(`reference/${this.projectId}/${this.table_name}`, {
+          params: {
+            fields: this.ref_column
+          }
+        })
+        this.list = data.list
+        this.set_references({
+          referenceName: this.referenceName,
+          list: data.list
+        })
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>