@nixweb/nixloc-ui 1.17.0 → 1.20.0

package/@nixweb/nixloc-ui/src/component/template/ViewTemplateImportFile.vue

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