@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/shared/Confirmation.vue

@@ -1,74 +1,74 @@
-<template>
-  <div>
-    <div @click="execute()">
-      <slot></slot>
-    </div>
-    <Modal v-if="isModal" :title="title" :width="450" :height="250" v-show="showModal(`confirmation${data.id}`)">
-      <b-col sm="12">
-        <div class="div-button text-center">
-          <Button key="notConfirm" type="edit" title="cancel" :disabled="disabled" size="small" :clicked="cancel" />
-          <Button key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled"
-            :clicked="confirm" />
-        </div>
-      </b-col>
-    </Modal>
-    <div v-else class="div-button text-center">
-      <Button _key="notConfirm" type="edit" title="cancel" size="small" :disabled="disabled" :clicked="cancel" />
-      <Button _key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled" :clicked="confirm" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Confirmation",
-  components: {
-    Button,
-    Modal,
-  },
-  props: {
-    title: String,
-    type: String,
-    data: Object,
-    isModal: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    confirmed: Function,
-  },
-  methods: {
-    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
-    execute() {
-      this.openModal(`confirmation${this.data.id}`);
-    },
-    confirm() {
-      let self = this;
-      setTimeout(function () {
-        if (self.confirmed) self.confirmed(self.data);
-      }, 200);
-    },
-    cancel() {
-      this.removeLoading(["notConfirm"]);
-      this.hideModal();
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-  },
-};
-</script>
-<style scoped>
-.div-button {
-  padding-top: 20px;
-  height: 100px;
-}
-</style>
+<template>
+  <div>
+    <div @click="execute()">
+      <slot></slot>
+    </div>
+    <Modal v-if="isModal" :title="title" :width="450" :height="250" v-show="showModal(`confirmation${data.id}`)">
+      <b-col sm="12">
+        <div class="div-button text-center">
+          <Button key="notConfirm" type="edit" title="cancel" :disabled="disabled" size="small" :clicked="cancel" />
+          <Button key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled"
+            :clicked="confirm" />
+        </div>
+      </b-col>
+    </Modal>
+    <div v-else class="div-button text-center">
+      <Button _key="notConfirm" type="edit" title="cancel" size="small" :disabled="disabled" :clicked="cancel" />
+      <Button _key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled" :clicked="confirm" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Confirmation",
+  components: {
+    Button,
+    Modal,
+  },
+  props: {
+    title: String,
+    type: String,
+    data: Object,
+    isModal: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    confirmed: Function,
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+    execute() {
+      this.openModal(`confirmation${this.data.id}`);
+    },
+    confirm() {
+      let self = this;
+      setTimeout(function () {
+        if (self.confirmed) self.confirmed(self.data);
+      }, 200);
+    },
+    cancel() {
+      this.removeLoading(["notConfirm"]);
+      this.hideModal();
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+  },
+};
+</script>
+<style scoped>
+.div-button {
+  padding-top: 20px;
+  height: 100px;
+}
+</style>

package/src/component/shared/DocumentEditor.vue

@@ -1,99 +1,99 @@
-<template>
-  <div>
-    <div class="form-group">
-      <div>
-        <div class="document-editor__toolbar"></div>
-        <div class="document-editor__editable-container">
-          <div id="template-dev">
-            <ckeditor :editor="editor" v-model="computedDocumentHtml" @ready="onReady" @focus="changed"></ckeditor>
-          </div>
-        </div>
-      </div>
-    </div>
-    <br />
-  </div>
-</template>
-
-<script>
-import CKEditor from "ckeditor5-custom-build/build/ckeditor";
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "DocumentEditor",
-  props: ["editMode"],
-  components: {
-    CKEditor,
-  },
-  data() {
-    return {
-      editor: CKEditor,
-    };
-  },
-  computed: {
-    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
-    computedDocumentHtml: {
-      get() {
-        if (this.editMode) {
-          return this.documentHtmlFinal
-        } else {
-          return this.documentHtml;
-        }
-      },
-      set(newValue) {
-        if (this.editMode) {
-          this.updateDocumentHtmlFinal(newValue);
-        } else {
-          this.updateDocumentHtml(newValue);
-        }
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["updateDocumentHtmlFinal", "updateDocumentHtml", "addEvent"]),
-    onReady(editor) {
-      const toolbarContainer = document.querySelector(".document-editor__toolbar");
-      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
-    },
-    changed() {
-      this.addEvent({ name: "documentEditorChanged" });
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* Estilos do seu componente */
-.document-editor {
-  border-radius: var(--ck-border-radius);
-  max-height: 700px;
-  display: flex;
-  flex-flow: column nowrap;
-  margin: auto !important;
-}
-
-.document-editor__toolbar {
-  z-index: 1 !important;
-  min-width: 1100px;
-}
-
-.document-editor__editable-container {
-  padding: 10px;
-  border: 1px solid #e4e6ec;
-  background: var(--ck-color-base-foreground);
-}
-
-.document-editor__editable-container .ck-editor__editable {
-  width: 26cm;
-  height: 700px;
-  padding: 20px;
-  border: 1px hsl(0, 0%, 82.7%) solid;
-  border-radius: var(--ck-border-radius);
-  background: white;
-  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
-  margin: 0 auto;
-}
-
-.document-editor .ck-content {
-  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-</style>
+<template>
+  <div>
+    <div class="form-group">
+      <div>
+        <div class="document-editor__toolbar"></div>
+        <div class="document-editor__editable-container">
+          <div id="template-dev">
+            <ckeditor :editor="editor" v-model="computedDocumentHtml" @ready="onReady" @focus="changed"></ckeditor>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import CKEditor from "ckeditor5-custom-build/build/ckeditor";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  name: "DocumentEditor",
+  props: ["editMode"],
+  components: {
+    CKEditor,
+  },
+  data() {
+    return {
+      editor: CKEditor,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+    computedDocumentHtml: {
+      get() {
+        if (this.editMode) {
+          return this.documentHtmlFinal
+        } else {
+          return this.documentHtml;
+        }
+      },
+      set(newValue) {
+        if (this.editMode) {
+          this.updateDocumentHtmlFinal(newValue);
+        } else {
+          this.updateDocumentHtml(newValue);
+        }
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["updateDocumentHtmlFinal", "updateDocumentHtml", "addEvent"]),
+    onReady(editor) {
+      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+    },
+    changed() {
+      this.addEvent({ name: "documentEditorChanged" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Estilos do seu componente */
+.document-editor {
+  border-radius: var(--ck-border-radius);
+  max-height: 700px;
+  display: flex;
+  flex-flow: column nowrap;
+  margin: auto !important;
+}
+
+.document-editor__toolbar {
+  z-index: 1 !important;
+  min-width: 1100px;
+}
+
+.document-editor__editable-container {
+  padding: 10px;
+  border: 1px solid #e4e6ec;
+  background: var(--ck-color-base-foreground);
+}
+
+.document-editor__editable-container .ck-editor__editable {
+  width: 26cm;
+  height: 700px;
+  padding: 20px;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
+  margin: 0 auto;
+}
+
+.document-editor .ck-content {
+  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+</style>

package/src/component/shared/DocumentPreview.vue

@@ -1,105 +1,117 @@
-<template>
-  <div>
-    <div ref='preview'>
-      <v-runtime-template :template="`<div>${template}</div>`" />
-    </div>
-  </div>
-</template>
-
-<script>
-import VRuntimeTemplate from "v-runtime-template";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "DocumentPreview",
-  components: {
-    VRuntimeTemplate,
-  },
-  props: {
-    template: String,
-    d: Object,
-  },
-  methods: {
-    ...mapMutations("generic", ["updateDocumentHtmlFinal"]),
-    periodo(grupo, campo) {
-      var item = this.d.itensLocacao.find(item => item.grupo == grupo);
-      const campoMap = {
-        "dataEntrega": item.dataEntrega,
-        "horaEntrega": item.horaEntrega,
-        "dataInicio": item.dataInicio,
-        "horaInicio": item.horaInicio,
-        "dataFim": item.dataFim,
-        "horaFim": item.horaFim,
-        "dataRetirada": item.dataRetirada,
-        "horaRetirada": item.horaRetirada,
-        "ano": item.ano,
-        "mes": item.mes,
-        "dia": item.dia,
-        "hora": item.hora,
-        "minuto": item.minuto
-      };
-      return campoMap[campo];
-    },
-    somaGrupo(grupo) {
-      let sum = [];
-      this.d.itensLocacao.forEach((item) => {
-        if (item.grupo === grupo) {
-          sum.push(item.totalValue);
-        }
-      });
-      return sum.reduce((a, b) => a + b, 0);
-    },
-    somaGrupoMaster(grupoMaster) {
-      let sum = [];
-      this.d.itensLocacao.forEach((item) => {
-        if (item.grupoMaster === grupoMaster) {
-          sum.push(item.totalValue);
-        }
-      });
-      return sum.reduce((a, b) => a + b, 0);
-    },
-    convertToNumber(value) {
-      return parseFloat(value.replace("R$", "").replace(",", "."));
-    },
-    getPreviewContent() {
-      const previewDiv = this.$refs.preview;
-      this.updateDocumentHtmlFinal(previewDiv.innerHTML);
-    }
-  },
-  computed: {
-    ...mapGetters("generic", ["groupBy", "event"]),
-    produtoAgrupado() {
-      var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
-      return group;
-    },
-    produtoGrupoSubgrupo() {
-      const resultado = {};
-
-      this.d.itensLocacao.forEach(item => {
-        const nomeGrupoMaster = item.grupoMaster;
-        const nomeGrupo = item.grupo;
-
-        if (!resultado[nomeGrupoMaster]) { resultado[nomeGrupoMaster] = {}; }
-        if (!resultado[nomeGrupoMaster][nomeGrupo]) { resultado[nomeGrupoMaster][nomeGrupo] = []; }
-
-        resultado[nomeGrupoMaster][nomeGrupo].push(item);
-      });
-
-      return resultado;
-    }
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "updateDocumentHtml") {
-          this.getPreviewContent();
-        }
-      },
-      deep: true,
-    },
-  },
-
-
-};
-</script>
+<template>
+  <div>
+    <div ref='preview'>
+      <v-runtime-template :template="`<div>${template}</div>`" />
+    </div>
+  </div>
+</template>
+
+<script>
+import VRuntimeTemplate from "v-runtime-template";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "DocumentPreview",
+  components: {
+    VRuntimeTemplate,
+  },
+  props: {
+    template: String,
+    d: Object,
+  },
+  methods: {
+    ...mapMutations("generic", ["updateDocumentHtmlFinal"]),
+    periodo(grupo, campo) {
+      var item = this.d.itensLocacao.find(item => item.grupo == grupo);
+      const campoMap = {
+        "dataEntrega": item.dataEntrega,
+        "horaEntrega": item.horaEntrega,
+        "dataInicio": item.dataInicio,
+        "horaInicio": item.horaInicio,
+        "dataFim": item.dataFim,
+        "horaFim": item.horaFim,
+        "dataRetirada": item.dataRetirada,
+        "horaRetirada": item.horaRetirada,
+        "ano": item.ano,
+        "mes": item.mes,
+        "dia": item.dia,
+        "hora": item.hora,
+        "minuto": item.minuto
+      };
+      return campoMap[campo];
+    },
+    somaGrupo(grupo) {
+      let sum = [];
+      this.d.itensLocacao.forEach((item) => {
+        if (item.grupo === grupo) {
+          sum.push(item.totalValue);
+        }
+      });
+      return sum.reduce((a, b) => a + b, 0);
+    },
+    somaGrupoComFiltro(grupoId) {
+      return this.d.itensLocacao
+          .filter(item => item.grupoId == grupoId) // == aceita string ou number
+          .reduce((acc, item) => acc + item.totalValue, 0);
+    },
+    somaSubGrupo(itensLocacao) {
+      return this.somaGrupoComFiltro(this.grupoSemRepeticao(itensLocacao));
+    },
+    somaGrupoMaster(grupoMaster) {
+      let sum = [];
+      this.d.itensLocacao.forEach((item) => {
+        if (item.grupoMaster === grupoMaster) {
+          sum.push(item.totalValue);
+        }
+      });
+      return sum.reduce((a, b) => a + b, 0);
+    },
+    convertToNumber(value) {
+      return parseFloat(value.replace("R$", "").replace(",", "."));
+    },
+    getPreviewContent() {
+      const previewDiv = this.$refs.preview;
+      this.updateDocumentHtmlFinal(previewDiv.innerHTML);
+    },
+    grupoSemRepeticao(itensLocacao) {
+      return itensLocacao?.[0]?.grupoId ?? null;
+    }
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy", "event"]),
+    // produtoAgrupado e produtoGrupoSubgrupo estão sendo usados no generic.js documentPreview
+    produtoAgrupado() {
+      var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
+      return group;
+    },
+    produtoGrupoSubgrupo() {
+      const resultado = {};
+
+      this.d.itensLocacao.forEach(item => {
+        const nomeGrupoMaster = item.grupoMaster;
+        const nomeGrupo = item.grupo;
+
+        if (!resultado[nomeGrupoMaster]) { resultado[nomeGrupoMaster] = {}; }
+        if (!resultado[nomeGrupoMaster][nomeGrupo]) { resultado[nomeGrupoMaster][nomeGrupo] = []; }
+
+        resultado[nomeGrupoMaster][nomeGrupo].push(item);
+      });
+
+      return resultado;
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateDocumentHtml") {
+          this.getPreviewContent();
+        }
+      },
+      deep: true,
+    },
+  },
+
+
+};
+</script>

package/src/component/shared/DocumentPublic.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="main">
-    <div class="content">
-      <DocumentPreview :template="template" :d="d" />
-    </div>
-  </div>
-</template>
-<script>
-import DocumentPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentPreview.vue";
-
-export default {
-  name: "DocumentPublic",
-  components: {
-    DocumentPreview,
-  },
-  props: {
-    template: String,
-    d: Object,
-  },
-};
-</script>
-
-<style scoped>
-.main {
-  background-color: white;
-  min-height: 900px;
-}
-
-.content {
-  width: 1042px;
-  margin: auto;
-}
-</style>
+<template>
+  <div class="main">
+    <div class="content">
+      <DocumentPreview :template="template" :d="d" />
+    </div>
+  </div>
+</template>
+<script>
+import DocumentPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentPreview.vue";
+
+export default {
+  name: "DocumentPublic",
+  components: {
+    DocumentPreview,
+  },
+  props: {
+    template: String,
+    d: Object,
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  background-color: white;
+  min-height: 900px;
+}
+
+.content {
+  width: 1042px;
+  margin: auto;
+}
+</style>