@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/shared/Table.vue

@@ -1,243 +1,163 @@
-<template>
-  <div>
-    <table class="table table-responsive-xs">
-      <thead>
-        <tr>
-          <th class="td-checkbox" v-if="showChecks">
-            <div>
-              <b-form-checkbox v-model="selectAll" @change="select" />
-            </div>
-          </th>
-          <th v-for="(obj, ind) in header" :key="ind">
-            <div class="title-margem" :class="obj.classCssTitle">
-              <i class="fas fa-search" v-if="obj.iconSearch"></i>
-              <span class="title-header"> {{ obj.title }}</span>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
-          <td class="td-checkbox" v-if="showChecks">
-            <b-form-checkbox v-model="selected" :value="row.id" />
-          </td>
-          <td v-for="(obj, ind) in header" :key="ind">
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'text'"
-            >
-              {{ row[obj.field] }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'class'"
-            >
-              {{ row[obj.field] }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'html'"
-            >
-              <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
-              <div v-else v-html="obj.html"></div>
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'select'"
-            >
-              {{ row[obj.field].content }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'date'"
-            >
-              {{ row[obj.field] | moment("DD/MM/YYYY") }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'dateTime'"
-            >
-              {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'currency'"
-            >
-              {{ row[obj.field] | currency }}
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'pdf'"
-            >
-              <span
-                @click="solicitarPdf(obj.pdf, row[obj.field])"
-                class="icon"
-                v-if="row[obj.field]"
-              >
-                <i :class="obj.icon"></i
-              ></span>
-              <span v-else>N/I</span>
-            </div>
-            <div
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'button'"
-            >
-              <TableButton :obj="obj" :row="row" />
-            </div>
-            <div class="link" v-if="obj.type === 'link'" @click="navegateTo(obj, row)">
-              <span> {{ row[obj.field] }}</span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-      <tbody v-show="data.length == 0">
-        <tr>
-          <td colspan="12">
-            <span>Nenhum registro encontrado!</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
-
-import { mapState, mapMutations, mapActions } from "vuex";
-
-export default {
-  components: { TableButton },
-  props: {
-    header: Array,
-    data: Array,
-    showChecks: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      selectAll: false,
-    };
-  },
-  computed: {
-    ...mapState("generic", ["selected"]),
-    selected: {
-      get() {
-        return this.$store.state.generic.selected;
-      },
-      set(value) {
-        this.addSelected(value);
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["addSelected", "addEvent"]),
-    ...mapActions("generic", ["pdfApi"]),
-    select() {
-      this.addSelected([]);
-      if (this.selectAll) {
-        for (let i in this.data) {
-          this.selected.push(this.data[i].id);
-        }
-      }
-    },
-    convertClass(fieldComparison, classCssBody) {
-      if (Array.isArray(classCssBody)) {
-        let ret = [];
-        classCssBody.forEach(function (value) {
-          let classCss = value.classCss;
-          let condition = value.fieldComparison == fieldComparison;
-          let obj = {
-            [classCss]: condition,
-          };
-          ret.push(obj);
-        });
-        return ret;
-      } else {
-        return classCssBody;
-      }
-    },
-    navegateTo(obj, row) {
-      if (obj.routeName) {
-        this.$router.push({
-          name: obj.routeName,
-          params: { id: row.id },
-        });
-      } else {
-        this.addEvent({
-          nome: obj.eventName,
-          data: row,
-        });
-      }
-    },
-  },
-  beforeDestroy() {
-    this.addSelected([]);
-  },
-};
-</script>
-
-<style scoped>
-
-table tbody tr td {
-  max-width: 350px;
-}
-
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 5px !important;
-  padding-top: 7px !important;
-  padding-bottom: 5px !important;
-  padding-right: 5px !important;
-  border-bottom: 0px !important;
-}
-
-.td-checkbox {
-  width: 30px;
-}
-
-tr:hover {
-  background-color: #fafafc;
-}
-
-.title-header {
-  font-size: 13px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.table-number {
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.table-main {
-  color: #757d8c;
-  max-width: 200px;
-}
-
-.table-currency {
-  font-size: 14px;
-  min-width: 100px;
-}
-
-.link {
-  color: #3f529b;
-  font-size: 14px;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.link:hover {
-  text-decoration: underline;
-  transition: 0.1s;
-}
-
-.icon-link:hover {
-  font-size: 12.5px;
-}
-</style>
+<template>
+  <div>
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th class="td-checkbox" v-if="showChecks">
+            <div>
+              <b-form-checkbox v-model="selectAll" @change="select" />
+            </div>
+          </th>
+          <th v-for="(obj, ind) in header" :key="ind">
+            <div class="title-margem" :class="obj.classCssTitle">
+              <i class="fas fa-search" v-if="obj.iconSearch"></i>
+              <span class="title-header"> {{ obj.title }}</span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="data"
+        tag="tbody"
+        @change="checkMove"
+        :options="{ disabled: !dragAndDrop }"
+      >
+        <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
+          <td class="td-checkbox" v-if="showChecks">
+            <div :class="{ 'center-vertical': row.photo != null }">
+              <b-form-checkbox v-model="selected" :value="row.id" />
+            </div>
+          </td>
+          <td
+            v-for="(obj, ind) in header"
+            :key="ind"
+            :class="{ 'drag-and-drop': dragAndDrop }"
+          >
+            <TableItem :obj="obj" :row="row" />
+          </td>
+        </tr>
+      </draggable>
+      <tbody v-show="data.length == 0">
+        <tr>
+          <td colspan="12">
+            <span>Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import TableItem from "@nixweb/nixloc-ui/src/component/shared/TableItem.vue";
+
+import draggable from "vuedraggable";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  components: { draggable, TableItem },
+  props: {
+    header: Array,
+    data: Array,
+    showChecks: {
+      type: Boolean,
+      default: true,
+    },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectAll: false,
+      dataDragging: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["selected"]),
+    selected: {
+      get() {
+        return this.$store.state.generic.selected;
+      },
+      set(value) {
+        this.addSelected(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addSelected", "addEvent"]),
+    ...mapActions("generic", ["pdfApi"]),
+    select() {
+      this.addSelected([]);
+      if (this.selectAll) {
+        for (let i in this.data) {
+          this.selected.push(this.data[i].id);
+        }
+      }
+    },
+    checkMove() {
+      if (this.dragAndDrop) {
+        var listIds = [];
+        this.data.forEach((item) => {
+          listIds.push(item.id);
+        });
+
+        this.addEvent({
+          name: "tableDragAndDrop",
+          data: { listIds: listIds },
+        });
+      }
+    },
+  },
+  beforeDestroy() {
+    this.addSelected([]);
+  },
+};
+</script>
+
+<style scoped>
+table tbody tr td {
+  max-width: 350px;
+}
+
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.td-checkbox {
+  width: 30px;
+}
+
+tr:hover {
+  background-color: #fafafc;
+}
+
+.title-header {
+  font-size: 13px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-number {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.table-main {
+  color: #757d8c;
+  max-width: 200px;
+}
+
+.drag-and-drop {
+  cursor: move;
+}
+</style>

package/src/component/shared/TableButton.vue

@@ -1,36 +1,36 @@
-<template>
-  <div>
-    <Button
-      v-if="obj.qualBotao == 'button'"
-      :key="row.id"
-      :title="obj.button.title"
-      :type="obj.button.type"
-      :size="obj.button.size"
-      :classIcon="obj.button.classIcon"
-      :eventName="obj.button.eventName"
-      :eventData="row"
-    />
-    <Dropdown
-      v-if="obj.qualBotao == 'botaodropdown'"
-      :title="obj.button.title"
-      :type="obj.button.type"
-      :size="obj.button.size"
-      :classIcon="obj.button.classIcon"
-      :eventData="row"
-      :items="obj.button.items"
-    />
-  </div>
-</template>
-
-<script>
-import Dropdown from "../forms/Dropdown";
-import Button from "../forms/Button";
-export default {
-  name: "TableButton",
-  components: { Button, Dropdown },
-  props: {
-    obj: Object,
-    row: Object,
-  },
-};
-</script>
+<template>
+  <div>
+    <Button
+      v-if="obj.qualBotao == 'button'"
+      :key="row.id"
+      :title="obj.button.title"
+      :type="obj.button.type"
+      :size="obj.button.size"
+      :classIcon="obj.button.classIcon"
+      :eventName="obj.button.eventName"
+      :eventData="row"
+    />
+    <Dropdown
+      v-if="obj.qualBotao == 'botaodropdown'"
+      :title="obj.button.title"
+      :type="obj.button.type"
+      :size="obj.button.size"
+      :classIcon="obj.button.classIcon"
+      :eventData="row"
+      :items="obj.button.items"
+    />
+  </div>
+</template>
+
+<script>
+import Dropdown from "../forms/Dropdown";
+import Button from "../forms/Button";
+export default {
+  name: "TableButton",
+  components: { Button, Dropdown },
+  props: {
+    obj: Object,
+    row: Object,
+  },
+};
+</script>

package/src/component/shared/TableDraggable.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div class="margin">
+      <Button
+        _key="btnCancelTableDraggable"
+        title="Cancelar"
+        type="danger"
+        size="small"
+        :clicked="cancel"
+      />
+      <Button
+        _key="btnCheckMoveTableDraggable"
+        title="Confirmar"
+        type="success"
+        size="small"
+        :clicked="checkMove"
+      />
+    </div>
+    <i class="fa-regular fa-maximize icon-order"></i> Clique e arraste para ordenar
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th>
+            <span class="title-header">Nome</span>
+          </th>
+        </tr>
+      </thead>
+      <draggable v-model="dataLocal" tag="tbody">
+        <tr v-for="item in dataLocal">
+          <td class="item">
+            <i class="fa-solid fa-grip-lines icon-order"></i>
+            <span v-if="item.name"> {{ item.name }}</span>
+            <span class="without-group" v-else> Sem grupo</span>
+          </td>
+        </tr>
+      </draggable>
+      <tbody v-show="dataLocal.length == 0">
+        <tr>
+          <td colspan="12">
+            <span>Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import draggable from "vuedraggable";
+
+import { mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "TableDraggable",
+  components: { Button, draggable },
+  props: {
+    data: Array,
+    propsParam: Object,
+    urlOrderAllApi: String,
+  },
+  data() {
+    return {
+      dataLocal: [],
+    };
+  },
+  mounted() {
+    this.dataLocal = this.data;
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    ...mapActions("generic", ["orderAllApi"]),
+    checkMove() {
+      let listIds = [];
+
+      this.dataLocal.forEach((item) => {
+        listIds.push(item.id);
+      });
+
+      let obj = { ...this.propsParam, listIds: listIds };
+      let params = { url: this.urlOrderAllApi, obj: obj };
+
+      this.orderAllApi(params).then((response) => {
+        this.removeLoading(["btnCheckMoveTableDraggable"]);
+        this.addEvent({ name: "confirmedTableDraggable" });
+      });
+    },
+    cancel() {
+      this.addEvent({ name: "cancelTableDraggable" });
+      this.removeLoading(["btnCancelTableDraggable"]);
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.item {
+  background-color: #f1f4f9;
+  cursor: move;
+}
+
+.without-group {
+  font-size: 13px;
+  font-style: italic;
+  color: grey;
+}
+
+.margin {
+  margin-bottom: 10px;
+}
+</style>