@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/template/ViewTemplateReportList.vue

@@ -0,0 +1,230 @@
+<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="todos.salvo.length > 0">
+            <div><i class="fas fa-file-alt icon-salvo"></i> Personalizado</div>
+            <hr class="hr" />
+            <div class="div-molded" v-for="report in todos.salvo">
+              <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>{{ report.nome }}</div>
+                    </b-col>
+                    <b-col sm="1">
+                      <Confirmation
+                        title="Deseja excluir?"
+                        type="danger"
+                        :data="report"
+                        :confirmed="excluir"
+                      >
+                        <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"></i> Padrão</div>
+            <hr class="hr" />
+            <div class="div-molded" v-for="report in todos.padrao">
+              <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 class="side-by-side">{{ report.nome }}</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 { mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TemplateReportListView",
+  components: { Panel, Molded, Confirmation },
+  props: {
+    panel: Object,
+    relatorios: Object,
+  },
+  data() {
+    return {
+      todos: { salvo: [] },
+      urlObterTodos: "/api/v1/shared/relatorio/obter-todos",
+      urlRemover: "/api/v1/shared/relatorio/remove",
+    };
+  },
+  computed: {
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+  },
+  mounted() {
+    this.getAll();
+    this.todos = JSON.parse(JSON.stringify(this.relatorios)); // remove observable
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("report", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "updateOptionsInitValue",
+      "atualizaConsultaFiltro",
+    ]),
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    getAll() {
+      let obj = { module: this.panel.module };
+      let params = { url: this.urlObterTodos, obj: obj };
+      this.getApi(params).then((response) => {
+        this.todos.salvo = [];
+        let self = this;
+        response.content.data.forEach((item) => {
+          const query = JSON.parse(item.query);
+          let obj = {
+            id: item.id,
+            nome: item.nome,
+            routeName: query.routeName,
+            filter: query.filter,
+            field: query.field,
+            ordenacao: query.ordenacao,
+          };
+          self.todos.salvo.push(obj);
+        });
+        this.removeLoading(["panel"]);
+      });
+    },
+    navegateTo(report) {
+      if (report.filter) {
+        let filtroSelecionado = { logicalOperator: "all", children: report.filter };
+        this.updateOptionsInitValue(report.field);
+        this.atualizaCampoOrdenado(report.ordenacao);
+        this.atualizaFiltroSelecionado(filtroSelecionado);
+        this.atualizaConsultaFiltro(filtroSelecionado);
+      } else {
+        this.updateOptionsInitValue([]);
+      }
+      this.$router.push({
+        name: report.routeName,
+        params: { id: report.id, nome: report.nome },
+      });
+    },
+    excluir(data) {
+      let selected = [];
+      selected.push(data.id);
+
+      let params = {
+        url: this.urlRemover,
+        selected: selected,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.success) this.getAll();
+      });
+    },
+  },
+  watch: {
+    executedSearch: function () {
+      let padrao = [];
+      let salvo = [];
+      let self = this;
+      setTimeout(function () {
+        self.todos.padrao.forEach(function (item) {
+          if (self.search.filter.content == "igual") {
+            if (item.nome == self.search.content) padrao.push(item);
+          }
+
+          if (self.search.filter.content == "contem") {
+            if (item.nome.includes(self.search.content)) padrao.push(item);
+          }
+        });
+
+        self.todos.salvo.forEach(function (item) {
+          if (self.search.filter.content == "igual") {
+            if (item.nome == self.search.content) salvo.push(item);
+          }
+
+          if (self.search.filter.content == "contem") {
+            if (item.nome.includes(self.search.content)) salvo.push(item);
+          }
+        });
+
+        self.todos.salvo = salvo;
+        self.todos.padrao = padrao;
+
+        self.removeLoading(["search", "clean"]);
+      }, 300);
+    },
+    clearedSearch: function () {
+      let self = this;
+      setTimeout(function () {
+        self.todos = self.relatorios;
+        self.getAll();
+        self.removeLoading(["search", "clean"]);
+      }, 300);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-salvo {
+  color: #94aa2a;
+}
+
+.icon-remove {
+  color: red;
+}
+
+.icon-report {
+  font-size: 25px;
+  opacity: 0.2;
+  color: #577696;
+}
+
+.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;
+}
+</style>