@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/template/ViewTemplateReportList.vue

@@ -1,240 +0,0 @@
-<template>
-  <div>
-    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
-      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
-      <div slot="content-main">
-        <b-row>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
-            <div><i class="fas fa-file-alt icon-report-title icon-saved"></i> <span class="title">Personalizado</span>
-            </div>
-            <hr class="hr" />
-            <div class="div-molded" v-for="report in allReports.saved">
-              <div>
-                <Molded :borderRadius="12">
-                  <b-row>
-                    <b-col sm="1">
-                      <i class="fas fa-file-alt icon-report"></i>
-                    </b-col>
-                    <b-col sm="10" @click="navegateTo(report)">
-                      <div class="title-report">{{ report.name }}</div>
-                    </b-col>
-                    <b-col sm="1">
-                      <Confirmation title="Deseja excluir?" type="danger" :data="report" :confirmed="confirmDelete">
-                        <div class="text-right">
-                          <i class="fas fa-times-circle icon-remove"></i>
-                        </div>
-                      </Confirmation>
-                    </b-col>
-                  </b-row>
-                </Molded>
-              </div>
-            </div>
-          </b-col>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
-            <div>
-              <i class="fas fa-file-chart-line icon-report-title icon-default"></i> <span class="title">Padrão</span>
-            </div>
-            <hr class="hr" />
-            <div class="div-molded" v-for="report in allReports.default">
-              <div>
-                <Molded :borderRadius="12">
-                  <b-row>
-                    <b-col sm="1">
-                      <i class="fas fa-file-alt icon-report"></i>
-                    </b-col>
-                    <b-col sm="11" @click="navegateTo(report)">
-                      <div v-if="report.showNewUntil && showNewUntil(report.showNewUntil)" class="side-by-side div-new">
-                        <span>Novo</span>
-                      </div>
-                      <div class="title-report side-by-side">{{ report.name }}</div>
-                      <div><span class="description-report">{{ report.description }}</span></div>
-                    </b-col>
-                  </b-row>
-                </Molded>
-              </div>
-            </div>
-          </b-col>
-        </b-row>
-      </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 Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation";
-
-import { _default, mapState, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "TemplateReportListView",
-  components: { Panel, Molded, Confirmation },
-  props: {
-    panel: Object,
-    reports: Object,
-  },
-  data() {
-    return {
-      allReports: { saved: [] },
-      urlGetAll: "/api/v1/shared/report/get-all",
-      urlDelete: "/api/v1/shared/report/delete",
-    };
-  },
-  computed: {
-    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
-
-  },
-  mounted() {
-    this.getAll();
-    //this.removeLoading(["panel"]);
-    this.allReports = JSON.parse(JSON.stringify(this.reports)); // remove observable
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    ...mapActions("generic", ["getApi", "deleteAllApi"]),
-    showNewUntil(dateStr) {
-      const [day, month, year] = dateStr.split('/');
-      const inputDate = new Date(year, month - 1, day);
-      const today = new Date();
-
-      inputDate.setHours(0, 0, 0, 0);
-      today.setHours(0, 0, 0, 0);
-
-      return today < inputDate;
-    },
-    getAll() {
-      let obj = { module: this.panel.module };
-      let params = { url: this.urlGetAll, obj: obj };
-      this.getApi(params).then((response) => {
-        this.allReports.saved = [];
-        let self = this;
-        response.content.data.forEach((item) => {
-          const query = JSON.parse(item.query);
-          let obj = {
-            id: item.id,
-            name: item.name,
-            routeName: query.routeName,
-          };
-          self.allReports.saved.push(obj);
-        });
-        this.removeLoading(["panel"]);
-      });
-    },
-    navegateTo(report) {
-      this.$router.push({
-        name: report.routeName,
-        params: { id: report.id, name: report.name },
-      });
-    },
-    confirmDelete(data) {
-      let selected = [];
-      selected.push(data.id);
-
-      let params = {
-        url: this.urlDelete,
-        selected: selected,
-      };
-
-      this.deleteAllApi(params).then((reponse) => {
-        if (reponse.success) this.getAll();
-      });
-    },
-  },
-  watch: {
-    executedSearch: function () {
-      let _default = [];
-      let saved = [];
-      let self = this;
-      setTimeout(function () {
-        self.allReports.default.forEach(function (item) {
-          if (self.search.filter.id == "equal") {
-            if (item.name == self.search.content) _default.push(item);
-          }
-
-          if (self.search.filter.id == "contains") {
-            if (item.name.includes(self.search.content)) _default.push(item);
-          }
-        });
-
-        self.allReports.saved.forEach(function (item) {
-          if (self.search.filter.content == "equal") {
-            if (item.name == self.search.content) saved.push(item);
-          }
-
-          if (self.search.filter.content == "contains") {
-            if (item.name.includes(self.search.content)) saved.push(item);
-          }
-        });
-
-        self.allReports.saved = saved;
-        self.allReports.default = _default;
-
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-    clearedSearch: function () {
-      let self = this;
-      setTimeout(function () {
-        self.allReports = self.reports;
-        self.getAll();
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.icon-saved {
-  color: #94aa2a;
-  font-size: 20px;
-}
-
-.icon-default {
-  font-size: 20px;
-}
-
-.icon-remove {
-  color: red;
-}
-
-.icon-report {
-  font-size: 25px;
-  opacity: 0.2;
-  color: #577696;
-}
-
-.div-new {
-  background-color: #0A36DB;
-  font-size: 11px;
-  border-radius: 20px;
-  padding: 1px 8px 2px 8px;
-  margin-right: 10px;
-  color: white !important;
-}
-
-.div-molded {
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-
-.div-molded:hover {
-  background-color: #fafafc;
-}
-
-.description {
-  font-size: 13.5px;
-  color: rgb(117, 117, 117);
-}
-
-.hr {
-  background: #fafafc !important;
-  height: 1px !important;
-}
-
-.description-report {
-  font-size: 13px;
-  color: rgb(110, 110, 110);
-}
-</style>

package/src/component/template/ViewTemplateReportPreview.vue

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