Support Attachment (#1008)

* Support Attachment

* adjust size

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/api/ADempiere/user-interface.js

@@ -19,19 +19,19 @@ import { request } from '@/utils/ADempiere/request'
 
 /**
  * Get Attachment
- * @param {number}  recordId
+ * @param {number}  resourceId
- * @param {string}  recordUuid // TODO: Add suppport to record uuid on backend
+ * @param {string}  resourceUuid // TODO: Add suppport to resource uuid on backend
  */
 export function requestResourceReference({
-  recordId,
+  resourceId,
-  recordUuid
+  resourceUuid
 }) {
   return request({
-    url: '/ui/resource-reference',
+    url: '/user-interface/common/resource-reference',
     method: 'get',
     params: {
-      image_id: recordId,
+      resource_id: resourceId,
-      image_uuid: recordUuid
+      resource_uuid: resourceUuid
     }
   })
     .then(response => {
@@ -51,7 +51,7 @@ export function requestAttachment({
   recordUuid
 }) {
   return request({
-    url: '/ui/attachment',
+    url: '/user-interface/common/attachment',
     method: 'get',
     params: {
       table_name: tableName,

src/components/ADempiere/Attachment/index.vue

@@ -0,0 +1,239 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez esanchez@erpya.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div>
+    <el-card :class="classIsMobilePanel">
+      <div slot="header" class="clearfix">
+        <span> {{ $t('window.containerInfo.attachment') }} </span>
+        <el-button style="float: right;padding: 3px 0px;color: black;" type="text" @click="changeDisplay">
+          <svg-icon :icon-class="display ? 'component' : 'list'" />
+        </el-button>
+      </div>
+      <el-scrollbar :wrap-class="classIsMobileScroll">
+        <el-upload
+          v-if="display"
+          class="upload-demo"
+          drag
+          action="#"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :file-list="listAttachment"
+          list-type="picture"
+          multiple
+        >
+          <i class="el-icon-upload" />
+        </el-upload>
+        <el-upload
+          v-else
+          action="#"
+          list-type="picture-card"
+          :file-list="listAttachment"
+          :auto-upload="false"
+          class="upload-demo"
+        >
+          <i class="el-icon-plus" />
+          <div slot="file" slot-scope="{file}">
+            <img
+              id="download"
+              :src="file.url"
+              fit="fill"
+              style="width: 100%; height: 100%"
+            >
+            <span class="el-upload-list__item-actions">
+              <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(file)"
+              >
+                <i class="el-icon-zoom-in" />
+              </span>
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleDownload(file)"
+              >
+                <i class="el-icon-download" />
+              </span>
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleRemove(file, listAttachment)"
+              >
+                <i class="el-icon-delete" />
+              </span>
+            </span>
+          </div>
+        </el-upload>
+        <el-dialog :title="dialogImage.name" :visible.sync="dialogVisible">
+          <img :src="dialogImage.url" style="width: 50%; height: 50%">
+        </el-dialog>
+      </el-scrollbar>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getImagePath } from '@/utils/ADempiere/resource.js'
+
+export default {
+  name: 'Attachment',
+  data() {
+    return {
+      dialogImage: '',
+      dialogVisible: false,
+      display: false
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    classIsMobileScroll() {
+      if (this.isMobile) {
+        return 'scroll-window-log-change-mobile'
+      }
+      return 'scroll-window-log-change'
+    },
+    classIsMobilePanel() {
+      if (this.isMobile) {
+        return 'panel-mobile'
+      }
+      return 'panel'
+    },
+    listAttachment() {
+      if (this.isEmptyValue(this.$store.getters.getListAttachment)) {
+        return []
+      }
+      return this.$store.getters.getListAttachment.map(attachment => {
+        return {
+          ...attachment,
+          type: this.fileType(attachment.type),
+          url: this.getImageFromSource(attachment.name, this.fileType(attachment.type))
+        }
+      })
+    }
+  },
+  methods: {
+    handleRemove(file) {
+      const fileList = this.listAttachment
+      const index = this.listAttachment.findIndex(attachment => attachment.uuid === file.uuid)
+      fileList.splice(index, 1)
+      this.$store.commit('setListAttachment', fileList)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImage = {
+        name: file.name,
+        url: file.url
+      }
+      this.dialogVisible = true
+    },
+    handleDownload(file) {
+      const download = document.createElement('a')
+      download.href = file.url
+      download.download = file.name
+      download.click()
+    },
+    defaultImage(type) {
+      let image
+      switch (type) {
+        case 'html':
+          image = require('@/image/ADempiere/html.png')
+          break
+        case 'Excel':
+          image = require('@/image/ADempiere/excel.png')
+          break
+        case 'pdf':
+          image = require('@/image/ADempiere/pdf.png')
+          break
+        default:
+          image = require('@/image/ADempiere/priceChecking/no-image.jpg')
+          break
+      }
+      return image
+    },
+    getImageFromSource(fileName, type) {
+      if (type !== 'image') {
+        return this.defaultImage(type)
+      }
+      const image = getImagePath({
+        file: fileName,
+        width: 300,
+        height: 300
+      })
+      return image.uri
+    },
+    fileType(type) {
+      let file
+      switch (type) {
+        case 'image/jpeg':
+        case 'image/png':
+          file = 'image'
+          break
+        case 'image/bmp':
+          file = 'bmp'
+          break
+        case 'text/html':
+          file = 'html'
+          break
+        case 'application/octet-stream':
+          file = 'Excel'
+          break
+        case 'application/pdf':
+          file = 'pdf'
+          break
+        default:
+          file = type
+          break
+      }
+      return file
+    },
+    changeDisplay() {
+      this.display = !this.display
+    }
+  }
+}
+</script>
+
+<style>
+  .scroll-window-log-change {
+    max-height: 74vh !important;
+  }
+  .custom-card {
+    margin: 1px;
+    cursor: pointer;
+  }
+  .custom-card:hover {
+    background-color: #eaf5fe;
+    border: 1px solid #36a3f7;
+  }
+  .scroll-window-log-change {
+    max-height: 74vh !important;
+  }
+  .scroll-window-log-change-mobile {
+    max-height: 56vh !important;
+  }
+  .panel-mobile {
+    height: 57vh;
+  }
+  .panel {
+    height: 75vh;
+  }
+  .el-upload {
+    display: none;
+    text-align: center;
+    cursor: pointer;
+    outline: none;
+  }
+</style>

src/lang/ADempiere/en.js

@@ -311,6 +311,7 @@ export default {
     deleteRecord: 'Delete Record',
     undoNew: 'Undo New Record',
     containerInfo: {
+      attachment: 'Attachment',
       notes: 'Notes List',
       changeLog: 'ACtivity',
       workflowLog: 'Workflow Log',

src/lang/ADempiere/es.js

@@ -287,6 +287,7 @@ export default {
     deleteRecord: 'Eliminar Registro',
     undoNew: 'Descartar Nuevo Registro',
     containerInfo: {
+      attachment: 'Anexo',
       notes: 'Listado de Notas',
       changeLog: 'Actividad',
       workflowLog: 'Histórico de Flujo de Trabajo',

src/store/modules/ADempiere/attachment.js

@@ -0,0 +1,47 @@
+import { requestAttachment } from '@/api/ADempiere/user-interface.js'
+
+const initStateAttachment = {
+  listAttachment: []
+}
+
+const attachment = {
+  state: initStateAttachment,
+  mutations: {
+    setListAttachment(state, payload) {
+      state.listAttachment = payload
+    }
+  },
+  actions: {
+    attachments({ commit }, {
+      tableName,
+      recordId,
+      recordUuid
+    }) {
+      requestAttachment({
+        tableName,
+        recordId,
+        recordUuid
+      })
+        .then(response => {
+          const list = response.resource_references_list.map(file => {
+            return {
+              name: file.file_name,
+              type: file.content_type,
+              description: file.description,
+              size: file.file_size,
+              uuid: file.resource_uuid,
+              text: file.text_msg
+            }
+          })
+          commit('setListAttachment', list)
+        })
+    }
+  },
+  getters: {
+    getListAttachment: (state) => {
+      return state.listAttachment
+    }
+  }
+}
+
+export default attachment

src/store/modules/ADempiere/processLog.js

@@ -59,7 +59,7 @@ const processLog = {
       pageSize
     }) {
       // process Activity
-      return requestListProcessesLogs({ userUuid: getters['user/getUserUuid'], pageToken, pageSize })
+      return requestListProcessesLogs({ pageToken, pageSize })
         .then(processActivityResponse => {
           const responseList = processActivityResponse.processLogsList.map(processLogItem => {
             const { uuid: containerUuid } = processLogItem

src/views/ADempiere/Window/index.vue

@@ -150,6 +150,19 @@
                                   <workflow-logs />
                                 </div>
                               </el-tab-pane>
+                              <el-tab-pane
+                                name="attachments"
+                              >
+                                <span slot="label">
+                                  <i class="el-icon-paperclip" />
+                                  {{ $t('window.containerInfo.attachment') }}
+                                </span>
+                                <div
+                                  key="attachment-logs"
+                                >
+                                  <attachment />
+                                </div>
+                              </el-tab-pane>
                             </el-tabs>
                           </el-card>
                         </div>
@@ -315,6 +328,19 @@
                           <workflow-logs />
                         </div>
                       </el-tab-pane>
+                      <el-tab-pane
+                        name="attachments"
+                      >
+                        <span slot="label">
+                          <i class="el-icon-paperclip" />
+                          {{ $t('window.containerInfo.attachment') }}
+                        </span>
+                        <div
+                          key="attachment-logs"
+                        >
+                          <attachment />
+                        </div>
+                      </el-tab-pane>
                     </el-tabs>
                   </el-card>
                 </p>

src/views/ADempiere/Window/windowLogicComponent.js

@@ -25,6 +25,7 @@ import DataTable from '@/components/ADempiere/DataTable'
 import splitPane from 'vue-splitpane'
 // Container Info
 import ChatEntries from '@/components/ADempiere/ChatEntries'
+import Attachment from '@/components/ADempiere/Attachment/index.vue'
 import ListChatEntry from '@/components/ADempiere/ChatEntries/listChatEntry'
 import RecordLogs from '@/components/ADempiere/ContainerInfo/recordLogs'
 import WorkflowLogs from '@/components/ADempiere/ContainerInfo/workflowLogs'
@@ -52,6 +53,7 @@ export default {
     RightPanel,
     ChatEntries,
     ListChatEntry,
+    Attachment,
     RecordLogs,
     WorkflowLogs,
     WorkflowStatusBar,