@nixweb/nixloc-ui 0.0.127 → 0.0.129

package/src/component/shared/{BodyReport.vue → Report.vue}

@@ -61,6 +61,9 @@
             </tr>
           </tbody>
         </table>
+        <div>
+          <TotalizationReport :totalization="totalization" :totalRecords="data.length" />
+        </div>
       </div>
     </ScrollBar>
   </div>
@@ -69,6 +72,7 @@
 <script>
 import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 import HeaderReport from "../shared/HeaderReport.vue";
+import TotalizationReport from "../shared/TotalizationReport.vue";
 import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
 import print from "vue-print-nb";
 
@@ -78,11 +82,8 @@ export default {
   directives: {
     print,
   },
-  props: {
-    header: Array,
-    data: Array,
-  },
-  components: { ScrollBar, HeaderReport, ExportExcel },
+  props: ["header", "data", "totalization"],
+  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
   methods: {
     convertClass(fieldComparison, classCssBody) {
       if (Array.isArray(classCssBody)) {
@@ -108,8 +109,8 @@ table tbody tr td {
 }
 
 .table thead tr {
-  border-top: 1px solid rgb(172, 172, 172);
-  border-bottom: 1px solid rgb(172, 172, 172);
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
 }
 
 .table th,

package/src/component/shared/SaveCancel.vue

@@ -1,18 +1,19 @@
 <template>
   <div>
     <FixedBar position="footer" v-show="formDirty && !modal.open">
-      <div>
+      <div class="margin">
         <Button
           _key="cancelSaveCancel"
           eventName="cancelSaveCancel"
           title="Cancelar"
           type="danger"
-          size="medium"
+          size="small"
           :clicked="cancel"
         />
         <Button
           _key="saveSaveCancel"
           eventName="saveSaveCancel"
+          classIcon="fa-solid fa-floppy-disk"
           title="Salvar"
           type="success"
           :disabled="!isFormValid(formName)"
@@ -70,3 +71,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.margin {
+  margin-left: 0px;
+}
+</style>

package/src/component/shared/Search.vue

@@ -124,7 +124,7 @@ export default {
   font-size: 14px;
   padding: 5px 8px 6px 15px;
   background-color: rgb(255, 255, 255);
-  border: 1px solid rgb(220, 221, 221);
+  border: 1px solid #E5E4E8;
   border-radius: 40px;
   box-sizing: border-box;
   box-shadow: none;

package/src/component/shared/SelectOption.vue

@@ -12,13 +12,18 @@
       >
         <div class="div-content text-center">
           <span :style="'font-size:' + option.titleSize + 'px;'">
-            {{ option.title }}</span
+            <i v-if="size === 'small'" :class="option.icon"></i>
+            {{ option.title }}
+          </span>
+          <div
+            v-if="size === 'medium'"
+            class="icon"
+            :style="'font-size:' + option.iconSize + 'px;'"
           >
-          <div class="icon" :style="'font-size:' + option.iconSize + 'px;'">
             <i :class="option.icon"></i>
           </div>
         </div>
-        <div>
+        <div v-if="option.tipId">
           <i
             v-b-tooltip.hover
             :title="tip(option.tipId)"
@@ -27,7 +32,7 @@
         </div>
       </div>
     </div>
-    <div class="div-btn">
+    <div class="div-btn" v-if="showButtonNext">
       <Button
         _key="btnClickedNext"
         type="info"
@@ -55,6 +60,8 @@ export default {
     titleSize: Number,
     buttonSize: String,
     buttonClassIcon: String,
+    showButtonNext: { type: Boolean, default: true },
+    size: { type: String, default: "medium" },
     width: Number,
     height: Number,
     options: Array,
@@ -90,7 +97,7 @@ export default {
 
 .option {
   cursor: pointer;
-  border: 1px solid #dbdfe9;
+  border: 1px solid #e5e4e8;
   background-color: white;
   border-radius: 8px;
   padding-left: 10px;
@@ -99,6 +106,7 @@ export default {
   margin-bottom: 10px;
   font-size: 16px;
   font-weight: normal;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
 }
 
 .alignment {
@@ -106,7 +114,7 @@ export default {
 }
 
 .option:hover {
-  background-color: #fafafc;
+  background-color: white;
 }
 
 .div-content {
@@ -114,7 +122,8 @@ export default {
 }
 
 .selected {
-  background-color: #fafafc;
+  background-color: white;
+  border-color: #4680A5;
 }
 
 .icon {
@@ -128,10 +137,10 @@ export default {
 }
 
 .title {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .div-btn {
-  margin-top: 20px;
+  margin-top: 10px;
 }
 </style>

package/src/component/shared/Table.vue

@@ -16,85 +16,27 @@
           </th>
         </tr>
       </thead>
-      <tbody>
+      <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">
-            <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 === 'image'"
-            >
-              <img
-                :style="'width:60;height:50px'"
-                :src="
-                  'https://espaco.blob.core.windows.net/nixloc-photo-product/' +
-                  row[obj.field]
-                "
-              />
-            </div>
-            <div class="text-center center-vertical"  v-if="obj.type === 'class'">
-              <div :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-                {{ row[obj.field] }}
-              </div>
-            </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 === 'button'"
-            >
-              <TableButton :obj="obj" :row="row" />
-            </div>
-            <div
-              class="link"
-              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'link'"
-              @click="navegateTo(obj, row)"
-            >
-              <span> {{ row[obj.field] }}</span>
-            </div>
+          <td
+            v-for="(obj, ind) in header"
+            :key="ind"
+            :class="{ 'drag-and-drop': dragAndDrop }"
+          >
+            <TableItem :obj="obj" :row="row" />
           </td>
         </tr>
-      </tbody>
+      </draggable>
       <tbody v-show="data.length == 0">
         <tr>
           <td colspan="12">
@@ -107,13 +49,14 @@
 </template>
 
 <script>
-import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
-import draggable from "@nixweb/nixloc-ui/vuedraggable";
+import TableItem from "@nixweb/nixloc-ui/src/component/shared/TableItem.vue";
+
+import draggable from "vuedraggable";
 
 import { mapState, mapMutations, mapActions } from "vuex";
 
 export default {
-  components: { TableButton },
+  components: { draggable, TableItem },
   props: {
     header: Array,
     data: Array,
@@ -121,10 +64,15 @@ export default {
       type: Boolean,
       default: true,
     },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       selectAll: false,
+      dataDragging: [],
     };
   },
   computed: {
@@ -149,30 +97,16 @@ export default {
         }
       }
     },
-    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);
+    checkMove() {
+      if (this.dragAndDrop) {
+        var listIds = [];
+        this.data.forEach((item) => {
+          listIds.push(item.id);
         });
-        return ret;
-      } else {
-        return classCssBody;
-      }
-    },
-    navegateTo(obj, row) {
-      if (obj.routeName) {
-        this.$router.push({
-          name: obj.routeName,
-          params: { id: row.id, type: row.type },
-        });
-      } else {
+
         this.addEvent({
-          name: obj.eventName,
-          data: row,
+          name: "tableDragAndDrop",
+          data: { listIds: listIds },
         });
       }
     },
@@ -223,32 +157,7 @@ tr:hover {
   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;
-}
-
-.center-vertical {
-  padding-top: 10px;
-}
-
-.badge-center {
-  margin: auto !important;
+.drag-and-drop {
+  cursor: move;
 }
 </style>

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>

package/src/component/shared/TableItem.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div
+      v-if="obj.type === 'period-rent'"
+      class="period-rent"
+      @click="navegateTo(obj, row)"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
+    </div>
+    <div
+      v-if="obj.type === 'text'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      {{ row[obj.field] }}
+      <div>{{ row[obj.fieldSecond] }}</div>
+    </div>
+    <div v-if="obj.type === 'image'">
+      <img
+        :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+        class="img"
+        :src="urlImage + obj.container + '/' + row[obj.field]"
+      />
+    </div>
+    <div v-if="obj.type === 'class'" class="text-center">
+      <div :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+        {{ row[obj.field] }}
+      </div>
+    </div>
+    <div
+      v-if="obj.type === 'html'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
+      <div v-else v-html="obj.html"></div>
+    </div>
+    <div
+      v-if="obj.type === 'select'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      {{ row[obj.field].content }}
+    </div>
+    <div
+      v-if="obj.type === 'date'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      {{ row[obj.field] | moment("DD/MM/YYYY") }}
+    </div>
+    <div
+      v-if="obj.type === 'dateTime'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+    </div>
+    <div
+      v-if="obj.type === 'currency'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      {{ row[obj.field] | currency }}
+    </div>
+    <div
+      v-if="obj.type === 'button'"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+    >
+      <TableButton :obj="obj" :row="row" />
+    </div>
+    <div
+      v-if="obj.type === 'link'"
+      class="link"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+      @click="navegateTo(obj, row)"
+    >
+      <span> {{ row[obj.field] }}</span>
+      <div class="field-second">{{ row[obj.fieldSecond] }}</div>
+    </div>
+  </div>
+</template>
+<script>
+import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
+import DisplayPeriodRent from "@nixweb/nixloc-ui/src/component/rental/DisplayPeriodRent";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "TableItem",
+  components: { TableButton, DisplayPeriodRent },
+  props: {
+    obj: Object,
+    row: Object,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    urlImage() {
+      return "https://espaco.blob.core.windows.net/";
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addSelected", "addEvent"]),
+    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, type: row.type },
+        });
+      } else {
+        this.addEvent({
+          name: obj.eventName,
+          data: row,
+        });
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.field-second {
+  color: rgb(83, 82, 82) !important;
+}
+
+.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;
+}
+
+.center-vertical {
+  padding-top: 10px;
+}
+
+.badge-center {
+  margin: auto !important;
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+}
+
+.img-round {
+  border-radius: 30px;
+}
+
+.period-rent {
+  cursor: pointer;
+}
+</style>