@nixweb/nixloc-ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,159 @@
+<template>
+    <div class="actions-options">
+        <div class="ao-body">
+            <ScrollBar :minHeight="minHeight" :maxHeight="maxHeight" class="ao-scroll">
+                <div v-if="actionSelected.type == 'options'" class="ao-radios" role="group"
+                    :aria-labelledby="'ao-title'">
+                    <RadioGroup :field="fieldName" :options="filteredOptions" v-model="optionSelected" />
+                </div>
+
+                <div v-else class="ao-empty" aria-live="polite">
+                    <i class="fas fa-inbox"></i>
+                    <span>Nenhuma opção encontrada.</span>
+                </div>
+            </ScrollBar>
+        </div>
+
+        <footer class="ao-footer">
+            <div class="ao-footer-left">
+                <span v-if="optionSelected" class="ao-helper title">
+                    Selecionado: <strong>{{ labelSelected }}</strong>
+                </span>
+            </div>
+            <div class="ao-footer-right">
+                <Button key="select" :disabled="!isValid" :title="btnNextLabel" type="primary" size="medium"
+                    :clicked="next" />
+            </div>
+        </footer>
+    </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ActionsOptions",
+    components: { Button, RadioGroup, ScrollBar },
+    props: {
+        actionSelected: { type: Object, required: true },
+        minHeight: { type: Number, default: 120 },
+        maxHeight: { type: Number, default: 260 },
+        btnNextLabel: { type: String, default: "Avançar" },
+        fieldName: { type: String, default: "group" },
+        searchThreshold: { type: Number, default: 10 },
+        value: String
+    },
+    data() {
+        return {
+            optionSelected: null,
+            query: ""
+        };
+    },
+    computed: {
+        optionsRaw() {
+            const list = (this.actionSelected && Array.isArray(this.actionSelected.options))
+                ? this.actionSelected.options
+                : [];
+            return list.map(o => ({ text: o.text, value: o.value }));
+        },
+        filteredOptions() {
+            const q = (this.query || "").toLowerCase();
+            if (!q) return this.optionsRaw;
+            return this.optionsRaw.filter(opt =>
+                String(opt.text).toLowerCase().includes(q) ||
+                String(opt.value).toLowerCase().includes(q)
+            );
+        },
+        isValid() {
+            return this.optionSelected !== null && this.optionSelected !== undefined && this.optionSelected !== "";
+        },
+        labelSelected() {
+            const found = this.optionsRaw.find(o => o.value === this.optionSelected);
+            return found ? found.text : "";
+        }
+    },
+    watch: {
+        optionSelected: {
+            handler(value) {
+                this.$emit("input", value);
+            },
+            deep: true,
+        },
+        optionsRaw: {
+            immediate: true,
+            handler(list) {
+                if (Array.isArray(list) && list.length === 1) {
+                    this.optionSelected = list[0].value;
+                }
+            }
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "hideModal"]),
+        next() {
+            if (!this.isValid) return;
+            this.openModal("confirm");
+        },
+        enterToNext() {
+            if (this.isValid) this.next();
+        },
+    }
+};
+</script>
+
+<style scoped>
+.actions-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 640px;
+}
+
+.ao-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.ao-scroll {
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    padding: 8px;
+    background: #fff;
+}
+
+.ao-radios {
+    display: grid;
+    gap: 10px;
+}
+
+.ao-empty {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #6b7280;
+    padding: 8px;
+}
+
+.ao-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 8px;
+    position: sticky;
+    bottom: 0;
+}
+
+.ao-footer-right {
+    display: flex;
+    gap: 8px;
+}
+
+.ao-helper {
+    color: #374151;
+}
+</style>

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

@@ -0,0 +1,213 @@
+<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('options')">
+            <ActionsOptions :actionSelected="actionSelected" v-model="optionSelected" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import ActionButtons from "@nixweb/nixloc-ui/src/component/shared/actions/ActionButtons.vue";
+import ActionlHeader from "@nixweb/nixloc-ui/src/component/shared/actions/ActionHeader.vue";
+import ActionsOptions from "@nixweb/nixloc-ui/src/component/shared/actions/ActionsOptions.vue";
+import ActionItemList from "./ActionItemList.vue";
+import ActionErrorContent from "./ActionErrorContent.vue";
+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,
+    },
+    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")
+            );
+        },
+    },
+    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("options");
+            } else {
+                this.openModal("confirm");
+            }
+
+        },
+        async put(id) {
+            const response = await this.putApi(
+                {
+                    url: this.actionSelected.url,
+                    obj: { id: id, any: this.optionSelected },
+                    notNotifyToast: true
+                }
+            );
+            return response;
+        },
+        async remove(id) {
+            const response = await this.deleteAllApi(
+                {
+                    url: this.actionSelected.url,
+                    selected: [id],
+                    notNotifyToast: true
+                }
+            );
+            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);
+
+                    console.log(this.actionSelected);
+                    console.log(result);
+
+
+                    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();
+        },
+    },
+};
+</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;
+}
+
+.bab-alert i {
+    color: #dc2626;
+    font-size: 15px;
+}
+
+.hr {
+    margin: 14px 0;
+    border: none;
+    border-top: 1px solid #eef2f7;
+}
+</style>

package/src/component/template/ListViewWithDataHandler.vue

@@ -1,19 +1,6 @@
 <template>
   <div>
     <div :class="{ 'g-div-molded': showMolded }">
-      <b-row>
-        <b-col sm="12">
-          <div>
-            <!-- <HorizontalFilter v-if="showHorizontalFilter">
-              <div slot="content-filter-horizontal">
-                <slot name="content-filter-horizontal"></slot>
-              </div>
-            </HorizontalFilter>  -->
-            <TableTotalPerPage />
-          </div>
-        </b-col>
-      </b-row>
-      <br>
       <b-row>
         <b-col sm="8">
           <div v-if="templateList.dragAndDrop">
@@ -21,12 +8,21 @@
           </div>
           <TableTotalization :totalization="content.totalization" />
         </b-col>
-        <b-col sm="4">
-          <TableTotalRecords :totalRecords="content.totalRecords" />
+        <b-col sm="4"></b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="12">
+          <div>
+            <TableTotalPerPage :totalRecords="content.totalRecords" />
+          </div>
         </b-col>
       </b-row>
+      <br>
       <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
-      <BarFloating>
+      <BottomActionsBar v-if="actions.length > 0" :selected="selected" @close="addSelected([])">
+        <ActionsSelected :selected="selected" :actions="actions" />
+      </BottomActionsBar>
+      <BarFloating v-else>
         <div class="fixed-bar-options" v-show="selected.length > 0">
           <div class="side-by-side">
             <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
@@ -38,7 +34,7 @@
         </div>
       </BarFloating>
       <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
-        :dragAndDrop="templateList.dragAndDrop">
+        :dragAndDrop="templateList.dragAndDrop" :totalRecords="content.totalRecords">
         <div slot="content-buttons-table">
           <slot name="content-buttons-table"></slot>
         </div>
@@ -65,7 +61,9 @@ import TableTotalPerPage from "@nixweb/nixloc-ui/src/component/shared/TableTotal
 import Table from "../shared/Table.vue";
 import Button from "../forms/Button.vue";
 import FixedBar from "../layout/FixedBar.vue";
+import ActionsSelected from "@nixweb/nixloc-ui/src/component/shared/actions/ActionsSelected.vue";
 import BarFloating from "@nixweb/nixloc-ui/src/component/layout/BarFloating.vue";
+import BottomActionsBar from "@nixweb/nixloc-ui/src/component/layout/BottomActionsBar.vue";
 import TableTotalRecords from "../shared/TableTotalRecords.vue";
 import TableTotalization from "../shared/TableTotalization.vue";
 import HorizontalFilter from "../shared/HorizontalFilter.vue";
@@ -82,6 +80,10 @@ export default {
   props: {
     templateList: Object,
     propsParam: Object,
+    actions: {
+      type: Array,
+      default: [],
+    },
     showMolded: {
       type: Boolean,
       default: true,
@@ -100,11 +102,13 @@ export default {
     }
   },
   components: {
+    ActionsSelected,
     HorizontalFilter,
     TableTotalization,
     TableTotalRecords,
     Confirmation,
     BarFloating,
+    BottomActionsBar,
     Alert,
     Modal,
     Loading,

package/src/component/template/ViewTemplateConfiguration.vue

@@ -7,8 +7,8 @@
         <Search />
         <br />
       </div>
-      <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :showMolded="false"
-        :showHorizontalFilter="showHorizontalFilter" :buttonRemove="buttonRemove">
+      <ListViewWithDataHandler :templateList="templateList" :actions="actions" :propsParam="propsParam"
+        :showMolded="false" :showHorizontalFilter="showHorizontalFilter" :buttonRemove="buttonRemove">
         <div slot="content-buttons-table-header">
           <slot name="content-buttons-table-header"></slot>
         </div>
@@ -36,6 +36,10 @@ export default {
   props: {
     templateList: Object,
     propsParam: Object,
+    actions: {
+      type: Array,
+      default: [],
+    },
     showSearch: {
       type: Boolean,
       default: true,

package/src/component/template/ViewTemplateWithTable.vue

@@ -12,7 +12,7 @@
         <slot name="content-between-search-table"></slot>
         <FilterQuery v-if="filters.length > 0" :filters="filters" v-model="stringFilter" />
         <Molded>
-          <ListViewWithDataHandler :templateList="templateList"
+          <ListViewWithDataHandler :templateList="templateList" :actions="actions"
             :propsParam="{ ...propsParam, stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
             :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
@@ -44,6 +44,10 @@ export default {
     panel: Object,
     templateList: Object,
     propsParam: Object,
+    actions: {
+      type: Array,
+      default: [],
+    },
     filters: {
       type: Array,
       default: [],

package/src/store/modules/generic.js

@@ -418,7 +418,7 @@ export default {
         updateQueryTags: (state, tags) => {
             state.queryTags = tags;
         },
-        _addFilterStorage: (state, obj) => { // está com _addFilterStorage para não ter duplicidade
+        _addFilterStorage: (state, obj) => { // está com _addFilterStorage para não ter duplicidade    
             // função abaixo é para não deixar duplicidade
             const index = state._filterStorage.findIndex(x => x.routeName === obj.routeName);
             if (index !== -1) {
@@ -486,7 +486,9 @@ export default {
                         return response.data;
                     } else {
                         context.commit('addNotifications', response.data.notifications)
-                        context.commit('addToast', 'messageError');
+
+                        if (!params.notNotifyToast)
+                            context.commit('addToast', 'messageError');
                         return response.data;
                     }
                 }, (err) => {
@@ -604,13 +606,19 @@ export default {
                 .then((response) => {
                     if (response.data.success) {
                         context.commit('addMethodExecutedApi', 'deleteAllApi');
-                        context.commit('addToast', 'deleteApiSucesso');
+
+                        if (!params.notNotifyToast)
+                            context.commit('addToast', 'deleteApiSucesso');
+
                         context.commit('removeNotificarions');
                         return response.data;
                     } else {
                         context.commit('addNotifications', response.data.notifications)
                         context.commit('addMethodExecutedApi', 'deleteAllApiErro');
-                        context.commit('addToast', 'messageError');
+
+                        if (!params.notNotifyToast)
+                            context.commit('addToast', 'deleteApiSucesso');
+
                         return response.data;
                     }