@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -1,173 +0,0 @@
-<template>
-    <div class="actions-options">
-        <div class="ao-body">
-            <ScrollBar :minHeight="minHeight" :maxHeight="maxHeight" class="ao-scroll">
-                <span class="ao-description title">
-                    {{ actionSelected.description }}
-                </span>
-
-                <div v-if="actionSelected.type == 'component'">
-                    <component :is="actionSelected.component" v-model="optionSelected"></component>
-                </div>
-
-                <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-description {
-    color: #475569;
-    font-weight: 500;
-    font-size: 13px;
-}
-
-.ao-footer-right {
-    display: flex;
-    gap: 8px;
-}
-
-.ao-helper {
-    color: #374151;
-}
-</style>

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

@@ -1,211 +0,0 @@
-<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>
-</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("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();
-        },
-    },
-};
-</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/shared/automation/ActivitiesList.vue

@@ -1,44 +0,0 @@
-<template>
-    <div>
-        <div v-for="activity in listActivity(ruleId)">
-            <div class="div-molded">
-                <SendEmail :activity="activity" v-if="activity.name == 'mail'" v-model="activity.recipient" />
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-
-import SendEmail from '@nixweb/nixloc-ui/src/component/shared/automation/components/SendEmail.vue';
-
-
-import { mapGetters } from 'vuex';
-
-
-export default {
-    name: "ActivitiesList",
-    components: {
-        SendEmail
-    },
-    props: {
-        ruleId: String
-    },
-    computed: {
-        ...mapGetters("automation", ["listActivity"]),
-
-    }
-}
-
-</script>
-<style scoped>
-.div-molded {
-    padding: 10px;
-    margin-top: 10px;
-    margin-left: 50px;
-    margin-right: 50px;
-    min-height: 110px;
-    border-radius: 10px;
-    background-color: #FAFAFC;
-    border: 1px solid #E8EAED;
-}
-</style>

package/src/component/shared/automation/AddRule.vue

@@ -1,61 +0,0 @@
-<template>
-    <div>
-        <b-row>
-            <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-                <SelectRule :options="rules" v-model="selectedRule" />
-            </b-col>
-            <b-col sm="3">
-                <div class="div-btn">
-                    <i class="fa-solid fa-circle-plus" @click="add"></i>
-                </div>
-            </b-col>
-        </b-row>
-         <DynamicComponentList />
-    </div>
-</template>
-  
-<script>
-import SelectRule from "./SelectRule.vue";
-import DynamicComponentList from "./DynamicComponentList.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-    name: "AddRule",
-    components: {
-        SelectRule,
-        DynamicComponentList
-    },
-    props: {
-        rules: Array
-    },
-    data() {
-        return {
-            selectedRule: this.options[0],
-        };
-    },
-    methods: {
-        ...mapMutations("generic", ["addNotifications"]),
-        ...mapMutations("automation", ["addSelectedRules"]),
-        add() {
-            this.selectedRule.id = this.generateId();
-            var selectedRule = JSON.parse(JSON.stringify(this.selectedRule));
-            this.addSelectedRules(selectedRule);
-        },
-        generateId() {
-            return Math.random()
-                .toString(36)
-                .replace(/[^a-z]+/g, "")
-                .substr(0, 5);
-        },
-    }
-};
-</script>
-<style scoped>
-.div-btn {
-    margin-top: -3px;
-    font-size: 25px;
-    color: #577696;
-    cursor: pointer;
-}
-</style>

package/src/component/shared/automation/AutomationBuilder.vue

@@ -1,27 +0,0 @@
-<template>
-    <div>
-        <AddRule :rules="rules" />
-    </div>
-</template>
-  
-<script>
-import AddRule from "./AddRule.vue";
-
-import { mapState } from "vuex";
-
-export default {
-    name: "AutomationBuilder",
-    components: {
-        AddRule,
-    },
-    props: {
-        rules: Array
-    },
-    data() {
-        return {
-
-        };
-    },
-};
-</script>
-  

package/src/component/shared/automation/DynamicComponentList.vue

@@ -1,86 +0,0 @@
-<template>
-    <div class="div-main">
-        <div v-for="(rule, index) in rules">
-            <div class="div-component">
-                <b-row>
-                    <b-col sm="12">
-                        <Molded>
-                            <b-row>
-                                <b-col sm="11">
-                                    <BillingByRent v-if="rule.name == 'billingByRent'" :rule="rule" />
-                                </b-col>
-                                <b-col sm="1">
-                                    <div class="icon-trash text-right" @click="remove(rule.id)">
-                                        <i class="fa-solid fa-trash"></i>
-                                    </div>
-                                </b-col>
-                            </b-row>
-                            <div>
-                                <ActivitiesList :ruleId="rule.id" />
-                            </div>
-                        </Molded>
-                        <div v-if="index != (rules.length - 1) && rules.length > 1" class="div-icon text-center">
-                            <i class="fa-solid fa-arrow-down-from-line"></i>
-                        </div>
-                    </b-col>
-                </b-row>
-            </div>
-        </div>
-    </div>
-</template>
-  
-<script>
-
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-import BillingByRent from "./components/BillingByRent";
-import ActivitiesList from "./ActivitiesList";
-
-import { mapMutations, mapState } from "vuex";
-
-export default {
-    name: "DynamicComponentList",
-    components: {
-        Molded, SelectStatic, BillingByRent, ActivitiesList
-    },
-    props: {
-        DynamicComponentList: Array
-    },
-    data() {
-        return {
-
-        };
-    },
-    computed: {
-        ...mapState("automation", ["rules"]),
-    },
-    methods: {
-        ...mapMutations("automation", ["removeRule"]),
-        remove(id) {
-            this.removeRule(id);
-        }
-    }
-};
-</script>
-<style scoped>
-.div-main {
-    margin-left: 100px;
-    margin-right: 100px;
-    margin-top: 40px;
-}
-
-.div-component {
-    margin-top: 20px
-}
-
-.div-icon {
-    font-size: 20px;
-    margin-top: 15px;
-    color: #347ADB;
-}
-
-.icon-trash {
-    color: red;
-    cursor: pointer;
-}
-</style>

package/src/component/shared/automation/SelectRule.vue

@@ -1,98 +0,0 @@
-<template>
-    <div class="selected-filter" @blur="open = false">
-      <div class="selected" :class="{ open: open }" @click="open = !open">
-        {{ selected }}
-      </div>
-      <div class="items" :class="{ hide: !open }">
-        <div v-for="(options, i) of options" :key="i">
-          <div @click="select(options)">
-            <span :class="options.classCss">
-              <i :class="options.icon"></i>
-              <span> {{ options.title }}</span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    props: ["options", "value"],
-    data() {
-      return {
-        selected: "Selecione uma opção",
-        open: false,
-      };
-    },
-    mounted() {
-      this.$emit("input", this.selected);
-    },
-    methods: {
-      select(options) {
-        this.$emit("input", options);
-        this.selected = options.title;
-        this.open = false;
-      },
-    },
-  };
-  </script>
-  
-  <style scoped>
-  .selected-filter {
-    position: relative;
-    width: 100%;
-    text-align: left;
-    outline: none;
-    height: 40px;
-    line-height: 40px;
-    z-index: 2;
-  }
-  
-  .selected-filter .selected {
-    background-color: white;
-    border: 1px solid #DBDEE0;
-    border-radius: 6px;
-    color: #495057;
-    padding-left: 1em;
-    cursor: pointer;
-    user-select: none;
-  }
-  
-  .selected-filter .selected:after {
-    position: absolute;
-    content: "";
-    top: 19px;
-    right: 1em;
-    width: 0;
-    height: 0;
-    border: 5px solid transparent;
-    border-color: black transparent transparent transparent;
-  }
-  
-  .selected-filter .items {
-    color: black;
-    border-radius: 0px 0px 6px 6px;
-    overflow: hidden;
-    position: absolute;
-    background-color: #fafafc;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    height: 120px;
-    overflow-y: visible;
-    overflow-x: hidden;
-  }
-  
-  .selected-filter .items div {
-    color: black;
-    padding-left: 1em;
-    cursor: pointer;
-    user-select: none;
-  }
-  
-  .hide {
-    display: none;
-  }
-  </style>
-