@nixweb/nixloc-ui 0.0.209 → 0.0.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.209",
+  "version": "0.0.211",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/InputTag.vue

@@ -24,6 +24,7 @@ export default {
         required: Boolean,
         initialValue: Array,
         value: Array,
+        change: Function
     },
     data() {
         return {
@@ -39,10 +40,12 @@ export default {
             if (this.newItem) {
                 this.tos.push(this.newItem);
                 this.newItem = "";
+                this.change();
             }
         },
         removeEmail(index) {
             this.tos.splice(index, 1);
+            this.change();
         }
     },
     watch: {

package/src/component/shared/file-manager/FileManager.vue

@@ -1,10 +1,12 @@
 <template>
     <div>
+        <Alert v-if="!success" type="danger">
+            Não é permitido enviar arquivos com mais de 5 megabytes.
+        </Alert>
         <div v-if="loading">
-            <span>Aguarde, estamos importando os arquivos...</span>
             <Loading type="line" :center="false" />
         </div>
-        <div v-else>
+        <div>
             <b-row>
                 <b-col sm="3">
                     <div class="file">
@@ -14,65 +16,88 @@
                     </div>
                     <div class="file">
                         <button class="button small primary">
-                            <span><i class="fa-solid fa-upload"></i> Carregar arquivos</span>
+                            <span><i class="fa-solid fa-upload"></i> Carregar</span>
                         </button>
                         <input type="file" name="myfile" ref="file" @change="confirm" multiple />
                     </div>
                 </b-col>
-                <b-col sm="9">
+                <b-col sm="9" v-if="!showCapture">
                     <div class="side-by-side" v-for="attachment in attachments">
                         <div class="text-center box-file">
-                            <div v-if="attachment.extension == 'png' || attachment.extension == 'jpg'">
+                            <div class="div-image" v-if="attachment.extension == '.png' || attachment.extension == '.jpg'"
+                                @click="openImage(baseUrl + attachment.fileName)">
                                 <img class="img" :src="baseUrl + attachment.fileName">
                             </div>
                             <div class="icon-generic" v-else>
                                 <i class="fa-light fa-file"></i>
                                 <div><span class="name">{{ attachment.name }}</span></div>
                             </div>
-                            <div class="icon side-by-side">
-                                <i class="fa-solid fa-download"></i>
+                            <div v-if="idSelected != attachment.id">
+                                <div class="icon side-by-side">
+                                    <a :href="baseUrl + attachment.fileName">
+                                        <i class="fa-solid fa-download"></i>
+                                    </a>
+                                </div>
+                                <div class="icon icon-close side-by-side" @click="confirmRemove(attachment.id)">
+                                    <i class="fa-solid fa-circle-xmark"></i>
+                                </div>
                             </div>
-                            <div class="icon icon-close side-by-side">
-                                <i class="fa-solid fa-circle-xmark"></i>
+                            <div v-else>
+                                <div class="icon icon-confirm side-by-side" @click="removeSelected(attachment.id)">
+                                    <i class="fa-solid fa-circle-check"></i>
+                                </div>
+                                <div class="icon icon-close side-by-side" @click="cancel()">
+                                    <i class="fa-solid fa-xmark"></i>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </b-col>
             </b-row>
         </div>
-        <Modal title="Câmera" :width="600" :height="750" v-if="showModal('webcam')" :onHideModal="stopCamera">
+        <div v-show="showInModal">
+            <Modal title="Câmera" :width="600" :height="750" v-if="showModal('webcam')" :onHideModal="stopCamera">
+                <div class="text-center">
+                    <WebCam ref="webcam" :autoplay="false" width="400" height="100%"></WebCam>
+                    <br>
+                    <div class="side-by-side">
+                        <button class="button primary" @click="captureImage">
+                            <i class="fa-solid fa-camera"></i>
+                            Capturar
+                        </button>
+                    </div>
+                </div>
+            </Modal>
+            <Modal title="Imagem" :width="800" v-show="showModal('image')">
+                <div class="text-center">
+                    <img class="img-selected" :src="imageSelected">
+                </div>
+            </Modal>
+        </div>
+        <div v-if="!showInModal && showCapture">
             <div class="text-center">
                 <WebCam ref="webcam" :autoplay="false" width="400" height="100%"></WebCam>
                 <br>
                 <div class="side-by-side">
-                    <button class="button primary" @click="captureImage">
+                    <button class="button small primary" @click="captureImage">
                         <i class="fa-solid fa-camera"></i>
                         Capturar
                     </button>
-                </div>
-            </div>
-        </Modal>
-        <Modal title="Confirmar" :width="600" :height="750" v-if="showModal('confirm')">
-            <div class="text-center title">
-                <div>
-                    Total de <b>{{ files.length }}</b> carregados...
-                </div>
-                <div>
-                    <button class="button small primary" @click="loadFiles">
-                        <span>
-                            <i class="fa-solid fa-circle-check"></i> Confirmar
-                        </span>
+                    <button class="button small danger" @click="stopCamera">
+                        <i class="fa-solid fa-circle-xmark"></i>
+                        Fechar
                     </button>
                 </div>
             </div>
-
-        </Modal>
+        </div>
     </div>
 </template>
 <script>
 
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 
 import { WebCam } from 'vue-cam-vision'
 
@@ -82,12 +107,18 @@ export default {
     components: {
         WebCam,
         Modal,
-        Loading
+        Loading,
+        Confirmation,
+        Alert,
     },
     props: {
         baseUrl: {
             type: String,
-            default: "https://espaco.blob.core.windows.net",
+            default: "https://espaco.blob.core.windows.net/nixloc-attachments/",
+        },
+        showInModal: {
+            type: Boolean,
+            default: true
         },
         source: String,
         genericId: String
@@ -95,29 +126,43 @@ export default {
     data() {
         return {
             urlPost: "/api/v1/adm/attachment/upload",
+            urlGet: "/api/v1/adm/attachment/get-all",
+            urlDelete: "/api/v1/adm/attachment/delete",
             files: [],
-            attachments: [
-                {
-                    fileName: "T7I300FDB9_3.png",
-                    extension: "png",
-                },
-                {
-                    name: "screensh...",
-                    fileName: "T7I300FDB9_3.png",
-                    extension: "txt",
-                },
-            ],
+            attachments: [],
             captures: [],
             imgReport: [],
+            idSelected: "",
+            imageSelected: "",
             loading: false,
+            success: true,
+            showCapture: false,
         };
     },
+    mounted() {
+        this.getAll();
+    },
     methods: {
-        ...mapMutations("generic", ["openModal", "hideModal"]),
-        ...mapActions("generic", ["postFileApi", "deleteFileApi"]),
+        ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+        ...mapActions("generic", ["postFileApi", "getApi", "deleteAllApi"]),
         confirm() {
             this.files = Object.values(this.$refs.file.files);
-            this.openModal("confirm");
+            this.loadFiles();
+        },
+        confirmRemove(id) {
+            this.idSelected = id;
+        },
+        cancel() {
+            this.idSelected = '';
+        },
+        removeSelected(id) {
+            let params = {
+                url: this.urlDelete,
+                selected: [id],
+            };
+            this.deleteAllApi(params).then(() => {
+                this.getAll();
+            });
         },
         async loadFiles() {
             this.hideModal("confirm");
@@ -130,6 +175,7 @@ export default {
             this.loading = false;
         },
         async upload(file) {
+            this.loading = true;
             let params = {
                 url: this.urlPost,
                 file: file,
@@ -137,9 +183,31 @@ export default {
                 container: this.genericId,
             };
             const response = await this.postFileApi(params);
+            this.success = response.content == "erro" ? false : true;
+            this.loading = false;
+            let self = this;
+            setTimeout(function () {
+                self.success = true;
+            }, 5000);
+            this.getAll();
+        },
+        getAll() {
+            this.idSelected = "";
+            this.loading = true;
+            let params = { url: this.urlGet, obj: { any: this.source, id: this.genericId } };
+            this.getApi(params).then((response) => {
+                this.attachments = response.content.data;
+                this.loading = false;
+            });
+        },
+        openImage(url) {
+            this.openModal("image");
+            this.imageSelected = url;
         },
         openCamera() {
-            this.openModal("webcam");
+            if (this.showInModal)
+                this.openModal("webcam");
+            this.showCapture = true;
             this.startCamera();
         },
         startCamera() {
@@ -150,16 +218,58 @@ export default {
         stopCamera() {
             if (this.$refs.webcam) {
                 this.$refs.webcam.stop();
-                this.hideModal();
+                this.showCapture = false;
+                if (this.showInModal)
+                    this.hideModal();
             }
         },
         captureImage() {
             if (this.$refs.webcam) {
                 this.$refs.webcam.capture().then((base64String) => {
-                    console.log(base64String);
+                    this.upload(this.convertToFile(base64String));
+                    this.stopCamera();
+                    this.showCapture = false;
                 });
             }
         },
+        convertToFile(base64String) {
+            const base64Data = base64String.split(',')[1];
+            const base64ToByte = (char) => {
+                const charCode = char.charCodeAt(0);
+
+                if (charCode >= 65 && charCode <= 90) {
+                    return charCode - 65; // A-Z
+                } else if (charCode >= 97 && charCode <= 122) {
+                    return charCode - 71; // a-z
+                } else if (charCode >= 48 && charCode <= 57) {
+                    return charCode + 4; // 0-9
+                } else if (charCode === 43) {
+                    return 62; // +
+                } else if (charCode === 47) {
+                    return 63; // /
+                }
+
+                return 0; // Caracteres inválidos
+            };
+
+            const byteArray = new Uint8Array(base64Data.length / 4 * 3);
+            for (let i = 0, j = 0; i < base64Data.length; i += 4, j += 3) {
+                const block = (
+                    (base64ToByte(base64Data[i]) << 18) |
+                    (base64ToByte(base64Data[i + 1]) << 12) |
+                    (base64ToByte(base64Data[i + 2]) << 6) |
+                    base64ToByte(base64Data[i + 3])
+                );
+
+                byteArray[j] = (block >> 16) & 0xff;
+                byteArray[j + 1] = (block >> 8) & 0xff;
+                byteArray[j + 2] = block & 0xff;
+            }
+
+            const blob = new Blob([byteArray], { type: 'image/png' });
+            return new File([blob], "imagem.png", { type: 'image/png' });
+
+        }
     },
     computed: {
         ...mapGetters("generic", ["showModal"]),
@@ -209,6 +319,11 @@ export default {
     opacity: 0;
 }
 
+.div-image {
+    cursor: pointer;
+}
+
+
 .small {
     padding: 3px 8px;
     font-size: 13px;
@@ -233,27 +348,43 @@ export default {
     height: 45px;
 }
 
+.img-selected {
+    width: 80%;
+}
+
 .icon-generic {
     font-size: 16px;
 }
 
 .name {
-    font-size: 14px;
+    font-size: 12px;
+    width: 50px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .icon {
     font-size: 20px;
     cursor: pointer;
+    padding: 5px;
 }
 
 .icon-close {
     color: red;
 }
 
+.icon-confirm {
+    color: green;
+}
+
 .title {
     font-size: 18px;
     margin-bottom: 20px;
 }
+
+.div-btn {
+    margin-bottom: 50px;
+}
 </style>