@nixweb/nixloc-ui 1.16.0 → 1.19.0

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

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

@@ -0,0 +1,262 @@
+<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"
+        :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>
+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

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

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

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

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