@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/template/ListViewWithHandlerData.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <div :class="{ 'g-div-molded': showMolded }">
+      <b-row>
+        <b-col sm="12"
+          ><div>
+            <HorizontalFilter v-if="showHorizontalFilter">
+              <div slot="content-filter-horizontal">
+                <slot name="content-filter-horizontal"></slot>
+              </div>
+            </HorizontalFilter></div
+        ></b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="6">
+          <TableTotalization :totalization="content.totalization" />
+        </b-col>
+        <b-col sm="6">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+      <FixedBar posicao="topo" v-show="selected.length > 0">
+        <div>
+          <Button
+            v-if="buttonRemove"
+            key="remove"
+            :title="`Remover  ${selected.length}`"
+            type="danger"
+            size="small"
+            :clicked="removeSelected"
+          />
+          <slot name="content-buttons-table-header"></slot>
+        </div>
+      </FixedBar>
+      <Table
+        :header="templateList.headerTable"
+        :data="content.data"
+        :showChecks="templateList.showChecks"
+      >
+        <div slot="content-buttons-table">
+          <slot name="content-buttons-table"></slot>
+        </div>
+      </Table>
+    </div>
+    <br />
+    <Pagination key="templateList" :totalRecords="content.totalRecords" />
+  </div>
+</template>
+
+<script>
+import Pagination from "../shared/Pagination.vue";
+import Table from "../shared/Table.vue";
+import Button from "../forms/Button.vue";
+import FixedBar from "../layout/FixedBar.vue";
+import TableTotalRecords from "../shared/TableTotalRecords.vue";
+import TableTotalization from "../shared/TableTotalization.vue";
+import HorizontalFilter from "../shared/HorizontalFilter.vue";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ListViewWithHandlerData",
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showMolded: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    HorizontalFilter,
+    TableTotalization,
+    TableTotalRecords,
+    FixedBar,
+    Button,
+    Table,
+    Pagination,
+  },
+  data() {
+    return {
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contem",
+        currentPage: 1,
+        totalPerPage: 10,
+      },
+      paramsFilter: [],
+      dynamicFilter: {},
+    };
+  },
+  created() {
+    // o carregamento inicial getAll() é feito pela mudança no paginationKey
+  },
+  mounted() {
+    this.updatePagination({
+      key: "templateList",
+      totalPerPage: this.baseParams.totalPerPage,
+    });
+  },
+  beforeDestroy() {
+    let search = { content: "", filter: { content: "contem", id: "contem" } };
+    this.updateSearch(search);
+  },
+  computed: {
+    ...mapState("generic", [
+      "selected",
+      "methodExecutedApi",
+      "search",
+      "executedSearch",
+      "clearedSearch",
+      "totalPerPage",
+      "selectStatic",
+    ]),
+    ...mapGetters("generic", ["pagination"]),
+    paginationKey: function () {
+      return this.pagination("templateList");
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "removeLoading",
+      "addSelected",
+      "updatePagination",
+      "updateSearch",
+    ]),
+    getAll() {
+      let obj = { ...this.baseParams, ...this.dynamicFilter, ...this.propsParam };
+      let params = { url: this.templateList.urlGetApi, obj: obj };
+      this.getApi(params).then((response) => {
+        this.content = response.content;
+        this.removeLoading(["panel", "modeloSubView", "search", "clean"]);
+      });
+    },
+    removeSelected() {
+      let params = {
+        url: this.templateList.urlRemoverTodosApi,
+        selected: this.selected,
+      };
+      this.deleteAllApi(params).then(() => {
+        this.removeLoading(["remove"]);
+        this.addSelected([]);
+      });
+    },
+    limpaParams() {
+      this.baseParams.currentPage = 1;
+    },
+  },
+  watch: {
+    methodExecutedApi: function (value) {
+      if (
+        value === "postApi" ||
+        value === "putApi" ||
+        value === "deleteAllApi" ||
+        value === "deleteAllApiErro"
+      ) {
+        this.getAll();
+      }
+    },
+    executedSearch: function () {
+      this.baseParams.search = this.search.content;
+      this.baseParams.filter = this.search.filter.id;
+      this.limpaParams();
+      this.getAll();
+    },
+    clearedSearch: function () {
+      this.baseParams.search = "";
+      this.baseParams.filter = "";
+      this.limpaParams();
+      this.getAll();
+    },
+    paginationKey: {
+      handler(value) {
+        this.limpaParams();
+        this.baseParams.currentPage = value.currentPage;
+        this.getAll();
+      },
+      deep: true,
+    },
+    selectStatic: {
+      handler(value) {
+        let fieldTarget = value.fieldTarget;
+        let obj = { key: fieldTarget, valor: value.valor };
+        this.paramsFilter.push(obj);
+
+        var result = {};
+        for (var i = 0; i < this.paramsFilter.length; i++) {
+          let key = this.paramsFilter[i].key;
+          let valor = this.paramsFilter[i].valor;
+
+          if (key == "periodo") {
+            result["inicio"] = valor.inicio;
+            result["fim"] = valor.fim;
+          } else {
+            result[key] = valor;
+          }
+        }
+
+        this.dynamicFilter = result;
+
+        this.updatePagination({
+          key: "templateList",
+          totalPerPage: this.dynamicFilter.totalPerPage,
+        });
+
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button-excluir {
+  padding-bottom: 10px;
+}
+</style>

package/src/component/template/ViewTemplateConfiguration.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Loading :center="false" v-show="carregando('modeloSubView')" />
+    <div v-show="!carregando('modeloSubView')">
+      <slot name="content-buttons"></slot>
+      <div v-if="showSearch">
+        <Search />
+        <br />
+      </div>
+
+      <ListViewWithHandlerData
+        :templateList="templateList"
+        :propsParam="propsParam"
+        :showMolded="false"
+        :showHorizontalFilter="showHorizontalFilter"
+        :buttonRemove="buttonRemove"
+      >
+        <div slot="content-buttons-table-header">
+          <slot name="content-buttons-table-header"></slot>
+        </div>
+        <div slot="content-filter-horizontal">
+          <slot name="content-filter-horizontal"></slot>
+        </div>
+        <div slot="content-buttons-table">
+          <slot name="content-buttons-table"></slot>
+        </div>
+      </ListViewWithHandlerData>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "../shared/Search.vue";
+import Loading from "../shared/Loading.vue";
+
+import ListViewWithHandlerData from "@nixweb/nixloc-ui/src/component/template/ListViewWithHandlerData.vue";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateConfiguration",
+  components: { Search, Loading, ListViewWithHandlerData },
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["carregando"]),
+  },
+  created() {
+    this.addLoading("modeloSubView");
+  },
+  methods: {
+    ...mapMutations("generic", ["addLoading"]),
+  },
+};
+</script>

package/src/component/template/ViewTemplateDocumentView.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showFilter="panel.showFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-main">
+        <div>
+          <div class="div-top">
+            <Molded>
+              <b-row>
+                <b-col sm="6">
+                  <div class="side-by-side">
+                    <Button
+                      key="saveDocument"
+                      type="success"
+                      title="Salvar"
+                      classIcon="fas fa-save"
+                      :disabled="isDisabled"
+                      size="small"
+                      :clicked="saveDocument"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      v-if="id"
+                      key="saveAs"
+                      type="success"
+                      title="Fazer uma cópia"
+                      classIcon="fas fa-clone"
+                      size="small"
+                      :clicked="saveAs"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="side-by-side">
+                    <Button
+                      key="showModalLegend"
+                      type="info"
+                      classIcon="fas fa-book-reader"
+                      size="small"
+                      :clicked="showModalLegend"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      key="showModalCode"
+                      type="info"
+                      classIcon="far fa-code"
+                      size="small"
+                      :clicked="showModalCode"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      key="showModalPreview"
+                      type="info"
+                      title="Visualizar"
+                      classIcon="far fa-eye"
+                      size="small"
+                      :clicked="showModalPreview"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+            </Molded>
+          </div>
+          <Modal title="Salvar" :width="500" v-show="showModal('saveDocument')">
+            <slot></slot>
+          </Modal>
+          <Modal title="Parâmetros" :width="1100" v-if="showModal('legenda')">
+            <LegendaParametro v-if="modal.open" :legenda="legenda" />
+          </Modal>
+          <Modal title="Editor de Código" :width="900" v-if="showModal('code')">
+            <CodeEditor v-if="modal.open" />
+          </Modal>
+          <Modal title="Visualizar" :width="1200" v-if="showModal('preview')">
+            <div v-if="modal.open">
+              <b-row>
+                <b-col class="text-center">
+                  <Button
+                    v-print="'#printMe'"
+                    key="print"
+                    type="edit"
+                    title="Imprimir"
+                    classIcon="fas fa-print"
+                    size="small"
+                    :clicked="print"
+                  />
+                </b-col>
+              </b-row>
+              <br />
+              <ScrollBar :minHeight="500" :maxHeight="500">
+                <div>
+                  <div class="a4">
+                    <div id="printMe">
+                      <DocumentPreview :template="documentoPreview" :d="data" />
+                    </div>
+                  </div>
+                </div>
+              </ScrollBar>
+            </div>
+          </Modal>
+          <div class="div-editor">
+            <DocumentEditor />
+          </div>
+        </div>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+
+import DocumentEditor from "@nixweb/nixloc-ui/src/component/shared/DocumentEditor.vue";
+import DocumentPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentPreview.vue";
+import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor.vue";
+import LegendaParametro from "@nixweb/nixloc-ui/src/component/shared/LegendaParametro.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import print from "vue-print-nb";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateDocumentView",
+  directives: {
+    print,
+  },
+  components: {
+    Panel,
+    DocumentEditor,
+    DocumentPreview,
+    CodeEditor,
+    LegendaParametro,
+    Molded,
+    Button,
+    Modal,
+    ScrollBar,
+  },
+  props: {
+    panel: Object,
+    data: Object,
+    legenda: Array,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      isDisabled: true,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["modal", "documentHtml"]),
+    ...mapGetters("generic", ["showModal", "event", "documentoPreview"]),
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "showModal",
+      "hideModal",
+      "removeLoading",
+      "addEvent",
+    ]),
+    saveDocument() {
+      if (this.id) {
+        this.addEvent({ nome: "saveDocument" });
+      } else {
+        this.showModal("saveDocument");
+        this.removeLoading(["saveDocument"]);
+      }
+    },
+    saveAs() {
+      this.addEvent({ nome: "saveAs" });
+    },
+    showModalLegend() {
+      this.showModal("legenda");
+      this.removeLoading(["showModalLegend"]);
+    },
+    showModalCode() {
+      this.showModal("code");
+      this.removeLoading(["showModalCode"]);
+    },
+    showModalPreview() {
+      this.showModal("preview");
+      this.removeLoading(["showModalPreview"]);
+    },
+    print() {
+      this.removeLoading(["print"]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.nome == "documentoEditorModificado") this.isDisabled = true;
+        if (event.nome == "documentEditorChanged") this.isDisabled = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-top {
+  margin-top: 30px;
+}
+.div-editor {
+  margin-top: 25px;
+}
+.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;
+}
+
+</style>