@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/shared/TableItem.vue

@@ -1,228 +1,228 @@
-<template>
-  <div class="item-main">
-    <div v-if="obj.type === 'period-rent'" class="period-rent" @click="navegateTo(obj, row)" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
-    </div>
-    <div v-if="obj.type === 'text'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      {{ row[obj.field] }}
-      <div>{{ row[obj.fieldSecond] }}</div>
-    </div>
-    <div v-if="obj.type === 'image'" :style="obj.styleBody">
-      <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 class="item-align-center" v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
-      :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 v-html="row[obj.fieldSecond]"></div>
-    </div>
-    <div v-if="obj.type === 'select'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      {{ row[obj.field].content }}
-    </div>
-    <div v-if="obj.type === 'date'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      {{ row[obj.field] | moment("DD/MM/YYYY") }}
-    </div>
-    <div v-if="obj.type === 'dateTime'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
-    </div>
-    <div v-if="obj.type === 'currency'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      {{ row[obj.field] | currency }}
-    </div>
-    <div class="hide-print" v-if="obj.type === 'button'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
-      <TableButton v-if="obj.ifFieldEqual == row[obj.field]" :obj="obj" :row="row" />
-    </div>
-    <div v-if="obj.type === 'link'" :style="obj.styleBody"
-      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)" @click="navegateTo(obj, row)">
-      <div class="div-progress" v-if="idSelected == row.id">
-        <ProgressBar bgColor="orange" bColor="#CCCCCC" size="4" :value="loadingProgress" :max="100" />
-      </div>
-      <div class="link" v-else>
-        <span> {{ row[obj.field] }}</span>
-        <div class="field-second">{{ row[obj.fieldSecond] }}</div>
-      </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 ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "TableItem",
-  components: { TableButton, DisplayPeriodRent, ProgressBar },
-  props: {
-    obj: Object,
-    row: Object,
-  },
-  data() {
-    return {
-      idSelected: "",
-      loadingProgress: 0,
-    };
-  },
-  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;
-      }
-    },
-    isVisible(conditionVisibility, row) {
-      // se for undefined, quer dizer que não tem condicional, então pode mostrar
-      // if (conditionVisibility == undefined) return true;
-
-      return eval(conditionVisibility);
-    },
-    navegateTo(obj, row) {
-      this.idSelected = row.id;
-      this.startLoading(obj, row);
-    },
-    startLoading(obj, row) {
-      let self = this;
-      const interval = setInterval(() => {
-        if (self.loadingProgress < 100) {
-          self.loadingProgress += 10;
-        } else {
-          clearInterval(interval);
-        }
-      }, 50);
-    }
-  },
-  watch: {
-    loadingProgress: {
-      handler(loadingProgress) {
-        if (loadingProgress == 100) {
-          if (this.obj.routeName) {
-            this.$router.push({
-              name: this.obj.routeName,
-              params: { id: this.row.id, type: this.row.type },
-            });
-          } else {
-            this.addEvent({
-              name: this.obj.eventName,
-              data: this.row,
-            });
-
-            let self = this;
-            setTimeout(function () {
-              self.idSelected = "";
-              self.loadingProgress = 0;
-            }, 200);
-          }
-        }
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-<style scoped>
-.field-second {
-  color: rgb(83, 82, 82);
-  font-size: 13px;
-}
-
-.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: 5px;
-}
-
-.center-vertical-bank {
-  padding-top: 6px;
-}
-
-.badge-center {
-  margin: auto !important;
-}
-
-.img {
-  width: 50px;
-  height: 50px;
-}
-
-.img-round {
-  border-radius: 30px;
-}
-
-.img-bank {
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-}
-
-.img-user {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-}
-
-.period-rent {
-  cursor: pointer;
-}
-
-.div-progress {
-  margin-top: 11px;
-  width: 200px;
-}
-
-.item-main {
-  display: table;
-  height: 100%;
-  width: 100%;
-}
-
-.item-main>* {
-  display: table-cell;
-  vertical-align: middle;
-}
-</style>
+<template>
+  <div class="item-main">
+    <div v-if="obj.type === 'period-rent'" class="period-rent" @click="navegateTo(obj, row)" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
+    </div>
+    <div v-if="obj.type === 'text'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] }}
+      <div>{{ row[obj.fieldSecond] }}</div>
+    </div>
+    <div v-if="obj.type === 'image'" :style="obj.styleBody">
+      <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 class="item-align-center" v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
+      :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 v-html="row[obj.fieldSecond]"></div>
+    </div>
+    <div v-if="obj.type === 'select'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field].content }}
+    </div>
+    <div v-if="obj.type === 'date'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | moment("DD/MM/YYYY") }}
+    </div>
+    <div v-if="obj.type === 'dateTime'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+    </div>
+    <div v-if="obj.type === 'currency'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | currency }}
+    </div>
+    <div class="hide-print" v-if="obj.type === 'button'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      <TableButton v-if="obj.ifFieldEqual == row[obj.field]" :obj="obj" :row="row" />
+    </div>
+    <div v-if="obj.type === 'link'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)" @click="navegateTo(obj, row)">
+      <div class="div-progress" v-if="idSelected == row.id">
+        <ProgressBar bgColor="orange" bColor="#CCCCCC" size="4" :value="loadingProgress" :max="100" />
+      </div>
+      <div class="link" v-else>
+        <span> {{ row[obj.field] }}</span>
+        <div class="field-second">{{ row[obj.fieldSecond] }}</div>
+      </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 ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "TableItem",
+  components: { TableButton, DisplayPeriodRent, ProgressBar },
+  props: {
+    obj: Object,
+    row: Object,
+  },
+  data() {
+    return {
+      idSelected: "",
+      loadingProgress: 0,
+    };
+  },
+  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;
+      }
+    },
+    isVisible(conditionVisibility, row) {
+      // se for undefined, quer dizer que não tem condicional, então pode mostrar
+      // if (conditionVisibility == undefined) return true;
+
+      return eval(conditionVisibility);
+    },
+    navegateTo(obj, row) {
+      this.idSelected = row.id;
+      this.startLoading(obj, row);
+    },
+    startLoading(obj, row) {
+      let self = this;
+      const interval = setInterval(() => {
+        if (self.loadingProgress < 100) {
+          self.loadingProgress += 10;
+        } else {
+          clearInterval(interval);
+        }
+      }, 50);
+    }
+  },
+  watch: {
+    loadingProgress: {
+      handler(loadingProgress) {
+        if (loadingProgress == 100) {
+          if (this.obj.routeName) {
+            this.$router.push({
+              name: this.obj.routeName,
+              params: { id: this.row.id, type: this.row.type },
+            });
+          } else {
+            this.addEvent({
+              name: this.obj.eventName,
+              data: this.row,
+            });
+
+            let self = this;
+            setTimeout(function () {
+              self.idSelected = "";
+              self.loadingProgress = 0;
+            }, 200);
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.field-second {
+  color: rgb(83, 82, 82);
+  font-size: 13px;
+}
+
+.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: 5px;
+}
+
+.center-vertical-bank {
+  padding-top: 6px;
+}
+
+.badge-center {
+  margin: auto !important;
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+}
+
+.img-round {
+  border-radius: 30px;
+}
+
+.img-bank {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+}
+
+.img-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+.period-rent {
+  cursor: pointer;
+}
+
+.div-progress {
+  margin-top: 11px;
+  width: 200px;
+}
+
+.item-main {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.item-main>* {
+  display: table-cell;
+  vertical-align: middle;
+}
+</style>