@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/template/ViewTemplateReportList.vue

@@ -1,240 +1,240 @@
-<template>
-  <div>
-    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
-      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
-      <div slot="content-main">
-        <b-row>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
-            <div><i class="fas fa-file-alt icon-report-title icon-saved"></i> <span class="title">Personalizado</span>
-            </div>
-            <hr class="hr" />
-            <div class="div-molded" v-for="report in allReports.saved">
-              <div>
-                <Molded :borderRadius="12">
-                  <b-row>
-                    <b-col sm="1">
-                      <i class="fas fa-file-alt icon-report"></i>
-                    </b-col>
-                    <b-col sm="10" @click="navegateTo(report)">
-                      <div class="title-report">{{ report.name }}</div>
-                    </b-col>
-                    <b-col sm="1">
-                      <Confirmation title="Deseja excluir?" type="danger" :data="report" :confirmed="confirmDelete">
-                        <div class="text-right">
-                          <i class="fas fa-times-circle icon-remove"></i>
-                        </div>
-                      </Confirmation>
-                    </b-col>
-                  </b-row>
-                </Molded>
-              </div>
-            </div>
-          </b-col>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
-            <div>
-              <i class="fas fa-file-chart-line icon-report-title icon-default"></i> <span class="title">Padrão</span>
-            </div>
-            <hr class="hr" />
-            <div class="div-molded" v-for="report in allReports.default">
-              <div>
-                <Molded :borderRadius="12">
-                  <b-row>
-                    <b-col sm="1">
-                      <i class="fas fa-file-alt icon-report"></i>
-                    </b-col>
-                    <b-col sm="11" @click="navegateTo(report)">
-                      <div v-if="report.showNewUntil && showNewUntil(report.showNewUntil)" class="side-by-side div-new">
-                        <span>Novo</span>
-                      </div>
-                      <div class="title-report side-by-side">{{ report.name }}</div>
-                      <div><span class="description-report">{{ report.description }}</span></div>
-                    </b-col>
-                  </b-row>
-                </Molded>
-              </div>
-            </div>
-          </b-col>
-        </b-row>
-      </div>
-    </Panel>
-  </div>
-</template>
-
-<script>
-import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation";
-
-import { _default, mapState, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "TemplateReportListView",
-  components: { Panel, Molded, Confirmation },
-  props: {
-    panel: Object,
-    reports: Object,
-  },
-  data() {
-    return {
-      allReports: { saved: [] },
-      urlGetAll: "/api/v1/shared/report/get-all",
-      urlDelete: "/api/v1/shared/report/delete",
-    };
-  },
-  computed: {
-    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
-
-  },
-  mounted() {
-    this.getAll();
-    //this.removeLoading(["panel"]);
-    this.allReports = JSON.parse(JSON.stringify(this.reports)); // remove observable
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    ...mapActions("generic", ["getApi", "deleteAllApi"]),
-    showNewUntil(dateStr) {
-      const [day, month, year] = dateStr.split('/');
-      const inputDate = new Date(year, month - 1, day);
-      const today = new Date();
-
-      inputDate.setHours(0, 0, 0, 0);
-      today.setHours(0, 0, 0, 0);
-
-      return today < inputDate;
-    },
-    getAll() {
-      let obj = { module: this.panel.module };
-      let params = { url: this.urlGetAll, obj: obj };
-      this.getApi(params).then((response) => {
-        this.allReports.saved = [];
-        let self = this;
-        response.content.data.forEach((item) => {
-          const query = JSON.parse(item.query);
-          let obj = {
-            id: item.id,
-            name: item.name,
-            routeName: query.routeName,
-          };
-          self.allReports.saved.push(obj);
-        });
-        this.removeLoading(["panel"]);
-      });
-    },
-    navegateTo(report) {
-      this.$router.push({
-        name: report.routeName,
-        params: { id: report.id, name: report.name },
-      });
-    },
-    confirmDelete(data) {
-      let selected = [];
-      selected.push(data.id);
-
-      let params = {
-        url: this.urlDelete,
-        selected: selected,
-      };
-
-      this.deleteAllApi(params).then((reponse) => {
-        if (reponse.success) this.getAll();
-      });
-    },
-  },
-  watch: {
-    executedSearch: function () {
-      let _default = [];
-      let saved = [];
-      let self = this;
-      setTimeout(function () {
-        self.allReports.default.forEach(function (item) {
-          if (self.search.filter.id == "equal") {
-            if (item.name == self.search.content) _default.push(item);
-          }
-
-          if (self.search.filter.id == "contains") {
-            if (item.name.includes(self.search.content)) _default.push(item);
-          }
-        });
-
-        self.allReports.saved.forEach(function (item) {
-          if (self.search.filter.content == "equal") {
-            if (item.name == self.search.content) saved.push(item);
-          }
-
-          if (self.search.filter.content == "contains") {
-            if (item.name.includes(self.search.content)) saved.push(item);
-          }
-        });
-
-        self.allReports.saved = saved;
-        self.allReports.default = _default;
-
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-    clearedSearch: function () {
-      let self = this;
-      setTimeout(function () {
-        self.allReports = self.reports;
-        self.getAll();
-        self.removeLoading(["btnSearch", "btnClean"]);
-      }, 300);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.icon-saved {
-  color: #94aa2a;
-  font-size: 20px;
-}
-
-.icon-default {
-  font-size: 20px;
-}
-
-.icon-remove {
-  color: red;
-}
-
-.icon-report {
-  font-size: 25px;
-  opacity: 0.2;
-  color: #577696;
-}
-
-.div-new {
-  background-color: #0A36DB;
-  font-size: 11px;
-  border-radius: 20px;
-  padding: 1px 8px 2px 8px;
-  margin-right: 10px;
-  color: white !important;
-}
-
-.div-molded {
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-
-.div-molded:hover {
-  background-color: #fafafc;
-}
-
-.description {
-  font-size: 13.5px;
-  color: rgb(117, 117, 117);
-}
-
-.hr {
-  background: #fafafc !important;
-  height: 1px !important;
-}
-
-.description-report {
-  font-size: 13px;
-  color: rgb(110, 110, 110);
-}
-</style>
+<template>
+  <div>
+    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
+      <div slot="content-main">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
+            <div><i class="fas fa-file-alt icon-report-title icon-saved"></i> <span class="title">Personalizado</span>
+            </div>
+            <hr class="hr" />
+            <div class="div-molded" v-for="report in allReports.saved">
+              <div>
+                <Molded :borderRadius="12">
+                  <b-row>
+                    <b-col sm="1">
+                      <i class="fas fa-file-alt icon-report"></i>
+                    </b-col>
+                    <b-col sm="10" @click="navegateTo(report)">
+                      <div class="title-report">{{ report.name }}</div>
+                    </b-col>
+                    <b-col sm="1">
+                      <Confirmation title="Deseja excluir?" type="danger" :data="report" :confirmed="confirmDelete">
+                        <div class="text-right">
+                          <i class="fas fa-times-circle icon-remove"></i>
+                        </div>
+                      </Confirmation>
+                    </b-col>
+                  </b-row>
+                </Molded>
+              </div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+            <div>
+              <i class="fas fa-file-chart-line icon-report-title icon-default"></i> <span class="title">Padrão</span>
+            </div>
+            <hr class="hr" />
+            <div class="div-molded" v-for="report in allReports.default">
+              <div>
+                <Molded :borderRadius="12">
+                  <b-row>
+                    <b-col sm="1">
+                      <i class="fas fa-file-alt icon-report"></i>
+                    </b-col>
+                    <b-col sm="11" @click="navegateTo(report)">
+                      <div v-if="report.showNewUntil && showNewUntil(report.showNewUntil)" class="side-by-side div-new">
+                        <span>Novo</span>
+                      </div>
+                      <div class="title-report side-by-side">{{ report.name }}</div>
+                      <div><span class="description-report">{{ report.description }}</span></div>
+                    </b-col>
+                  </b-row>
+                </Molded>
+              </div>
+            </div>
+          </b-col>
+        </b-row>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation";
+
+import { _default, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TemplateReportListView",
+  components: { Panel, Molded, Confirmation },
+  props: {
+    panel: Object,
+    reports: Object,
+  },
+  data() {
+    return {
+      allReports: { saved: [] },
+      urlGetAll: "/api/v1/shared/report/get-all",
+      urlDelete: "/api/v1/shared/report/delete",
+    };
+  },
+  computed: {
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+
+  },
+  mounted() {
+    this.getAll();
+    //this.removeLoading(["panel"]);
+    this.allReports = JSON.parse(JSON.stringify(this.reports)); // remove observable
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    showNewUntil(dateStr) {
+      const [day, month, year] = dateStr.split('/');
+      const inputDate = new Date(year, month - 1, day);
+      const today = new Date();
+
+      inputDate.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+
+      return today < inputDate;
+    },
+    getAll() {
+      let obj = { module: this.panel.module };
+      let params = { url: this.urlGetAll, obj: obj };
+      this.getApi(params).then((response) => {
+        this.allReports.saved = [];
+        let self = this;
+        response.content.data.forEach((item) => {
+          const query = JSON.parse(item.query);
+          let obj = {
+            id: item.id,
+            name: item.name,
+            routeName: query.routeName,
+          };
+          self.allReports.saved.push(obj);
+        });
+        this.removeLoading(["panel"]);
+      });
+    },
+    navegateTo(report) {
+      this.$router.push({
+        name: report.routeName,
+        params: { id: report.id, name: report.name },
+      });
+    },
+    confirmDelete(data) {
+      let selected = [];
+      selected.push(data.id);
+
+      let params = {
+        url: this.urlDelete,
+        selected: selected,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.success) this.getAll();
+      });
+    },
+  },
+  watch: {
+    executedSearch: function () {
+      let _default = [];
+      let saved = [];
+      let self = this;
+      setTimeout(function () {
+        self.allReports.default.forEach(function (item) {
+          if (self.search.filter.id == "equal") {
+            if (item.name == self.search.content) _default.push(item);
+          }
+
+          if (self.search.filter.id == "contains") {
+            if (item.name.includes(self.search.content)) _default.push(item);
+          }
+        });
+
+        self.allReports.saved.forEach(function (item) {
+          if (self.search.filter.content == "equal") {
+            if (item.name == self.search.content) saved.push(item);
+          }
+
+          if (self.search.filter.content == "contains") {
+            if (item.name.includes(self.search.content)) saved.push(item);
+          }
+        });
+
+        self.allReports.saved = saved;
+        self.allReports.default = _default;
+
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+    clearedSearch: function () {
+      let self = this;
+      setTimeout(function () {
+        self.allReports = self.reports;
+        self.getAll();
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-saved {
+  color: #94aa2a;
+  font-size: 20px;
+}
+
+.icon-default {
+  font-size: 20px;
+}
+
+.icon-remove {
+  color: red;
+}
+
+.icon-report {
+  font-size: 25px;
+  opacity: 0.2;
+  color: #577696;
+}
+
+.div-new {
+  background-color: #0A36DB;
+  font-size: 11px;
+  border-radius: 20px;
+  padding: 1px 8px 2px 8px;
+  margin-right: 10px;
+  color: white !important;
+}
+
+.div-molded {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.div-molded:hover {
+  background-color: #fafafc;
+}
+
+.description {
+  font-size: 13.5px;
+  color: rgb(117, 117, 117);
+}
+
+.hr {
+  background: #fafafc !important;
+  height: 1px !important;
+}
+
+.description-report {
+  font-size: 13px;
+  color: rgb(110, 110, 110);
+}
+</style>