eztech-core-components 1.0.0

package/comps/CoreFiles.vue

@@ -0,0 +1,497 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <div v-if="comType === 'inline'">
+      {{ value?.length ? 'Тийм' : 'Үгүй' }}
+    </div>
+    <div
+      v-else-if="fileType === 'profileImage'"
+      class="h-[200px] w-[180px] rounded border flex items-center justify-center relative bg-coreBgInput"
+    >
+      <img
+        v-if="value"
+        :src="`/api${permittedPath}/${value?._id}?tid=${value?.tid}`"
+        class="h-full w-full rounded object-cover object-center cursor-zoom-in"
+        @click="currentFullImage = value"
+      >
+      <el-button
+        v-else
+        type="text"
+        :loading="uploadingImages.some(c => !c.success && !c.deleted)"
+        icon="el-icon-upload"
+        :disabled="disabled"
+        @click="handleShow"
+      >
+        Хуулах
+      </el-button>
+      <el-button
+        v-if="value && !disabled"
+        plain
+        circle
+        size="mini"
+        icon="el-icon-close"
+        class="absolute -top-2 -right-2"
+        @click="handleRemoveImage(value)"
+      />
+    </div>
+    <Container v-else class="flex flex-col gap-2 w-full" drag-handle-selector=".column-drag-handle" @drop="onDrop">
+      <Draggable
+        v-for="(image, index) in images"
+        :key="image._id + '' + index"
+      >
+        <div class="flex flex-row items-center justify-center gap-1 rounded border image-rounded bg-white">
+          <img
+            v-if="['image', 'icon'].includes(fileType)"
+            class="w-20 h-20 object-contain max-h-full max-w-full border-r rounded-l image-rounded-l cursor-zoom-in"
+            :src="image.url || `/api${permittedPath}/${image?._id}?tid=${image.tid}`"
+            @click="currentFullImage = image"
+          >
+          <div v-else class="text-lg py-3 pl-3">
+            <i :class="`el-icon-${image.mimetype === 'application/pdf' ? 'document' : 'download'} cursor-pointer text-coreRegularText hover:text-coreBlue`" @click="handleDownload(image)" />
+          </div>
+          <div class="flex-1 flex flex-row items-center overflow-hidden text-sm">
+            <div
+              :class="['text-lg p-3', {
+                'column-drag-handle': !disabled,
+                'text-coreSecondaryText': disabled
+              }]"
+            >
+              <i class="el-icon-s-fold" />
+            </div>
+            <div class="w-full py-1">
+              <a
+                class="hover:underline"
+                :href="`/api${permittedPath}/${image?._id}?tid=${image.tid}`"
+                target="_blank"
+              >
+                <span>{{ image.originalname }}</span>
+                <span v-if="image.page_count" class="text-xs font-bold text-coreSecondaryText">{{ image.page_count }} хуудастай</span>
+              </a>
+              <div>
+                <el-input
+                  v-model="image.description"
+                  :disabled="disabled"
+                  placeholder="Тайлбар бичих.."
+                  clearable
+                  :maxlength="150"
+                  @change="() => handleChangeDescription(image)"
+                />
+              </div>
+            </div>
+          </div>
+          <div v-if="!disabled" class="pr-2">
+            <el-button
+              type="danger"
+              plain
+              circle
+              size="mini"
+              icon="el-icon-close"
+              @click="handleRemoveImage(image)"
+            />
+          </div>
+        </div>
+      </Draggable>
+      <div
+        v-for="(image, index) in uploadingImages.filter(c => !c.success && !c.deleted)"
+        :key="'upload image' + index.toString()"
+        class="flex flex-row items-center gap-2 rounded border image-rounded"
+      >
+        <img
+          v-if="['image', 'icon'].includes(fileType)"
+          :src="image.url"
+          class="object-contain w-20 h-20 border-r rounded-l image-rounded-l"
+        >
+        <div class="flex-1 overflow-hidden text-sm">
+          <div v-if="image.loading" class="flex-1 flex flex-row items-center">
+            <div class="text-lg p-3">
+              <i :class="'el-icon-loading'" />
+            </div>
+            Серверт хуулж байна..
+          </div>
+          <div v-else-if="image.errorMessage" class="text-red-700 flex-1 flex flex-row items-center">
+            <div class="text-lg p-3 ">
+              <i :class="'el-icon-warning-outline'" />
+            </div>{{ image.errorMessage }}
+          </div>
+          <div v-else class="flex-1 flex flex-row items-center">
+            <div class="text-lg p-3">
+              <i :class="'el-icon-warning-outline'" />
+            </div>
+            Хүлээж байна..
+          </div>
+        </div>
+        <div class="pr-2">
+          <el-button
+            type="danger"
+            plain
+            circle
+            size="mini"
+            icon="el-icon-close"
+            @click="image.deleted = true"
+          />
+        </div>
+      </div>
+      <div
+        v-if="!disabled && ((images.length === 0 && uploadingImages.filter(c => !c.deleted && !c.success).length === 0) || isMultiple)"
+        :class="'h-10 rounded text-gray-400 hover:text-gray-700 flex items-center justify-center cursor-pointer bg-coreBgInput border group-[.is-error]:border-red-400 image-rounded'"
+        @click="handleShow"
+      >
+        <div class="text-lg p-3 ">
+          <i class="el-icon-upload text-gray-500" />
+        </div>
+        {{ textUpload }}
+      </div>
+    </Container>
+    <input
+      id="image"
+      ref="image"
+      class="hidden"
+      type="file"
+      name="files"
+      :accept="accept"
+      :multiple="isMultiple"
+      @change="handleFiles"
+    >
+    <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">
+        <div class="flex-1 flex items-center justify-center relative">
+          <img
+            :src="currentFullImage?.url || `/api${permittedPath}/${currentFullImage._id}?tid=${currentFullImage.tid}`"
+            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-center py-2 overflow-y-auto h-full">
+          <img
+            v-for="image in images"
+            :key="`full_image_${image?._id}`"
+            :src="image?.url || `/api${permittedPath}/${image?._id}?tid=${image?.tid}`"
+            :class="['w-36 h-36 object-contain border rounded cursor-zoom-in', { 'border-black border-2': currentFullImage._id === image?._id }]"
+            @click="currentFullImage = image"
+          >
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+// import axios from 'axios'
+import { get } from 'lodash'
+import { Container, Draggable } from 'vue-smooth-dnd'
+import { applyDrag } from '../utils/helpers'
+import { getFormBoolean } from '../utils/data-helper'
+const dataURItoBlob = (dataURI, name) => {
+  const bytes = dataURI.split(',')[0].includes('base64')
+    ? atob(dataURI.split(',')[1])
+    : unescape(dataURI.split(',')[1])
+  const mime = dataURI.split(',')[0].split(':')[1].split(';')[0]
+  const max = bytes.length
+  const ia = new Uint8Array(max)
+  for (let i = 0; i < max; i += 1) { ia[i] = bytes.charCodeAt(i) }
+  return new File([ia], name, { type: mime })
+}
+const resizeImage = ({ file, maxSize }) => {
+  const reader = new FileReader()
+  const image = new Image()
+  const canvas = document.createElement('canvas')
+  const resize = () => {
+    let { width, height } = image
+    if (width > height) {
+      if (width > maxSize) {
+        height *= maxSize / width
+        width = maxSize
+      }
+    } else if (height > maxSize) {
+      width *= maxSize / height
+      height = maxSize
+    }
+    canvas.width = width
+    canvas.height = height
+    canvas.getContext('2d').drawImage(image, 0, 0, width, height)
+    const dataUrl = canvas.toDataURL('image/jpeg')
+    return dataURItoBlob(dataUrl, file.name)
+  }
+  return new Promise((ok, no) => {
+    if (!file.type.match(/image.*/)) {
+      no(new Error('Not an image'))
+      return
+    }
+    reader.onload = (readerEvent) => {
+      image.onload = () => ok({
+        resizedImage: resize(),
+        width: image.width,
+        height: image.height
+      })
+      image.src = readerEvent.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+}
+export default {
+  name: 'CoreFiles',
+  components: { Container, Draggable },
+  props: {
+    value: { type: Array, default: null },
+    fileType: { type: String, default: 'image' },
+    col_multiple: { type: Boolean, default: false },
+    minSize: { type: Number, default: 1024 },
+    maxSize: { type: Number, default: 512000 },
+    disabled: { type: Boolean, default: false },
+    comType: { type: String, default: 'normal' },
+    fileRoute: { type: String, default: '' },
+    isFileSecret: { type: Boolean, default: true },
+    rootApiId: { type: String, default: null },
+    rootTempId: { type: String, default: null }
+  },
+  data () {
+    return {
+      uploadingImage: null,
+      uploadingImages: [],
+      currentFullImage: null,
+      interval: 0,
+      cropVisible: false,
+      cropImgSrc: '',
+      cropName: '',
+      cropMime: '',
+      unsupportedImageTypes: ['image/heic'],
+      requestQueues: {}
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env']),
+    ...mapGetters('user', ['token']),
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    textUpload () {
+      if (['pdf'].includes(this.fileType)) {
+        return 'PDF файл сонгох..'
+      } else if (['file'].includes(this.fileType)) {
+        return 'Файл сонгох..'
+      } else {
+        return 'Зураг сонгох..'
+      }
+    },
+    accept () {
+      if (['pdf'].includes(this.fileType)) {
+        return 'application/pdf'
+      } else if (['file'].includes(this.fileType)) {
+        return '*/*'
+      } else {
+        return 'image/*'
+      }
+    },
+    images: {
+      get () {
+        if (!this.value) {
+          return []
+        }
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    showCurrentImage () {
+      return !!this.currentFullImage
+    },
+    permittedPath () {
+      return this.isFileSecret ? `/file/permitted/${this.rootApiId}/${this.rootTempId}` : (this.env.fileRoutePath + this.fileRoute)
+    }
+  },
+  watch: {
+    showCurrentImage (val) {
+      if (val) {
+        window.addEventListener('keydown', this.handleChangeImage)
+      } else {
+        window.removeEventListener('keydown', this.handleChangeImage)
+      }
+    }
+  },
+  mounted () {
+    this.interval = setInterval(this.handleUpload, 500)
+  },
+  destroyed () {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    ...mapActions('settings', ['set_pdf_url']),
+    handleChangeDescription (image) {
+      const doRequest = () => this.$axios.post('7/log_files', {
+        _id: image._id,
+        description: image.description
+      }).catch((err) => {
+        this.$showError(err)
+      })
+      if (!this.requestQueues[image._id]) {
+        this.requestQueues[image._id] = Promise.resolve()
+      }
+      this.requestQueues[image._id] = this.requestQueues[image._id].then(() => doRequest())
+    },
+    handleDownload (item) {
+      if (item.mimetype === 'application/pdf') {
+        this.set_pdf_url({ title: 'Файл харах', url: `${this.permittedPath}/${item._id}?tid=${item.tid}` })
+      } else {
+        const link = document.createElement('a')
+        link.href = `/api${this.permittedPath}/${item._id}?tid=${item.tid}`
+        link.setAttribute('download', `${item.orignalname}`)
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    },
+    handleChangeImage (e) {
+      e.preventDefault()
+      if (!this.currentFullImage) {
+        return
+      }
+      if ([39, 40].includes(e.keyCode)) {
+        this.handleCurrentNext()
+      } else if ([37, 38].includes(e.keyCode)) {
+        this.handleCurrentPrev()
+      }
+    },
+    handleCurrentNext () {
+      const index = this.images.indexOf(this.currentFullImage)
+      if (index + 1 < this.images.length) {
+        this.currentFullImage = this.images[index + 1]
+      }
+    },
+    handleCurrentPrev () {
+      const index = this.images.indexOf(this.currentFullImage)
+      if (index > 0) {
+        this.currentFullImage = this.images[index - 1]
+      }
+    },
+    onDrop (e) {
+      this.images = applyDrag(this.images, e)
+    },
+    handleShow () {
+      this.$refs.image.click()
+    },
+    handleRemoveImage (image) {
+      const values = [...this.images]
+      const index = values.findIndex(c => c._id === image._id)
+      if (index > -1) {
+        values.splice(index, 1)
+      }
+      this.images = values
+    },
+    handleAddFile (val, url) {
+      const values = [...this.images]
+      val.url = url
+      values.push(val)
+      this.images = values
+    },
+    handleCrop (e) {
+      const errorMessage = ''
+      const that = this
+      fetch(e).then(res => res.blob()).then((blob) => {
+        const file = new File([blob], that.cropName, { type: that.cropMime })
+        this.uploadingImages.push({
+          errorMessage,
+          success: false,
+          loading: false,
+          deleted: false,
+          file,
+          url: e
+        })
+        this.cropVisible = false
+      })
+    },
+    async handleFiles (e) {
+      const files = e.files || e.target.files || e.dataTransfer.files
+      for (const file of files) {
+        // if (!this.col_multiple) {
+        //   this.cropImgSrc = URL.createObjectURL(file)
+        //   console.log('file', file)
+        //   this.cropMime = file.type
+        //   this.cropName = file.name
+        //   this.cropVisible = true
+        //   return
+        // }
+        let errorMessage = ''
+        let resizedUrl = URL.createObjectURL(file)
+        let resizedFile = file
+        let width = 0
+        let height = 0
+        if (file.type.startsWith('image/')) {
+          if (!this.unsupportedImageTypes.includes(file.type)) {
+            const reader = new FileReader()
+            reader.onload = (e) => { this.originalImg = e.target.result }
+            reader.readAsDataURL(file)
+            const data1 = await resizeImage({ file, maxSize: 1200 })
+            resizedUrl = URL.createObjectURL(data1.resizedImage)
+            resizedFile = data1.resizedImage
+            width = data1.width
+            height = data1.height
+          }
+        } else if (this.maxSize * 100 < file.size) {
+          errorMessage = `Файлын хэмжээ их байна. Allowed max size: ${parseInt(this.maxSize * 100 / 1024 / 1024)}mb.`
+        }
+        this.uploadingImages.push({
+          errorMessage,
+          success: false,
+          loading: false,
+          deleted: false,
+          file: resizedFile,
+          url: resizedUrl,
+          height,
+          width
+        })
+      }
+      e.target.value = ''
+    },
+    async handleUpload () {
+      if (this.uploadingImages.some(c => c.loading)) {
+        return
+      }
+      const file = this.uploadingImages.find(c => !c.success && !c.deleted && !c.errorMessage)
+      if (!file) {
+        return
+      }
+      try {
+        file.loading = true
+        const formData = new FormData()
+        formData.append('file', file.file)
+        formData.append('width', file.width)
+        formData.append('height', file.height)
+        formData.append('is_secret', this.isFileSecret)
+        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
+        // })
+        
+        let uploadUrl = 'file/upload'
+        if (this.unsupportedImageTypes.includes(file.file.type)) {
+          uploadUrl = 'file/upload/image'
+        }
+        // const { data } = await instance.post(uploadUrl, formData)
+        const { data } = await this.$axios.post(uploadUrl, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          withCredentials: true
+        })
+        this.handleAddFile(data, file.url)
+        file.success = true
+      } catch (err) {
+        file.errorMessage = get(err, 'response.data.message') || get(err, 'response.data.error') || get(err, 'message') || 'Сервер хуулахад алдаа гарлаа'
+      } finally {
+        file.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreFooter.vue

@@ -0,0 +1,100 @@
+<template>
+  <footer class="w-full bg-white text-gray-600 text-sm">
+    <div class="w-full flex flex-wrap">
+      <div class="px-5 py-2 flex-1" style="min-width: 360px !important">
+        <div class="font-semibold pb-2">
+          Холбоо барих
+        </div>
+        <div
+          v-for="contact in contacts"
+          :key="contact.icon"
+          class="flex items-start py-2"
+        >
+          <div class="text-lg text-gray-400 mr-1 w-5">
+            <i :class="contact.icon" />
+          </div>
+          <span class="flex-1 whitespace-pre-line" style="padding-top: 2px">{{ contact.title }}</span>
+        </div>
+      </div>
+      <div class="px-5 py-2 flex-1" style="min-width: 360px !important">
+        <div class="font-semibold pb-2">
+          Нэвтрэх холбоосууд
+        </div>
+        <div
+          v-for="link in links"
+          :key="link.name"
+          class="flex items-start py-2"
+        >
+          <div class="text-lg text-gray-400 mr-1 w-5">
+            <i :class="link.icon" />
+          </div>
+          <div>
+            <el-link class="primary-link" type="primary" style="padding-top: 2px" @click="$push({ name: link.name })">
+              {{ link.title }}
+            </el-link>
+          </div>
+        </div>
+      </div>
+      <div v-if="visiters && visiters.length > 0" class="px-5 py-2 flex-0" style="min-width: 250px !important">
+        <div class="font-semibold pb-2 w-auto">
+          Веб хандалтын тоо
+        </div>
+        <div
+          v-for="item in visiters"
+          :key="item.name"
+          class="flex items-start py-1 w-auto"
+        >
+          {{ item.title }}: <span class="ml-1 font-semibold">{{ item.count }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center border-t pt-4 pb-1 px-5">
+      <div>© {{ $moment().year() }} И-МОНГОЛ АКАДЕМИ УТҮГ</div>
+      <div>
+        <img
+          class="h-8"
+          src="https://ema.gov.mn/wp-content/uploads/2022/10/emongolia-academy-logo2.svg"
+          alt=""
+          loading="lazy"
+        >
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+export default {
+  props: {
+    visiters: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      contacts: [{
+        icon: 'el-icon-location',
+        title: 'Улаанбаатар хот, Сүхбаатар дүүрэг,\n8-р хороо, Бага тойруу 49, Мэдээлэл технологийн үндэсний парк,\nИ-Монгол Академи'
+      }, {
+        icon: 'el-icon-phone',
+        title: '+976 7711-9997'
+      }, {
+        icon: 'el-icon-s-promotion',
+        title: 'docx@ema.gov.mn'
+      }],
+      links: [{
+        icon: 'el-icon-link',
+        title: 'Байгууллагын албан хаагч',
+        name: 'organization-login'
+      }, {
+        icon: 'el-icon-link',
+        title: 'Албан хэрэг, хөтлөлтийн програм хангамж хөгжүүлэгч',
+        name: 'developer-login'
+      }, {
+        icon: 'el-icon-link',
+        title: 'Оператор, Гэрээ хариуцсан албан хаагч',
+        name: 'operator-login'
+      }]
+    }
+  }
+}
+</script>