@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/views/modules/shared/IntegrationReturn.vue

@@ -0,0 +1,274 @@
+<template>
+    <div class="google-container">
+        <div class="google-card">
+            <div v-if="statusReturn === 'ok'">
+                <div class="google-logos">
+                    <LogoSection />
+                </div>
+                <template v-if="loading">
+                    <div v-if="totalEventsCreated >= 1" class="title text-center">
+                        Sincronizando <span class="google-total">{{ totalEventsCreated }}</span> de <span
+                            class="google-total">{{
+                                totalEvents }}</span>
+                    </div>
+                    <div v-else>Estabelecendo conexão com o Google Agenda...</div>
+                    <br>
+                    <Loading type="line" :center="true" />
+                    <AnimatedPhrase
+                        :phrases="['Aguarde...', 'Isso pode levar alguns ou vários minutos...', 'Não feche ou atualize a página...']" />
+                </template>
+
+                <template v-else>
+                    <div>
+                        <div class="google-status google-success">Conexão Realizada com Sucesso</div>
+                        <span class="title back-link" @click="back()">Voltar</span>
+                    </div>
+                </template>
+            </div>
+
+            <div v-else-if="statusReturn === 'disconnect'">
+                <div class="google-logos">
+                    <LogoSection />
+                </div>
+                <Alert type="warning">
+                    <span class="title">
+                        Ao se desconectar, todos os calendários criados pelo Nixloc serão removidos. Deseja continuar?
+                    </span>
+                </Alert>
+                <br />
+                <Button _key="btnBack" classIcon="fa-solid fa-arrow-left" type="info" size="small" :clicked="back" />
+                <Button _key="btnDisconnect" title="Sim, confirmar" backGroundColor="#EF294B" color="white" size="medim"
+                    :clicked="disconnect" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ErrorsGoogle from '../../../components/modules/shared/google-calendar/ErrorsGoogle.vue'
+import AnimatedPhrase from "@nixweb/nixloc-ui/src/component/layout/AnimatedPhrase";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
+
+export default {
+    name: "IntegrationReturn",
+    components: {
+        AnimatedPhrase,
+        Alert,
+        Button,
+        Loading,
+        ErrorsGoogle,
+        LogoSection: {
+            functional: true,
+            render(h) {
+                return h("div", { class: "google-logos", ErrorsGoogle }, [
+                    h("div", { class: "google-logo" }, [
+                        h("img", {
+                            attrs: {
+                                src: "https://www.gstatic.com/images/branding/product/1x/calendar_48dp.png",
+                                alt: "Google Calendar"
+                            }
+                        })
+                    ]),
+                    h("div", { class: "google-plus" }, "+"),
+                    h("div", [
+                        h("img", {
+                            class: "google-logo-nix",
+                            attrs: {
+                                src: "https://nixloc.com.br/wp-content/themes/nixloc/shared/images/logo/nixloc.svg",
+                                alt: "Nixloc"
+                            }
+                        })
+                    ])
+                ]);
+            }
+        }
+    },
+    data() {
+        return {
+            urlDisconnect: "/api/v1/google/disconnect",
+            urlSynchronize: "/api/v1/google/synchronize-calendar",
+            urlCreateEvent: "/api/v1/google/create-event",
+            statusReturn: this.$route.params.statusReturn,
+            countdown: 10,
+            timer: null,
+            error: false,
+            errors: [],
+            loading: true,
+            totalEvents: 0,
+            totalEventsCreated: 0,
+        };
+    },
+    mounted() {
+        this.updateStatusGoogle(true);
+        if (this.statusReturn === "ok")
+            this.synchronize();
+    },
+    beforeDestroy() {
+        clearInterval(this.timer);
+    },
+    computed: {
+        ...mapState("user", ["userLogged"]),
+        ...mapGetters("user", ["hasRule"]),
+    },
+    methods: {
+        ...mapMutations("user", ["updateStatusGoogle"]),
+        ...mapMutations("generic", ["removeLoading"]),
+        ...mapActions("generic", ["postApi"]),
+        synchronize() {
+            let params = {
+                url: this.urlSynchronize,
+                obj: {
+                    firstSynchro: true,
+                    userId: this.userLogged.user.id,
+                    showJob: true,
+                    showDelivery: this.hasRule('Operational') || this.hasRule('Rental'),
+                    showPeriod: false,
+                    showProgress: false,
+                    showDevolution: this.hasRule('Operational') || this.hasRule('Rental'),
+                    showMaintenance: this.hasRule('Maintenance'),
+                    notifications: [
+                        { type: "popup", time: 10, unit: "minutes" },
+                        { type: "popup", time: 1, unit: "hours" }],
+                },
+                notNotifyToast: true
+            };
+            this.postApi(params).then((response) => {
+                this.totalEvents = response.content.length;
+
+                if (this.totalEvents == 0) {
+                    this.totalEventsCreated = 0;
+                    this.totalEvents = 0;
+                    this.loading = false;
+                }
+
+                let self = this;
+                response.content.forEach((event, index) => {
+                    setTimeout(() => {
+                        self.createEvent(event);
+                    }, index * 1000);
+                });
+
+                this.removeLoading(["synchronize"]);
+            });
+        },
+        createEvent(event) {
+            let params = {
+                url: this.urlCreateEvent,
+                obj: event,
+                notNotifyToast: true
+            };
+            this.postApi(params).then(response => {
+                if (response.success) {
+                    this.totalEventsCreated++;
+                    if (this.totalEventsCreated == this.totalEvents) {
+                        this.totalEventsCreated = 0;
+                        this.totalEvents = 0;
+                        this.loading = false;
+                    }
+                }
+            });
+        },
+        back() {
+            let self = this;
+            setTimeout(function () {
+                if (self.error) self.disconnect();
+                self.removeLoading(["btnBack"]);
+                self.$router.replace({ name: "calendar" });
+            }, 300);
+        },
+        disconnect() {
+            let params = {
+                url: this.urlDisconnect,
+                obj: { id: this.userLogged.user.id },
+                notNotifyToast: true
+            };
+            this.postApi(params).then((response) => {
+                this.updateStatusGoogle(false);
+                this.back();
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.google-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+}
+
+.google-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 4px 100px rgba(0, 0, 0, 0);
+    width: 500px;
+    text-align: center;
+}
+
+.google-card h4 {
+    color: #2d3436;
+    margin-bottom: 10px;
+}
+
+.google-card p {
+    color: #636e72;
+    margin-bottom: 20px;
+}
+
+.google-logos {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.google-logo-nix {
+    width: 120px;
+}
+
+.google-logo img {
+    width: 48px;
+    height: 48px;
+}
+
+.google-plus {
+    font-size: 40px;
+    margin: 0 30px;
+    color: #0984e3;
+}
+
+.google-status {
+    font-size: 16px;
+    padding: 3px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.google-success {
+    background-color: #f6ffed;
+    color: #52c41a;
+    border: 1px solid #d7f4be;
+}
+
+.google-danger {
+    background-color: #fff1f0;
+    color: red;
+    border: 1px solid #ffa39e;
+}
+
+.back-link {
+    cursor: pointer;
+}
+
+.google-total {
+    font-size: 16px;
+}
+</style>

package/src/views/modules/shared/JobList.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <ViewTemplateWithTable :panel="panel" :templateList="templateList" :actions="actions" :filters="filters" :propsParam="propsParam">
+      <div slot="content-buttons">
+        <Button _key="btnJobCreate" title="Tarefa" classIcon="fas fa-plus-circle" type="primary" size="small"
+          :clicked="create" />
+      </div>
+      <div slot="content-between-search-table">
+        <div class="text-center">
+          <div class="side-by-side div-task">
+            <ButtonToggle titleActive="Pendente" titleInactive="Pendente" colorActive="#FF0201"
+              classIconActive="fa-regular fa-check-double" classIconInactive="fa-solid fa-triangle-exclamation"
+              colorInactive="#F0F0F0" v-model="propsParam.delayed" />
+          </div>
+          <div class="side-by-side div-task">
+            <ButtonToggle titleActive="Hoje" titleInactive="Hoje" colorActive="#FF8A1B"
+              classIconActive="fa-regular fa-check-double" classIconInactive="fa-solid fa-calendar-week"
+              colorInactive="#F0F0F0" v-model="propsParam.today" />
+          </div>
+          <div class="side-by-side div-task">
+            <ButtonToggle titleActive="Prazo" titleInactive="Prazo" colorActive="#3D4EAE"
+              classIconActive="fa-regular fa-check-double" classIconInactive="fa-solid fa-timer" colorInactive="#F0F0F0"
+              v-model="propsParam.scheduled" />
+          </div>
+          <div class="side-by-side div-task">
+            <ButtonToggle titleActive="Concluída" titleInactive="Concluída" colorActive="#009183"
+              classIconActive="fa-regular fa-check-double" classIconInactive="fa-regular fa-square-check"
+              colorInactive="#F0F0F0" v-model="propsParam.done" />
+          </div>
+        </div>
+
+      </div>
+    </ViewTemplateWithTable>
+    <Modal title="Tarefa" :width="900" :height="750" v-show="showModal('job')">
+      <JobCreateUpdate />
+    </Modal>
+  </div>
+</template>
+
+<script>
+
+import ViewTemplateWithTable from "@nixweb/nixloc-ui/src/component/template/ViewTemplateWithTable.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import ButtonToggle from "@nixweb/nixloc-ui/src/component/forms/ButtonToggle";
+
+import JobCreateUpdate from '../../../components/modules/shared/job/JobCreateUpdate.vue'
+
+import { mapGetters, mapMutations, mapState } from "vuex";
+
+export default {
+  name: "JobListView",
+  components: {
+    ViewTemplateWithTable,
+    Modal,
+    Button, JobCreateUpdate, RadioGroup, ButtonToggle
+  },
+  data() {
+    return {
+      panel: {
+        module: "Tarefa",
+        title: "",
+        showFilter: true,
+        showSearch: true,
+        showButtons: true,
+      },
+      templateList: {
+        urlGetApi: "/api/v1/shared/job/get-all",
+        urlDeleteAllApi: "/api/v1/shared/job/delete",
+        showChecks: true,
+        headerTable: [
+          {
+            field: "photo",
+            title: "Org...",
+            container: "nixloc-photo-user",
+            type: "image",
+            classCssBody: "img-user",
+          },
+          {
+            field: "subject",
+            title: "Assunto",
+            type: "link",
+            iconSearch: true,
+            eventName: "jobUpdate",
+            classCssBody: "center-vertical",
+          },
+          {
+            field: "fullTime",
+            title: "Período",
+            type: "text",
+            classCssBody: "center-vertical",
+          },
+          {
+            field: "status",
+            title: "Status",
+            type: "html",
+            classCssTitle: "text-center",
+            classCssBody: "text-center center-vertical",
+          },
+          {
+            field: "guest",
+            title: "Participantes",
+            type: "html",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+
+        ],
+      },
+      actions: [
+        { type: "delete", title: "Remover", description: "Remover", url: "/api/v1/shared/job/delete", method: "delete", },
+      ],
+      filters: [
+        {
+          type: "date",
+          title: "Data Início",
+          field: "_DateStart",
+          value: "",
+        },
+        {
+          type: "date",
+          title: "Data Fim",
+          field: "_DateEnd",
+          value: "",
+        },
+      ],
+      filter: this.$route.params.filter,
+      propsParam: {
+        delayed: true,
+        today: true,
+        scheduled: false,
+        done: false,
+        any: "",
+      },
+    };
+  },
+  created() {
+    if (this.filter) {
+      if (this.filter == "delayed") this.propsParam.status = "Pendente";
+      if (this.filter == "today") this.propsParam.status = "Hoje";
+      if (this.filter == "scheduled") this.propsParam.status = "Prazo";
+      this.propsParam.any = this.userLogged.user.id;
+    }
+  },
+  mounted() {
+    this.propsParam.any = this.userLogged.user.id;
+    var filterStorage = this.get_FilterStorage(this.$route.name);
+    if (filterStorage) {
+      this.propsParam = filterStorage.propsParam;
+    }
+  },
+  computed: {
+    ...mapGetters("generic", ["event", "showModal", "get_FilterStorage"]),
+    ...mapState("generic", ["selected"]),
+    ...mapState("user", ["userLogged"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "openModal", "removeLoading", "executedSearch", "_addFilterStorage"]),
+    create() {
+      this.openModal("job");
+      this.addEvent({ name: "jobCreate" });
+      this.removeLoading(["btnJobCreate"]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "jobUpdate") {
+          this.openModal("job");
+        }
+      },
+      deep: true,
+    },
+    propsParam: {
+      handler() {
+        this.executedSearch();
+        this._addFilterStorage({ routeName: this.$route.name, propsParam: this.propsParam });
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style>
+.job-box {
+  width: 10px;
+  height: 10px;
+  border-radius: 50px;
+  margin-right: 8px;
+}
+
+.job-delay {
+  background-color: red;
+}
+
+.job-done {
+  background-color: #009183;
+}
+
+.job-today {
+  background-color: #ff8a1b;
+}
+
+.job-scheduled {
+  background-color: #3d4eae;
+}
+
+.div-guest {
+  margin-left: -10px;
+}
+
+.img-guest {
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+}
+
+.div-tag {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.div-task {
+  margin-right: 10px;
+}
+</style>

package/src/views/modules/signature/ConfigSignature.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Panel :module="panel.module" :title="panel.title" :showFilter="panel.showFilter" :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons">
+      <div slot="content-main">
+        <div>
+          <br />
+          <SignatureConfig />
+        </div>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import SignatureConfig from '../../../components/modules/signature/signature-config/SignatureConfig.vue'
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "SignatureConfigView",
+  components: { Panel, SignatureConfig },
+  data() {
+    return {
+      panel: {
+        module: "Assinatura Digital",
+        title: "Configuração",
+        showFilter: false,
+        showSearch: false,
+        showButtons: false,
+      },
+    };
+  },
+  mounted() {
+    this.removeLoading(["panel"]);
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+  },
+};
+</script>