@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/views/modules/dashboard/Dashboard.vue

@@ -0,0 +1,538 @@
+<template>
+  <div>
+    <Panel
+      module="Dashboard"
+      :showFilter="false"
+      :showSearch="false"
+      :showButtons="false"
+    >
+      <div slot="content-main">
+        <br />
+        <div v-if="userLogged.user.userName == 'UserTemp'">
+          <AlertUI type="info">
+            Login realizado em modo temporário, é permitido somente a leitura
+            das informações pela equipe de suporte Nixweb Sistemas!
+          </AlertUI>
+        </div>
+        <div v-else>
+          <div class="div-btn">
+            <b-row v-if="!draggable">
+              <b-col sm="7">
+                <div v-if="hasRule('Rental') || hasRule('Finance')">
+                  <ButtonFilter
+                    :options="optionsFilter"
+                    initialOption="year"
+                    v-model="filterSelected"
+                  />
+                </div>
+              </b-col>
+              <b-col sm="5">
+                <div class="div-config">
+                  <ButtonFilter
+                    :options="[
+                      {
+                        title: 'Configurar',
+                        classIcon: 'fa-solid fa-gear',
+                      },
+                    ]"
+                    :clicked="config"
+                  />
+                  <ButtonFilter
+                    :options="[
+                      {
+                        title: 'Mostrar',
+                        classIcon: 'fa-solid fa-eye',
+                      },
+                    ]"
+                    :clicked="showEye"
+                  />
+                </div>
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col sm="12">
+                <span class="text-dashboard-edit">
+                  <i class="fa-sharp fa-solid fa-maximize"></i>
+                  Arraste os blocos e/ou redimensione e clique em salvar
+                </span>
+                <div class="text-right">
+                  <Button
+                    _key="btnShowDashboard"
+                    type="info"
+                    title="Módulos"
+                    size="small"
+                    :clicked="showCard"
+                  />
+                  <Button
+                    _key="btnResetDashboard"
+                    type="primary"
+                    title="Padrão"
+                    size="small"
+                    :clicked="reset"
+                  />
+                  <Button
+                    _key="btnCancelDashboard"
+                    type="danger"
+                    title="Cancelar"
+                    size="small"
+                    :clicked="cancel"
+                  />
+                  <Button
+                    _key="btnSaveDashboard"
+                    type="success"
+                    title="Salvar"
+                    classIcon="fa-solid fa-floppy-disk"
+                    size="medium"
+                    :clicked="save"
+                  />
+                </div>
+              </b-col>
+            </b-row>
+          </div>
+          <Loading type="line" :center="false" v-show="loading" />
+          <br v-if="draggable" />
+          <grid-layout
+            v-if="!loading"
+            :layout.sync="layout"
+            :responsive-layouts="layouts"
+            :margin="[20, 20]"
+            :col-num="12"
+            :row-height="30"
+            :is-draggable="draggable"
+            :is-resizable="resizable"
+            :vertical-compact="true"
+            :use-css-transforms="true"
+            @layout-updated="layoutUpdatedEvent"
+            :responsive="responsive"
+          >
+            <grid-item
+              v-for="item in layoutShow"
+              :key="item.component"
+              :x="item.x"
+              :y="item.y"
+              :w="item.w"
+              :h="item.h"
+              :i="item.i"
+            >
+              <Favorite
+                v-if="item.component == 'favorite'"
+                :favorite="favorite"
+              />
+              <Alert v-if="item.component == 'alert'" />
+              <BalanceRent
+                :filterSelected="filterSelected"
+                v-if="item.component == 'balanceRent'"
+              />
+              <RankingCollaborator
+                :filterSelected="filterSelected"
+                v-if="item.component == 'rankingCollaborator'"
+              />
+              <TotalRent
+                :filterSelected="filterSelected"
+                v-if="item.component == 'totalRent'"
+              />
+              <!--    <TotalStock v-if="item.component == 'totalStock'" />
+              <BalanceFinance v-if="item.component == 'balanceFinance'" />
+              <BillsToReceive v-if="item.component == 'billsToReceive'" />
+              <BillsToPay v-if="item.component == 'billsToPay'" />
+              <BalanceBank v-if="item.component == 'balanceBank'" />
+              <DeliveryDevolution
+                v-if="item.component == 'deliveryDevolution'"
+              /> -->
+            </grid-item>
+          </grid-layout>
+        </div>
+      </div>
+    </Panel>
+    <Modal
+      title="Favorito(s)"
+      :width="700"
+      :height="750"
+      v-show="showModal('favorite')"
+      :onHideModal="saveAndGetById"
+    >
+      <FavoriteCreateRemove v-model="favorite" />
+    </Modal>
+    <Modal
+      title="Mostrar"
+      :width="700"
+      :height="750"
+      v-show="showModal('showCard')"
+      :onHideModal="save"
+    >
+      <ScrollBar :minHeight="300" :maxHeight="300">
+        <div
+          class="div-show"
+          v-for="item in layoutWithRule"
+          :key="item.component"
+        >
+          <Toggle :title="item.title" :color="'#4BB4E2'" v-model="item.show" />
+        </div>
+      </ScrollBar>
+    </Modal>
+    <Modal
+      :title="comunication.title"
+      :width="800"
+      :height="750"
+      v-if="showModal('comunication')"
+    >
+      <Comunication :comunication="comunication" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ButtonFilter from "@nixweb/nixloc-ui/src/component/forms/ButtonFilter";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import HorizontalFilter from "@nixweb/nixloc-ui/src/component/shared/HorizontalFilter.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import AlertUI from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import Favorite from "../../../components/modules/dashboard/favorite/Favorite.vue";
+import FavoriteCreateRemove from "../../../components/modules/dashboard/favorite/FavoriteCreateRemove.vue";
+import DeliveryDevolution from "../../../components/modules/dashboard/operational/DeliveryDevolution.vue";
+
+import Alert from "../../../components/modules/dashboard/alert/Alert.vue";
+import BalanceRent from "../../../components/modules/dashboard/rent/BalanceRent.vue";
+import RankingCollaborator from "../../../components/modules/dashboard/rent/RankingCollaborator.vue";
+import TotalRent from "../../../components/modules/dashboard/rent/TotalRent.vue";
+import TotalStock from "../../../components/modules/dashboard/stock/TotalStock.vue";
+import BalanceFinance from "../../../components/modules/dashboard/finance/BalanceFinance.vue";
+import BillsToReceive from "../../../components/modules/dashboard/finance/BillsToReceive.vue";
+import BillsToPay from "../../../components/modules/dashboard/finance/BillsToPay.vue";
+import BalanceBank from "../../../components/modules/dashboard/finance/BalanceBank.vue";
+import Comunication from "../../../components/modules/notifications/Comunication.vue";
+
+import { GridLayout, GridItem } from "vue-grid-layout";
+
+import DashboardProfile from "./DashboardProfile.js";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+var layoutsLocal = new DashboardProfile().layouts.custom;
+
+export default {
+  name: "Dashboard",
+  components: {
+    GridLayout,
+    GridItem,
+    Panel,
+    Button,
+    ButtonFilter,
+    Loading,
+    Toggle,
+    HorizontalFilter,
+    Favorite,
+    Modal,
+    FavoriteCreateRemove,
+    ScrollBar,
+    Alert,
+    AlertUI,
+    BalanceRent,
+    TotalRent,
+    BalanceFinance,
+    BillsToReceive,
+    BillsToPay,
+    BalanceBank,
+    TotalStock,
+    RankingCollaborator,
+    DeliveryDevolution,
+    Comunication,
+  },
+  data() {
+    return {
+      layouts: layoutsLocal,
+      layout: layoutsLocal["lg"],
+      favorite: [{ itens: [] }],
+      optionsFilter: [
+        { title: "Ano", classIcon: "fa-solid fa-calendar-days", value: "year" },
+        {
+          title: "Mês",
+          classIcon: "fa-solid fa-calendar-week",
+          value: "month",
+        },
+        { title: "Hoje", classIcon: "fa-solid fa-calendar-day", value: "day" },
+      ],
+      urlUpdate: "/api/v1/adm/user/update-profile",
+      urlGetById: "/api/v1/adm/user/get-by-id",
+      draggable: false,
+      resizable: false,
+      responsive: true,
+      filterSelected: "year",
+      loading: true,
+      layoutCurrent: "lg",
+      show: false,
+      showConfig: false,
+      comunication: {},
+    };
+  },
+  created() {
+    this.getComunication();
+  },
+  mounted() {
+    if (this.userLogged.user.userName != "UserTemp") {
+      this.getById();
+    } else {
+      this.removeLoading(["panel"]);
+    }
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("user", ["hasRule"]),
+    ...mapGetters("generic", ["event", "showModal"]),
+    layoutShow() {
+      let filter = this.layoutWithRule.filter(function (item) {
+        return item.show == true;
+      });
+      return filter;
+    },
+    layoutWithRule() {
+      let layout = [];
+
+      let hasRuleStock = this.hasRule("Stock");
+      let hasRuleRental = this.hasRule("Rental");
+      let hasRuleOperational = this.hasRule("Operational");
+      let hasRuleMaintenance = this.hasRule("Maintenance");
+      let hasRuleIvoice = this.hasRule("Billing");
+      let hasRuleFinance = this.hasRule("Finance");
+
+      this.layout.forEach((item) => {
+        if (item.rule == "All") layout.push(item);
+        if (item.rule == "Stock" && hasRuleStock) layout.push(item);
+        if (item.rule == "Billing" && hasRuleIvoice) layout.push(item);
+        if (item.rule == "Maintenance" && hasRuleMaintenance) layout.push(item);
+        if (item.rule == "Rental" && hasRuleRental) layout.push(item);
+        if (item.rule == "Operational" && hasRuleOperational) layout.push(item);
+        if (item.rule == "Finance" && hasRuleFinance) layout.push(item);
+      });
+
+      return layout;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "putApi"]),
+    ...mapMutations("generic", ["addEvent", "openModal", "removeLoading"]),
+    selected(params) {
+      this.filterSelected = params.filter;
+      this.removeLoading(["btnFilterDashboard"]);
+    },
+    getById() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetById,
+        obj: { userId: this.userLogged.user.id },
+      };
+      this.getApi(params).then((response) => {
+        if (response.content.dashboard != null) {
+          let self = this;
+          setTimeout(function () {
+            self.layouts = JSON.parse(response.content.dashboard);
+            self.removeLoading(["panel"]);
+            self.loading = false;
+          }, 300);
+        }
+
+        if (response.content.favorite != null) {
+          let self = this;
+          setTimeout(function () {
+            self.favorite = JSON.parse(response.content.favorite);
+            self.loading = false;
+          }, 300);
+        }
+
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["panel"]);
+          self.loading = false;
+        }, 400);
+      });
+    },
+    save() {
+      if (this.layoutCurrent == "lg") this.layouts.lg = this.layout;
+      if (this.layoutCurrent == "md") this.layouts.md = this.layout;
+      if (this.layoutCurrent == "sm") this.layouts.sm = this.layout;
+
+      let obj = {
+        id: this.userLogged.user.id,
+        dashboard: JSON.stringify(this.layouts),
+        favorite: JSON.stringify(this.favorite),
+      };
+      let params = { url: this.urlUpdate, obj: obj, notNotifyToast: true };
+      this.putApi(params).then((response) => {
+        this.editable(false);
+        this.removeLoading(["btnSaveDashboard"]);
+      });
+    },
+    saveAndGetById() {
+      this.save();
+    },
+    edit() {
+      this.editable(true);
+      this.removeLoading(["btnEditDashboard"]);
+    },
+    cancel() {
+      this.editable(false);
+      this.getById();
+      this.removeLoading(["btnCancelDashboard"]);
+    },
+    reset() {
+      var layouts = new DashboardProfile().layouts.reset;
+      this.editable(false);
+      this.loading = true;
+      let self = this;
+      setTimeout(function () {
+        self.layouts = layouts;
+        self.loading = false;
+      }, 300);
+      setTimeout(function () {
+        self.save();
+      }, 400);
+
+      this.removeLoading(["btnResetDashboard"]);
+    },
+    editable(isEditable) {
+      this.draggable = isEditable;
+      this.resizable = isEditable;
+    },
+    config() {
+      this.draggable = true;
+    },
+    showCard() {
+      this.openModal("showCard");
+      this.removeLoading(["btnShowDashboard"]);
+    },
+    showEye() {
+      let show = !this.show ? true : false;
+      this.show = show;
+      this.addEvent({ name: "hideShow", data: show });
+      this.removeLoading(["btnHideShowDashboard"]);
+    },
+    layoutUpdatedEvent: function (newLayout) {
+      this.layoutCurrent = newLayout[0].layout;
+    },
+    getComunication() {
+      var environment =
+        process.env.VUE_APP_API_URL ==
+        "https://backend-cliente-prod.azurewebsites.net/"
+          ? "prod"
+          : "dev";
+      var BASE_URL =
+        environment == "prod"
+          ? "https://backend-adm-prod.azurewebsites.net/"
+          : "https://backend-adm-dev.azurewebsites.net/";
+
+      let url = `${BASE_URL}api/v1/support/comunication/get`;
+      this.$http.get(url).then((response) => {
+        this.comunication = response.data.content;
+
+        let self = this;
+        setTimeout(function () {
+          if (self.comunication.show && self.userLogged.user.showComunication)
+            self.openModal("comunication");
+        }, 1000);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "openModalFavorite") this.openModal("favorite");
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dash {
+  margin-top: 70px;
+}
+
+.div-show {
+  margin-bottom: 5px;
+}
+
+.vue-grid-layout {
+  border-radius: 12px;
+  padding: 0px !important;
+  margin: -10px !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+  height: 100%;
+  width: 100%;
+  border: 1px solid #e8eaed;
+  background-color: white;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.vue-grid-item.vue-grid-placeholder {
+  background: #577696 !important;
+}
+
+.vue-grid-item .resizing {
+  opacity: 0.9;
+}
+
+.vue-grid-item .static {
+  background: #cce;
+}
+
+.vue-grid-item .title {
+  font-size: 25px;
+}
+
+.vue-grid-item .text {
+  font-size: 13px;
+}
+
+.vue-grid-item .no-drag {
+  height: 100%;
+  width: 100%;
+}
+
+.vue-grid-item .minMax {
+  font-size: 12px;
+}
+
+.vue-grid-item .add {
+  cursor: pointer;
+}
+
+.vue-draggable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  top: 0;
+  left: 0;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
+    no-repeat;
+  background-position: bottom right;
+  padding: 0 8px 8px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.text-dashboard-edit {
+  font-size: 15px;
+}
+
+.div-btn {
+  margin-top: 10px;
+  margin-bottom: 15px;
+}
+
+.div-config {
+  display: flex;
+  justify-content: right;
+  margin-right: 15px;
+}
+</style>

package/src/views/modules/dashboard/DashboardProfile.js

@@ -0,0 +1,16 @@
+export default class Profile {
+    constructor() {
+        this.layouts = {
+            custom: {
+                lg: [{ "x": 0, "y": 0, "w": 6, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "lg", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 6, "y": 0, "w": 6, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "lg", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 5, "w": 8, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "lg", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 8, "y": 5, "w": 4, "h": 3, "i": "3", "show": true, "rule": "Rental", "layout": "lg", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 8, "y": 8, "w": 4, "h": 6, "i": "4", "show": true, "rule": "Rental", "layout": "lg", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }],
+                md: [{ "x": 0, "y": 0, "w": 5, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "md", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 5, "y": 0, "w": 5, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "md", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 5, "w": 10, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "md", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 0, "y": 14, "w": 10, "h": 4, "i": "3", "show": true, "rule": "Rental", "layout": "md", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 0, "y": 18, "w": 10, "h": 7, "i": "4", "show": true, "rule": "Rental", "layout": "md", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }],
+                sm: [{ "x": 0, "y": 0, "w": 6, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "sm", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 0, "y": 5, "w": 6, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "sm", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 10, "w": 8, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "sm", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 0, "y": 19, "w": 6, "h": 3, "i": "3", "show": true, "rule": "Rental", "layout": "sm", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 0, "y": 22, "w": 6, "h": 6, "i": "4", "show": true, "rule": "Rental", "layout": "sm", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }]
+            },
+            reset: {
+                lg: [{ "x": 0, "y": 0, "w": 6, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "lg", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 6, "y": 0, "w": 6, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "lg", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 5, "w": 8, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "lg", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 8, "y": 5, "w": 4, "h": 3, "i": "3", "show": true, "rule": "Rental", "layout": "lg", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 8, "y": 8, "w": 4, "h": 6, "i": "4", "show": true, "rule": "Rental", "layout": "lg", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }],
+                md: [{ "x": 0, "y": 0, "w": 5, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "md", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 5, "y": 0, "w": 5, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "md", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 5, "w": 10, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "md", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 0, "y": 14, "w": 10, "h": 4, "i": "3", "show": true, "rule": "Rental", "layout": "md", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 0, "y": 18, "w": 10, "h": 7, "i": "4", "show": true, "rule": "Rental", "layout": "md", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }],
+                sm: [{ "x": 0, "y": 0, "w": 6, "h": 5, "i": "0", "show": true, "rule": "All", "layout": "sm", "title": "Favorito(s)", "component": "favorite", "moved": false }, { "x": 0, "y": 5, "w": 6, "h": 5, "i": "1", "show": true, "rule": "All", "layout": "sm", "title": "Aviso(s)", "component": "alert", "moved": false }, { "x": 0, "y": 10, "w": 8, "h": 9, "i": "2", "show": true, "rule": "Rental", "layout": "sm", "title": "Balanço - Locação", "component": "balanceRent", "moved": false }, { "x": 0, "y": 19, "w": 6, "h": 3, "i": "3", "show": true, "rule": "Rental", "layout": "sm", "title": "Total Locação por Status", "component": "totalRent", "moved": false }, { "x": 0, "y": 22, "w": 6, "h": 6, "i": "4", "show": true, "rule": "Rental", "layout": "sm", "title": "Total Locação por Consultor", "component": "rankingCollaborator", "moved": false }]
+            },
+        }
+    }
+}