@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/component/shared/Table.vue

@@ -1,155 +0,0 @@
-<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: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px !important;
-}
-
-.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 +0,0 @@
-<template>
-  <div>
-    <Button
-      v-if="obj.typeButton == 'default'"
-      :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.typeButton == 'dropdown'"
-      :title="obj.button.title"
-      :type="obj.button.type"
-      :size="obj.button.size"
-      :classIcon="obj.button.classIcon"
-      :param="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

@@ -1,117 +0,0 @@
-<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,98 +0,0 @@
-<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>

package/src/component/shared/TableItem.vue

@@ -1,174 +0,0 @@
-<template>
-  <div>
-    <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 v-if="obj.type === 'html'" :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>
-    <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 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'" class="link" :style="obj.styleBody"
-      :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;
-      }
-    },
-    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) {
-      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);
-}
-
-.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;
-}
-</style>

package/src/component/shared/TableTotalRecords.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="row c-div-total">
-    <div class="col-sm-12 text-right">
-      <span class="c-title">
-        Total de
-        <div class="badge">
-          <span class="total-records">{{ totalRecords }}</span>
-        </div>
-        <span class="records">registro(s)</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TableTotalRecords",
-  props: {
-    totalRecords: {
-      type: Number,
-      default: 0,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.c-div-total {
-  padding-bottom: 10px;
-}
-
-.c-title {
-  font-size: 14px;
-}
-
-.total-records {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.records {
-  margin-left: 5px;
-}
-</style>

package/src/component/shared/TableTotalization.vue

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <div
-      class="badge-side-by-side text-center"
-      v-for="item in totalization"
-      :key="item.title"
-    >
-      <div class="badge-totalization" :class="item.classCss">
-        <span>{{ item.title }} </span>
-        <span>{{ item.value | currency }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TableTotalization",
-  props: {
-    totalization: Array,
-  },
-};
-</script>
-
-<style scoped>
-.badge-side-by-side {
-  display: inline-block;
-  margin-right: 3px;
-  margin-bottom: 10px;
-}
-
-.badge-totalization {
-  border: 1px solid #dbdee0;
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 30px;
-  font-size: 14px;
-}
-
-.revenue {
-  color: darkblue;
-}
-
-.expense {
-  color: red;
-}
-</style>