@nixweb/nixloc-ui 0.0.271 → 0.0.273

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>

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

@@ -0,0 +1,265 @@
+<template>
+  <div class="favorite-main">
+    <div class="side-by-side icon-tool" @click="openModalFavorite()">
+      <i class="fa-duotone fa-screwdriver-wrench"></i>
+    </div>
+    <div class="side-by-side box-favorite" @click="openNotificarions()">
+      <div class="div-icon">
+        <!-- <div class="notifications">5</div> -->
+        <i class="fa-solid fa-message-lines icon-notification"></i>
+      </div>
+    </div>
+    <div v-for="favorite in favoriteList" class="side-by-side" :key="favorite.url">
+      <div class="side-by-side box-favorite" @click="navigateTo(favorite.url)">
+        <div class="div-icon">
+          <i :class="favorite.icon"></i>
+        </div>
+      </div>
+    </div>
+    <Modal title="Configuração" :width="750" v-show="showModal('favorite')" :onHideModal="onHideModal">
+      <b-tabs>
+        <b-tab title="Dashboard">
+          <ConfigDashboard />
+        </b-tab>
+        <b-tab title="Favoritos">
+          <ScrollBar :minHeight="150" :maxHeight="350">
+            <div class="div-show" v-for="favorite in favorites" :key="favorite.title">
+              <div v-if="isVisible(favorite)">
+                <b-row>
+                  <b-col sm="2">
+                    <div class="text-center">
+                      <span class="title"> <i :class="favorite.icon"></i></span>
+                    </div>
+                  </b-col>
+                  <b-col sm="8">
+                    <div @click="addOrRemove(favorite)">
+                      <span class="title">{{ favorite.title }}</span>
+                    </div>
+                  </b-col>
+                  <b-col sm="2">
+                    <div @click="addOrRemove(favorite)">
+                      <i v-if="favorite.isFavorite" class="icon-favorite fa-solid fa-star"></i>
+                      <i v-else class="icon-favorite fa-regular fa-star"></i>
+                    </div>
+                  </b-col>
+                </b-row>
+              </div>
+            </div>
+          </ScrollBar>
+        </b-tab>
+      </b-tabs>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import ConfigDashboard from "../config/ConfigDashboard.vue";
+
+import { mapMutations, mapGetters, mapActions, mapState } from "vuex";
+
+export default {
+  name: "Favorite",
+  props: ["favorite"],
+  components: {
+    Modal,
+    ScrollBar,
+    Toggle,
+    ConfigDashboard,
+  },
+  computed: {
+    ...mapGetters("user", ["hasRule"]),
+    ...mapGetters("generic", ["showModal"]),
+    ...mapState("user", ["userLogged"]),
+  },
+  data() {
+    return {
+      urlCreate: "/api/v1/adm/favorite/create",
+      urlGetApi: "/api/v1/adm/favorite/get-all",
+      favorites: [
+        {
+          title: "Cadastrar Cliente",
+          icon: "fas fa-user",
+          module: "CRM",
+          url: "customerCreate",
+          ruleId: "30C2B0DF-EB47-4DCF-A8B6-643CD0166318",
+          isFavorite: false,
+        },
+        {
+          title: "Emitir Fatura",
+          icon: "fa-sharp fa-solid fa-file-invoice",
+          module: "Billing",
+          url: "invoiceCreate",
+          ruleId: "5CF2112A-D81D-4C31-B131-CB0E9FAD32E0",
+          isFavorite: false,
+        },
+        {
+          title: "Emitir Locação",
+          icon: "fas fa-exchange-alt",
+          module: "Rental",
+          url: "rentCreate",
+          ruleId: "E847C004-9A13-4ADA-80EA-34F3A876CEC3",
+          isFavorite: false,
+        },
+        {
+          title: "Cadastrar Produto",
+          icon: "fas fa-boxes",
+          module: "Stock",
+          url: "productSelectOption",
+          ruleId: "C429477F-0F93-419B-9023-C5832B90624F",
+          isFavorite: false,
+        },
+        {
+          title: "Painel de OS",
+          icon: "fa-regular fa-solar-panel",
+          module: "Operational",
+          url: "osPanelList",
+          ruleId: "11B75C86-55EC-45E5-95FA-74318DB46CAA",
+          isFavorite: false,
+        },
+      ],
+      favoriteList: [],
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "getApi"]),
+    ...mapMutations("generic", ["addEvent", "openModal", "removeLoading"]),
+    openModalFavorite() {
+      this.openModal("favorite");
+    },
+    openNotificarions() {
+      this.addEvent({ name: "openNotificarions" });
+    },
+    navigateTo(routeName) {
+      this.$router.push({
+        name: routeName,
+      });
+    },
+    isVisible(favorite) {
+      if (favorite.module == "CRM" && this.hasRule("CRM")) return true;
+      if (favorite.module == "Stock" && this.hasRule("Stock")) return true;
+      if (favorite.module == "Billing" && this.hasRule("Billing")) return true;
+      if (favorite.module == "Rental" && this.hasRule("Rental")) return true;
+      if (favorite.module == "Operational" && this.hasRule("Operational"))
+        return true;
+
+      return false;
+    },
+    addOrRemove(favorite) {
+      favorite.userId = this.userLogged.user.id;
+      let params = { url: this.urlCreate, obj: favorite, notNotifyToast: true };
+      this.postApi(params).then((response) => {
+        this.getAll();
+      });
+    },
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetApi,
+        obj: { any: this.userLogged.user.id },
+      };
+      this.getApi(params).then((response) => {
+        this.favoriteList = [];
+        response.content.data.forEach((item) => {
+          var favorite = this.favorites.find((x) => x.url == item.url);
+          this.favoriteList.push(favorite);
+        });
+
+        this.favorites.forEach((item) => {
+          var selected = response.content.data.find((x) => x.url == item.url);
+          item.isFavorite = false;
+          if (selected) {
+            if (selected.url == item.url) {
+              item.isFavorite = true;
+            } else {
+              item.isFavorite = false;
+            }
+          }
+        });
+      });
+    },
+    onHideModal() {
+      this.addEvent({ name: "updateDashboard" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.favorite-main {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+
+.box-favorite {
+  height: 65px !important;
+  width: 65px !important;
+  border: 1px solid #e8eaed;
+  background-color: #fff;
+  border-radius: 13px;
+  margin-left: 18px;
+  margin-bottom: 10px;
+  font-size: 23px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.box-favorite:hover {
+  background-color: #f1f1f3;
+}
+
+.div-icon {
+  margin-top: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.icon-tool {
+  cursor: pointer;
+  font-size: 17px;
+}
+
+.icon-favorite {
+  color: #f1cd54;
+  cursor: pointer;
+}
+
+.icon-favorite:hover {
+  color: #e0bd4a;
+}
+
+.notifications {
+  width: 25px;
+  height: 25px;
+  background-color: red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  border-radius: 50px;
+  color: white;
+  position: absolute;
+  margin-left: 60px;
+  margin-bottom: 55px;
+}
+
+.icon-notification {
+  color: #2b76da;
+}
+
+.div-show {
+  margin-bottom: 3px;
+}
+</style>