@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/dashboard/config/ConfigDashboard.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <RadioGroup title="Filtro Inicial" :options="[
+      { text: 'Hoje', value: 'today' },
+      { text: 'Semana Atual', value: 'week' },
+      { text: 'Mês Atual', value: 'month' },
+      { text: 'Ano Atual', value: 'year' },
+    ]" v-model="filter" />
+    <span class="title"> Clique e arraste para ordenar</span>
+    <ScrollBar :minHeight="150" :maxHeight="300">
+      <div class="molded">
+        <b-row>
+          <b-col sm="6">
+            <i class="fa-solid fa-star icon-favorite"></i>
+            <span class="title"> Favorito</span>
+          </b-col>
+          <b-col sm="6">
+            <div class="title text-right">Fixo</div>
+          </b-col>
+        </b-row>
+      </div>
+      <draggable v-model="items">
+        <div v-for="(item, index) in items" :key="index" class="draggable-item">
+          <div class="molded" v-if="isVisible(item)">
+            <b-row>
+              <b-col sm="6">
+                <i class="title" :class="item.icon"></i> <span class="title">{{ item.title }}</span>
+              </b-col>
+              <b-col sm="6">
+                <div v-if="item.title != 'Favorito'" class="div-eye text-right">
+                  <span class="title">
+                    <i @click="item.isShow = false" v-if="item.isShow" class="fa-solid fa-eye icon-eye"></i>
+                    <i @click="item.isShow = true" v-else class="fa-sharp fa-solid fa-eye-slash icon-eye-off"></i>
+                  </span>
+                </div>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
+      </draggable>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import draggable from "vuedraggable";
+
+import { mapMutations, mapGetters, mapActions, mapState } from "vuex";
+
+export default {
+  name: "ConfigDashboard",
+  components: {
+    ScrollBar,
+    Toggle,
+    draggable,
+    RadioGroup,
+  },
+  computed: {
+    ...mapGetters("user", ["hasRule", "hasPermission"]),
+    ...mapState("user", ["userLogged"]),
+  },
+  data() {
+    return {
+      urlUpdate: "/api/v1/adm/user/update-profile",
+      urlGetById: "/api/v1/adm/user/get-by-id",
+      items: [
+        {
+          order: 0,
+          title: "Favorito",
+          icon: "fa-solid fa-star",
+          module: "Favorite",
+          isShow: true,
+        },
+        {
+          order: 1,
+          title: "Tarefa",
+          icon: "fa-solid fa-check-double",
+          module: "all",
+          isShow: true,
+        },
+        {
+          order: 2,
+          title: "Filtro",
+          icon: "fa-solid fa-filter",
+          module: "all",
+          isShow: true,
+        },
+        {
+          order: 3,
+          title: "Operacional",
+          icon: "fa-solid fa-truck-loading",
+          module: "Operational",
+          isShow: true,
+        },
+        {
+          order: 4,
+          title: "Faturamento",
+          icon: "fa-solid fa-file-invoice",
+          module: "Billing",
+          isShow: true,
+        },
+        {
+          order: 5,
+          title: "Locação",
+          icon: "fa-solid fa-light fa-right-left",
+          module: "Rental",
+          isShow: true,
+        },
+        {
+          order: 6,
+          title: "Boleto Bancário",
+          icon: "fa-solid fa-barcode",
+          module: "Billet",
+          isShow: true,
+        },
+        {
+          order: 7,
+          title: "Assinatura Digital",
+          icon: "fa-solid fa-signature",
+          module: "Signature",
+          isShow: true,
+        },
+        {
+          order: 8,
+          title: "Financeiro",
+          icon: "fa-regular fa-sack-dollar",
+          module: "Finance",
+          isShow: true,
+        },
+      ],
+      filter: "today",
+    };
+  },
+  mounted() {
+    this.getById();
+  },
+  methods: {
+    ...mapActions("generic", ["putApi", "getApi"]),
+    ...mapMutations("generic", ["addEvent"]),
+    isVisible(item) {
+      if (item.module == "all") return true;
+      if (item.module == "Billet" && this.hasRule("Billet") && this.isPermission("Billet")) return true;
+      if (item.module == "Billing" && this.hasRule("Billing") && this.isPermission("Billing")) return true;
+      if (item.module == "Rental" && this.hasRule("Rental") && this.isPermission("Rental")) return true;
+      if (item.module == "Signature" && this.hasRule("Signature") && this.isPermission("Signature")) return true;
+      if (item.module == "Operational" && this.hasRule("Operational") && this.isPermission("Operational"))
+        return true;
+      if (item.module == "Finance" && this.hasRule("Finance") && this.isPermission("Finance"))
+        return true;
+
+
+      return false;
+    },
+    isPermission(rule) {
+      let hasPermission = this.hasPermission(rule);
+      if (hasPermission) {
+        if (hasPermission.includes("dashboard")) {
+          return true;
+        }
+        return false;
+      }
+    },
+    save() {
+      let dashboard = {
+        filter: this.filter,
+        order: this.items,
+      };
+      let obj = {
+        id: this.userLogged.user.id,
+        dashboard: JSON.stringify(dashboard),
+      };
+      let params = { url: this.urlUpdate, obj: obj, notNotifyToast: true };
+      this.putApi(params).then((response) => { });
+    },
+    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 () {
+            var retItems = JSON.parse(response.content.dashboard);
+            self.filter = retItems.filter;
+            let order = 0;
+            retItems.order.forEach((dashboard) => {
+              self.items.forEach((item) => {
+                if (dashboard.title == item.title) {
+                  item.order = order;
+                  item.isShow = dashboard.isShow;
+                  order++;
+                }
+              });
+            });
+            self.items = self.order(self.items);
+          }, 300);
+        }
+      });
+    },
+    order(items) {
+      return items.sort((a, b) => a.order - b.order);
+    }
+
+  },
+  watch: {
+    items: {
+      handler() {
+        this.save();
+      },
+      deep: true,
+    },
+    filter: {
+      handler() {
+        this.save();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.molded {
+  border: 1px solid #e8eaed;
+  padding: 5px;
+  margin: 5px;
+  border-radius: 10px;
+  cursor: grab;
+}
+
+.div-eye {
+  cursor: pointer;
+}
+
+.icon-eye {
+  color: #0d40e9;
+}
+
+.icon-eye-off {
+  color: darkgray;
+  opacity: 0.4;
+}
+
+.icon-favorite {
+  color: #f1cd54;
+  cursor: pointer;
+}
+</style>

package/src/components/modules/dashboard/favorite/Favorite.js

@@ -0,0 +1,126 @@
+export default class Favorite {
+    constructor() {
+        this.itens = [
+            {
+                rule: "CRM",
+                rulePortuguese: "CRM",
+                title: "Cliente",
+                routeName: "customerList",
+                icon: "fas fa-user",
+                isFavorite: false,
+                iconColor: "#577696"
+            },
+            {
+                rule: "CRM",
+                rulePortuguese: "CRM",
+                title: "Configuração",
+                routeName: "configCrm",
+                icon: "fas fa-cog",
+                isFavorite: false,
+                iconColor: "#528DD7"
+            },
+            {
+                rule: "CRM",
+                rulePortuguese: "CRM",
+                title: "Relatório",
+                routeName: "reportCrm",
+                icon: "fa-solid fa-file-dashed-line",
+                isFavorite: false,
+                iconColor: "#94AA2A"
+            },
+            {
+                rule: "Stock",
+                rulePortuguese: "Estoque",
+                title: "Produto",
+                routeName: "productList",
+                icon: "fas fa-boxes",
+                isFavorite: false,
+                iconColor: "#577696"
+
+            },
+            {
+                rule: "Stock",
+                rulePortuguese: "Estoque",
+                title: "Configuração",
+                routeName: "configStock",
+                icon: "fas fa-cog",
+                isFavorite: false,
+                iconColor: "#528DD7"
+            },
+            {
+                rule: "Stock",
+                rulePortuguese: "Estoque",
+                title: "Relatório",
+                routeName: "reportStock",
+                icon: "fa-solid fa-file-dashed-line",
+                isFavorite: false,
+                iconColor: "#94AA2A"
+            },
+            {
+                rule: "PDV",
+                rulePortuguese: "PDV",
+                title: "PDV",
+                routeName: "pdvRentSelectOption",
+                icon: "fa-solid fa-display",
+                isFavorite: false,
+                iconColor: "#577696"
+            },
+            {
+                rule: "Rental",
+                rulePortuguese: "Locação",
+                title: "Locação",
+                routeName: "rentalList",
+                icon: "fas fa-exchange-alt",
+                isFavorite: false,
+                iconColor: "#577696"
+            },
+            {
+                rule: "Rental",
+                rulePortuguese: "Locação",
+                title: "Configuração",
+                routeName: "configRental",
+                icon: "fas fa-cog",
+                isFavorite: false,
+                iconColor: "#528DD7"
+            },
+            {
+                rule: "Rental",
+                rulePortuguese: "Locação",
+                title: "Relatório",
+                routeName: "reportStock",
+                icon: "fa-solid fa-file-dashed-line",
+                isFavorite: false,
+                iconColor: "#94AA2A"
+            },
+            {
+                rule: "Operational",
+                rulePortuguese: "Operacional",
+                title: "Painel de OS",
+                routeName: "osPanelList",
+                icon: "fa-solid fa-truck-ramp-box",
+                isFavorite: false,
+                iconColor: "#577696"
+            },
+            {
+                rule: "Operational",
+                rulePortuguese: "Operacional",
+                type: "link",
+                title: "Relatório",
+                routeName: "reportStock",
+                icon: "fa-solid fa-file-dashed-line",
+                isFavorite: false,
+                iconColor: "#94AA2A"
+            },
+            {
+                rule: "HumanResources",
+                rulePortuguese: "RH",
+                type: "link",
+                title: "Colaborador",
+                routeName: "collaboratorList",
+                icon: "fas fa-users-class",
+                isFavorite: false,
+                iconColor: "#577696"
+            },
+        ]
+    }
+}

package/src/components/modules/dashboard/favorite/Favorite.vue

@@ -0,0 +1,117 @@
+<template>
+    <div>
+      <b-row>
+        <b-col sm="6">
+          <div class="text-left div-title">Favoritos</div>
+        </b-col>
+        <b-col sm="6">
+          <div class="text-right div-title icon-gear" @click="openModalFavorite">
+            <i class="fa-solid fa-gear"></i>
+          </div>
+        </b-col>
+      </b-row>
+      <div class="box-favorite side-by-side" v-for="item in favoriteWithRule">
+        <div
+          @click="navigateTo(item.routeName)"
+          class="box-favorite-icon text-center"
+          v-b-tooltip.hover
+          :title="item.rulePortuguese + ' - ' + item.title"
+          :style="'color:' + item.iconColor"
+        >
+          <i class="title" :class="item.icon"></i>
+        </div>
+      </div>
+      <div v-if="favoriteWithRule.length == 0">
+        <div class="text-description text-center">Nenhum favorito!</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapMutations, mapGetters } from "vuex";
+  export default {
+    name: "Favorite",
+    props: ["favorite"],
+    computed: {
+      ...mapGetters("user", ["hasRule"]),
+      favoriteWithRule() {
+        let layout = [];
+        let hasRuleCRM = this.hasRule("CRM");
+        let hasRuleStock = this.hasRule("Stock");
+        let hasRuleRental = this.hasRule("Rental");
+        let hasRuleOperational = this.hasRule("Operational");
+        let hasRuleHumanResources = this.hasRule("HumanResources");
+        if (this.favorite.itens) {
+          this.favorite.itens.forEach((item) => {
+            if (item.rule == "CRM" && hasRuleCRM && item.isFavorite)
+              layout.push(item);
+            if (item.rule == "Stock" && hasRuleStock && item.isFavorite)
+              layout.push(item);
+            if (item.rule == "Rental" && hasRuleRental && item.isFavorite)
+              layout.push(item);
+            if (
+              item.rule == "Operational" &&
+              hasRuleOperational &&
+              item.isFavorite
+            )
+              layout.push(item);
+            if (
+              item.rule == "HumanResources" &&
+              hasRuleHumanResources &&
+              item.isFavorite
+            )
+              layout.push(item);
+          });
+        }
+        return layout;
+      },
+    },
+    methods: {
+      ...mapMutations("generic", ["addEvent"]),
+      openModalFavorite() {
+        this.addEvent({ name: "openModalFavorite" });
+      },
+      navigateTo(routeName) {
+        this.$router.push({
+          name: routeName,
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .div-title {
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-size: 15px;
+  }
+  .box-favorite {
+    height: 50px !important;
+    width: 50px !important;
+    border: 1px solid #d5d5d5;
+    background-color: #fff;
+    border-radius: 10px;
+    margin-left: 18px;
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+  .box-favorite:hover {
+    background-color: #f1f1f3;
+  }
+  .icon-gear {
+    cursor: pointer;
+  }
+  .box-favorite-icon {
+    margin-top: 4px;
+  }
+  .text-description {
+    padding: 15px;
+    font-size: 14px;
+    color: black;
+  }
+  </style>

package/src/components/modules/dashboard/favorite/FavoriteCreateRemove.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <ScrollBar :minHeight="300" :maxHeight="300">
+      <div class="div-show" v-for="(data, groupName) in grouped">
+        <div class="text-center">{{ groupName }}</div>
+        <div class="div-favorite" v-for="item in data">
+          <b-row>
+            <b-col sm="1">
+              <div>
+                <i class="title" :class="item.icon"></i>
+              </div>
+            </b-col>
+            <b-col sm="6"> <span class="title">{{ item.title }}</span></b-col>
+            <b-col sm="5">
+              <div class="text-right div-star">
+                <i class="fa-solid fa-star icon-star" v-if="item.isFavorite" @click="item.isFavorite = false"></i>
+                <i class="fa-regular fa-star icon-star" v-else @click="item.isFavorite = true"></i>
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import Favorite from "@/components/modules/dashboard/favorite/Favorite.js";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "FavoriteCreateRemove",
+  components: {
+    Toggle,
+    ScrollBar,
+  },
+  props: ["value"],
+  data() {
+    return {
+      favorite: new Favorite(),
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy"]),
+    ...mapGetters("user", ["hasRule"]),
+    favoriteWithRule() {
+      let listFavorite = [];
+
+      let hasRuleCRM = this.hasRule("CRM");
+      let hasRuleStock = this.hasRule("Stock");
+      let hasRuleRental = this.hasRule("Rental");
+      let hasRuleOperational = this.hasRule("Operational");
+      let hasRuleHumanResources = this.hasRule("HumanResources");
+
+      this.favorite.itens.forEach((item) => {
+        if (item.rule == "CRM" && hasRuleCRM) listFavorite.push(item);
+        if (item.rule == "Stock" && hasRuleStock) listFavorite.push(item);
+        if (item.rule == "Rental" && hasRuleRental) listFavorite.push(item);
+        if (item.rule == "Operational" && hasRuleOperational)
+          listFavorite.push(item);
+        if (item.rule == "HumanResources" && hasRuleHumanResources)
+          listFavorite.push(item);
+      });
+
+      return listFavorite;
+    },
+    grouped() {
+      var list = this.groupBy({
+        array: this.favoriteWithRule,
+        key: "rulePortuguese",
+      });
+      return list;
+    },
+  },
+  watch: {
+    favorite: {
+      handler(favorite) {
+        this.$emit("input", favorite);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-title {
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.box-favorite {
+  height: 50px !important;
+  width: 50px !important;
+  border: 1px solid #d5d5d5;
+  background-color: #fff;
+  border-radius: 5px;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 20px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.box-favorite:hover {
+  background-color: #f1f1f3;
+}
+
+.icon-gear {
+  cursor: pointer;
+}
+
+.box-favorite-icon {
+  margin-left: 12px;
+  margin-top: 3px;
+}
+
+.div-favorite {
+  padding: 5px;
+}
+
+.div-star {
+  margin-right: 20px;
+}
+
+.icon-star {
+  color: #d98621;
+  cursor: pointer;
+}
+</style>