eztech-core-components 1.0.0

package/comps/CoreLocked.vue

@@ -0,0 +1,151 @@
+<template>
+  <transition name="el-fade-in">
+    <div v-if="isLocked" class="h-screen w-screen bg-black/10 fixed z-[2002] flex items-center justify-center backdrop-blur-sm">
+      <div class="w-[400px] bg-white rounded-2xl py-4 px-6 flex flex-col gap-4 shadow-lg">
+        <input type="text" name="fakeusernameremembered" style="display:none">
+        <input type="password" name="fakepasswordremembered" style="display:none">
+        <div class="border-b pb-2 font-bold text-coreSecondaryText text-center">
+          Түгжигдсэн
+        </div>
+        <el-alert title="Нууц үгээ оруулна уу" :description="`Та идэвхгүй ${idleTimeoutServer / 60 / 1000} минут болсон байна.`" show-icon :closable="false" />
+        <el-input :value="user.surname?.slice(0, 1) + '.' + user.given_name" disabled prefix-icon="el-icon-user" size="large" />
+        <el-input
+          ref="txtPassword"
+          v-model="password"
+          type="password"
+          size="large"
+          name="real-password"
+          prefix-icon="el-icon-key"
+          placeholder="Нууц үг оруулна уу"
+          clearable
+          show-password
+          autocomplete="new-password"
+          @keydown.native.enter.prevent.stop="handleUnlock"
+        />
+        <div class="pt-2">
+          <div class="text-center">
+            <el-button
+              size="large"
+              type="primary"
+              icon="el-icon-check"
+              :loading="loading"
+              @click="handleUnlock"
+            >
+              Нээх
+            </el-button>
+          </div>
+          <div class="text-center pt-2">
+            <el-button type="text" @click="logout_locked">
+              Системээс гарах
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'CoreLocked',
+  props: {
+    apiPath: { type: String, default: 'auth/user' },
+    idleTimeout: { type: Number, default: 5 * 60 * 1000 },
+    localKey: { type: String, default: 'forensic' }
+  },
+  data () {
+    return {
+      password: '',
+      loading: false,
+      idleTimer: null
+    }
+  },
+  computed: {
+    ...mapGetters('user', ['isLocked', 'user']),
+    isDevelopment () {
+      return process.env.NODE_ENV === 'development' && true
+    },
+    idleTimeoutServer () {
+      return process.env.NODE_ENV === 'development' ? 10000 : this.idleTimeout
+    }
+  },
+  watch: {
+    isLocked () {
+      this.password = ''
+      this.handleFocus()
+    }
+  },
+  mounted () {
+    localStorage.setItem(`${this.localKey}_appLocked`, this.isLocked ? 'true' : 'false')
+    this.handleFocus()
+    this.addIdleListeners()
+  },
+  beforeDestroy () {
+    this.removeIdleListeners()
+  },
+  methods: {
+    ...mapActions('user', ['logout_locked', 'set_locked']),
+    addIdleListeners () {
+      if (this.isDevelopment) {
+        return
+      }
+      localStorage.setItem(`${this.localKey}_appLocked`, this.isLocked ? 'true' : 'false')
+      const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart']
+      events.forEach(e => window.addEventListener(e, this.resetIdleTimer))
+      window.addEventListener('storage', this.changeStorage)
+      this.resetIdleTimer()
+    },
+    removeIdleListeners () {
+      const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart']
+      events.forEach(e => window.removeEventListener(e, this.resetIdleTimer))
+      window.removeEventListener('storage', this.changeStorage)
+    },
+    resetIdleTimer () {
+      clearTimeout(this.idleTimer)
+      this.idleTimer = setTimeout(this.lockScreen, this.idleTimeoutServer)
+      localStorage.setItem(`${this.localKey}_lastActivity`, Date.now())
+    },
+    lockScreen () {
+      this.$axios.post(`${this.apiPath}/lock`).then((_) => {
+        this.set_locked(true)
+        localStorage.setItem(`${this.localKey}_appLocked`, 'true')
+      }).catch((_) => {})
+    },
+    changeStorage (event) {
+      if (event.key === `${this.localKey}_appLocked` && event.newValue !== 'true') {
+        this.set_locked(false)
+      } else if (event.key === `${this.localKey}_lastActivity`) {
+        this.resetIdleTimer()
+      } else if (event.key === `${this.localKey}_checkLogin`) {
+        setTimeout(() => {
+          window.location.reload()
+        }, 2000)
+      }
+    },
+    async handleFocus () {
+      if (this.isLocked) {
+        await this.$nextTick()
+        this.$refs.txtPassword?.focus()
+      }
+    },
+    async handleUnlock () {
+      try {
+        this.loading = true
+        await this.$axios.post(`${this.apiPath}/unlock`, {
+          password: this.password
+        })
+        this.set_locked(false)
+        localStorage.setItem(`${this.localKey}_appLocked`, 'false')
+        if (this.$route.name?.includes('idle')) {
+          location.reload()
+        }
+        this.$showSuccess('Амжилттай нээлээ.')
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreMergeConfirm.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dialog :visible.sync="merge.visible" title="Та энэ мөрийг устгахдаа итгэлтэй байна уу?" width="500px">
+    <el-form class="bg-white rounded p-4">
+      <el-form-item label="Тайлбар оруулна уу?">
+        <el-input v-model="description" type="textarea" :maxlength="300" />
+      </el-form-item>
+      <el-form-item label="Өөр утгатай нэгтгэх эсэх?">
+        <el-checkbox v-model="is_merge" />
+      </el-form-item>
+      <el-form-item v-if="is_merge" label="Нэгтгэх устгах сонгох" required>
+        <core-select v-model="merge_id" :project-id="merge.project_id" :table_name="merge.table_name" :ref_column="merge.ref_column" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="success" @click="handleConfirm">
+        Тийм
+      </el-button>
+      <el-button @click="set_merge_cancel">
+        Үгүй
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'CoreMergeConfirm',
+  data () {
+    return {
+      description: '',
+      is_merge: false,
+      merge_id: null
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['merge'])
+  },
+  watch: {
+    'merge.visible' () {
+      this.description = ''
+      this.is_merge = false
+      this.merge_id = null
+    }
+  },
+  methods: {
+    ...mapActions('settings', ['set_merge_confirm', 'set_merge_cancel']),
+    handleConfirm () {
+      try {
+        if (this.is_merge && !this.merge_id) {
+          this.$customError('Нэгтгэх утга сонгоно уу.')
+        }
+        this.set_merge_confirm({ description: this.description, is_merge: this.is_merge, merge_id: this.merge_id })
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreMultipleInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="['flex flex-col gap-2', { 'rounded border p-2': border }]">
+    <div v-for="(val, index) in modelValue" :key="`multi${index}`" class="flex flex-row gap-2">
+      <el-input :value="val" clearable :size="size" :maxlength="maxlength" @input="($event) => handleChange($event, index)" />
+      <el-button :size="size" icon="el-icon-minus" circle @click="() => handleRemove(index)" />
+    </div>
+    <el-button type="text" :size="size" icon="el-icon-plus" @click="handleAdd">
+      Нэмэх
+    </el-button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CoreMultipleInput',
+  props: {
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    value: { type: [Array, String], default: null },
+    border: { type: Boolean, default: true },
+    maxlength: { type: Number, default: null }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        const val = this.value || ['']
+        return val
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleAdd () {
+      const val = [...this.modelValue]
+      val.push('')
+      this.modelValue = [...val]
+    },
+    handleRemove (index) {
+      const val = [...this.modelValue]
+      val.splice(index, 1)
+      this.modelValue = [...val]
+    },
+    handleChange ($event, index) {
+      const val = [...this.modelValue]
+      val.splice(index, 1, $event)
+      this.modelValue = [...val]
+    }
+  }
+}
+</script>

package/comps/CorePanel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div v-if="title" :class="['pb-4', titleClass]">
+      <i v-if="icon" :class="icon" />
+      {{ title }}
+    </div>
+    <div :class="['flex', bodyClass]">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    bodyClass: {
+      type: String,
+      default: ''
+    },
+    titleClass: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/comps/CorePdfDialog.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="pdfTitle" width="900px" class="dialog-pdf">
+    <div v-if="loading" class="bg-[#525659] px-20 h-[900px] flex items-center justify-center text-slate-200 text-lg font-medium gap-2">
+      <i class="el-icon-loading" /> Түр хүлээнэ үү..
+    </div>
+    <iframe
+      v-else-if="href"
+      id="pdfFrame"
+      :src="href"
+      width="100%"
+      height="900px"
+      frameborder="0"
+      @load="handlePrintPdf"
+    />
+  </el-dialog>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  data () {
+    return {
+      pdfDownload: false,
+      loading: false,
+      href: null,
+      numPages: 0
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env', 'pdfUrl', 'pdfTitle', 'isPdfPrint', 'pdfPageSize']),
+    visible: {
+      get () {
+        return !!this.pdfUrl
+      },
+      set () {
+        if (!this.isPdfPrint) {
+          this.href = null
+        }
+        this.set_pdf_url({ url: null, title: '' })
+      }
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        this.handlePrint()
+      }
+    }
+  },
+  methods: {
+    ...mapActions('settings', ['set_pdf_url']),
+    async handlePrint () {
+      try {
+        this.loading = true
+        this.href = null
+        const response = await this.$axios.get(this.pdfUrl, {
+          responseType: 'blob',
+          params: {
+            pageSize: this.pdfPageSize
+          }
+        })
+        const pdfUrl = URL.createObjectURL(response.data)
+        this.href = pdfUrl
+      } catch (err) {
+        this.$showErrorBlob(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    handlePrintPdf () {
+      if (!this.isPdfPrint) {
+        return
+      }
+      const iframe = document.getElementById('pdfFrame')
+      if (iframe && iframe.contentWindow) {
+        iframe.contentWindow.focus()
+        iframe.contentWindow.print()
+      }
+      if (this.isPdfPrint) {
+        this.visible = false
+      }
+    }
+  }
+}
+</script>

package/comps/CorePdfView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div v-if="loading" class="bg-[#525659] px-20 h-[900px] flex items-center justify-center text-slate-200 text-lg font-medium gap-2">
+      <i class="el-icon-loading" /> Түр хүлээнэ үү..
+    </div>
+    <embed
+      v-else
+      :src="href"
+      type="application/pdf"
+      width="100%"
+      height="900px"
+      frameborder="0"
+      :title="pdfTitle"
+    >
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    pdfUrl: { type: String, default: null },
+    pdfTitle: { type: String, default: '' }
+  },
+  data () {
+    return {
+      loading: false,
+      href: null
+    }
+  },
+  watch: {
+    pdfUrl () {
+      this.handlePrint()
+    }
+  },
+  mounted () {
+    this.handlePrint()
+  },
+  methods: {
+    async handlePrint () {
+      try {
+        this.loading = true
+        this.href = null
+        const response = (await this.$axios.get(this.pdfUrl, { responseType: 'blob' }))
+        this.href = URL.createObjectURL(response.data)
+      } catch (err) {
+        this.$showErrorBlob(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreRegexp.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col gap-1 text-xs border rounded-lg p-4">
+    <div
+      v-for="(item, index) in list"
+      :key="'check' + index"
+      :class="['flex flex-row items-center gap-1', {
+        'text-coreSuccess line-through': item.isValid,
+        'text-coreDanger': !item.isValid
+      }]"
+    >
+      <span class="text-base">
+        <i v-if="item.isValid" class="el-icon-circle-check" />
+        <i v-else class="el-icon-circle-close" />
+      </span>
+      <span>{{ item.message }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import { regexps } from '../utils/regexps'
+export default {
+  props: {
+    value: { type: String, default: '' },
+    pattern: { type: String, default: null }
+  },
+  computed: {
+    list () {
+      if (!this.pattern) {
+        return []
+      }
+      const regexp = regexps[this.pattern]
+      return regexp?.checkList?.map((c) => {
+        return {
+          message: c.message,
+          isValid: c.pattern.test(this.value)
+        }
+      })
+    }
+  }
+}
+</script>