@nixweb/nixloc-ui 1.17.0 → 1.20.0

package/@nixweb/nixloc-ui/src/component/shared/Toast.vue

@@ -1,69 +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>
+<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/@nixweb/nixloc-ui/src/component/shared/ToggleTheme.vue

@@ -1,128 +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;
-}
+<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/@nixweb/nixloc-ui/src/component/shared/TotalizationReport.vue

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