@nixweb/nixloc-ui 0.0.121 → 0.0.124

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,80 @@
+<template>
+  <div>
+    <div @click="execute()">
+      <slot></slot>
+    </div>
+    <Modal
+      :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"
+            size="small"
+            :clicked="cancel"
+          />
+          <Button
+            key="confirm"
+            :type="type"
+            title="Sim, confirmar"
+            size="medium"
+            :clicked="confirm"
+          />
+        </div>
+      </b-col>
+    </Modal>
+  </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,
+    confirmed: Function,
+  },
+  methods: {
+    ...mapMutations("generic", ["showModal", "hideModal", "removeLoading"]),
+    execute() {
+      this.showModal(`confirmation${this.data.id}`);
+    },
+    confirm() {
+      let self = this;
+      setTimeout(function () {
+        if (self.confirmed) self.confirmed(self.data);
+        self.removeLoading(["confirm"]);
+        self.hideModal();
+      }, 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/{DocumentoEditor.vue → DocumentEditor.vue}

@@ -6,9 +6,9 @@
         <div class="document-editor__editable-container">
           <ckeditor
             :editor="editor"
-            v-model="documentoHtml"
+            v-model="documentHtml"
             @ready="onReady"
-            @focus="modificou"
+            @focus="changed"
           ></ckeditor>
         </div>
       </div>
@@ -23,7 +23,7 @@ import CKEditor from "ckeditor5-custom-build/build/ckeditor";
 import { mapState, mapMutations } from "vuex";
 
 export default {
-  name: "DocumentoEditor",
+  name: "DocumentEditor",
   components: {
     CKEditor,
   },
@@ -33,24 +33,24 @@ export default {
     };
   },
   computed: {
-    ...mapState("generic", ["documentoHtml"]),
-    documentoHtml: {
+    ...mapState("generic", ["documentHtml"]),
+    documentHtml: {
       get() {
-        return this.$store.state.generic.documentoHtml;
+        return this.$store.state.generic.documentHtml;
       },
       set(value) {
-        this.atualizaDocumentoHtml(value);
+        this.updateDocumentHtml(value);
       },
     },
   },
   methods: {
-    ...mapMutations("generic", ["atualizaDocumentoHtml", "insereEvento"]),
+    ...mapMutations("generic", ["updateDocumentHtml", "addEvent"]),
     onReady(editor) {
       const toolbarContainer = document.querySelector(".document-editor__toolbar");
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
-    modificou() {
-      this.insereEvento({ nome: "documentoEditorFocus" });
+    changed() {
+      this.addEvent({ nome: "documentEditorChanged" });
     },
   },
 };
@@ -97,14 +97,11 @@ export default {
   font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-/* Adjust the headings dropdown to host some larger heading styles. */
 .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
   line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
   min-width: 6em;
 }
 
-/* Scale down all heading previews because they are way too big to be presented in the UI.
-    Preserve the relative scale, though. */
 .document-editor
   .ck-heading-dropdown
   .ck-list
@@ -114,7 +111,6 @@ export default {
   transform-origin: left;
 }
 
-/* Set the styles for "Heading 1". */
 .document-editor .ck-content h2,
 .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
   font-size: 2.18em;
@@ -127,7 +123,6 @@ export default {
   margin-bottom: 0.142em;
 }
 
-/* Set the styles for "Heading 2". */
 .document-editor .ck-content h3,
 .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
   font-size: 1.75em;
@@ -139,7 +134,6 @@ export default {
   color: var(--ck-color-list-button-on-text);
 }
 
-/* Set the styles for "Heading 2". */
 .document-editor .ck-content h3 {
   line-height: 1.86em;
   padding-top: 0.171em;

package/src/component/shared/{DocumentoPreview.vue → DocumentPreview.vue}

@@ -26,9 +26,9 @@ export default {
     },
   },
   computed: {
-    ...mapGetters("generic", ["agruparPor"]),
+    ...mapGetters("generic", ["groupBy"]),
     produtoAgrupado() {
-      return this.agruparPor({ array: this.d.produto, key: "pGp" });
+      return this.groupBy({ array: this.d.produto, key: "pGp" });
     },
   },
 };

package/src/component/shared/ExportExcel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <download-excel
+      :fields="column"
+      :data="data"
+      :before-finish="exportFinished"
+      worksheet="Planilha"
+      :name="`${fileName}.xls`"
+    >
+      <Button
+        key="exportExcel"
+        :type="button.type"
+        :title="button.title"
+        classIcon="fas fa-file-excel"
+        :size="button.size"
+      />
+    </download-excel>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ExportExcel",
+  props: {
+    button: Object,
+    header: Array,
+    data: Array,
+  },
+  components: {
+    Button,
+  },
+  data() {
+    return {
+      json_meta: [
+        [
+          {
+            key: "charset",
+            value: "utf-8",
+          },
+        ],
+      ],
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    exportFinished() {
+      this.removeLoading(["exportExcel"]);
+    },
+  },
+  computed: {
+    column() {
+      var object = this.header.reduce(
+        (obj, item) => Object.assign(obj, { [item.title]: item.field }),
+        {}
+      );
+      return object;
+    },
+    fileName() {
+      return this.$route.matched[0].props.default.report;
+    },
+  },
+};
+</script>

package/src/component/shared/{ExportarPDF.vue → ExportPDF.vue}

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div v-show="carregando" class="full-width">
-      <Carregando
-        :centralizado="true"
-        :largura="70"
-        :altura="70"
-        mensagem="Por favor aguarde, estamos gerando a impressão..."
+      <Loading
+        :center="true"
+        :width="70"
+        :height="70"
+        message="Por favor aguarde, estamos gerando a impressão..."
       />
     </div>
     <vue-html2pdf
@@ -14,7 +14,7 @@
       :enable-download="false"
       :preview-modal="true"
       :paginate-elements-by-height="1400"
-      :filename="nomeArquivo"
+      :filename="fileName"
       :pdf-quality="2"
       :manual-pagination="false"
       :pdf-format="tamanhoPagina"
@@ -28,11 +28,11 @@
     >
       <section slot="pdf-content">
         <section class="pdf-item">
-          <BarraRolagem :altura="alturaBarraRolagem">
-            <div id="altura">
+          <ScrollBar :height="alturaBarraRolagem">
+            <div id="height">
               <slot></slot>
             </div>
-          </BarraRolagem>
+          </ScrollBar>
         </section>
       </section>
     </vue-html2pdf>
@@ -46,16 +46,16 @@
 </template>
 
 <script>
-import Carregando from "./Carregando.vue";
-import BarraRolagem from "../layout/BarraRolagem.vue";
+import Loading from "./Loading.vue";
+import ScrollBar from "../layout/Scrollbar.vue";
 import VueHtml2pdf from "vue-html2pdf";
 
 export default {
-  name: "ExportarPDF",
-  components: { VueHtml2pdf, BarraRolagem, Carregando },
+  name: "ExportPDF",
+  components: { VueHtml2pdf, ScrollBar, Loading },
   props: {
-    titulo: String,
-    nomeArquivo: String,
+    title: String,
+    fileName: String,
     tamanhoPagina: String,
     orientacao: String,
     larguraImpressao: Number,
@@ -83,7 +83,7 @@ export default {
       console.log("finalizou");
     },
     gerarRelatorio() {
-      const listElm = document.querySelector("#altura");
+      const listElm = document.querySelector("#height");
       this.alturaBarraRolagem = listElm.scrollHeight;
       this.carregando = true;
       let self = this;
@@ -96,11 +96,11 @@ export default {
 </script>
 
 <style scoped>
-.botao {
+.button {
   margin-bottom: 20px;
 }
 
-.titulo {
+.title {
   font-size: 20px;
 }
 

package/src/component/shared/HeaderPrint.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="div-header somente-impressao">
+    <div class="title">{{ fileName }}</div>
+    <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
+      <span>{{ tag.title }}</span> <span>{{ tag.value }}</span>
+      <span>,</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "HeaderPrint",
+  computed: {
+    ...mapGetters("report", ["tags"]),
+    fileName() {
+      return this.$route.matched[0].props.default.report;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-header {
+  margin: 20px;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.title {
+  font-size: 18px;
+}
+</style>

package/src/component/shared/HorizontalFilter.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="filter-horizontal">
+    <Collapse
+      :buttonShow="{
+        title: 'Mais filtros',
+        icon: 'fas fa-arrow-alt-circle-down',
+        type: 'info',
+      }"
+      :buttonHide="{
+        title: 'Menos filtros',
+        icon: 'fas fa-arrow-alt-circle-up',
+        type: 'warning',
+      }"
+    >
+      <b-row>
+        <b-col :sm="showTotalPerPage ? 10 : 12">
+          <slot name="content-filter-horizontal"></slot>
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
+          <SelectStatic
+            title="show"
+            fieldTarget="totalPerPage"
+            :initialValue="{ content: '10', id: 10 }"
+            :data="[
+              { content: '10', id: 10 },
+              { content: '20', id: 20 },
+              { content: '30', id: 30 },
+              { content: '50', id: 50 },
+              { content: '100', id: 100 },
+            ]"
+          />
+        </b-col>
+      </b-row>
+    </Collapse>
+  </div>
+</template>
+
+<script>
+import Collapse from "./Collapse.vue";
+import SelectStatic from "../forms/SelectStatic.vue";
+import Select from "../forms/Select";
+
+export default {
+  name: "ListViewWithHandlerData",
+  components: { Select, SelectStatic, Collapse },
+  props: {
+    showTotalPerPage: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-horizontal {
+  margin-bottom: 5px;
+}
+</style>

package/src/component/shared/LegendaParametro.vue

@@ -2,13 +2,13 @@
   <div>
     <Pesquisa />
     <br />
-    <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
+    <ScrollBar :minHeight="400" :maxHeight="400">
       <table class="table table-responsive-xs">
         <thead>
           <tr>
-            <th><span class="titulo-cabecalho">Parâmetro</span></th>
-            <th><span class="titulo-cabecalho">Descrição</span></th>
-            <th><span class="titulo-cabecalho">Exemplo</span></th>
+            <th><span class="title-header">Parâmetro</span></th>
+            <th><span class="title-header">Descrição</span></th>
+            <th><span class="title-header">Exemplo</span></th>
           </tr>
         </thead>
         <tbody v-for="(legendaLocal, grupoNome) in agrupado">
@@ -20,7 +20,7 @@
               <span> {{ item.parametro }}</span>
             </td>
             <td>
-              <span> {{ item.descricao }}</span>
+              <span> {{ item.description }}</span>
             </td>
             <td>
               <span class="exemplo"> {{ item.exemplo }}</span>
@@ -28,19 +28,19 @@
           </tr>
         </tbody>
       </table>
-    </BarraRolagem>
+    </ScrollBar>
   </div>
 </template>
 <script>
 import Pesquisa from "@nixweb/nixloc-ui/src/component/shared/Pesquisa.vue";
-import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 
 import { mapGetters, mapState, mapMutations } from "vuex";
 
 export default {
   name: "LegendaParametro",
   components: {
-    BarraRolagem,
+    ScrollBar,
     Pesquisa,
   },
   props: {
@@ -55,42 +55,42 @@ export default {
     this.legendaLocal = this.legenda;
   },
   methods: {
-    ...mapMutations("generic", ["removeCarregando"]),
+    ...mapMutations("generic", ["removeLoading"]),
   },
   computed: {
-    ...mapGetters("generic", ["agruparPor"]),
-    ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
+    ...mapGetters("generic", ["groupBy"]),
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
     agrupado() {
-      var lista = this.agruparPor({ array: this.legendaLocal, key: "grupoNome" });
+      var lista = this.groupBy({ array: this.legendaLocal, key: "grupoNome" });
       return lista;
     },
   },
   watch: {
-    buscouPesquisa: function () {
+    executedSearch: function () {
       let legenda = [];
 
       let self = this;
       setTimeout(function () {
         self.legenda.forEach(function (item) {
-          if (self.pesquisa.filtro.conteudo == "igual") {
-            if (item.descricao == self.pesquisa.conteudo) legenda.push(item);
+          if (self.search.filter.content == "igual") {
+            if (item.description == self.search.content) legenda.push(item);
           }
 
-          if (self.pesquisa.filtro.conteudo == "contem") {
-            if (item.descricao.includes(self.pesquisa.conteudo)) legenda.push(item);
+          if (self.search.filter.content == "contem") {
+            if (item.description.includes(self.search.content)) legenda.push(item);
           }
         });
 
         self.legendaLocal = legenda;
 
-        self.removeCarregando(["pesquisar", "limpar"]);
+        self.removeLoading(["search", "clean"]);
       }, 300);
     },
-    limpouPesquisa: function () {
+    clearedSearch: function () {
       let self = this;
       setTimeout(function () {
         self.legendaLocal = self.legenda;
-        self.removeCarregando(["pesquisar", "limpar"]);
+        self.removeLoading(["search", "clean"]);
       }, 300);
     },
   },
@@ -107,7 +107,7 @@ export default {
   border-bottom: 0px !important;
 }
 
-.titulo-cabecalho {
+.title-header {
   font-size: 14px;
   color: #757d8c;
   font-weight: 400;
@@ -120,7 +120,7 @@ export default {
   font-weight: 500;
 }
 
-.div-alerta {
+.div-warning {
   margin-bottom: 20px;
 }