@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/shared/automation/SelectRule.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="selected-filter" @blur="open = false">
+      <div class="selected" :class="{ open: open }" @click="open = !open">
+        {{ selected }}
+      </div>
+      <div class="items" :class="{ hide: !open }">
+        <div v-for="(options, i) of options" :key="i">
+          <div @click="select(options)">
+            <span :class="options.classCss">
+              <i :class="options.icon"></i>
+              <span> {{ options.title }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: ["options", "value"],
+    data() {
+      return {
+        selected: "Selecione uma opção",
+        open: false,
+      };
+    },
+    mounted() {
+      this.$emit("input", this.selected);
+    },
+    methods: {
+      select(options) {
+        this.$emit("input", options);
+        this.selected = options.title;
+        this.open = false;
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .selected-filter {
+    position: relative;
+    width: 100%;
+    text-align: left;
+    outline: none;
+    height: 40px;
+    line-height: 40px;
+    z-index: 2;
+  }
+  
+  .selected-filter .selected {
+    background-color: white;
+    border: 1px solid #DBDEE0;
+    border-radius: 6px;
+    color: #495057;
+    padding-left: 1em;
+    cursor: pointer;
+    user-select: none;
+  }
+  
+  .selected-filter .selected:after {
+    position: absolute;
+    content: "";
+    top: 19px;
+    right: 1em;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-color: black transparent transparent transparent;
+  }
+  
+  .selected-filter .items {
+    color: black;
+    border-radius: 0px 0px 6px 6px;
+    overflow: hidden;
+    position: absolute;
+    background-color: #fafafc;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: 120px;
+    overflow-y: visible;
+    overflow-x: hidden;
+  }
+  
+  .selected-filter .items div {
+    color: black;
+    padding-left: 1em;
+    cursor: pointer;
+    user-select: none;
+  }
+  
+  .hide {
+    display: none;
+  }
+  </style>
+  

package/src/component/shared/automation/components/BillingByRent.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div class="title">
+            <i class="fa-solid fa-file-invoice"></i>
+            Gerar Faturamento
+        </div>
+        <div class="div-task">
+            <b-row>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="4">
+                    <SelectStatic title="Frequência" :required="true" :data="[
+                            { content: 'Semanal', id: 'weekly' },
+                            { content: 'Quinzenal', id: 'fortnightly' },
+                            { content: 'Mensal', id: 'monthly' },
+                            { content: 'Anual', id: 'yearly' },
+                        ]" :markFormDirty="true" v-model="rule.frequency" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="3">
+                    <InputDecimal title="Valor" field="value" :required="true" :markFormDirty="true" :maxLength="5"
+                        type="float" v-model="rule.amount" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="2">
+                    <DateTime title="Data Início" :required="true" field="dateStart" format="DD/MM/YYYY" type="date"
+                        placeholder v-model="rule.dateStart" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="2">
+                    <DateTime title="Data Fim" field="dateEnd" format="DD/MM/YYYY" type="date" placeholder
+                        v-model="rule.dateEnd" />
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col xs="12" sm="12" md="12" lg="8" xl="6">
+                    <SelectStatic title="Atividade" :data="[
+                            { content: 'Enviar E-mail', name: 'mail', recipient: '' },
+                            { content: 'Enviar WhatsApp', name: 'whatsapp', recipient: '' },
+                        ]" :markFormDirty="false" v-model="activity" />
+                </b-col>
+                <b-col sm="3">
+                    <div class="div-btn">
+                        <i class="fa-solid fa-circle-plus" @click="add"></i>
+                    </div>
+                </b-col>
+            </b-row>
+        </div>
+    </div>
+</template>
+<script>
+
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "Teste",
+    components: {
+        InputDecimal, SelectStatic, DateTime
+    },
+    props: {
+        rule: Object
+    },
+    data() {
+        return {
+            activity: {}
+        }
+    },
+    methods: {
+        ...mapMutations("automation", ["addActivity"]),
+        add() {
+            this.activity.id = this.generateId();
+            if (this.activity.content) {
+                var activity = JSON.parse(JSON.stringify(this.activity));
+                this.addActivity({ id: this.rule.id, activity: activity })
+            }
+
+        },
+        generateId() {
+            return Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, "")
+                .substr(0, 5);
+        },
+    }
+}
+</script>
+<style scoped>
+.title {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.div-btn {
+    margin-top: 30px;
+    font-size: 25px;
+    color: #577696;
+    cursor: pointer;
+}
+</style>

package/src/component/shared/automation/components/SendEmail.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <b-row>
+            <b-col sm="1">
+                <div class="icon-mail">
+                    <i class="fa-solid fa-envelope"></i>
+                </div>
+            </b-col>
+            <b-col sm="9">
+                <InputText title="Digite o E-mail e tecle enter" :maxLength="100" :enter="addEmail" v-model="email" />
+                <div class="side-by-side" v-for="email in emails ">
+                    <div class="tag">
+                        <div class="side-by-side">
+                            {{ email }}
+                        </div>
+                        <div class="side-by-side">
+                            <i class="icon-close fa-solid fa-circle-xmark"></i>
+                        </div>
+                    </div>
+                </div>
+            </b-col>
+            <b-col sm="2">
+                <div class="text-right div-icon-close" @click="remove">
+                    <i class="fa-solid fa-xmark"></i>
+                </div>
+            </b-col>
+        </b-row>
+    </div>
+</template>
+<script>
+
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import { mapMutations } from "vuex";
+
+export default {
+    name: "SendMail",
+    props: ["activity", "value"],
+    components: {
+        InputText
+    },
+    data() {
+        return {
+            email: "",
+            emails: []
+        }
+    },
+    methods: {
+        ...mapMutations("automation", ["removeActivity"]),
+        addEmail() {
+            this.emails.push(this.email);
+            this.email = "";
+        },
+        remove() {
+            this.removeActivity(this.activity.id);
+        }
+    },
+    watch: {
+        emails: {
+            handler(emails) {
+                this.$emit("input", emails);
+            },
+            deep: true,
+        },
+    },
+}
+
+</script>
+<style scoped>
+.icon-mail {
+    margin-left: 20px;
+    margin-top: 8px;
+    font-size: 20px;
+}
+
+.tag {
+    background-color: #E0E0E0;
+    margin-right: 10px;
+    padding: 3px;
+    font-size: 13px;
+    border-radius: 20px;
+}
+
+.icon-close {
+    color: darkgrey;
+    font-size: 20px;
+}
+
+.div-icon-close {
+    font-size: 16px;
+    color: red;
+    margin-right: 10px;
+    cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,390 @@
+<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>
+                </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() {
+            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 {
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+.div-btn {
+    margin-bottom: 50px;
+}
+</style>
+
+