@nixweb/nixloc-ui 1.19.0 → 1.21.0

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

@@ -1,391 +1,391 @@
-<template>
-    <div>
-        <Alert v-if="!success" type="danger">
-            Não é permitido enviar arquivos com mais de 5 megabytes.
-        </Alert>
-        <div v-if="loading">
-            <Loading type="line" :center="false" />
-        </div>
-        <div>
-            <b-row>
-                <b-col sm="3">
-                    <div class="file">
-                        <button class="button small primary" @click="openCamera">
-                            <span><i class="fa-regular fa-camera-web"></i> Câmera</span>
-                        </button>
-                    </div>
-                    <div class="file">
-                        <button class="button small primary">
-                            <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" v-if="!showCapture">
-                    <div class="side-by-side" v-for="attachment in attachments">
-                        <div class="text-center box-file">
-                            <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 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 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>
-                    <div class="title" v-if="attachments.length == 0">
-                        Nenhum arquivo adicionado!
-                    </div>
-                </b-col>
-            </b-row>
-        </div>
-        <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 small primary" @click="captureImage">
-                        <i class="fa-solid fa-camera"></i>
-                        Capturar
-                    </button>
-                    <button class="button small danger" @click="stopCamera">
-                        <i class="fa-solid fa-circle-xmark"></i>
-                        Fechar
-                    </button>
-                </div>
-            </div>
-        </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'
-
-import { mapActions, mapGetters, mapMutations } from "vuex";
-
-export default {
-    components: {
-        WebCam,
-        Modal,
-        Loading,
-        Confirmation,
-        Alert,
-    },
-    props: {
-        baseUrl: {
-            type: String,
-            default: "https://espaco.blob.core.windows.net/nixloc-attachments/",
-        },
-        showInModal: {
-            type: Boolean,
-            default: true
-        },
-        source: String,
-        genericId: String
-    },
-    data() {
-        return {
-            urlPost: "/api/v1/adm/attachment/upload",
-            urlGet: "/api/v1/adm/attachment/get-all",
-            urlDelete: "/api/v1/adm/attachment/delete",
-            files: [],
-            attachments: [],
-            captures: [],
-            imgReport: [],
-            idSelected: "",
-            imageSelected: "",
-            loading: false,
-            success: true,
-            showCapture: false,
-        };
-    },
-    mounted() {
-        this.getAll();
-    },
-    methods: {
-        ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
-        ...mapActions("generic", ["postFileApi", "getApi", "deleteAllApi"]),
-        confirm() {
-            this.files = Object.values(this.$refs.file.files);
-            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() {
-            if (this.showInModal) this.hideModal("confirm");
-            this.loading = true;
-            let self = this;
-            for (const file of this.files) {
-                await self.upload(file);
-            }
-
-            this.loading = false;
-        },
-        async upload(file) {
-            this.loading = true;
-            let params = {
-                url: this.urlPost,
-                file: file,
-                name: this.source,
-                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() {
-            if (this.showInModal)
-                this.openModal("webcam");
-            this.showCapture = true;
-            this.startCamera();
-        },
-        startCamera() {
-            if (this.$refs.webcam) {
-                this.$refs.webcam.start();
-            }
-        },
-        stopCamera() {
-            if (this.$refs.webcam) {
-                this.$refs.webcam.stop();
-                this.showCapture = false;
-                if (this.showInModal) this.hideModal();
-            }
-        },
-        captureImage() {
-            if (this.$refs.webcam) {
-                this.$refs.webcam.capture().then((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"]),
-    },
-};
-</script>
-
-<style scoped>
-.file {
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
-    cursor: pointer;
-}
-
-.button {
-    padding: 8px 12px;
-    cursor: pointer;
-    border: none;
-    border-radius: 40px !important;
-    font-size: 14px;
-    font-weight: 400;
-    margin-left: 10px;
-}
-
-.primary {
-    background: #577696;
-    border-color: #577696;
-    color: #fff;
-}
-
-.primary:hover {
-    background: #355472;
-}
-
-.danger {
-    background: red;
-    border-color: red;
-    color: #fff;
-}
-
-.file input[type="file"] {
-    font-size: 100px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0;
-}
-
-.div-image {
-    cursor: pointer;
-}
-
-
-.small {
-    padding: 3px 8px;
-    font-size: 13px;
-}
-
-.box-file {
-    width: 120px !important;
-    height: 110px !important;
-    border: 1px solid #e8eaed;
-    background-color: #fff;
-    border-radius: 13px;
-    margin: 10px;
-    font-size: 23px;
-    font-weight: 400;
-    align-items: center;
-    justify-content: center;
-}
-
-.img {
-    margin: 10px;
-    width: 45px;
-    height: 45px;
-}
-
-.img-selected {
-    width: 80%;
-}
-
-.icon-generic {
-    font-size: 16px;
-}
-
-.name {
-    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-file {
-    font-size: 18px;
-    margin-bottom: 20px;
-}
-
-.div-btn {
-    margin-bottom: 50px;
-}
+<template>
+    <div>
+        <Alert v-if="!success" type="danger">
+            Não é permitido enviar arquivos com mais de 5 megabytes.
+        </Alert>
+        <div v-if="loading">
+            <Loading type="line" :center="false" />
+        </div>
+        <div>
+            <b-row>
+                <b-col sm="3">
+                    <div class="file">
+                        <button class="button small primary" @click="openCamera">
+                            <span><i class="fa-regular fa-camera-web"></i> Câmera</span>
+                        </button>
+                    </div>
+                    <div class="file">
+                        <button class="button small primary">
+                            <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" v-if="!showCapture">
+                    <div class="side-by-side" v-for="attachment in attachments">
+                        <div class="text-center box-file">
+                            <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 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 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>
+                    <div class="title" v-if="attachments.length == 0">
+                        Nenhum arquivo adicionado!
+                    </div>
+                </b-col>
+            </b-row>
+        </div>
+        <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 small primary" @click="captureImage">
+                        <i class="fa-solid fa-camera"></i>
+                        Capturar
+                    </button>
+                    <button class="button small danger" @click="stopCamera">
+                        <i class="fa-solid fa-circle-xmark"></i>
+                        Fechar
+                    </button>
+                </div>
+            </div>
+        </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'
+
+import { mapActions, mapGetters, mapMutations } from "vuex";
+
+export default {
+    components: {
+        WebCam,
+        Modal,
+        Loading,
+        Confirmation,
+        Alert,
+    },
+    props: {
+        baseUrl: {
+            type: String,
+            default: "https://espaco.blob.core.windows.net/nixloc-attachments/",
+        },
+        showInModal: {
+            type: Boolean,
+            default: true
+        },
+        source: String,
+        genericId: String
+    },
+    data() {
+        return {
+            urlPost: "/api/v1/adm/attachment/upload",
+            urlGet: "/api/v1/adm/attachment/get-all",
+            urlDelete: "/api/v1/adm/attachment/delete",
+            files: [],
+            attachments: [],
+            captures: [],
+            imgReport: [],
+            idSelected: "",
+            imageSelected: "",
+            loading: false,
+            success: true,
+            showCapture: false,
+        };
+    },
+    mounted() {
+        this.getAll();
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+        ...mapActions("generic", ["postFileApi", "getApi", "deleteAllApi"]),
+        confirm() {
+            this.files = Object.values(this.$refs.file.files);
+            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() {
+            if (this.showInModal) this.hideModal("confirm");
+            this.loading = true;
+            let self = this;
+            for (const file of this.files) {
+                await self.upload(file);
+            }
+
+            this.loading = false;
+        },
+        async upload(file) {
+            this.loading = true;
+            let params = {
+                url: this.urlPost,
+                file: file,
+                name: this.source,
+                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() {
+            if (this.showInModal)
+                this.openModal("webcam");
+            this.showCapture = true;
+            this.startCamera();
+        },
+        startCamera() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.start();
+            }
+        },
+        stopCamera() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.stop();
+                this.showCapture = false;
+                if (this.showInModal) this.hideModal();
+            }
+        },
+        captureImage() {
+            if (this.$refs.webcam) {
+                this.$refs.webcam.capture().then((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"]),
+    },
+};
+</script>
+
+<style scoped>
+.file {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.button {
+    padding: 8px 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 40px !important;
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 10px;
+}
+
+.primary {
+    background: #577696;
+    border-color: #577696;
+    color: #fff;
+}
+
+.primary:hover {
+    background: #355472;
+}
+
+.danger {
+    background: red;
+    border-color: red;
+    color: #fff;
+}
+
+.file input[type="file"] {
+    font-size: 100px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+}
+
+.div-image {
+    cursor: pointer;
+}
+
+
+.small {
+    padding: 3px 8px;
+    font-size: 13px;
+}
+
+.box-file {
+    width: 120px !important;
+    height: 110px !important;
+    border: 1px solid #e8eaed;
+    background-color: #fff;
+    border-radius: 13px;
+    margin: 10px;
+    font-size: 23px;
+    font-weight: 400;
+    align-items: center;
+    justify-content: center;
+}
+
+.img {
+    margin: 10px;
+    width: 45px;
+    height: 45px;
+}
+
+.img-selected {
+    width: 80%;
+}
+
+.icon-generic {
+    font-size: 16px;
+}
+
+.name {
+    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-file {
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+.div-btn {
+    margin-bottom: 50px;
+}
 </style>