@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/shared/ToggleTheme.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="toggle-container">
+        <label class="switch">
+            <input type="checkbox" v-model="isDarkMode" @change="toggleTheme">
+            <span class="slider round">
+                <div class="icon-theme-light" v-if="themeLabel == 'Dark'">
+                    <i class="fa-solid fa-sun"></i>
+                </div>
+                <div class="icon-theme-dark" v-if="themeLabel == 'Light'">
+                    <i class="fa-solid fa-moon"></i>
+                </div>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isDarkMode: false,
+        };
+    },
+    computed: {
+        themeLabel() {
+            return this.isDarkMode ? 'Dark' : 'Light';
+        }
+    },
+    methods: {
+        toggleTheme() {
+            if (this.isDarkMode) {
+                document.body.classList.add('dark-theme');
+                document.body.classList.remove('light-theme');
+            } else {
+                document.body.classList.add('light-theme');
+                document.body.classList.remove('dark-theme');
+            }
+        },
+    },
+    mounted() {
+        if (localStorage.getItem('theme') === 'dark') {
+            this.isDarkMode = true;
+            document.body.classList.add('dark-theme');
+            document.body.classList.remove('light-theme');
+        } else {
+            this.isDarkMode = false;
+            document.body.classList.add('light-theme');
+            document.body.classList.remove('dark-theme');
+        }
+    },
+    watch: {
+        isDarkMode(newVal) {
+            localStorage.setItem('theme', newVal ? 'dark' : 'light');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.icon-theme-dark {
+    margin-left: 26px;
+    margin-top: -2px;
+}
+
+.icon-theme-light {
+    margin-left: 6px;
+    margin-top: -3px;
+    color: white;
+}
+
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    height: 22px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked+.slider {
+    background-color: #ccc;
+}
+
+input:checked+.slider:before {
+    transform: translateX(20px);
+}
+
+.theme-indicator {
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+}
+</style>

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>

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>
+