@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/template/ViewTemplateImportFile.vue

@@ -0,0 +1,347 @@
+<template>
+  <div>
+    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
+      <div slot="content-main">
+        <br />
+        <div class="div-loading" v-show="loading">
+          <span>
+            {{ msg }}
+          </span>
+          <Loading type="line" :center="false" />
+        </div>
+        <div v-show="!success && !loading">
+          <b-tabs>
+            <b-tab title="Importar">
+              <div>
+                <div v-show="!fileName">
+                  <Alert type="info">
+                    <span>
+                      Selecione o arquivo Excel no formato
+                      <b> .xlsx </b> baseado na planilha
+                      <a :href="urlTemplate" class="text-download">
+                        <b>BAIXAR MODELO</b>
+                      </a>
+                      e aguarde até carregar os dados para conferência.
+                    </span>
+                    <br />
+                    <span>
+                      Até <b> 1000 </b> itens por planilha ou <b> 1MB </b> no
+                      arquivo.
+                    </span>
+                  </Alert>
+                  <br />
+                  <slot></slot>
+                  <div class="div-file">
+                    <FileUpload title="Carregar .xlsx" classIcon="fa-solid fa-file-excel" :container="container"
+                      accepted=".xlsx" allowed=".xlsx" :disabled="true" urlPost="/api/v1/adm/file-upload/upload"
+                      urlRemove="/api/v1/adm/file-upload/delete" :onLoad="successUploadFile" :nameDataBase="fileName"
+                      v-model="fileName" />
+                  </div>
+                </div>
+                <div v-show="fileName && !loading">
+                  <div class="import-icon">
+                    <i class="fas fa-file-import"></i>
+                  </div>
+                  <span v-if="!isValid">
+                    Efetue o <b> mapeamento </b> dos campos e clique em iniciar
+                    validação.
+                  </span>
+                  <span v-else>
+                    Dados <b> validado com sucesso, </b> clique em importar.
+                  </span>
+                  <br />
+                  <div class="div-btn">
+                    <Button _key="btnBack" type="info" title="voltar" classIcon="fa-solid fa-circle-arrow-left"
+                      size="small" :clicked="back" />
+                    <Button v-if="!isValid" _key="btnValidate" type="primary" title="Iniciar Validação" :disabled="false"
+                      classIcon="fa-solid fa-arrow-right-arrow-left" size="small" :clicked="validate" />
+                    <Button v-if="listError.length > 0" _key="btnListError" type="danger" title="Erro(s)"
+                      classIcon="fa-sharp fa-solid fa-triangle-exclamation" size="small" :clicked="openListError" />
+                    <Button v-if="isValid" _key="btnImport" type="success" title="Importar"
+                      classIcon="fa-solid fa-file-import" size="small" :clicked="startImport" />
+                  </div>
+                  <br />
+                  <Alert type="danger" v-if="listError.length > 0">
+                    <span>
+                      Atenção, foram identificados
+                      <b>{{ listError.length }}</b> erro(s), corrija-os!
+                    </span>
+                  </Alert>
+                  <Alert type="info">
+                    <span>
+                      Total de <b> {{ totalRecords }} </b> registro(s), para o
+                      mapeamento serão carregados somente os
+                      <b> 10 </b> primeiros (se houver).
+                    </span>
+                  </Alert>
+                  <TableImport v-if="fileName" :select="select" :headerTable="headerTable" :data="data" />
+                </div>
+              </div>
+            </b-tab>
+            <b-tab title="Histórico">
+              <Button v-if="listError.length > 0" _key="btnListError" type="danger" title="Erro(s)"
+                classIcon="fa-sharp fa-solid fa-triangle-exclamation" size="small" :clicked="openListError" />
+              <ViewTemplateConfiguration :templateList="templateList" :showSearch="false" :showHorizontalFilter="false">
+              </ViewTemplateConfiguration>
+            </b-tab>
+          </b-tabs>
+        </div>
+        <div v-show="success">
+          <div class="div-molded text-center">
+            <Molded>
+              <div class="msg-success">Importação realizada com sucesso!</div>
+              <div class="icon-success">
+                <i class="fa-light fa-circle-check"></i>
+              </div>
+              <div>
+                <Button _key="btnBack" type="info" title="voltar" classIcon="fa-solid fa-circle-arrow-left" size="small"
+                  :clicked="back" />
+              </div>
+            </Molded>
+          </div>
+        </div>
+        <br />
+      </div>
+    </Panel>
+    <Modal title="Erro(s)" :width="900" :height="750" v-show="showModal('listError')">
+      <ListNotifications :listError="listError" />
+    </Modal>
+    <Modal title="Você tem certeza?" :width="500" v-show="showModal('confirmDelete')">
+      <Alert type="warning">
+        <span>
+          Atenção, todos os registros relacionados também serão excluídos, esta
+          ação é irreversível!
+        </span>
+      </Alert>
+      <Confirmation :isModal="false" type="danger" :confirmed="removeSelected" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import ViewTemplateConfiguration from "@nixweb/nixloc-ui/src/component/template/ViewTemplateConfiguration";
+
+import TableImport from "@nixweb/nixloc-ui/src/component/shared/TableImport.vue";
+import ListNotifications from "@nixweb/nixloc-ui/src/component/shared/ListNotifications.vue";
+
+import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "ViewTemplateImportFileView",
+  components: {
+    Panel,
+    Button,
+    Molded,
+    FileUpload,
+    Loading,
+    ListNotifications,
+    ViewTemplateConfiguration,
+    TableImport,
+    Alert,
+    Modal,
+    Confirmation,
+  },
+  props: {
+    panel: Object,
+    templateList: Object,
+    select: Array,
+    container: String,
+    typeImport: Number,
+    urlMapping: String,
+    urlValidate: String,
+    urlImport: String,
+    urlTemplate: String,
+  },
+  data() {
+    return {
+      fileName: "",
+      loading: false,
+      headerTable: [],
+      data: [],
+      totalRecords: 0,
+      listError: [],
+      isValid: false,
+      idRemove: "",
+      success: false,
+      msg: "",
+      loadingImport: false,
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "deleteAllApi"]),
+    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+    successUploadFile() {
+      this.listError = [];
+      this.loading = true;
+      this.msg =
+        "Aguarde, estamos carregando os dados, isso pode levar alguns minutos...";
+      let self = this;
+      setTimeout(function () {
+        self.mapping(self.fileName);
+      }, 1000);
+    },
+    mapping(fileName) {
+      let params = {
+        url: this.urlMapping,
+        obj: {
+          fileName: fileName,
+          container: this.container,
+          typeImport: this.typeImport,
+        },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.loading = false;
+          this.headerTable = response.content.headerTable;
+          this.data = response.content.data;
+          this.totalRecords = response.content.totalRecords;
+        }
+      });
+    },
+    validate() {
+      this.loading = true;
+      this.msg =
+        "Aguarde, estamos validando os dados, isso pode levar alguns minutos...";
+      this.isValid = false;
+      let params = {
+        url: this.urlValidate,
+        obj: {
+          fileName: this.fileName,
+          container: this.container,
+          typeImport: this.typeImport,
+          items: this.headerTable,
+        },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.listError = response.content;
+          if (this.listError.length == 0) this.isValid = true;
+        }
+        this.removeLoading(["btnValidate"]);
+        let self = this;
+        setTimeout(function () {
+          self.loading = false;
+        }, 2000);
+      });
+    },
+    startImport() {
+      this.loading = true;
+      this.msg =
+        "Aguarde, estamos importando os dados, isso pode levar alguns minutos...";
+      let params = {
+        url: this.urlImport,
+        obj: {
+          fileName: this.fileName,
+          container: this.container,
+          typeImport: this.typeImport,
+          items: this.headerTable,
+        },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.success = true;
+          this.isValid = false;
+        }
+        this.removeLoading(["btnImport"]);
+        this.loading = false;
+      });
+    },
+    removeSelected() {
+      let params = {
+        url: this.templateList.urlDeleteAllApi,
+        selected: [this.idRemove],
+      };
+      this.deleteAllApi(params).then((response) => {
+        if (response.success) {
+          this.listError = [];
+          this.hideModal();
+        } else {
+          this.listError = response.content;
+          if (this.listError.length == 0) this.isValid = true;
+          this.hideModal();
+        }
+        this.removeLoading(["confirm"]);
+      });
+    },
+    openListError() {
+      this.openModal("listError");
+      this.removeLoading(["btnListError"]);
+    },
+    back() {
+      this.fileName = "";
+      this.listError = [];
+      this.success = false;
+      this.isValid = false;
+      this.removeLoading(["btnBack"]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "deleteHistoryImport") {
+          this.openModal("confirmDelete");
+          this.idRemove = this.event.data.id;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.import-icon {
+  font-size: 30px;
+  opacity: 0.2;
+  color: #577696;
+}
+
+.div-file {
+  margin-top: 20px;
+}
+
+.div-btn {
+  margin-top: 10px;
+  margin-left: -8px;
+}
+
+.div-loading {
+  margin-top: 10px;
+}
+
+.div-molded {
+  width: 550px;
+  margin: auto;
+}
+
+.text-download {
+  color: #1990ff;
+  cursor: pointer;
+}
+
+.msg-success {
+  font-size: 18px;
+}
+
+.icon-success {
+  font-size: 55px;
+  color: #38a169;
+  margin-top: 10px;
+  margin-bottom: 15px;
+}
+</style>

package/src/component/template/ViewTemplateReportList.vue

@@ -0,0 +1,217 @@
+<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 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"]),
+    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-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>