eztech-core-components 1.0.0

package/directives/el-dragDialog/drag.js

@@ -0,0 +1,34 @@
+export default {
+  bind (el) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style = 'cursor:move;'
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+      let styL, styT
+      /* eslint-disable */
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+      /* eslint-enable */
+      document.onmousemove = function (e) {
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+      }
+
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

package/index.js

@@ -0,0 +1,7 @@
+// Default Nuxt config export
+export { getDefaultConfig } from './utils/default-nuxt-config'
+
+// Plugins export
+// export { default as GlobalMethods } from './plugins/global-methods'
+// Example of importing styles
+// import './assets/css/index.css'

package/middleware/auth.js

@@ -0,0 +1,28 @@
+export default ({ route, store, redirect, query, params }) => {
+  const user = store.getters['user/user']
+  const isLocked = store.getters['user/isLocked']
+  if (isLocked) {
+    if (route.name !== 'idle') {
+      redirect({ name: 'idle', query })
+    }
+  } else {
+    if (query.notif_id) {
+      store.dispatch('user/set_notification_read', { id: query.notif_id })
+    }
+    if (route.name === 'idle') {
+      redirect('/')
+    } else if (user && user.required_password && route.name !== 'changePassword') {
+      redirect({ name: 'changePassword', query: { ...query, password: 'visible' } })
+    } else if (!store.getters['user/user'] && query.id !== 'create') {
+      if (params.tableDetail === 'service_reg_forensics') {
+        redirect({ name: 'reg-checkObject', query: { id: params.id } })
+      } else {
+        redirect({ name: 'login', query })
+      }
+    } else if (query.token) {
+      const cloneQuery = Object.assign({}, query)
+      delete cloneQuery.token
+      redirect({ query: cloneQuery })
+    }
+  }
+}

package/middleware/confirm-leave.js

@@ -0,0 +1,15 @@
+import { MessageBox } from 'element-ui'
+export default async function ({ store, next }) {
+  if (!process.client) {
+    return
+  }
+  const unsavedChanges = store.getters['settings/unsavedChanges']
+  if (unsavedChanges) {
+    await MessageBox.confirm('Та өөрчлөлтийг хадгалахгүйгээр хуудсыг орхихдоо итгэлтэй байна уу?', { title: 'Асуулт', showIcon: true, type: 'warning' }).then(() => {
+      store.dispatch('settings/set_unsaved_changes', false)
+      // next()
+    }).catch(() => {
+      next(false)
+    })
+  }
+}

package/middleware/login.js

@@ -0,0 +1,6 @@
+export default ({ store, redirect, query }) => {
+  const user = store.getters['user/user']
+  if (user) {
+    redirect({ name: 'index', query })
+  }
+}

package/middleware/router.js

@@ -0,0 +1,5 @@
+export default ({ store }) => {
+  store.dispatch('set_error', null)
+  store.dispatch('set_warning', null)
+  store.dispatch('set_success', null)
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "eztech-core-components",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Reusable Nuxt 2 core components library",
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "assets",
+    "comps",
+    "directives",
+    "middleware",
+    "plugins",
+    "store",
+    "utils",
+    "ckeditor",
+    "index.js"
+  ],
+  "scripts": {
+    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
+    "lint": "npm run lint:js",
+    "lintfix": "npm run lint:js -- --fix"
+  },
+  "keywords": [
+    "nuxt2",
+    "vue2",
+    "components",
+    "library"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.30.0",
+    "vue": "^2.7.10",
+    "vue-cropperjs": "^4.2.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.19.1",
+    "@nuxtjs/eslint-config": "^11.0.0",
+    "@nuxtjs/eslint-module": "^3.1.0",
+    "@nuxtjs/moment": "^1.6.1",
+    "eslint": "^8.24.0",
+    "eslint-plugin-nuxt": "^4.0.0",
+    "eslint-plugin-vue": "^9.5.1"
+  }
+}

package/plugins/axios.js

@@ -0,0 +1,51 @@
+import { get } from 'lodash'
+const setRedirect = ({ redirect, app, path, isReload }) => {
+  if (process.client) {
+    app.router.push(path)
+    if (isReload) {
+      localStorage.setItem('forensic_checkLogin', Date.now())
+      location.reload()
+    }
+  } else {
+    redirect(path)
+  }
+}
+export default ({ $axios, query, store, $cookies, redirect, i18n, route, params, app }) => {
+  const layout = route.matched[0]?.components.default.options.layout || 'default'
+  $axios.onRequest((config) => {
+    // const token = query.token || store.getters['user/user']
+    // if (token) {
+    //   $axios.defaults.headers.common.Authorization = `Bearer ${token}`
+    // } else {
+    //   delete $axios.defaults.headers.common.Authorization
+    // }
+    const tokenName = store.getters['user/tokenName']
+    if (tokenName) {
+      $axios.defaults.headers.common['x-pid'] = tokenName
+    }
+    $axios.defaults.headers.common['Accept-Language'] = query.lang || i18n?.locale || 'mn'
+    return config
+  })
+  $axios.onError((error) => {
+    const noAuthPages = ['reg-checkObject', 'police-login', 'login']
+    const status = get(error, 'response.status')
+    if (status === 401 && layout?.startsWith('p')) {
+      if (noAuthPages.includes(route.name)) {
+        return
+      }
+      setRedirect({ redirect, app, path: '/police/login', isReload: true })
+    } else if (status === 401 && route.name !== 'video-id') {
+      // const tokenName = store.getters['user/tokenName']
+      // $cookies.remove(tokenName, { path: '/' })
+      store.dispatch('user/set_user', null)
+      if (noAuthPages.includes(route.name)) {
+        return
+      }
+      if (params.tableDetail === 'service_reg_forensics') {
+        setRedirect({ redirect, app, path: { name: 'reg-checkObject', query: { id: params.id } } })
+      } else {
+        setRedirect({ redirect, app, path: '/login', isReload: true })
+      }
+    }
+  })
+}

package/plugins/chart.js

@@ -0,0 +1,134 @@
+/* eslint-disable */
+import Vue from 'vue'
+import { Bar, Line, Pie } from 'vue-chartjs'
+import Chart from 'chart.js'
+
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+Chart.plugins.register(ChartDataLabels)
+
+Vue.component('LineChart', {
+  extends: Line,
+  props: {
+    data: {
+      type: Object,
+      required: false,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: true,
+        },
+        interaction: {
+          mode: 'index',
+          intersect: false
+        },
+        scales: {
+          yAxes: [{
+            ticks: {
+              fontColor: 'rgb(75, 85, 99)',
+              suggestedMin: 30,
+              suggestedMax: 50,
+            },
+          }],
+          xAxes: [{
+            ticks: {
+              fontColor: 'rgb(75, 85, 99)'
+            },
+          }]
+        },
+        title: {
+          display: false,
+          text: ''
+        }
+      })
+    }
+  },
+  watch: {
+    data() {
+      this.renderChart(this.data, this.options)
+    },
+  },
+  mounted() {
+    this.renderChart(this.data, this.options)
+  },
+})
+Vue.component('BarChart', {
+  extends: Bar,
+  props: {
+    data: {
+      type: Object,
+      required: false,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: true,
+        },
+        scales: {
+          yAxes: [{
+            ticks: {
+              fontColor: 'rgb(75, 85, 99)'
+            },
+          }],
+          xAxes: [{
+            ticks: {
+              fontColor: 'rgb(75, 85, 99)'
+            },
+          }]
+        }
+      })
+    }
+  },
+  watch: {
+    data() {
+      this.renderChart(this.data, this.options)
+    },
+  },
+  mounted() {
+    this.renderChart(this.data, this.options)
+  },
+})
+Vue.component('PieChart', {
+  extends: Pie,
+  props: {
+    data: {
+      type: Object,
+      required: false,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          position: 'bottom',
+          labels: {
+            // fontColor: 'rgb(75, 85, 99)',
+          }
+        },
+        title: {
+          display: false,
+          text: ''
+        }
+      })
+    }
+  },
+  watch: {
+    data() {
+      this.renderChart(this.data, this.options)
+    },
+  },
+  mounted() {
+    this.renderChart(this.data, this.options)
+  },
+})
+/* eslint-enable */

package/plugins/ckeditor.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import CKEditor from 'ckeditor4-vue/dist/legacy.js'
+Vue.use(CKEditor)

package/plugins/idle-logout.js

@@ -0,0 +1,33 @@
+export default ({ store }) => {
+  const idleTimeout = 10 * 1 * 1000 // 5 минут
+  let idleTimer
+  const lockScreen = () => {
+    localStorage.setItem('appLocked', 'true')
+    store.dispatch('user/set_locked', true)
+  }
+  const resetIdleTimer = () => {
+    clearTimeout(idleTimer)
+    idleTimer = setTimeout(lockScreen, idleTimeout)
+    localStorage.setItem('lastActivity', Date.now())
+  }
+  const events = ['mousemove', 'mousedown', 'keypress', 'scroll', 'touchstart']
+  events.forEach((event) => {
+    window.addEventListener(event, resetIdleTimer)
+  })
+  window.addEventListener('storage', (event) => {
+    if (event.key === 'appLocked' && event.newValue !== 'true') {
+      localStorage.setItem('appLocked', 'false')
+      store.dispatch('user/set_locked', false)
+    }
+    if (event.key === 'lastActivity') {
+      resetIdleTimer()
+    }
+    if (event.key === 'checkLogin') {
+      window.location.reload()
+    }
+  })
+  localStorage.setItem('appLocked', store.getters['user/isLocked'] ? 'true' : 'false')
+  if (!store.getters['user/isLocked']) {
+    resetIdleTimer()
+  }
+}

package/store/settings.js

@@ -0,0 +1,236 @@
+export const state = () => ({
+  env: null,
+  references: {},
+  isCollapse: false,
+  tablePageSizes: {},
+  windowSize: { height: 0, width: 0 },
+  pageTitle: '',
+  visibleMobileMenu: false,
+  unsavedChanges: false,
+  pdfUrl: '',
+  pdfTitle: '',
+  pdfPageSize: '',
+  isPdfPrint: false,
+  ignoreTableConfig: true,
+  merge: { visible: false, project_id: '', table_name: '', ref_column: '' },
+  mergePromise: null,
+  mergeCancel: null,
+  loadingWindow: false,
+  handbookId: null
+})
+export const mutations = {
+  SET_ENV (state, env) {
+    state.env = env
+  },
+  SET_PROJECTS (state, val) {
+    state.projects = val
+  },
+  SET_REFERENCES (state, data) {
+    state.references[data.referenceName] = data.list
+  },
+  SET_COLLAPSE (state, data) {
+    state.isCollapse = data
+  },
+  SET_TABLE_PAGE_SIZES (state, data) {
+    state.tablePageSizes = data
+  },
+  SET_WINDOW_SIZE (state, data) {
+    state.windowSize = data
+    if (state.visibleMobileMenu) {
+      state.visibleMobileMenu = data && data.width <= 640
+    }
+  },
+  SET_PAGE_TITLE (state, data) {
+    state.pageTitle = data
+  },
+  SET_VISIBLE_MOBILE_MENU (state, data) {
+    state.visibleMobileMenu = data
+  },
+  SET_UNSAVED_CHANGES (state, data) {
+    state.unsavedChanges = data
+  },
+  SET_PDF_URL (state, data) {
+    state.pdfUrl = data
+  },
+  SET_PDF_TITLE (state, data) {
+    state.pdfTitle = data
+  },
+  SET_PDF_PRINT (state, data) {
+    state.isPdfPrint = data
+  },
+  SET_PDF_PAGE_SIZE (state, data) {
+    state.pdfPageSize = data
+  },
+  SET_IGNORE_TABLE_CONFIG (state, data) {
+    state.ignoreTableConfig = data
+  },
+  SET_MERGE (state, data) {
+    state.merge = data
+    state.mergePromise = data.resolve
+    state.mergeCancel = data.reject
+  },
+  SET_MERGE_CONFIRM (state, data) {
+    state.merge = { visible: false, project_id: '', table_name: '', ref_column: '' }
+    state.mergePromise(data)
+  },
+  SET_MERGE_CANCEL (state) {
+    state.merge = { visible: false, project_id: '', table_name: '', ref_column: '' }
+    state.mergeCancel('cancel')
+  },
+  SET_LOADING_WINDOW (state, data) {
+    state.loadingWindow = data
+  },
+  SET_HANDBOOK_ID (state, data) {
+    state.handbookId = data
+  }
+}
+export const actions = {
+  init ({ commit }) {
+    const env = {
+      fileRoutePath: process.env.FILE_ROUTE_PATH || '/file',
+      baseUrl: process.env.BASE_URL,
+      fullBaseUrl: process.env.FULL_BASE_URL,
+      baseDeepLink: process.env.BASE_DEEP_LINK,
+      authUrl: process.env.AUTH_URL,
+      authTable: process.env.AUTH_TABLE,
+      projectId: process.env.PROJECT_ID,
+      routerBase: process.env.ROUTER_BASE || '',
+      nodeEnv: process.env.NODE_ENV,
+      oldUrl: process.env.OLD_URL
+    }
+    commit('SET_ENV', env)
+    const collapse = this.$cookies.get('SET_COLLAPSE', { path: '/' })
+    const tablePageSizes = this.$cookies.get('SET_TABLE_PAGE_SIZES', { path: '/' })
+    const windowSize = this.$cookies.get('WINDOW_SIZE', { path: '/' })
+    commit('SET_COLLAPSE', collapse === 'COLLAPSED')
+    if (tablePageSizes) {
+      const aa = tablePageSizes.split('z')
+      const dd = {}
+      for (const a of aa) {
+        const b = a.split('x')
+        dd[b[0]] = b[1]
+      }
+      commit('SET_TABLE_PAGE_SIZES', dd)
+    }
+    if (windowSize) {
+      commit('SET_WINDOW_SIZE', JSON.parse(windowSize))
+    }
+  },
+  set_collapse ({ commit }, data) {
+    commit('SET_COLLAPSE', data)
+    // this.$cookies.set('SET_COLLAPSE', data ? 'COLLAPSED' : 'NO', { path: '/' })
+    this.$axios.post('config/set/settings', {
+      name: 'SET_COLLAPSE',
+      value: data ? 'COLLAPSED' : 'NO'
+    }).catch((_) => {})
+  },
+  set_references ({ commit }, data) {
+    commit('SET_REFERENCES', data)
+  },
+  set_table_page_sizes ({ commit, getters }, data) {
+    const dd = { ...getters.tablePageSizes, ...data }
+    const strs = []
+    for (const key in dd) {
+      strs.push(`${key}x${dd[key]}`)
+    }
+    commit('SET_TABLE_PAGE_SIZES', dd)
+    // this.$cookies.set('SET_TABLE_PAGE_SIZES', strs.join('z'), { path: '/' })
+    this.$axios.post('config/set/settings', {
+      name: 'SET_TABLE_PAGE_SIZES',
+      value: strs.join('z')
+    }).catch((_) => {})
+  },
+  set_window_size ({ commit }, data) {
+    commit('SET_WINDOW_SIZE', data)
+    this.$axios.post('config/set/settings', {
+      name: 'WINDOW_SIZE',
+      value: JSON.stringify(data)
+    }).catch((_) => {})
+    // this.$cookies.set('WINDOW_SIZE', JSON.stringify(data), { path: '/' })
+  },
+  set_page_title ({ commit }, data) {
+    commit('SET_PAGE_TITLE', data)
+  },
+  set_visible_mobile_menu ({ commit }, data) {
+    commit('SET_VISIBLE_MOBILE_MENU', data)
+  },
+  set_unsaved_changes ({ commit }, data) {
+    commit('SET_UNSAVED_CHANGES', data)
+  },
+  set_pdf_url ({ commit }, data) {
+    commit('SET_PDF_URL', data.url)
+    commit('SET_PDF_TITLE', data.title)
+    commit('SET_PDF_PAGE_SIZE', data.pageSize)
+    commit('SET_PDF_PRINT', data.print)
+  },
+  set_handbook_id ({ commit }, data) {
+    commit('SET_HANDBOOK_ID', data)
+  },
+  set_merge ({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      commit('SET_MERGE', { visible: true, ...data, resolve, reject })
+    })
+  },
+  set_merge_confirm ({ commit }, data) {
+    commit('SET_MERGE_CONFIRM', data)
+  },
+  set_merge_cancel  ({ commit }) {
+    commit('SET_MERGE_CANCEL')
+  },
+  set_loading_window ({ commit }, data) {
+    commit('SET_LOADING_WINDOW', data)
+  }
+}
+export const getters = {
+  env (state) {
+    return state.env
+  },
+  references (state) {
+    return state.references
+  },
+  isCollapse (state) {
+    return state.isCollapse
+  },
+  tablePageSizes (state) {
+    return state.tablePageSizes
+  },
+  windowWidth (state) {
+    return state.windowSize.width
+  },
+  windowHeight (state) {
+    return state.windowSize.height
+  },
+  pageTitle (state) {
+    return state.pageTitle
+  },
+  visibleMobileMenu (state) {
+    return state.visibleMobileMenu
+  },
+  unsavedChanges (state) {
+    return state.unsavedChanges
+  },
+  pdfUrl (state) {
+    return state.pdfUrl
+  },
+  pdfTitle (state) {
+    return state.pdfTitle
+  },
+  pdfPageSize (state) {
+    return state.pdfPageSize
+  },
+  isPdfPrint (state) {
+    return state.isPdfPrint
+  },
+  ignoreTableConfig (state) {
+    return state.ignoreTableConfig
+  },
+  merge (state) {
+    return state.merge
+  },
+  loadingWindow (state) {
+    return state.loadingWindow
+  },
+  handbookId (state) {
+    return state.handbookId
+  }
+}