@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/package.json

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

package/src/App.vue

@@ -1,13 +1,217 @@
-<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">
+      <SignalrUser />
+      <Header backgroundColor="#577696">
+        <IconMolded :icons="icons" />
+        <Account :items="items" :exited="confirmLogout" />
+      </Header>
+      <Menu baseColor="#1B3446" urlImage="https://espaco.blob.core.windows.net/nixloc-assets/logo_icon_nixloc.png"
+        :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 @click="closeMenu()">
+      <router-view :key="$route.fullPath"></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SignalrUser from './components/modules/adm/login/SignalrUser.vue'
+import IconMolded from "@nixweb/nixloc-ui/src/component/layout/IconMolded.vue";
+import Account from "@nixweb/nixloc-ui/src/component/layout/Account.vue";
+import Header from "@nixweb/nixloc-ui/src/component/layout/Header.vue";
+import Menu from "@nixweb/nixloc-ui/src/component/layout/Menu.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import Messaging from './components/modules/notifications/Messaging.vue'
+import Comunication from './components/modules/notifications/Comunication.vue'
+import Profile from './components/modules/adm/user/Profile.vue'
+import AvailabilityProduct from './components/modules/stock/availability-product/AvailabilityProduct.vue'
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "App",
+  components: { Menu, Header, IconMolded, Account, Modal, Button, SignalrUser, Messaging, Comunication, Profile, AvailabilityProduct },
+  data() {
+    return {
+      environment: "",
+      urlBaseImage: "https://espaco.blob.core.windows.net/nixloc-photo-user/",
+      items: [],
+      icons: [
+        {
+          tooltip: "Dashboard",
+          eventName: "navegateToDashboard",
+          icon: "fa-solid fa-chart-tree-map",
+          module: "Dashboard",
+        },
+        {
+          tooltip: "Calendário",
+          eventName: "navegateToCalendar",
+          icon: "fa-solid fa-calendars",
+          module: "Calendar",
+        },
+        {
+          tooltip: "Tarefa",
+          eventName: "navegateToJob",
+          icon: "fa-solid fa-check-double",
+          module: "Job",
+        },
+        {
+          tooltip: "Consulta de Disponibilidade",
+          eventName: "openAvailability",
+          icon: "fa-solid fa-radar",
+          module: "Notification",
+        },
+        {
+          tooltip: "Mensageria",
+          eventName: "openNotificarions",
+          icon: "fa-solid fa-message-lines",
+          module: "Notification",
+        },
+        {
+          tooltip: "Treinamento",
+          eventName: "navegateToCourse",
+          icon: "fa-sharp 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 (shouldRedirectToLogin)
+      this.$router.replace({ name: "login" });
+
+  },
+  methods: {
+    ...mapMutations("user", ["addUserLogged"]),
+    ...mapMutations("generic", ["openModal", "addEvent"]),
+    confirmLogout() {
+      this.openModal("confirmLogout");
+    },
+    logout() {
+      this.addUserLogged({});
+      localStorage.setItem("codeBrowser", "");
+      window.location.replace("/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");
+      },
+      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;
+}
+</style>

package/src/components/modules/adm/company/Company.js

@@ -0,0 +1,9 @@
+export default class Company {
+    constructor() {
+        this.id = "";
+        this.logo = "";
+        this.person = {};
+        this.contact = {};
+        this.address = {};
+    }
+}

package/src/components/modules/adm/company/Company.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <br />
+    <ImageUpload title="Carregar Logo" container="nixloc-logo-company" :width="300" :height="100" accepted=".jpg .png"
+      urlPost="/api/v1/adm/file-upload/upload" urlRemove="/api/v1/adm/file-upload/delete" :onLoad="updateImage"
+      v-model="company.logo" />
+    <br />
+    <Molded>
+      <Person :formName="formName" v-model="company.person" />
+      <br />
+      <Contact :formName="formName" v-model="company.contact" />
+      <br />
+      <Address :formName="formName" v-model="company.address" />
+    </Molded>
+    <br />
+  </div>
+</template>
+
+<script>
+import ImageUpload from "@nixweb/nixloc-ui/src/component/forms/ImageUpload";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import Person from "@nixweb/nixloc-ui/src/component/value-objects/Person.vue";
+import Contact from "@nixweb/nixloc-ui/src/component/value-objects/Contact.vue";
+import Address from "@nixweb/nixloc-ui/src/component/value-objects/Address.vue";
+
+import Company from "@/components/modules/adm/company/Company.js";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "Company",
+  components: {
+    Molded,
+    ImageUpload,
+    Contact,
+    Person,
+    Address,
+  },
+  data() {
+    return {
+      formName: "companyUpdate",
+      company: new Company(),
+      urlUpdate: "/api/v1/adm/company/update",
+      urlGetById: "/api/v1/adm/company/get-by-id",
+    };
+  },
+  created() {
+    this.getById();
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "putApi"]),
+    ...mapMutations("generic", ["addLoading", "removeLoading"]),
+    ...mapMutations("validation", ["resetValidation", "removeFormDirty"]),
+    getById() {
+      let params = {
+        url: this.urlGetById,
+        obj: { id: this.userLogged.companyId },
+      };
+      this.getApi(params).then((response) => {
+        this.company.logo = response.content.logo;
+        this.company.person = response.content.personResponse;
+        this.company.contact = response.content.contactResponse;
+        this.company.address = response.content.addressResponse;
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["panel"]);
+          self.removeFormDirty();
+        }, 100);
+      });
+    },
+    update() {
+      let companyRequest = {
+        id: this.userLogged.companyId,
+        logo: this.company.logo,
+        personRequest: this.company.person,
+        contactRequest: this.company.contact,
+        addressRequest: {
+          zipCode: this.company.address.zipCode,
+          street: this.company.address.street,
+          number: this.company.address.number,
+          complement: this.company.address.complement,
+          province: this.company.address.province,
+          city: this.company.address.city,
+          state: this.company.address.state.content,
+        },
+      };
+      let params = { url: this.urlUpdate, obj: companyRequest };
+      this.putApi(params).then((response) => {
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    updateImage() {
+      this.update();
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "saveSaveCancel") {
+          this.update();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped></style>

package/src/components/modules/adm/document/Document.js

@@ -0,0 +1,41 @@
+export default class Document {
+    constructor() {
+        this.id = "";
+        this.identification = "";
+        this.name = "";
+        this.module = [];
+        this.container = "nixloc-document-v2";
+        this.config = { product: { group: false, orderBy: 'default', show: [] }, moviment: { group: false, orderBy: 'default', show: [] } };
+        this.imageWatermark = "";
+        this.imageWidth = 0;
+        this.imageHeight = 0;
+        this.verticalAlignment = 0;
+        this.horizontalAlignment = 1;
+        this.opacity = 0;
+        this.styleCss = "";
+        this.showPages = false;
+        this.marginTop = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.marginBottom = 0;
+    }
+    update(data) {
+        this.id = data.id;
+        this.identification = data.identification;
+        this.name = data.name;
+        this.module = data.module;
+        this.config = data.config;
+        this.imageWatermark = data.imageWatermark;
+        this.imageWidth = data.imageWidth;
+        this.imageHeight = data.imageHeight;
+        this.verticalAlignment = data.verticalAlignment;
+        this.horizontalAlignment = data.horizontalAlignment;
+        this.opacity = data.opacity;
+        this.styleCss = data.styleCss;
+        this.showPages = data.showPages;
+        this.marginTop = data.marginTop;
+        this.marginLeft = data.marginLeft;
+        this.marginRight = data.marginRight;
+        this.marginBottom = data.marginBottom;
+    }
+}

package/src/components/modules/adm/document/DocumentCreateUpdate.vue

@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <b-tabs>
+      <b-tab title="Principal">
+        <b-row>
+          <b-col sm="12">
+            <InputText title="Identificação" field="identification" :formName="formName" :required="true"
+              :maxLength="50" v-model="document.identification" />
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col sm="12">
+            <CheckboxGroup title="Em qual módulo será utilizado?" field="module" :initialValue="document.module"
+              :formName="formName" :options="options" v-model="document.module" />
+          </b-col>
+        </b-row>
+      </b-tab>
+      <b-tab title="Produtos" v-if="isVisible(['Rental', 'Operational', 'PDV'])">
+        <b-row>
+          <b-col sm="3">
+            <RadioGroup title="Agrupar" :formName="formName" field="group" :options="[
+              { text: 'Sim', value: true },
+              { text: 'Não', value: false },
+            ]" v-model="document.config.product.group" />
+          </b-col>
+          <b-col sm="7">
+            <RadioGroup title="Ordenar" :formName="formName" field="order" :options="[
+              { text: 'Padrão', value: 'default' },
+              { text: 'Categoria', value: 'category' },
+              { text: 'Nome do produto', value: 'product' },
+            ]" v-model="document.config.product.orderBy" />
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col sm="12">
+            <CheckboxGroup title="Mostrar" field="permission" :markFormDirty="false" :options="[
+              { text: 'Produtos da locação', value: 'showProduct' },
+              { text: 'Produtos somente estoque', value: 'showOnlyStock' },
+              { text: 'Acessório(s)', value: 'showAccessory' },
+              { text: 'Serviço(s)', value: 'showService' },
+            ]" :initialValue="document.config.product.show" v-model="document.config.product.show" />
+          </b-col>
+        </b-row>
+      </b-tab>
+      <b-tab title="Movimentação" v-if="isVisible(['MovementStock'])">
+        <b-row>
+          <b-col sm="7">
+            <RadioGroup title="Ordenar" :formName="formName" field="order" :options="[
+              { text: 'Padrão', value: 'default' },
+              { text: 'Categoria', value: 'category' },
+              { text: 'Nome do produto', value: 'product' },
+            ]" v-model="document.config.moviment.orderBy" />
+          </b-col>
+        </b-row>
+      </b-tab>
+      <b-tab title="Marca d'água">
+        <div class="div-alert">
+          <Alert type="warning">
+            <span>
+              Atenção, <b>NÃO</b> funciona na opção Imprimir!
+            </span>
+          </Alert>
+        </div>
+        {{ document.imageWatermark }}
+        <FileUpload title="Carregar Imagem" classIcon="fa-solid fa-file-export" container="nixloc-watermark"
+          accepted=".png .jpg" allowed=".png .jpg" :disabled="true" urlPost="/api/v1/adm/file-upload/upload"
+          urlRemove="/api/v1/adm/file-upload/delete" :nameDataBase="document.imageWatermark"
+          v-model="document.imageWatermark" />
+        <br />
+        <b-row>
+          <b-col sm="3">
+            <InputNumber title="Altura (pixel)" field="imageHeight" :formName="formName"
+              v-model="document.imageHeight" />
+          </b-col>
+          <b-col sm="3">
+            <InputNumber title="Largura (pixel)" field="imageWidth" :formName="formName"
+              v-model="document.imageWidth" />
+          </b-col>
+          <b-col sm="3">
+            <InputNumber title="Nítidez (%)" field="opacity" :formName="formName" v-model="document.opacity" />
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col sm="6">
+            <RadioGroup title="Alinhamento Vertical" :formName="formName" field="order" :options="[
+              { text: 'Topo', value: 0 },
+              { text: 'Centro', value: 1 },
+              { text: 'Rodapé', value: 2 },
+            ]" v-model="document.verticalAlignment" />
+          </b-col>
+          <b-col sm="6">
+            <RadioGroup title="Alinhamento Horizontal" :formName="formName" field="order" :options="[
+              { text: 'Esquerda', value: 0 },
+              { text: 'Centro', value: 1 },
+              { text: 'Direita', value: 2 },
+            ]" v-model="document.horizontalAlignment" />
+          </b-col>
+        </b-row>
+      </b-tab>
+      <b-tab title="Margem">
+        <Alert type="warning">
+          <span>
+            Atenção, <b>NÃO</b> funciona na opção Imprimir!
+          </span>
+        </Alert>
+        <b-row>
+          <b-col sm="3">
+            <InputNumber title="Topo" field="imageHeight" :formName="formName" v-model="document.marginTop" />
+          </b-col>
+          <b-col sm="3">
+            <InputNumber title="Esquerda" field="imageWidth" :formName="formName" v-model="document.marginLeft" />
+          </b-col>
+          <b-col sm="3">
+            <InputNumber title="Direita" field="imageHeight" :formName="formName" v-model="document.marginRight" />
+          </b-col>
+          <b-col sm="3">
+            <InputNumber title="Rodapé" field="imageWidth" :formName="formName" v-model="document.marginBottom" />
+          </b-col>
+        </b-row>
+      </b-tab>
+      <b-tab title="Outros">
+        <InputText title="Style Css" field="css" :formName="formName" :required="false" v-model="document.styleCss" />
+        <RadioGroup title="Mostrar Páginas (ex: 1 de 5)" :formName="formName" field="order" :options="[
+              { text: 'Sim', value: true },
+              { text: 'Não', value: false },
+            ]" v-model="document.showPages" />
+      </b-tab>
+    </b-tabs>
+    <br />
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Button _key="create" type="success" title="Salvar" :disabled="!isFormValid(formName)"
+            classIcon="fas fa-create" size="medium" :clicked="create" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import Document from "@/components/modules/adm/document/Document.js";
+
+import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+  name: "DocumentCreateUpdate",
+  props: {
+    registerInSelect: Boolean,
+    value: Object,
+  },
+  components: { Button, InputText, FileUpload, InputNumber, Alert, RadioGroup, CheckboxGroup },
+  data() {
+    return {
+      id: this.$route.params.id,
+      formName: "documentCreateUpdate",
+      document: new Document(),
+      urlCreate: "/api/v1/adm/document/create",
+      urlUpdate: "/api/v1/adm/document/update",
+    };
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml"]),
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("user", ["hasModule"]),
+    options() {
+      let options = [];
+
+      let billing = { text: "Faturamento", value: "Billing" };
+      let finance = { text: "Financeiro", value: "Finance" };
+      let rental = { text: "Locação", value: "Rental" };
+      let movementStock = { text: "Movimentação", value: "MovementStock" };
+      let operational = { text: "Operacional", value: "Operational" };
+      let pdv = { text: "PDV", value: "PDV" };
+
+      if (this.hasModule("Billing")) options.push(billing);
+      if (this.hasModule("Finance")) options.push(finance);
+      if (this.hasModule("Rental")) options.push(rental);
+      if (this.hasModule("Rental")) options.push(movementStock);
+      if (this.hasModule("Operational")) options.push(operational);
+      if (this.hasModule("PDV")) options.push(pdv);
+
+      return options;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "removeEvent",
+      "removeLoading",
+      "openModal",
+      "hideModal",
+    ]),
+    ...mapMutations("validation", ["resetValidation"]),
+    create() {
+      this.document.documentHtml = this.documentHtml;
+      if (this.document.id) {
+        let params = { url: this.urlUpdate, obj: this.document };
+        this.putApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.addEvent({ name: "documentEditorModified" });
+          this.removeLoading(["create", "saveDocument"]);
+        });
+      } else {
+        let params = { url: this.urlCreate, obj: this.document };
+        this.postApi(params).then((response) => {
+          if (response.success) {
+            this.$router.push({
+              name: "documentUpdate",
+              params: { id: response.content.id },
+            });
+            this.hideModal();
+          }
+          this.removeLoading(["create"]);
+        });
+      }
+    },
+    update(data) {
+      this.document = new Document();
+      this.document.update(data);
+      this.$emit("input", data.module);
+      this.removeLoading([data.id]);
+    },
+    isVisible(module) {
+      var ret = false;
+      module.forEach((name) => {
+        var has = this.document.module.includes(name);
+        if (has) ret = true;
+      });
+
+      return ret;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "createDocument") {
+          this.resetValidation(this.formName);
+          this.document = new Document();
+        }
+        if (event.name == "updateDocument") this.update(event.data);
+        if (event.name == "saveDocument") this.create();
+        if (event.name == "saveAs") {
+          this.resetValidation(this.formName);
+          this.document = new Document();
+          this.openModal("saveDocument");
+          this.removeLoading(["saveAs"]);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-alert {
+  margin-bottom: 15px;
+}
+</style>