@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/component/template/ViewTemplateReportPreview.vue

@@ -0,0 +1,521 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      layout="large"
+      :title="panel.title"
+      :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-main">
+        <br />
+        <Loading
+          type="line"
+          :center="false"
+          v-show="loadingSearch"
+        />
+        <div v-show="!showFilter">
+          <div
+            class="div-progress"
+            v-if="liveTotalRecords != baseParams.totalRecords && !loadingSearch && !cancel"
+          >
+            <ProgressBar
+              :text="`Carregando ${liveTotalRecords} registros de ${baseParams.totalRecords}`"
+              :value="liveTotalRecords"
+              :max="baseParams.totalRecords"
+              size="medium"
+            />
+            <div
+              class="text-center cancel"
+              @click="stop"
+            >
+              <i class="fa-solid fa-ban"></i> Cancelar
+            </div>
+          </div>
+          <Molded>
+            <b-row>
+              <b-col sm="6">
+                <div class="side-by-side">
+                  <Button
+                    _key="btnSearchReport"
+                    type="primary"
+                    title="Buscar"
+                    classIcon="fas fa-file-search"
+                    :disabled="btnSearchDisabled || !rulesIsValid"
+                    size="medium"
+                    :clicked="getAll"
+                  />
+                </div>
+                <div class="side-by-side">
+                  <Button
+                    _key="btnSaveReport"
+                    type="success"
+                    title="Salvar"
+                    classIcon="fas fa-save"
+                    size="small"
+                    :disabled="isLoading || btnSaveDisabled || !rulesIsValid"
+                    :params="{ name: 'save', title: 'Salvar', width: 550 }"
+                    :clicked="executeOpenModal"
+                  />
+                </div>
+              </b-col>
+              <b-col
+                class="text-right"
+                sm="6"
+              >
+                <div class="side-by-side">
+                  <Button
+                    _key="btnExecuteOpenModal"
+                    type="info"
+                    title="Campos"
+                    classIcon="fas fa-database"
+                    size="small"
+                    :disabled="isLoading"
+                    :params="{ name: 'fields', title: 'Campos', width: 550 }"
+                    :clicked="executeOpenModal"
+                  />
+                </div>
+                <div class="side-by-side">
+                  <Button
+                    _key="btnExecuteOpenModal"
+                    type="info"
+                    title="Filtros"
+                    classIcon="fas fa-filter"
+                    size="small"
+                    :disabled="isLoading"
+                    :params="{ name: 'rules', title: 'Filtros', width: 900 }"
+                    :clicked="executeShowFilter"
+                  />
+                </div>
+              </b-col>
+            </b-row>
+          </Molded>
+          <div class="div-tags">
+            <Tags eventName="tagReport" />
+          </div>
+          <div
+            class="div-required"
+            v-show="!rulesIsValid"
+          >
+            <Alert
+              type="info"
+              v-for="rule in rulesRequired"
+              :key="rule.id"
+            >
+              É necessário informar o filtro
+              <span class="filter-required">{{ rule.title }}</span>, clique no botão "Filtros" para adicionar.
+            </Alert>
+          </div>
+          <div
+            class="body-report"
+            v-show="showBodyReport && rulesIsValid"
+          >
+            <Report
+              :minHeight="700"
+              :header="content.headerTable"
+              :data="content.data"
+              :totalization="content.totalization"
+            />
+          </div>
+        </div>
+        <div v-show="showFilter">
+          <Rules />
+          <br />
+          <div class="text-center">
+            <Button
+              _key="btnCancelFilter"
+              type="info"
+              classIcon="fa-solid fa-arrow-left"
+              size="small"
+              :clicked="executeHideFilter"
+            />
+            <Button
+              _key="btnApplyFilter"
+              type="primary"
+              title="Aplicar"
+              classIcon="fas fa-filter"
+              size="small"
+              :clicked="executeHideFilter"
+            />
+          </div>
+        </div>
+      </div>
+    </Panel>
+
+    <Modal
+      :title="modalOptions.title"
+      :width="modalOptions.width"
+      v-show="showModal('templateReport')"
+    >
+      <ReportCreateUpdate
+        :module="panel.module"
+        v-show="modalOptions.name == 'save'"
+      />
+      <Fields v-if="modalOptions.name == 'fields'" />
+      <div
+        class="text-right btn-apply"
+        v-show="modalOptions.name == 'fields' || modalOptions.name == 'rules'"
+      >
+        <Button
+          _key="btnApplyFieldsAndRules"
+          type="primary"
+          title="Aplicar"
+          classIcon="fas fa-filter"
+          size="small"
+          :clicked="applyFieldsAndRules"
+        />
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Report from "../shared/Report.vue";
+
+import ReportCreateUpdate from "@nixweb/nixloc-ui/src/component/template/ReportCreateUpdate.vue";
+import Fields from "@nixweb/nixloc-ui/src/component/shared/query-builder/Fields.vue";
+import Rules from "@nixweb/nixloc-ui/src/component/shared/query-builder/Rules.vue";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TemplateReportView",
+  props: {
+    panel: Object,
+    templateList: Object,
+    templateReport: Object,
+  },
+  components: {
+    Panel,
+    Molded,
+    ProgressBar,
+    Button,
+    Modal,
+    Alert,
+    Tags,
+    Loading,
+    Report,
+    ReportCreateUpdate,
+    Fields,
+    Rules,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      urlGetById: "api/v1/shared/report/get-by-id",
+      content: {
+        headerTable: [],
+        data: [],
+        totalPages: [],
+        totalization: {},
+        noDataReturned: false,
+      },
+      baseParams: {
+        currentPage: 0,
+        totalPerPage: 100,
+        totalPage: 0,
+        totalRecords: 0,
+      },
+      modalOptions: {
+        name: "",
+        title: "",
+        width: 0,
+      },
+      btnSearchDisabled: false,
+      loadingSearch: false,
+      btnSaveDisabled: true,
+      isLoading: false,
+      showBodyReport: false,
+      showFilter: false,
+      cancel: false,
+    };
+  },
+  mounted() {
+    this.addReport({
+      id: this.id,
+      fields: this.templateReport.fields,
+      rules: this.templateReport.rules,
+    });
+
+    this.clearTotalization();
+
+    if (this.id) this.getById();
+
+    if (!this.id) this.removeLoadingWithTime();
+  },
+  beforeDestroy() {
+    this.removeInitialReportCustom();
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "getApiOdata"]),
+    ...mapActions("report", [
+      "addReport",
+      "addInitialReportCustom",
+      "removeInitialReportCustom",
+    ]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "openModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    ...mapMutations("report", ["clearTotalization"]),
+    getById() {
+      let params = { url: this.urlGetById, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        const query = JSON.parse(response.content.query);
+        let report = {
+          selectedFields: query.selectedFields,
+          selectedRules: query.selectedRules,
+        };
+        this.addInitialReportCustom(report);
+        this.removeLoadingWithTime();
+      });
+    },
+    getAll() {
+      this.btnSearchDisabled = true;
+      this.loadingSearch = true;
+      this.cancel = false;
+
+      if (this.rulesIsValid) {
+        this.getTotalRecords();
+        this.removeLoading(["btnSearchReport"]);
+
+        if (this.oDataFilter.totalization) this.totalization();
+        if (!this.oDataFilter.totalization) this.content.totalization = {};
+      }
+    },
+    getTotalRecords() {
+      let paramsQuery = { url: this.urlQuery };
+      this.resetData();
+      this.getApiOdata(paramsQuery).then((response) => {
+        this.isLoading = true;
+        let totalRecords = response["@odata.count"];
+        this.loadingSearch = false;
+
+        if (totalRecords == 0) this.noDataReturned = true;
+
+        this.baseParams.totalRecords = totalRecords;
+        this.baseParams.totalPage = Math.ceil(
+          totalRecords / this.baseParams.totalPerPage
+        );
+
+        if (this.baseParams.totalPage <= 1)
+          this.loadingOnlyIfOnePage(response.value);
+        if (this.baseParams.totalPage > 1) this.loadingOnlyIfManyPages();
+
+        this.content.headerTable = this.headerTable;
+        this.showBodyReport = true;
+      });
+    },
+    totalization() {
+      let params = { url: this.urlTotalization };
+      this.getApiOdata(params).then((response) => {
+        const result = Object.entries(response[0]);
+        this.content.totalization = result;
+      });
+    },
+    loadingOnlyIfOnePage(data) {
+      this.content.data = data;
+      this.btnSearchDisabled = true;
+      let self = this;
+      setTimeout(function () {
+        self.isLoading = false;
+      }, 100);
+    },
+    loadingOnlyIfManyPages() {
+      let seq = 0;
+      while (seq <= this.baseParams.totalPage - 1) {
+        this.content.totalPages.push(seq);
+        seq++;
+      }
+    },
+    getAllManyPages() {
+      let paramsQuery = { url: this.urlQuery };
+      this.getApiOdata(paramsQuery).then((response) => {
+        let self = this;
+        response.value.forEach(function (obj) {
+          self.content.data.push(obj);
+        });
+        this.content.totalPages.pop();
+        this.baseParams.currentPage++;
+      });
+    },
+    resetData() {
+      this.isLoading = false;
+      this.content.data = [];
+      this.content.totalPages = [];
+      this.baseParams.currentPage = 0;
+      this.baseParams.totalRecords = 0;
+      this.noDataReturned = false;
+    },
+    executeOpenModal(params) {
+      if (this.id && params.name == "save") {
+        this.addEvent({ name: "saveReport" });
+      } else {
+        this.modalOptions = params;
+        this.openModal("templateReport");
+        this.removeLoading(["btnExecuteOpenModal", "btnSaveReport"]);
+      }
+    },
+    executeShowFilter() {
+      this.showFilter = true;
+      this.removeLoading(["btnExecuteOpenModal", "btnSaveReport"]);
+    },
+    executeHideFilter() {
+      this.showFilter = false;
+      this.removeLoading(["btnCancelFilter", "btnApplyFilter"]);
+    },
+    applyFieldsAndRules() {
+      this.hideModal("templateReport");
+      this.removeLoading(["btnApplyFieldsAndRules"]);
+    },
+    removeLoadingWithTime() {
+      let self = this;
+      setTimeout(function () {
+        self.btnSaveDisabled = true;
+        self.removeLoading(["panel"]);
+      }, 350);
+    },
+    stop() {
+      this.cancel = true;
+      this.btnSearchDisabled = false;
+      this.btnSaveDisabled = false;
+      this.isLoading = false;
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapGetters("report", [
+      "headerTable",
+      "oDataFilter",
+      "oDataSelect",
+      "oDataOrderBy",
+      "rulesIsValid",
+      "rulesRequired",
+    ]),
+    ...mapState("report", ["report"]),
+    urlQuery() {
+      let skip = this.baseParams.currentPage * this.baseParams.totalPerPage;
+      let baseUrl = `${this.templateList.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.query}&$skip=${skip}&$top=${this.baseParams.totalPerPage}&$count=true`;
+      return baseUrl.replace("&&", "&");
+    },
+    urlTotalization() {
+      let query = this.oDataFilter.query
+        ? `$apply=filter(${this.oDataFilter.query.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${
+        this.templateList.urlGetApi
+      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
+      return baseUrl;
+    },
+    liveTotalRecords() {
+      return this.content.data.length;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "savedReport") this.btnSaveDisabled = true;
+      },
+      deep: true,
+    },
+    "content.totalPages": {
+      handler(totalPages) {
+        if (totalPages.length > 0 && !this.cancel) {
+          let self = this;
+          setTimeout(function () {
+            self.getAllManyPages();
+          }, 1000);
+        }
+        if (totalPages.length == 1) this.isLoading = false;
+      },
+      deep: true,
+    },
+    oDataFilter: {
+      handler() {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
+        this.showBodyReport = false;
+        this.resetData();
+      },
+      deep: true,
+    },
+    oDataSelect: {
+      handler() {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
+      },
+      deep: true,
+    },
+    oDataOrderBy: {
+      handler() {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button {
+  padding-bottom: 15px;
+}
+
+.div-progress {
+  margin-bottom: 10px;
+}
+
+.div-sem-data {
+  margin-top: 20px;
+}
+
+.div-table {
+  margin-top: 20px;
+}
+
+.div-separacao {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+.div-Totalization {
+  margin-top: 20px;
+}
+
+.div-tags {
+  margin-top: 15px;
+}
+
+.div-required {
+  margin-top: 20px;
+}
+
+.filter-required {
+  font-weight: 500;
+}
+
+.btn-apply {
+  margin-top: 10px;
+}
+
+.body-report {
+  margin-top: 30px;
+}
+
+.cancel {
+  color: red;
+  cursor: pointer;
+}
+</style>

package/src/component/template/ViewTemplateSelectOption.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Panel :module="panel.module" :title="panel.title" :showFilter="panel.showFilter" :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons">
+      <div slot="content-main">
+        <SelectOption :title="title" :titleSize="18" buttonSize="large" buttonClassIcon="fas fa-arrow-circle-right"
+          :width="140" :height="130" :options="options" v-model="selectedOption" :clickedNext="execute" />
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import SelectOption from "@nixweb/nixloc-ui/src/component/shared/SelectOption.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateSelectOption",
+  components: { Panel, SelectOption },
+  props: {
+    title: String,
+    panel: Object,
+    options: Array,
+    clickedNext: Function,
+  },
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.removeLoading(["panel"]);
+    }, 350);
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    execute() {
+      if (this.clickedNext) this.clickedNext(this.selectedOption);
+    },
+  },
+};
+</script>

package/src/component/template/ViewTemplateWithSalveCancel.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showFilter="panel.showFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-buttons">
+        <slot name="content-buttons"></slot>
+      </div>
+      <div slot="content-main">
+        <slot name="content-main"></slot>
+      </div>
+    </Panel>
+    <SaveCancel :formName="panel.formName" />
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import SaveCancel from "@nixweb/nixloc-ui/src/component/shared/SaveCancel";
+
+export default {
+  name: "ViewTemplateCrud",
+  components: { Panel, SaveCancel },
+  props: {
+    panel: Object,
+  },
+};
+</script>

package/src/component/template/ViewTemplateWithTable.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
+      <div slot="content-filter-vertical">
+        <slot name="content-filter-vertical"></slot>
+      </div>
+      <div slot="content-buttons">
+        <slot name="content-buttons"></slot>
+      </div>
+      <div slot="content-main">
+        <slot name="content-between-search-table"></slot>
+        <FilterQuery v-if="filters.length > 0" :filters="filters" v-model="stringFilter" />
+        <Molded>
+          <ListViewWithDataHandler :templateList="templateList" :actions="actions"
+            :propsParam="{ ...propsParam, stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
+            :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>
+        </Molded>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ListViewWithDataHandler from "@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue";
+import FilterQuery from '@nixweb/nixloc-ui/src/component/shared/filter-builder/FilterQuery.vue'
+
+export default {
+  name: "TemplateView",
+  components: { Panel, Molded, ListViewWithDataHandler, FilterQuery },
+  props: {
+    panel: Object,
+    templateList: Object,
+    propsParam: Object,
+    actions: {
+      type: Array,
+      default: [],
+    },
+    filters: {
+      type: Array,
+      default: [],
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      stringFilter: [],
+    }
+  },
+};
+</script>

package/src/component/template/model/Report.js

@@ -0,0 +1,6 @@
+export default class Report {
+    constructor() {
+        this.id = "";
+        this.name = "";
+    }
+}