@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/template/ReportCreateUpdate.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12">
+        <InputText title="Nome" field="name" :formName="formName" :required="true" :maxLength="40" v-model="report.name"
+          :markFormDirty="false" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Button _key="btnSaveReport" type="success" title="Salvar" :disabled="!isFormValid(formName)"
+            classIcon="fas fa-save" size="medium" :clicked="saveReport" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import Report from "@nixweb/nixloc-ui/src/component/template/model/Report.js";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ReportCreateUpdate",
+  components: { Button, InputText },
+  props: {
+    module: String,
+  },
+  data() {
+    return {
+      formName: "reportCreateUpdate",
+      report: new Report(),
+      urlCreate: "/api/v1/shared/report/create",
+      urlUpdate: "/api/v1/shared/report/update",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapState("report", ["selectedFields", "selectedRules"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["removeLoading", "addEvent", "hideModal"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    saveReport() {
+      var custom = this.report.id ? "" : "Custom";
+      const query = {
+        routeName: `${this.$route.name}${custom}`,
+        selectedFields: {
+          orderBy: this.selectedFields.orderBy,
+          selected: this.selectedFields.selected,
+          sort: this.selectedFields.sort,
+        },
+        selectedRules: this.selectedRules,
+      };
+      let obj = {
+        id: this.report.id,
+        name: this.report.name,
+        module: this.module,
+        query: JSON.stringify(query),
+      };
+      if (this.report.id) {
+        let params = { url: this.urlUpdate, obj: obj };
+        this.putApi(params).then((response) => {
+          if (response.success) {
+            this.sendEvent();
+            this.hideModal();
+          }
+          this.removeLoading(["btnSaveReport"]);
+        });
+      } else {
+        let params = { url: this.urlCreate, obj: obj };
+        this.postApi(params).then((response) => {
+          if (response.success) {
+            const query = JSON.parse(response.content.query);
+            this.$router.replace({
+              name: query.routeName,
+              params: { id: response.content.id, name: response.content.name },
+            });
+            this.sendEvent();
+            this.hideModal();
+          }
+          this.removeLoading(["btnSaveReport"]);
+        });
+      }
+    },
+    sendEvent() {
+      this.addEvent({ name: "savedReport" });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "saveReport") {
+          this.report.id = this.$route.params.id;
+          if (this.report.id) this.report.name = this.$route.params.name;
+          this.saveReport();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/template/ViewTemplateConfiguration.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div>
+      <slot name="content-buttons"></slot>
+      <br v-if="templateList.dragAndDrop" />
+      <div v-if="showSearch">
+        <Search />
+        <br />
+      </div>
+      <ListViewWithDataHandler
+        :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>
+      </ListViewWithDataHandler>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "../shared/Search.vue";
+
+import ListViewWithDataHandler from "@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateConfiguration",
+  components: { Search, ListViewWithDataHandler },
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  created() {
+    this.addLoading("loadingLine");
+  },
+  methods: {
+    ...mapMutations("generic", ["addLoading"]),
+  },
+};
+</script>

package/src/component/template/ViewTemplateDocumentView.vue

@@ -0,0 +1,213 @@
+<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" v-if="showByRule">
+                    <Button v-if="id" _key="saveAs" type="success" title="Clonar" classIcon="fas fa-clone" size="small"
+                      :clicked="saveAs" />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="side-by-side" v-if="id && showByRule">
+                    <Button key="showModalConfig" type="info" classIcon="fa-solid fa-gear" size="small"
+                      :clicked="showModalConfig" />
+                  </div>
+                  <div class="side-by-side" v-if="showByRule">
+                    <Button key="showModalLegend" type="info" classIcon="fas fa-book-reader" size="small"
+                      :clicked="showModalLegend" />
+                  </div>
+                  <div class="side-by-side" v-if="showByRule">
+                    <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="800" v-show="showModal('saveDocument')">
+            <slot></slot>
+          </Modal>
+          <Modal title="Parâmetros" :width="1100" v-show="showModal('legenda')">
+            <ParameterLegend v-show="modal.open" :legend="parameterLegend" :module="module" />
+          </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-if="false" 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">
+                      <div :style="styleCss">
+                        <DocumentPreview :template="documentPreview('dev')" :d="parameterExemple" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ScrollBar>
+            </div>
+          </Modal>
+          <div class="div-editor">
+            <Loading type="line" v-if="!showDocumentEditor" />
+            <DocumentEditor v-if="showDocumentEditor" />
+          </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 ParameterLegend from "@nixweb/nixloc-ui/src/component/shared/ParameterLegend.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 Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import print from "vue-print-nb";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateDocumentView",
+  directives: {
+    print,
+  },
+  components: {
+    Panel,
+    DocumentEditor,
+    DocumentPreview,
+    CodeEditor,
+    ParameterLegend,
+    Molded,
+    Loading,
+    Button,
+    Modal,
+    ScrollBar,
+  },
+  props: {
+    panel: Object,
+    parameterExemple: Object,
+    parameterLegend: Array,
+    styleCss: String,
+    module: String,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      isDisabled: true,
+      showDocumentEditor: false,
+    };
+  },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.showDocumentEditor = true;
+    }, 1500);
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapState("generic", ["modal", "documentHtml"]),
+    ...mapGetters("generic", ["showModal", "event", "documentPreview"]),
+    showByRule() {
+      if (this.userLogged.user.userName == "UserTemp" || this.userLogged.companyId == 3)
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "openModal",
+      "hideModal",
+      "removeLoading",
+      "addEvent",
+    ]),
+    saveDocument() {
+      if (this.id) {
+        this.addEvent({ name: "saveDocument" });
+      } else {
+        this.openModal("saveDocument");
+        this.removeLoading(["saveDocument"]);
+      }
+    },
+    saveAs() {
+      this.addEvent({ name: "saveAs" });
+    },
+    showModalConfig() {
+      this.openModal("saveDocument");
+      this.removeLoading(["showModalConfig"]);
+    },
+    showModalLegend() {
+      this.openModal("legenda");
+      this.removeLoading(["showModalLegend"]);
+    },
+    showModalCode() {
+      this.openModal("code");
+      this.removeLoading(["showModalCode"]);
+    },
+    showModalPreview() {
+      this.openModal("preview");
+      this.removeLoading(["showModalPreview"]);
+    },
+    print() {
+      this.removeLoading(["print"]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "documentEditorModified") this.isDisabled = true;
+        if (event.name == "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>