@nixweb/nixloc-ui 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/App.vue

@@ -1,13 +1,296 @@
-<template>
-  <div id="app">
-    <router-view :key="$route.fullPath"></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "App",
-};
-</script>
-
-<style></style>
+<template>
+  <div id="app">
+    <div v-if="logged">
+      <!-- <Nixia />-->
+      <RefreshUserLogged />
+      <SignalrUser />
+      <NewHeader backgroundColor="transparent">
+        <NewIconMolded :icons="icons" />
+        <NewAccount
+          :items="items"
+          :exited="confirmLogout"
+        />
+      </NewHeader>
+      <NewMenu :urlPhoto="urlBaseImage + (userLogged.user.photo ? userLogged.user.photo : 'noImageEdit.png')" />
+      <Modal
+        title="Tem certeza que deseja sair?"
+        :width="450"
+        :height="750"
+        v-if="showModal('confirmLogout')"
+      >
+        <div class="text-center">
+          <br />
+          <Button
+            _key="btnConfirmLogout"
+            type="edit"
+            title="Cancelar"
+            classIcon="fas fa-create"
+            size="small"
+            :clicked="logout"
+          />
+          <Button
+            _key="btnConfirmLogout"
+            type="danger"
+            title="Sim, tenho"
+            classIcon="fas fa-create"
+            size="medium"
+            :clicked="logout"
+          />
+        </div>
+      </Modal>
+      <Modal
+        title="Mensageria"
+        :width="1100"
+        :height="750"
+        v-if="showModal('notifications')"
+      >
+        <Messaging v-if="showModal('notifications')" />
+      </Modal>
+      <Modal
+        title="Perfil"
+        :width="600"
+        :height="750"
+        v-if="showModal('profile')"
+      >
+        <Profile v-if="showModal('profile')" />
+      </Modal>
+      <Modal
+        title="Consulta de Disponibilidade"
+        :width="1100"
+        :height="750"
+        v-if="showModal('availability')"
+      >
+        <AvailabilityProduct />
+      </Modal>
+    </div>
+    <div @mouseover="handleMouseOver()">
+      <router-view :key="$route.fullPath"></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import Account from "@nixweb/nixloc-ui/src/component/layout/Account.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Header from "@nixweb/nixloc-ui/src/component/layout/Header.vue";
+import IconMolded from "@nixweb/nixloc-ui/src/component/layout/IconMolded.vue";
+import Menu from "@nixweb/nixloc-ui/src/component/layout/Menu.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import NewAccount from "@nixweb/nixloc-ui/src/component/layout/NewAccount.vue";
+import NewHeader from "@nixweb/nixloc-ui/src/component/layout/NewHeader.vue";
+import NewIconMolded from "@nixweb/nixloc-ui/src/component/layout/NewIconMolded.vue";
+import NewMenu from "@nixweb/nixloc-ui/src/component/layout/NewMenu.vue";
+
+import RefreshUserLogged from "./components/modules/adm/login/RefreshUserLogged.vue";
+import SignalrUser from "./components/modules/adm/login/SignalrUser.vue";
+import Profile from "./components/modules/adm/user/Profile.vue";
+import Nixia from "./components/modules/ia/Nixia.vue";
+import Comunication from "./components/modules/notifications/Comunication.vue";
+import Messaging from "./components/modules/notifications/Messaging.vue";
+import AvailabilityProduct from "./components/modules/stock/availability-product/AvailabilityProduct.vue";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "App",
+  components: {
+    Menu,
+    NewMenu,
+    NewHeader,
+    Header,
+    NewIconMolded,
+    IconMolded,
+    Account,
+    NewAccount,
+    Modal,
+    Button,
+    SignalrUser,
+    Messaging,
+    Comunication,
+    Profile,
+    AvailabilityProduct,
+    RefreshUserLogged,
+    Nixia,
+  },
+  data() {
+    return {
+      environment: "",
+      urlBaseImage: "https://espaco.blob.core.windows.net/nixloc-photo-user/",
+      items: [],
+      icons: [
+        {
+          tooltip: "Dashboard",
+          eventName: "navegateToDashboard",
+          icon: "fa-duotone fa-solid fa-chart-column",
+          module: "Dashboard",
+        },
+        {
+          tooltip: "Calendário",
+          eventName: "navegateToCalendar",
+          icon: "fa-duotone fa-solid fa-calendar-days",
+          module: "Calendar",
+        },
+        {
+          tooltip: "Tarefa",
+          eventName: "navegateToJob",
+          icon: "fa-duotone fa-solid fa-check-double",
+          module: "Job",
+        },
+        {
+          tooltip: "Consulta de Disponibilidade",
+          eventName: "openAvailability",
+          icon: "fa-sharp-duotone fa-solid fa-radar",
+          module: "Notification",
+        },
+        {
+          tooltip: "Mensageria",
+          eventName: "openNotificarions",
+          icon: "fa-duotone fa-solid fa-messages",
+          module: "Notification",
+        },
+        {
+          tooltip: "Treinamento",
+          eventName: "navegateToCourse",
+          icon: "fa-sharp-duotone fa-solid fa-graduation-cap",
+          module: "Notification",
+        },
+      ],
+      theme: localStorage.getItem("theme"),
+    };
+  },
+  mounted() {
+    this.loadTheme();
+  },
+  created() {
+    this.environment =
+      process.env.VUE_APP_API_URL ==
+      "https://backend-cliente-prod.azurewebsites.net/"
+        ? "prod"
+        : "dev";
+  },
+  beforeUpdate() {
+    let documentId = this.$route.params.documentId;
+    let nameFileParameter = this.$route.params.nameFileParameter;
+    let code = this.$route.params.code;
+
+    let userName = "";
+    if (this.userLogged.user) {
+      userName = this.userLogged.user.userName;
+    }
+
+    const shouldRedirectToLogin =
+      !this.logged &&
+      this.$route.path !== "/register" &&
+      !nameFileParameter &&
+      !documentId &&
+      userName !== "UserTemp" &&
+      !code;
+
+    if (this.$route.fullPath == "/integration-return/ok") {
+      this.$router.replace({
+        name: "integrationReturn",
+        params: { statusReturn: "ok" },
+      });
+    } else if (this.$route.path.includes("login-redirect")) {
+    } else if (shouldRedirectToLogin) {
+      this.$router.replace({ name: "login" });
+    }
+  },
+  methods: {
+    ...mapMutations("user", ["addUserLogged"]),
+    ...mapMutations("generic", ["openModal", "addEvent"]),
+    handleMouseOver() {
+      this.addEvent({ name: "handleMouseOver" });
+    },
+    confirmLogout() {
+      this.openModal("confirmLogout");
+    },
+    logout() {
+      this.addUserLogged({});
+      localStorage.setItem("codeBrowser", "");
+      window.location.replace("https://erp.nixloc.com.br/login");
+    },
+    loadTheme() {
+      var themeStorage = localStorage.getItem("theme");
+      this.theme = themeStorage == "" ? "light" : themeStorage;
+
+      const body = document.body;
+      if (this.theme == "dark") {
+        body.classList.add("dark-theme");
+      } else {
+        body.classList.remove("dark-theme");
+      }
+    },
+    closeMenu() {
+      // this.addEvent({ name: "closeMenu" });
+      // a função acima está dando conflito quando clica no link da locação no operacional
+    },
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("generic", ["event", "showModal"]),
+    logged() {
+      if (this.userLogged.token) return true;
+      return false;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "navegateToCalendar")
+          this.$router.push({
+            name: "calendar",
+          });
+
+        if (event.name == "navegateToCourse")
+          this.$router.push({
+            name: "course",
+          });
+
+        if (event.name == "navegateToDashboard")
+          this.$router.push({
+            name: "dashboard",
+          });
+
+        if (event.name == "navegateToJob")
+          this.$router.push({
+            name: "jobList",
+          });
+
+        if (event.name == "changeTheme") {
+          this.theme = event.data ? "dark" : "light";
+          localStorage.setItem("theme", this.theme);
+          this.loadTheme();
+        }
+
+        if (event.name == "openNotificarions") this.openModal("notifications");
+
+        if (event.name == "openAvailability") this.openModal("availability");
+
+        if (event.name == "clickedProfile") this.openModal("profile");
+
+        if (event.name == "isSidebarCollapsed") {
+          this.isSidebarCollapsed = event.data;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style>
+/* não remover essa classe, pois não funciona no dark-theme.css*/
+.dark-theme .select {
+  border: 1px solid #444c56 !important;
+  background-color: #22272e !important;
+}
+
+.dark-theme .classCss {
+  border: 0px solid #444c56 !important;
+  background-color: transparent !important;
+}
+
+.title-sub {
+  color: black;
+}
+</style>

package/src/assets/nfse-nacional.svg

@@ -0,0 +1,32 @@
+<!-- /icons/nfse-nacional.svg -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="NFS-e Nacional - Brasil">
+  <defs>
+    <!-- Ajuste as cores aqui se quiser -->
+    <style>
+      .doc { fill: #ffffff; stroke: #222; stroke-width: 1; }
+      .fold { fill: #eef2f7; stroke: #222; stroke-width: 1; }
+      .green { fill: #009B3A; }
+      .yellow { fill: #FFDF00; }
+      .blue { fill: #002776; }
+      .line { stroke: #adb5bd; stroke-width: 0.8; stroke-linecap: round; }
+    </style>
+  </defs>
+
+  <!-- Documento com orelha -->
+  <path class="doc" d="M5 2.5h8.8c.2 0 .4.1.6.2l4.9 4.9c.1.1.2.3.2.6V20.5c0 .8-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5V4c0-.8.7-1.5 1.5-1.5z"></path>
+  <path class="fold" d="M13.8 2.5c.2 0 .4.1.6.2l4.9 4.9c.1.1.2.3.2.6h-4.2c-.8 0-1.5-.7-1.5-1.5V2.5z"></path>
+
+  <!-- Linhas do documento (decorativas) -->
+  <line class="line" x1="6.5" y1="12.5" x2="11.5" y2="12.5"></line>
+  <line class="line" x1="6.5" y1="14.8" x2="13.5" y2="14.8"></line>
+  <line class="line" x1="6.5" y1="17.1" x2="12.5" y2="17.1"></line>
+
+  <!-- Faixa verde-amarela diagonal -->
+  <!-- Verde (mais larga) -->
+  <polygon class="green" points="4,15 16.5,2.5 19,5 6.5,17.5"></polygon>
+  <!-- Amarelo (mais estreita, por cima) -->
+  <polygon class="yellow" points="5.1,15.2 16.6,3.7 18,5.1 6.5,16.6"></polygon>
+
+  <!-- Círculo azul (globo) -->
+  <circle class="blue" cx="10.4" cy="11.1" r="1.8"></circle>
+</svg>