@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/component/report/ReportTable.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <table class="table table-responsive-md">
+            <thead>
+                <tr>
+                    <th v-for="(obj, ind) in header" :key="ind">
+                        <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
+                            <i class="fas fa-search" v-if="obj.iconSearch"></i>
+                            <span class="title-header"> {{ obj.title }}</span>
+                        </div>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="div-row" v-for="(row, index) in data" :key="index" :style="row.rowCss">
+                    <td v-for="(obj, ind) in header" :key="ind">
+                        <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)"
+                            :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+                            {{ row[obj.field] }}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody v-show="data.length == 0">
+                <tr>
+                    <td colspan="12">
+                        <span>Nenhum registro encontrado!</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+</template>
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ReportTable",
+    props: ["header", "data"],
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        convertClass(fieldComparison, classCssBody) {
+            if (Array.isArray(classCssBody)) {
+                let ret = [];
+                classCssBody.forEach(function (value) {
+                    let classCss = value.classCss;
+                    let condition = value.fieldComparison == fieldComparison;
+                    let obj = { [classCss]: condition };
+                    ret.push(obj);
+                });
+                return ret;
+            } else {
+                return classCssBody;
+            }
+        },
+        sendEvent(eventName, data) {
+            if (eventName) this.addEvent({ name: eventName, data: data });
+        }
+    },
+}
+
+</script>
+<style scoped>
+table tbody tr td {
+    width: 1100px;
+}
+
+.table thead tr {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+}
+
+.table th,
+.table td {
+    height: 10px !important;
+    padding-left: 0px !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    padding-right: 5px !important;
+    border-bottom: 0px !important;
+    border-top: 0px !important;
+    font-size: 13px !important;
+}
+
+.title-header {
+    font-size: 12px;
+    color: #757d8c;
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+.table-number {
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.table-main {
+    color: #757d8c;
+    max-width: 200px;
+}
+
+.table-currency {
+    font-size: 12px;
+    min-width: 100px;
+}
+
+.div-row {
+    border-bottom: 1px solid #D3D3D3;
+}
+</style>

package/src/component/report/Totalization.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <hr class="hr-report" />
+        <div class="text-right" v-for="item in totalization" :key="item.title">
+            <b-row>
+                <b-col sm="10">
+                    <span>
+                        <span class="title-report-header">
+                            {{ item.title }} ..................
+                        </span>
+                    </span>
+                </b-col>
+                <b-col sm="2">
+                    {{ item.value }}
+                </b-col>
+            </b-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Totalization",
+    props: ["totalization"],
+
+}
+
+</script>
+<style scoped>
+.hr-report {
+    background: black !important;
+    height: 0px !important;
+}
+</style>

package/src/component/shared/CodeEditor.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="div-download title" @click="download">
+      <i class="fa-solid fa-download icon-download"></i>
+      <span class="title-download">Baixar</span>
+    </div>
+    <AceEditor v-model="code" lang="html" @init="editorInit" theme="monokai" width="100%" height="400px" :options="{
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      fontSize: 15,
+      highlightActiveLine: true,
+      enableSnippets: false,
+      showLineNumbers: true,
+      tabSize: 2,
+      showPrintMargin: false,
+      showGutter: true,
+    }" />
+    <div v-if="!editMode" class="apply">
+      <b-row>
+        <b-col class="text-right">
+          <Button key="applyCode" type="primary" title="Aplicar" classIcon="far fa-code" size="small"
+            :clicked="apply" />
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import AceEditor from "vuejs-ace-editor";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  name: "CodeEditor",
+  props: {
+    editMode: Boolean
+  },
+  components: {
+    AceEditor,
+    Button,
+  },
+  data() {
+    return {
+      code: "",
+    };
+  },
+  mounted() {
+    this.code = this.editMode ? this.documentHtmlFinal : this.documentHtml;
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateDocumentHtml",
+      "updateDocumentHtmlFinal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    apply() {
+      this.updateDocumentHtml(this.code);
+      this.hideModal("code");
+      this.removeLoading(["applyCode"]);
+    },
+    editorInit: function () {
+      require("brace/ext/language_tools"); //language extension prerequsite...
+      require("brace/mode/html");
+      require("brace/mode/javascript"); //language
+      require("brace/mode/less");
+      require("brace/theme/monokai");
+      require("brace/snippets/javascript"); //snippet
+    },
+    download() {
+      const blob = new Blob([this.code], { type: 'text/plain' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'arquivo.txt';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    }
+  },
+  watch: {
+    code: {
+      handler(code) {
+        this.updateDocumentHtmlFinal(this.code);
+      },
+      deep: true,
+    },
+    documentHtml: {
+      handler(documentHtml) {
+        this.code = documentHtml;
+      },
+      deep: true,
+    },
+    documentHtmlFinal: {
+      handler(documentHtmlFinal) {
+        this.code = documentHtmlFinal;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.apply {
+  margin-top: 10px;
+}
+
+.div-download {
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.title-download {
+  margin-left: 6px;
+  font-size: 14px;
+}
+
+.title-download:hover {
+  text-decoration: underline;
+}
+
+.icon-download {
+  font-size: 18px;
+}
+</style>

package/src/component/shared/Collapse.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="line-arrow" v-if="type == 'arrow'">
+      <div class="arrow" @click="show" v-if="!showCollapse">
+        <b-row>
+          <b-col sm="6" class="text-left">
+            <span class="title">{{ title }}</span>
+          </b-col>
+          <b-col sm="6" class="text-right">
+            <i class="far fa-plus"></i>
+          </b-col>
+        </b-row>
+      </div>
+      <div class="arrow" @click="hide" v-if="showCollapse">
+        <b-row>
+          <b-col sm="6" class="text-left">
+            <span class="title">{{ title }}</span>
+          </b-col>
+          <b-col sm="6" class="text-right">
+            <i class="far fa-minus"></i>
+          </b-col>
+        </b-row>
+      </div>
+    </div>
+    <b-collapse id="collapse-4" v-model="showCollapse" class="mt-2">
+      <slot></slot>
+    </b-collapse>
+    <div v-if="type == 'button'">
+      <b-row>
+        <b-col sm="12">
+          <div class="text-center">
+            <Button
+              v-if="!showCollapse"
+              :title="buttonShow.title"
+              :classIcon="buttonShow.icon"
+              :type="buttonShow.type"
+              size="small"
+              :clicked="show"
+            />
+          </div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <div class="text-center">
+            <Button
+              v-if="showCollapse"
+              key="hideCollapse"
+              :title="buttonHide.title"
+              :classIcon="buttonHide.icon"
+              :type="buttonHide.type"
+              size="small"
+              :clicked="hide"
+            />
+          </div>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "../forms/Button.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Button },
+  name: "Collapse",
+  props: {
+    buttonShow: Object,
+    buttonHide: Object,
+    type: {
+      type: String,
+      default: "button",
+    },
+    title: String,
+    startOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showCollapse: false,
+    };
+  },
+  created() {
+    this.showCollapse = this.startOpen;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    show() {
+      let self = this;
+      setTimeout(function () {
+        self.showCollapse = true;
+      }, 200);
+      this.removeLoadingButton();
+    },
+    hide() {
+      let self = this;
+      setTimeout(function () {
+        self.showCollapse = false;
+      }, 200);
+      this.removeLoadingButton();
+    },
+    removeLoadingButton() {
+      this.removeLoading(["showCollapse", "hideCollapse"]);
+    },
+  },
+};
+</script>
+<style scoped>
+.arrow {
+  font-size: 14px;
+  color: #577696;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+.line-arrow {
+  border-top: solid 1px #dbdfe9;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+</style>

package/src/component/shared/Confirmation.vue

@@ -0,0 +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>

package/src/component/shared/DocumentEditor.vue

@@ -0,0 +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>

package/src/component/shared/DocumentPreview.vue

@@ -0,0 +1,105 @@
+<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>