@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/shared/TableDraggable.vue

@@ -1,117 +1,117 @@
-<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>
-    <span class="title">
-      Clique e arraste para ordenar
-    </span>
-    <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-draggable">
-            <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-draggable {
-  cursor: move;
-}
-
-.without-group {
-  font-size: 13px;
-  font-style: italic;
-  color: grey;
-}
-
-.margin {
-  margin-bottom: 10px;
-}
-</style>
+<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>
+    <span class="title">
+      Clique e arraste para ordenar
+    </span>
+    <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-draggable">
+            <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-draggable {
+  cursor: move;
+}
+
+.without-group {
+  font-size: 13px;
+  font-style: italic;
+  color: grey;
+}
+
+.margin {
+  margin-bottom: 10px;
+}
+</style>

package/src/component/shared/TableImport.vue

@@ -1,93 +1,93 @@
-<template>
-  <div>
-    <div class="div-main">
-      <br />
-      <table class="table table-responsive-xs">
-        <thead>
-          <tr>
-            <th v-for="(obj, ind) in headerTableMap" :key="ind" class="title-header">
-              <div class="div-select">           
-                <SelectStatic :title="obj.title" :data="select" :markFormDirty="false" :initialValue="obj.target"
-                  v-model="obj.target" />
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) in data" :key="index">
-            <td v-for="(obj, ind) in headerTable" :key="ind">
-              <div>{{ row[obj.field] }}</div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script>
-import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-
-export default {
-  components: {
-    SelectStatic,
-  },
-  props: {
-    select: Array,
-    headerTable: Array,
-    data: Array,
-  },
-  name: "TableImport",
-  data() {
-    return {};
-  },
-  computed: {
-    headerTableMap() {
-      var i = 0;
-      this.headerTable.forEach((item) => {
-        item.target = this.select[i];
-        i++;
-      });
-
-      return this.headerTable;
-    },
-  },
-  methods: {},
-};
-</script>
-<style scoped>
-.div-main {
-  overflow: auto;
-  white-space: nowrap;
-  min-height: 450px;
-}
-
-.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;
-  width: 200px !important;
-}
-
-.title-header {
-  font-size: 14px;
-  color: #757d8c;
-  font-weight: 400;
-}
-
-.tabela-description {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-}
-
-.div-select {
-  width: 310px;
-}
-</style>
+<template>
+  <div>
+    <div class="div-main">
+      <br />
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th v-for="(obj, ind) in headerTableMap" :key="ind" class="title-header">
+              <div class="div-select">           
+                <SelectStatic :title="obj.title" :data="select" :markFormDirty="false" :initialValue="obj.target"
+                  v-model="obj.target" />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in data" :key="index">
+            <td v-for="(obj, ind) in headerTable" :key="ind">
+              <div>{{ row[obj.field] }}</div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+
+export default {
+  components: {
+    SelectStatic,
+  },
+  props: {
+    select: Array,
+    headerTable: Array,
+    data: Array,
+  },
+  name: "TableImport",
+  data() {
+    return {};
+  },
+  computed: {
+    headerTableMap() {
+      var i = 0;
+      this.headerTable.forEach((item) => {
+        item.target = this.select[i];
+        i++;
+      });
+
+      return this.headerTable;
+    },
+  },
+  methods: {},
+};
+</script>
+<style scoped>
+.div-main {
+  overflow: auto;
+  white-space: nowrap;
+  min-height: 450px;
+}
+
+.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;
+  width: 200px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.div-select {
+  width: 310px;
+}
+</style>