@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -0,0 +1,272 @@
+<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="9">
+            <RadioGroup title="Ordenar" :formName="formName" field="order" :options="[
+              { text: 'Padrão', value: 'default' },
+              { text: 'Categoria', value: 'category' },
+              { text: 'Nome do produto', value: 'product' },
+              { text: 'Período (Data)', value: 'periodDate' },
+              { text: 'Período (Data e Hora)', value: 'periodDateHour' },
+            ]" 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: 'Kit unificado', value: 'showUnifiedKit' },
+              { text: 'Acessório(s)', value: 'showAccessory' },
+              { text: 'Serviço(s)', value: 'showService' },        
+              { text: 'Ocultar produtos com movimentação desativada', value: 'hideNotMovement' },
+            ]" :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>
+        <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 maintenance = { text: "Manutenção", value: "Maintenance" };
+      let movementStock = { text: "Movimentação", value: "MovementStock" };
+      let operational = { text: "Operacional", value: "Operational" };
+
+      if (this.hasModule("Billing")) options.push(billing);
+      if (this.hasModule("Finance")) options.push(finance);
+      if (this.hasModule("Rental")) options.push(rental);
+      if (this.hasModule("Maintenance")) options.push(maintenance);
+      if (this.hasModule("Rental")) options.push(movementStock);
+      if (this.hasModule("Operational")) options.push(operational);
+
+      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>

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

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <div v-show="loading" class="div-print">
+      <Loading :center="false" />
+    </div>
+    <div v-show="!loading">
+      <!-- É renderizado o html abaixo para modificar as tabelas -->
+      <div id="template-prod" v-show="false" v-html="template"></div>
+      <div>
+
+        <div class="side-by-side div-text">
+          <InputText v-if="editMode" title="Nome (versão)" field="identification" :formName="formName" :required="true"
+            :maxLength="100" v-model="documentVersion.identification" />
+        </div>
+
+        <Button v-show="editMode" _key="saveDocument" :disabled="!documentVersion.identification" color="white"
+          backGroundColor="#94AA2A" title="Salvar" classIcon="fa-solid fa-floppy-disk" size="small"
+          :clicked="saveDocument" />
+
+        <Button v-show="editMode && !editModeDocumentVersion" _key="default" color="white" backGroundColor="#F0134D"
+          title="Cancelar" classIcon="fa-solid fa-ban" size="small" :clicked="defaultMode" />
+
+        <span class="div-pipe" v-show="editMode">
+          <i class="fa-duotone fa-solid fa-pipe"></i>
+        </span>
+
+        <Button v-print="'#printMe'" _key="print" color="white" backGroundColor="#969799" title="Imprimir"
+          classIcon="fas fa-print" size="small" :clicked="print" />
+
+        <Button v-show="!editMode && canModifyDocument" _key="edit" color="white" backGroundColor="#156EBE"
+          title="Alterar" classIcon="fa-solid fa-file-pen" size="small" :clicked="edit" />
+
+        <Button v-show="rentId || invoiceId" _key="back" type="info" classIcon="fa-solid fa-arrow-left" size="small"
+          :clicked="executeBack" />
+      </div>
+      <div v-if="!editModeDocumentVersion && editMode" class="title title-alert">
+        As alterações feitas aqui são específicas para este documento e <b>NÃO</b> afetarão o modelo padrão!
+      </div>
+      <br />
+      <ScrollBar :minHeight="400" :maxHeight="600">
+        <div v-if="editMode">
+          <div v-show="false" class="a4">
+            <div id="printMe">
+              <div :style="styleCss">
+                <div v-html="documentHtmlFinal"></div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <DocumentEditor :editMode="true" />
+          </div>
+        </div>
+        <div v-else class="a4">
+          <div id="printMe">
+            <div :style="styleCss">
+              <DocumentPublic :template="documentPreview('prod')" :d="parameter" />
+            </div>
+          </div>
+        </div>
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor.vue";
+import DocumentEditor from "@nixweb/nixloc-ui/src/component/shared/DocumentEditor.vue";
+import DocumentPublic from "@nixweb/nixloc-ui/src/component/shared/DocumentPublic";
+
+import print from "vue-print-nb";
+
+import { mapActions, mapMutations, mapGetters, mapState } from "vuex";
+
+export default {
+  name: "DocumentPreview",
+  directives: {
+    print,
+  },
+  props: {
+    documentId: String,
+    rentId: String,
+    periodRentId: String,
+    movimentId: String,
+    invoiceId: String,
+    payableReceivableId: String,
+    orderServiceId: String,
+    canModifyDocument: {
+      type: Boolean,
+      default: false,
+    },
+    editModeDocumentVersion: {
+      type: Boolean,
+      default: false,
+    },
+    back: Function,
+  },
+  components: {
+    DocumentEditor,
+    DocumentPublic,
+    CodeEditor,
+    Molded,
+    Loading,
+    InputText,
+    Alert,
+    ScrollBar,
+    Button,
+  },
+  data() {
+    return {
+      urlGetById: "/api/v1/generate-document/get-document",
+      urlGetDocumentVersionById: "/api/v1/shared/document-version/get-by-id",
+      urlCreateDocumentVersion: "/api/v1/shared/document-version/create",
+      urlUpdateDocumentVersion: "/api/v1/shared/document-version/update",
+      template: "",
+      parameter: {},
+      loading: true,
+      styleCss: "",
+      editMode: false,
+      documentVersion: {
+        id: "",
+        identification: "",
+        documentHtml: "",
+        genericId: "",
+      }
+    };
+  },
+  mounted() {
+    if (!this.editModeDocumentVersion) this.getDocumentById();
+  },
+  computed: {
+    ...mapGetters("generic", ["documentPreview", "event"]),
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+    documentHtml: {
+      get() {
+        return this.$store.state.generic.documentHtml;
+      },
+      set(value) {
+        this.updateDocumentHtml(value);
+      },
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "postApi", "putApi"]),
+    ...mapMutations("generic", ["addEvent", "updateDocumentHtml", "updateDocumentHtmlFinal", "removeLoading"]),
+    getDocumentById() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetById,
+        obj: {
+          documentId: this.documentId,
+          rentId: this.rentId,
+          periodRentId: this.periodRentId,
+          movimentId: this.movimentId,
+          invoiceId: this.invoiceId,
+          payableReceivableId: this.payableReceivableId,
+          orderServiceId: this.orderServiceId,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.styleCss = response.content.styleCss;
+        this.parameter = response.content.parameter;
+        this.template = response.content.documentHtml;
+
+        let self = this;
+        setTimeout(function () {
+          self.updateDocumentHtml(response.content.documentHtml);
+          self.template = self.documentPreview;
+          self.loading = false;
+        }, 300);
+      });
+    },
+    getDocumentVersionById() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetDocumentVersionById,
+        obj: {
+          documentId: this.documentVersion.id,
+        },
+      };
+      this.getApi(params).then((response) => {
+        let self = this;
+        setTimeout(function () {
+          self.updateDocumentHtmlFinal(response.content.documentHtml);
+          self.documentVersion.id = response.content.id;
+          self.documentVersion.identification = response.content.identification;
+          self.loading = false;
+          self.editMode = true;
+        }, 300);
+      });
+    },
+    saveDocument() {
+      this.documentVersion.documentHtml = this.documentHtmlFinal;
+      this.documentVersion.genericId = this.rentId;
+      if (this.documentVersion.id) {
+        let params = { url: this.urlUpdateDocumentVersion, obj: this.documentVersion };
+        this.putApi(params).then((response) => {
+          this.removeLoading(["saveDocument"]);
+        });
+      } else {
+        let params = { url: this.urlCreateDocumentVersion, obj: this.documentVersion };
+        this.postApi(params).then((response) => {
+          this.documentVersion.id = response.content.id;
+          this.removeLoading(["saveDocument"]);
+        });
+      }
+    },
+    print() {
+      this.removeLoading(["print"]);
+    },
+    executeBack() {
+      if (this.back) this.back();
+    },
+    edit() {
+      this.addEvent({ name: "updateDocumentHtml" });
+      let self = this;
+      setTimeout(function () {
+        self.editMode = true;
+        self.removeLoading(["edit"]);
+      }, 200);
+
+    },
+    defaultMode() {
+      let self = this;
+      setTimeout(function () {
+        self.getDocumentById();
+        self.editMode = false;
+        self.removeLoading(["default"]);
+      }, 200);
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "documentVersionUpdate") {
+          this.documentVersion.id = event.data.id;
+          this.getDocumentVersionById();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.a4 {
+  max-width: 1140px;
+  min-height: 21cm;
+  padding: 20px;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
+  margin: 0 auto;
+}
+
+.div-print {
+  height: 660px;
+}
+
+.div-save-cancel {
+  margin-top: 35px;
+}
+
+.title-alert {
+  font-size: 13px;
+  margin-top: -15px;
+  color: rgb(92, 92, 92);
+  font-style: italic;
+}
+
+.div-pipe {
+  margin-left: 5px;
+}
+
+.div-text {
+  width: 450px;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+    <div class="div-link">
+        <div class="div-btn-back" v-if="showButtonBack">
+            <Button _key="back" title="Voltar" type="info" classIcon="fa-solid fa-arrow-left" size="small"
+                :clicked="executeBack" />
+        </div>
+        <br v-if="!link">
+        <div v-if="loading">
+            <span class="title">Aguarde, estamos gerando o link, isso pode levar alguns segundos...</span>
+            <Loading type="line" :center="false" />
+        </div>
+        <div v-if="link">
+            <InputText v-model="link" />
+            <div @click="copied = link" class="div-clipboard text-center" v-clipboard="link">
+                <span class="title" v-if="!copied"> <i class="fa-solid fa-link"></i> Copiar</span>
+                <span class="copied title" v-else><i class="fa-solid fa-link"></i> Copiado</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+    name: "Link",
+    props: {
+        module: String,
+        documents: {
+            type: Array,
+            default: []
+        },
+        rentId: String,
+        periodRentId: String,
+        movimentId: String,
+        invoiceId: String,
+        payableReceivableId: String,
+        listBillet: {
+            type: Array,
+            default: []
+        },
+        showButtonBack: {
+            type: Boolean,
+            default: true
+        },
+        back: Function,
+    },
+    components: {
+        Button,
+        InputText,
+        Loading
+    },
+    data() {
+        return {
+            urlGetLink: "/api/v1/messager/mail/get-link",
+            link: "",
+            copied: "",
+            loading: true,
+        };
+    },
+    mounted() {
+        this.getLink();
+    },
+    computed: {
+        ...mapState("user", ["userLogged"]),
+        ...mapGetters("generic", ["listIdToString"]),
+    },
+    methods: {
+        ...mapActions("generic", ["postApi"]),
+        ...mapMutations("generic", ["removeLoading"]),
+        getLink() {
+            let params = {
+                url: this.urlGetLink, obj: {
+                    module: this.module,
+                    listBillet: this.listBillet,
+                    printRequest: {
+                        documentTitle: "Documento",
+                        documentIds: this.listIdToString(this.documents),
+                        rentId: this.rentId,
+                        periodRentId: this.periodRentId,
+                        movimentId: this.movimentId,
+                        invoiceId: this.invoiceId,
+                        payableReceivableId: this.payableReceivableId,
+                        userName: this.userLogged.user.userName,
+                        password: this.userLogged.user.password,
+                        companyId: this.userLogged.companyId
+                    }
+                },
+                notNotifyToast: true
+            };
+            this.postApi(params).then((response) => {
+                this.link = response.content;
+                this.loading = false;
+                this.removeLoading(["btnGenerateLink"]);
+            });
+        },
+        executeBack() {
+            if (this.back) this.back();
+        },
+    },
+};
+</script>
+<style scoped>
+.div-link {
+    height: 150px;
+}
+
+.div-clipboard {
+    cursor: pointer;
+}
+
+.copied {
+    color: darkblue;
+}
+</style>