@nixweb/nixloc-ui 1.15.0 → 1.17.0

package/src/component/shared/actions/ActionsSelected.vue

@@ -1,39 +1,88 @@
 <template>
-    <div>
-        <div v-if="selected.length > 50" class="bab-alert">
-            <i class="fas fa-triangle-exclamation"></i>
-            <span> Limite máximo de 50 itens!</span>
-        </div>
-
-        <div v-else>
-            <ActionButtons :actions="actions" @confirm="confirm" />
-        </div>
-
-        <Modal title="Tem certeza que deseja executar?" :showValidation="false" :closeOnEsc="false" :closeButton="false"
-            :width="600" :height="750" v-if="showModal('confirm')">
-            <ActionlHeader :description="actionSelected.description" :total="selected.length"
-                :done="selectedDone.length" :errors="errorCount" />
-
-            <ActionItemList :selected="selected" :status="status" :errorsMap="errorsMap"
-                @show-error="openErrorDetails" />
-
-            <hr class="hr" />
-
-            <ActionFooter :isFinished="isFinished" :processing="processing" :selected="selected" @ok="ok"
-                @cancel="hideModal" @finish="finished" />
-        </Modal>
-
-        <Modal v-if="errorDetails.open" :title="`Falha — Item ${errorDetails.index + 1}`" :showValidation="false"
-            :closeOnEsc="false" :closeButton="false" :width="520" :height="360">
-            <ActionErrorContent :id="errorDetails.id" :index="errorDetails.index" :messages="errorsMap[errorDetails.id]"
-                @close="closeErrorDetails" />
-        </Modal>
-
-        <Modal title="Selecione a opção desejada" :showValidation="false" :closeOnEsc="true" :closeButton="true"
-            :width="600" :height="750" v-if="showModal('actionsOptions')">
-            <ActionsOptions :actionSelected="actionSelected" v-model="optionSelected" />
-        </Modal>
+  <div>
+    <div
+      v-if="selected.length > 50"
+      class="bab-alert"
+    >
+      <i class="fas fa-triangle-exclamation"></i>
+      <span> Limite máximo de 50 itens!</span>
     </div>
+
+    <div v-else>
+      <ActionButtons
+        :actions="actions"
+        @confirm="confirm"
+      />
+    </div>
+
+    <Modal
+      title="Tem certeza que deseja executar?"
+      :showValidation="false"
+      :closeOnEsc="false"
+      :closeButton="false"
+      :width="600"
+      :height="750"
+      v-if="showModal('confirm')"
+    >
+      <ActionlHeader
+        :description="actionSelected.description"
+        :total="selected.length"
+        :done="selectedDone.length"
+        :errors="errorCount"
+      />
+
+      <ActionItemList
+        :selected="selected"
+        :status="status"
+        :errorsMap="errorsMap"
+        @show-error="openErrorDetails"
+      />
+
+      <hr class="hr" />
+
+      <ActionFooter
+        :isFinished="isFinished"
+        :processing="processing"
+        :selected="selected"
+        :errorCount="errorCount"
+        @ok="ok"
+        @cancel="hideModal"
+        @finish="finished"
+      />
+    </Modal>
+
+    <Modal
+      v-if="errorDetails.open"
+      :title="`Falha — Item ${errorDetails.index + 1}`"
+      :showValidation="false"
+      :closeOnEsc="false"
+      :closeButton="false"
+      :width="520"
+      :height="360"
+    >
+      <ActionErrorContent
+        :id="errorDetails.id"
+        :index="errorDetails.index"
+        :messages="errorsMap[errorDetails.id]"
+        @close="closeErrorDetails"
+      />
+    </Modal>
+
+    <Modal
+      title="Selecione a opção desejada"
+      :showValidation="false"
+      :closeOnEsc="true"
+      :closeButton="true"
+      :width="600"
+      :height="750"
+      v-if="showModal('actionsOptions')"
+    >
+      <ActionsOptions
+        :actionSelected="actionSelected"
+        v-model="optionSelected"
+      />
+    </Modal>
+  </div>
 </template>
 
 <script>
@@ -51,161 +100,163 @@ import ActionFooter from "./ActionFooter.vue";
 import { mapGetters, mapMutations, mapActions } from "vuex";
 
 export default {
-    name: "ActionsSelected",
-    components: {
-        Button,
-        Modal,
-        ScrollBar,
-        ActionButtons,
-        ActionlHeader,
-        ActionsOptions,
-        ActionItemList,
-        ActionErrorContent,
-        ActionFooter,
+  name: "ActionsSelected",
+  components: {
+    Button,
+    Modal,
+    ScrollBar,
+    ActionButtons,
+    ActionlHeader,
+    ActionsOptions,
+    ActionItemList,
+    ActionErrorContent,
+    ActionFooter,
+  },
+  props: {
+    actions: { type: Array, default: () => [] },
+    selected: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      actionSelected: {},
+      optionSelected: "",
+      selectedDone: [],
+      processing: false,
+      status: {},
+      errorsMap: {},
+      errorDetails: { open: false, id: null, index: -1 },
+      errorIds: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal"]),
+    errorCount() {
+      return Object.values(this.status).filter((s) => s === "error").length;
+    },
+    isFinished() {
+      if (!this.selected.length) return false;
+      const statuses = Object.values(this.status);
+      return (
+        statuses.length === this.selected.length &&
+        statuses.every((s) => s === "done" || s === "error")
+      );
     },
-    props: {
-        actions: { type: Array, default: () => [] },
-        selected: { type: Array, default: () => [] },
+  },
+  methods: {
+    ...mapActions("generic", ["putApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "openModal",
+      "hideModal",
+      "executedSearch",
+      "addSelected",
+      "addEvent",
+    ]),
+    confirm(params) {
+      this.actionSelected = params;
+      this.selectedDone = [];
+      this.processing = false;
+      this.status = {};
+      this.errorsMap = {};
+      this.errorIds = [];
+      this.selected.forEach((id) => this.$set(this.status, id, "waiting"));
+
+      if (params.type != "delete") {
+        this.openModal("actionsOptions");
+      } else {
+        this.openModal("confirm");
+      }
+    },
+    async put(id) {
+      const response = await this.putApi({
+        url: this.actionSelected.url,
+        obj: { id: id, any: this.optionSelected },
+        notNotifyToast: true,
+      });
+      this.addEvent({ name: "actionsUpdated" });
+      return response;
+    },
+    async remove(id) {
+      const response = await this.deleteAllApi({
+        url: this.actionSelected.url,
+        selected: [id],
+        notNotifyToast: true,
+      });
+      this.addEvent({ name: "actionsUpdated" });
+      return response;
+    },
+    async ok() {
+      if (this.processing) return;
+      this.processing = true;
+
+      for (let i = 0; i < this.selected.length; i++) {
+        const id = this.selected[i];
+        this.$set(this.status, id, "running");
+
+        try {
+          let result = null;
+          if (this.actionSelected.method == "delete")
+            result = await this.remove(id);
+
+          if (this.actionSelected.method == "put") result = await this.put(id);
+
+          if (result?.success) {
+            this.$set(this.status, id, "done");
+            this.selectedDone.push(id);
+          } else {
+            const msgs = (result?.notifications || [])
+              .map((n) => n && n.message)
+              .filter(Boolean);
+            this.$set(this.errorsMap, id, msgs);
+            this.$set(this.status, id, "error");
+            this.errorIds.push(id);
+          }
+        } catch {
+          this.$set(this.errorsMap, id, [
+            "Falha inesperada ao comunicar com a API.",
+          ]);
+          this.$set(this.status, id, "error");
+          this.errorIds.push(id);
+        }
+      }
+
+      this.processing = false;
     },
-    data() {
-        return {
-            actionSelected: {},
-            optionSelected: "",
-            selectedDone: [],
-            processing: false,
-            status: {},
-            errorsMap: {},
-            errorDetails: { open: false, id: null, index: -1 },
-            errorIds: [],
-        };
+    openErrorDetails({ id, index }) {
+      this.errorDetails = { open: true, id, index };
     },
-    computed: {
-        ...mapGetters("generic", ["showModal"]),
-        errorCount() {
-            return Object.values(this.status).filter((s) => s === "error").length;
-        },
-        isFinished() {
-            if (!this.selected.length) return false;
-            const statuses = Object.values(this.status);
-            return (
-                statuses.length === this.selected.length &&
-                statuses.every((s) => s === "done" || s === "error")
-            );
-        },
+    closeErrorDetails() {
+      this.errorDetails = { open: false, id: null, index: -1 };
     },
-    methods: {
-        ...mapActions("generic", ["putApi", "deleteAllApi"]),
-        ...mapMutations("generic", ["openModal", "hideModal", "executedSearch", "addSelected", "addEvent"]),
-        confirm(params) {
-            this.actionSelected = params;
-            this.selectedDone = [];
-            this.processing = false;
-            this.status = {};
-            this.errorsMap = {};
-            this.errorIds = [];
-            this.selected.forEach((id) => this.$set(this.status, id, "waiting"));
-
-            if (params.type != "delete") {
-                this.openModal("actionsOptions");
-            } else {
-                this.openModal("confirm");
-            }
-
-        },
-        async put(id) {
-            const response = await this.putApi(
-                {
-                    url: this.actionSelected.url,
-                    obj: { id: id, any: this.optionSelected },
-                    notNotifyToast: true
-                }
-            );
-            this.addEvent({ name: "actionsUpdated" });
-            return response;
-        },
-        async remove(id) {
-            const response = await this.deleteAllApi(
-                {
-                    url: this.actionSelected.url,
-                    selected: [id],
-                    notNotifyToast: true
-                }
-            );
-            this.addEvent({ name: "actionsUpdated" });
-            return response;
-        },
-        async ok() {
-            if (this.processing) return;
-            this.processing = true;
-
-            for (let i = 0; i < this.selected.length; i++) {
-                const id = this.selected[i];
-                this.$set(this.status, id, "running");
-
-                try {
-                    let result = null;
-                    if (this.actionSelected.method == "delete")
-                        result = await this.remove(id);
-
-                    if (this.actionSelected.method == "put")
-                        result = await this.put(id);
-
-                    if (result?.success) {
-                        this.$set(this.status, id, "done");
-                        this.selectedDone.push(id);
-                    } else {
-                        const msgs = (result?.notifications || [])
-                            .map((n) => n && n.message)
-                            .filter(Boolean);
-                        this.$set(this.errorsMap, id, msgs);
-                        this.$set(this.status, id, "error");
-                        this.errorIds.push(id);
-                    }
-                } catch {
-                    this.$set(this.errorsMap, id, ["Falha inesperada ao comunicar com a API."]);
-                    this.$set(this.status, id, "error");
-                    this.errorIds.push(id);
-                }
-            }
-
-            this.processing = false;
-        },
-        openErrorDetails({ id, index }) {
-            this.errorDetails = { open: true, id, index };
-        },
-        closeErrorDetails() {
-            this.errorDetails = { open: false, id: null, index: -1 };
-        },
-        finished() {
-            this.hideModal();
-            this.addEvent({ name: "deselectAll" });
-            this.addSelected(this.errorIds);
-            this.executedSearch();
-        },
+    finished() {
+      this.hideModal();
+      this.addEvent({ name: "deselectAll" });
+      this.addSelected(this.errorIds);
+      this.executedSearch();
     },
+  },
 };
 </script>
 
 <style scoped>
 .bab-alert {
-    box-sizing: border-box;
-    margin-bottom: 10px;
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 8px 15px;
-    border-radius: 10px;
-    background-color: #fff1f0;
-    border: 1px solid #ffa39e;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  padding: 8px 15px;
+  border-radius: 10px;
+  background-color: #fff1f0;
+  border: 1px solid #ffa39e;
 }
 
 .bab-alert i {
-    color: #dc2626;
-    font-size: 15px;
+  color: #dc2626;
+  font-size: 15px;
 }
 
 .hr {
-    margin: 14px 0;
-    border: none;
-    border-top: 1px solid #eef2f7;
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid #eef2f7;
 }
 </style>

package/src/component/template/ViewTemplateReportPreview.vue

@@ -1,15 +1,35 @@
 <template>
   <div>
-    <Panel :module="panel.module" layout="large" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
-      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
+    <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" />
+        <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">
+          <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>
@@ -17,25 +37,56 @@
             <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" />
+                  <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"
+                  <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" />
+                    :params="{ name: 'save', title: 'Salvar', width: 550 }"
+                    :clicked="executeOpenModal"
+                  />
                 </div>
               </b-col>
-              <b-col class="text-right" sm="6">
+              <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" />
+                  <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" />
+                  <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>
@@ -43,36 +94,77 @@
           <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">
+          <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
+            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" />
+            <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'" />
+    <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
+        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>
@@ -169,7 +261,6 @@ export default {
       "addReport",
       "addInitialReportCustom",
       "removeInitialReportCustom",
-
     ]),
     ...mapMutations("generic", [
       "addEvent",
@@ -177,9 +268,7 @@ export default {
       "hideModal",
       "removeLoading",
     ]),
-    ...mapMutations("report", [
-      "clearTotalization"
-    ]),
+    ...mapMutations("report", ["clearTotalization"]),
     getById() {
       let params = { url: this.urlGetById, obj: { id: this.id } };
       this.getApi(params).then((response) => {
@@ -209,7 +298,6 @@ export default {
       let paramsQuery = { url: this.urlQuery };
       this.resetData();
       this.getApiOdata(paramsQuery).then((response) => {
-
         this.isLoading = true;
         let totalRecords = response["@odata.count"];
         this.loadingSearch = false;
@@ -303,7 +391,7 @@ export default {
       this.btnSearchDisabled = false;
       this.btnSaveDisabled = false;
       this.isLoading = false;
-    }
+    },
   },
   computed: {
     ...mapGetters("generic", ["showModal", "event"]),
@@ -325,8 +413,9 @@ export default {
       let query = this.oDataFilter.query
         ? `$apply=filter(${this.oDataFilter.query.replace("$filter=", "")})/`
         : "$apply=";
-      let baseUrl = `${this.templateList.urlGetApi
-        }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
+      let baseUrl = `${
+        this.templateList.urlGetApi
+      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
       return baseUrl;
     },
     liveTotalRecords() {