@nixweb/nixloc-ui 1.16.0 → 1.17.0

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>

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

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

package/src/component/shared/automation/components/BillingByRent.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div class="title">
+            <i class="fa-solid fa-file-invoice"></i>
+            Gerar Faturamento
+        </div>
+        <div class="div-task">
+            <b-row>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="4">
+                    <SelectStatic title="Frequência" :required="true" :data="[
+                            { content: 'Semanal', id: 'weekly' },
+                            { content: 'Quinzenal', id: 'fortnightly' },
+                            { content: 'Mensal', id: 'monthly' },
+                            { content: 'Anual', id: 'yearly' },
+                        ]" :markFormDirty="true" v-model="rule.frequency" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="3">
+                    <InputDecimal title="Valor" field="value" :required="true" :markFormDirty="true" :maxLength="5"
+                        type="float" v-model="rule.amount" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="2">
+                    <DateTime title="Data Início" :required="true" field="dateStart" format="DD/MM/YYYY" type="date"
+                        placeholder v-model="rule.dateStart" />
+                </b-col>
+                <b-col xs="12" sm="12" md="12" lg="12" xl="2">
+                    <DateTime title="Data Fim" field="dateEnd" format="DD/MM/YYYY" type="date" placeholder
+                        v-model="rule.dateEnd" />
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col xs="12" sm="12" md="12" lg="8" xl="6">
+                    <SelectStatic title="Atividade" :data="[
+                            { content: 'Enviar E-mail', name: 'mail', recipient: '' },
+                            { content: 'Enviar WhatsApp', name: 'whatsapp', recipient: '' },
+                        ]" :markFormDirty="false" v-model="activity" />
+                </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>
+        </div>
+    </div>
+</template>
+<script>
+
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "Teste",
+    components: {
+        InputDecimal, SelectStatic, DateTime
+    },
+    props: {
+        rule: Object
+    },
+    data() {
+        return {
+            activity: {}
+        }
+    },
+    methods: {
+        ...mapMutations("automation", ["addActivity"]),
+        add() {
+            this.activity.id = this.generateId();
+            if (this.activity.content) {
+                var activity = JSON.parse(JSON.stringify(this.activity));
+                this.addActivity({ id: this.rule.id, activity: activity })
+            }
+
+        },
+        generateId() {
+            return Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, "")
+                .substr(0, 5);
+        },
+    }
+}
+</script>
+<style scoped>
+.title {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.div-btn {
+    margin-top: 30px;
+    font-size: 25px;
+    color: #577696;
+    cursor: pointer;
+}
+</style>