@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/shared/TimeLine.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Loading :center="false" v-if="loading" />
+    <div v-else>
+      <ScrollBar :minHeight="200" :maxHeight="300">
+        <Timeline
+          dateLocale="pt-BR"
+          order="desc"
+          :uniqueTimeline="true"
+          :timeline-items="timelineItems"
+          message-when-no-items="Nenhum registro encontrado!"
+        />
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Timeline from "timeline-vuejs";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "TimeLine",
+  props: {
+    loading: Boolean,
+    timelineItems: Array,
+  },
+  components: {
+    Loading,
+    Timeline,
+    ScrollBar,
+  },
+};
+</script>
+<style>
+.timeline {
+  max-width: 1000px !important;
+}
+
+.timeline-item .date-item {
+  font-size: 14px !important;
+  letter-spacing: 1px !important;
+  font-weight: normal !important;
+}
+</style>

package/src/component/shared/Timer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <span v-if="play" class="pause" @click="play = false">
+      <i class="fa-solid fa-pause"></i>
+    </span>
+    <span v-else class="play" @click="play = true">
+      <i class="fa-solid fa-play"></i>
+    </span>
+    <span class="title"> {{ title }}</span>
+    <span class="title timer">
+      {{ time }}
+    </span>
+    <span class="title"> segundos...</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "Timer",
+  props: {
+    initialTimer: {
+      type: Number,
+      default: 10,
+    },
+    title: {
+      type: String,
+      default: "Atualizado em",
+    },
+    endTime: Function,
+  },
+  data() {
+    return {
+      time: 10,
+      play: true,
+    };
+  },
+  created() {
+    this.time = this.initialTimer;
+    this.start();
+  },
+  methods: {
+    start() {
+      this.$options.interval = setInterval(this.decrement, 1000);
+    },
+    stop() {
+      clearInterval(this.$options.interval);
+    },
+    decrement() {
+      if (this.play) this.time--;
+    },
+  },
+  watch: {
+    time() {
+      if (this.time == 0) {
+        this.time = this.initialTimer;
+        clearInterval(this.$options.interval);
+        if (this.endTime) this.endTime();
+        this.start();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.timer {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.play {
+  color: darkblue;
+  cursor: pointer;
+}
+
+.pause {
+  color: red;
+  cursor: pointer;
+}
+</style>

package/src/component/shared/Tip.vue

@@ -0,0 +1,42 @@
+<template>
+  <span class="tip" v-if="title">
+    <i
+      class="fal fa-exclamation-circle"
+      :title="title"
+      v-b-popover.hover.top="description"
+    ></i>
+  </span>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Tip",
+  props: {
+    field: String,
+    formName: String,
+  },
+  data() {
+    return {
+      title: "",
+      description: "",
+    };
+  },
+  mounted() {
+    let tip = this.tip({ field: this.field, formName: this.formName });
+    if (tip) {
+      this.title = tip.title;
+      this.description = tip.description;
+    }
+  },
+  computed: {
+    ...mapGetters("generic", ["tip"]),
+  },
+};
+</script>
+
+<style scoped>
+.tip {
+  cursor: pointer;
+}
+</style>

package/src/component/shared/Toast.vue

@@ -0,0 +1,69 @@
+<template></template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Notificacao",
+  computed: {
+    ...mapState("generic", ["toast"]),
+  },
+  watch: {
+    toast: {
+      handler(value) {
+        this.notifica(value);
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    notifica(value) {
+      if (value.type == "postApi" || value.type == "putApi")
+        this.$toasted.show("Salvo com sucesso", {
+          type: "success",
+        });
+      if (value.type == "postApiError" || value.type == "putApiErro") {
+        this.$toasted.show("Não foi possível adicionar/modificar", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "removerTodosApiSucesso")
+        this.$toasted.show("Removido com sucesso", {
+          type: "success",
+        });
+      if (value.type == "removerTodosApiErro") {
+        this.$toasted.show("Não foi possível remover", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "noPermission") {
+        this.$toasted.show("Usuário sem permissão", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "falhaGenerica") {
+        this.$toasted.show("Ops! Falha de servidor", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "messageError") {
+        this.$toasted.show("Ops! Algo deu errado", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+    },
+    voltarParaTopo() {
+      window.scrollTo(0, 0);
+    },
+  },
+};
+</script>

package/src/component/shared/TotalizationReport.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <hr class="hr-report" />
+    <div class="text-right">
+      <b-row>
+        <b-col sm="10">
+          <span class="title-report-header"> Total de Registros .................. </span>
+        </b-col>
+        <b-col sm="2">
+          <span class="title-report-header value-report-header"> {{ totalRecords }} </span>
+        </b-col>
+      </b-row>
+      <!-- Utilizado para calculo do subReport -->
+      <b-row v-if="totalizationCustom">
+        <b-col sm="10">
+          <span class="title-report-header"> {{ totalizationCustom[0].title }} .................. </span>
+        </b-col>
+        <b-col sm="2">
+          <span class="title-report-header value-report-header"> {{ totalizationCustom[0].value | currency }} </span>
+        </b-col>
+      </b-row>
+    </div>
+    <div class="text-right" v-for="item in totalization" :key="item.title">
+      <b-row>
+        <b-col sm="10">
+          <span v-if="convertName(item[0]).type == 'currency'">
+            <span class="title-report-header">
+              {{ convertName(item[0]).title }} ..................
+            </span>
+          </span>
+        </b-col>
+        <b-col sm="2">
+          <span v-if="convertName(item[0]).type == 'currency'">
+            {{ item[1] | currency }}
+          </span>
+          <span v-if="convertName(item[0]).type == 'numeric'">
+            {{ Math.round(item[1]) }}
+          </span>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "TotalizationReport",
+  props: ["totalization", "totalizationCustom", "totalRecords"],
+  computed: {
+    ...mapState("report", ["finalQueryFormatOData"]),
+  },
+  methods: {
+    convertName(value) {
+      var filter = this.finalQueryFormatOData.totalization.filter((item) => {
+        return item.value == value;
+      });
+      return Object.assign(filter[0]);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title-report-header {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.value-report-header {
+  margin-left: 50px;
+}
+
+.hr-report {
+  background: black !important;
+  height: 0px !important;
+}
+
+.receipt {
+  color: darkblue;
+}
+
+.div-title {
+  margin-right: 0px;
+}
+</style>

package/src/component/shared/VerticalFilter.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div
+      class="molded-button"
+      :class="{ fechado: !showFilter, aberto: showFilter }"
+      v-show="!showFilter"
+    >
+      <i class="fas fa-arrow-circle-left"></i>
+    </div>
+
+    <transition name="slide-fade">
+      <div
+        class="molded-button button-recolher"
+        v-show="showFilter"
+        @click="showFilter = false"
+      >
+        <i class="fas fa-arrow-circle-right"></i>
+      </div>
+    </transition>
+
+    <transition name="slide-fade"> </transition>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  components: {},
+  data() {
+    return {
+      showFilter: false,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.molded {
+  background: white;
+  border-left: solid 1px #dbdee0;
+  font-size: 13px;
+  height: 100%;
+  width: 350px;
+  right: 0px;
+  padding: 10px;
+  position: fixed;
+  -webkit-box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
+  box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
+  z-index: 999;
+}
+
+.molded-button {
+  font-size: 18px;
+  background: #ffffff;
+  border: solid 1px #dbdfe9;
+  border-radius: 5px;
+  color: #577696;
+  height: 40px;
+  width: 80px;
+  line-height: 32px;
+  padding-top: 3px;
+  padding-right: 35px;
+  text-align: center;
+  position: fixed;
+  top: 160px;
+  cursor: pointer;
+  z-index: 999;
+}
+
+.button-recolher {
+  padding-left: 12px;
+  padding-right: 418px;
+  right: -38px;
+}
+
+.aberto {
+  right: 365px;
+}
+
+.fechado {
+  right: -38px;
+  color: #577696;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.2s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(200px);
+  opacity: 0;
+}
+</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>