eztech-core-components 1.0.0

package/comps/CoreVimeo.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-loading="loading">
+    <div class="flex gap-4">
+      <div class="flex-1">
+        <el-input v-model="videoLink" />
+      </div>
+      <div class="font-fold">
+        {{ $moment.utc(videoDuration * 1000).format('mm:ss') }}
+      </div>
+      <el-button @click="handleLoad">
+        Шалгах
+      </el-button>
+    </div>
+    <div v-if="player_embed_url && playing" class="mt-2" :style="{ width: vimeoWidth + 'px', height: vimeoHeight + 'px' }">
+      <iframe
+        id="iframe"
+        :src="`${player_embed_url}&autoplay=1&autopause=0`"
+        :height="vimeoHeight"
+        :width="vimeoWidth"
+        allow="autoplay; fullscreen; picture-in-picture"
+        @load="handleLoadIFrame"
+      />
+    </div>
+    <div v-else-if="pictureLink" class="mt-2 relative flex items-center justify-center" :style="{ width: vimeoWidth + 'px', height: vimeoHeight + 'px' }">
+      <img class="h-full w-full" :src="pictureLink">
+      <button
+        class="absolute h-8 w-12 rounded bg-gray-800 hover:bg-red-500 active:bg-gray-800 z-1 text-white flex items-center justify-center text-2xl"
+        @click="playing = true"
+      >
+        <i class="el-icon-caret-right" />
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CoreVimeo',
+  props: {
+    value: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      htmlContent: '',
+      player_embed_url: '',
+      pictureLink: '',
+      playing: false,
+      vimeoHeight: 250,
+      vimeoWidth: 0,
+      videoLink: '',
+      videoDuration: 0
+    }
+  },
+  computed: {
+    valueLink: {
+      get () {
+        if (!this.value) {
+          return ''
+        }
+        return this.value.split(',')[0] || ''
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    valueDuration: {
+      get () {
+        if (!this.value || !this.value.includes(',')) {
+          return 0
+        } else {
+          return Number(this.value.split(',')[1])
+        }
+      },
+      set (val) {
+        this.$emit('input', this.videoLink + ',' + val)
+      }
+    }
+  },
+  watch: {
+    valueLink: {
+      handler (newVal, oldVal) {
+        if (!oldVal && newVal) {
+          this.resetVimeo()
+        }
+      }
+    }
+  },
+  created () {
+    this.resetVimeo()
+  },
+  methods: {
+    resetVimeo () {
+      this.videoLink = this.valueLink
+      this.videoDuration = this.valueDuration
+      if (this.videoLink) {
+        this.handleLoad()
+      }
+    },
+    handleLoadIFrame () {
+      const iframe = document.querySelector('iframe')
+      const player = new Vimeo.Player(iframe) // eslint-disable-line no-undef
+      player.on('play', function () {
+        this.$log('played the video!')
+      })
+      player.on('ended', function () {
+        this.$log('end the video!')
+      })
+    },
+    async handleLoad () {
+      try {
+        this.loading = true
+        this.htmlContent = ''
+        this.player_embed_url = ''
+        this.pictureLink = ''
+        this.playing = false
+        const { duration, embed, pictures, player_embed_url, width, height } = (await this.$axios.get(`file/vimeo/info/${this.videoLink}`)).data
+        this.vimeoWidth = this.vimeoHeight / height * width
+        this.videoDuration = duration
+        this.htmlContent = embed.html
+        this.player_embed_url = player_embed_url
+        this.pictureLink = pictures.base_link
+        this.$emit('input', this.videoLink + ',' + this.videoDuration)
+      } catch (err) {
+        this.$emit('input', null)
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreVimeoLabel.vue

@@ -0,0 +1,32 @@
+<template>
+  <span v-if="value && value.includes(',')">Id: {{ valueLink }}, {{ $moment.utc(valueDuration * 1000).format('mm:ss') }}</span>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    valueLink: {
+      get () {
+        if (!this.value) {
+          return ''
+        }
+        return this.value.split(',')[0] || ''
+      }
+    },
+    valueDuration: {
+      get () {
+        if (!this.value || !this.value.includes(',')) {
+          return 0
+        } else {
+          return Number(this.value.split(',')[1])
+        }
+      }
+    }
+  }
+}
+</script>

package/comps/CoreVueEditor.vue

@@ -0,0 +1,106 @@
+<template>
+  <client-only>
+    <div>
+      <!-- <VueEditor
+        v-model="content"
+        use-custom-image-handler
+        @image-added="handleImageAdded"
+        @image-removed="handleImageRemoved"
+      /> -->
+      <core-ckeditor
+        v-model="content"
+        :disabled="disabled"
+        :height="height"
+        :page-size="pageSize"
+        :page-padding-top="pagePaddingTop"
+        :page-padding-bottom="pagePaddingBottom"
+        :page-padding-left="pagePaddingLeft"
+        :page-padding-right="pagePaddingRight"
+        :writing-mode="writingMode"
+        :is-simple="isSimple"
+        @blur="onEditorBlur"
+      />
+    </div>
+  </client-only>
+</template>
+<script>
+// import axios from 'axios'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'CoreVueEditor',
+  props: {
+    value: { type: String, default: '' },
+    height: { type: Number, default: 700 },
+    isSimple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    pageSize: { type: String, default: 'A4' },
+    pagePaddingLeft: { type: String, default: '20mm' },
+    pagePaddingRight: { type: String, default: '20mm' },
+    pagePaddingTop: { type: String, default: '10mm' },
+    pagePaddingBottom: { type: String, default: '10mm' },
+    writingMode: { type: String, default: 'horizontal-tb' }
+  },
+  computed: {
+    ...mapGetters('settings', ['env']),
+    ...mapGetters('user', ['token']),
+    content: {
+      get () {
+        return (this.value || '').replace(/<img\s+([^>]*?)src\s*=\s*["']?([^"'\s>]+)["']?([^>]*?)>/g, (match, p1, p2, p3) => {
+          try {
+            const url = new URL(p2)
+            if (url.protocol === 'https:') {
+              return `<img ${p1}src="${p2}"${p3}>`
+            }
+            const pathname = url.pathname.replace('/api', '')
+            const newSrc = '/api' + pathname
+            return `<img ${p1}src="${newSrc}"${p3}>`
+          } catch (err) {
+            return `<img ${p1}src="${p2}"${p3}>`
+          }
+        })
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    onEditorBlur ($event) {
+      this.$emit('blur', $event)
+    },
+    async handleImageAdded (file, Editor, cursorLocation, resetUploader) {
+      try {
+        const formData = new FormData()
+        formData.append('file', file)
+        // const headers = { 'Content-Type': 'multipart/form-data' }
+        // if (this.token) {
+        //   headers.Authorization = `Bearer ${this.token}`
+        // }
+        // const instance = axios.create({
+        //   baseURL: this.env.baseUrl,
+        //   headers,
+        //   withCredentials: true
+        // })
+        // const { data } = await instance.post('file/upload', formData)
+        const { data } = await this.$axios.post('file/upload', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          withCredentials: true
+        })
+        Editor.insertEmbed(cursorLocation, 'image', `${this.env.baseUrl}/file/${data._id}`)
+        resetUploader()
+      } catch (err) {
+        this.$showError(err)
+      }
+    },
+    async handleImageRemoved (file) {
+      try {
+        await this.$axios.delete(file)
+      } catch (err) {
+        this.$showError(err)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreXypService.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <el-button plain size="mini" :type="xypLogId ? 'success' : 'default'" @click="handleRefresh">
+      {{ xypLogId ? 'Лавлагаа харах' : 'Лавлагаа татах' }}
+    </el-button>
+    <el-dialog
+      title="ХУР-н сервис"
+      append-to-body
+      :visible.sync="visible"
+      width="800px"
+    >
+      <div v-loading="loading" class="bg-white rounded p-4 flex flex-col gap-4">
+        <div class="text-lg text-center px-16 text-corePrimaryText">
+          {{ xypService?.detail }}
+        </div>
+        <div class="border rounded p-4 grid grid-cols-2 gap-4">
+          <div
+            v-for="itemInput in xypServiceDetails.filter(c => c.is_input)"
+            :key="itemInput._id"
+            class="flex flex-row gap-2 items-center"
+          >
+            <div class="w-20 text-right leading-4">
+              {{ itemInput.title }}
+            </div>
+            <div class="flex-1">
+              <el-input
+                v-model="request[itemInput.name]"
+                :disabled="!!defaultRequest && !!defaultRequest[itemInput.name]"
+                clearable
+                :placeholder="itemInput.title + ' оруулна уу'"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-row gap-2">
+          <div class="flex-1 text-right">
+            <el-button icon="el-icon-search" type="primary" @click="handleSearch">
+              Хайх
+            </el-button>
+          </div>
+        </div>
+        <div class="border rounded p-4 grid grid-cols-2 gap-4">
+          <div class="col-span-2 text-xs text-center">
+            <div class="text-center">
+              <span class="font-normal">Лавлагаа авсан огноо: </span>
+              <span class="font-bold">{{ created_at && $moment(created_at).isValid() ? $moment(created_at).format('YYYY-MM-DD HH:mm') : null }}</span>
+            </div>
+            <div class="text-center">
+              <span class="font-normal">Үр дүн: </span>
+              <span class="font-bold">{{ result_message || 'Татаагүй' }}</span>
+            </div>
+          </div>
+          <template v-if="response">
+            <div
+              v-for="itemInput in xypServiceDetails.filter(c => !c.is_input && !c.name.includes('.'))"
+              :key="itemInput._id"
+              :class="[{
+                'flex flex-row gap-2 items-center': itemInput.type !== 'List<T>',
+                'row-span-3': itemInput.type === 'image',
+                'col-span-2': itemInput.type === 'String' && response[itemInput.name]?.length > 50,
+                'col-span-2': itemInput.type === 'List<T>',
+              }]"
+            >
+              <div
+                :class="{
+                  'w-24 text-right leading-4': itemInput.type !== 'List<T>',
+                  'text-center leading-4 px-10': itemInput.type === 'List<T>'
+                }"
+              >
+                {{ itemInput.title }}
+              </div>
+              <div v-if="itemInput.type !== 'List<T>'" class="flex-1">
+                <img v-if="itemInput.type === 'image'" :src="`data:image/png;base64,${response[itemInput.name]}`">
+                <el-input
+                  v-else
+                  :type="response[itemInput.name]?.length > 50 ? 'textarea' : 'input'"
+                  :value="response[itemInput.name]"
+                  readonly
+                />
+              </div>
+              <div v-if="itemInput.type === 'List<T>'" class="w-full overflow-x-auto max-h-[300px]">
+                <table class="min-w-full border text-sm text-left">
+                  <thead class="bg-gray-100">
+                    <tr>
+                      <th
+                        v-for="itemOutput in xypServiceDetails.filter(c => !c.is_input && c.name.includes('.') && c.name.startsWith(itemInput.name + '.'))"
+                        :key="itemOutput.name"
+                        class="border px-4 py-2"
+                      >
+                        {{ itemOutput.title }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(itemList, indexList) in (typeof response[itemInput.name] === 'object' && Array.isArray(response[itemInput.name]) ? response[itemInput.name] : [response[itemInput.name]]).filter(c => !!c)"
+                      :key="'row_index_' + indexList"
+                    >
+                      <td
+                        v-for="itemOutput in xypServiceDetails.filter(c => !c.is_input && c.name.includes('.') && c.name.startsWith(itemInput.name + '.'))"
+                        :key="itemOutput.name"
+                        class="border px-4 py-2 whitespace-nowrap"
+                      >
+                        <span v-if="itemOutput.type === 'boolean'">
+                          {{ ['true', 'True', true, 'TRUE', 1, '1'].includes(itemList[itemOutput.name.replace(itemInput.name + '.', '')]) ? 'Тийм' : 'Үгүй' }}
+                        </span>
+                        <span v-else-if="itemOutput.type === 'Date'">
+                          {{ $moment(itemList[itemOutput.name.replace(itemInput.name + '.', '')]).isValid() ? $moment(itemList[itemOutput.name.replace(itemInput.name + '.', '')]).format('YYYY-MM-DD') : null }}
+                        </span>
+                        <span v-else>
+                          {{ itemList[itemOutput.name.replace(itemInput.name + '.', '')] }}
+                        </span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+          <div />
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button type="success" icon="el-icon-check" @click="handleSave">
+          Хадгалах
+        </el-button>
+        <el-button icon="el-icon-close" @click="visible = false">
+          Буцах
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CoreXypService',
+  props: {
+    serviceName: { type: String, default: null },
+    xypLogId: { type: String, default: null },
+    defaultRequest: { type: Object, default: null }
+  },
+  data () {
+    return {
+      loading: false,
+      visible: false,
+      xypService: null,
+      xypServiceDetails: [],
+      serviceResponse: null,
+      serviceRequest: null,
+      serviceResultMessage: null,
+      created_at: null,
+      request: null,
+      response: null,
+      result_message: null,
+      id: null
+    }
+  },
+  methods: {
+    async handleSearch () {
+      try {
+        this.loading = true
+        this.response = null
+        this.created_at = null
+        this.id = null
+        this.result_message = null
+        const { data } = await this.$axios.post(`xypservice/custom/${this.xypService.name}/${this.xypService.version}`, this.request)
+        this.response = data.response
+        this.request = data.request
+        this.created_at = data.created_at
+        this.result_message = data.result_message
+        this.id = data._id
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSave () {
+      this.$emit('save', this.id)
+      this.visible = false
+    },
+    async handleRefresh () {
+      try {
+        this.visible = true
+        this.loading = true
+        this.xypService = null
+        this.request = null
+        this.response = null
+        this.created_at = null
+        this.result_message = null
+        this.id = null
+        this.xypServiceDetails = []
+        const { data: xypService } = await this.$axios.get('one/7/xyp_services', {
+          params: {
+            search: JSON.stringify({
+              name: { val: this.serviceName, t: 'string', op: 'eq' }
+            })
+          }
+        })
+        if (!xypService._id) {
+          this.$customError('Сервис олдсонгүй')
+        }
+        const { data: xypServiceDetails } = await this.$axios.get('list/7/xyp_service_details', {
+          params: {
+            search: JSON.stringify({
+              service_id: { val: xypService._id, t: 'number', op: 'eq' }
+            })
+          }
+        })
+        const requestData = {}
+        for (const itemInput of xypServiceDetails.filter(c => c.is_input)) {
+          requestData[itemInput.name] = ''
+        }
+        this.request = { ...requestData, ...this.defaultRequest }
+        this.xypService = xypService
+        this.xypServiceDetails = xypServiceDetails
+        if (this.xypLogId) {
+          const { data } = await this.$axios.get(`7/xyp_logs/${this.xypLogId}`)
+          this.request = data.request
+          this.response = data.response
+          this.id = data._id
+          this.created_at = data.created_at
+          this.result_message = data.result_message
+        }
+      } catch (err) {
+        this.$showError(err)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreZoomImage.vue

@@ -0,0 +1,99 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <div
+      v-if="currentFullImage"
+      class="fixed h-screen w-screen bg-black z-50 left-0 top-0 flex flex-row"
+      tabindex="1"
+      @keydown.up.prevent="handleNavigate('prev')"
+      @keydown.down.prevent="handleNavigate('next')"
+    >
+      <div class="flex-1 flex items-center justify-center relative">
+        <img
+          :src="currentFullImage"
+          class="object-contain border rounded max-h-screen"
+        >
+        <div class="absolute top-3 right-3">
+          <el-button icon="el-icon-close" circle @click="currentFullImage = null" />
+        </div>
+      </div>
+      <div v-if="images.length > 1" class="w-40 bg-white flex flex-col gap-2 items-start justify-start p-2 overflow-auto" tabindex="">
+        <div
+          v-for="(r, index) in images"
+          :id="`image${index}`"
+          :key="`image${index}`"
+          :class="['w-full min-h-32 max-h-40 border rounded cursor-zoom-in outline-none relative', {
+            'border border-2 !border-coreBlue': currentFullImage.endsWith(r)
+          }]"
+          tabindex="1"
+        >
+          <img
+            :key="r"
+            :src="r"
+            :class="['h-full w-full object-contain rounded  object-center ']"
+            @click="currentFullImage = r"
+          >
+          <div class="size-6 rounded-full absolute left-1 top-1 bg-coreBgHover flex items-center justify-center">
+            {{ index + 1 }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    images: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  computed: {
+    currentFullImage: {
+      get () { return this.value },
+      set (val) { this.$emit('input', val) }
+    }
+  },
+  watch: {
+    currentFullImage () {
+      this.handleFocus()
+    }
+  },
+  mounted () {
+    this.handleFocus()
+  },
+  methods: {
+    async handleFocus () {
+      const index = this.images.findIndex(c => this.value?.endsWith(c))
+      if (index === -1) {
+        return
+      }
+      await this.$nextTick()
+      await this.$nextTick()
+      document.getElementById(`image${index}`)?.focus()
+    },
+    handleNavigate (type) {
+      let index = this.images.findIndex(c => this.value.endsWith(c))
+      if (index === -1) {
+        return
+      }
+      if (type === 'next') {
+        if (this.images.length - 1 === index) {
+          index = -1
+        }
+        index++
+      } else if (type === 'prev') {
+        if (index === 0) {
+          index = this.images.length
+        }
+        index--
+      }
+      this.currentFullImage = this.images[index]
+    }
+  }
+}
+</script>