@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/shared/Search.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="7" xl="6">
+        <div class="margin">
+          <div class="molded">
+            <b-row>
+              <b-col sm="9">
+                <input class="input-search" type="text" name="search" placeholder="Pesquisar ..."
+                  @keyup="verifyCleanSearch()" @keyup.enter.prevent="executeSearch()" v-model="search.content" />
+              </b-col>
+              <b-col sm="3">
+                <div class="div-select">
+                  <SelectStatic classCss="select-search" fieldTarget="filter" :onlyQuery="true"
+                    :initialValue="{ content: 'Contém', id: 'contains' }" v-model="search.filter" :showBorder="false"
+                    :data="[
+                      { content: 'Contém', id: 'contains' },
+                      { content: 'Igual', id: 'equal' },
+                    ]" />
+                </div>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
+        <div v-if="hasActiveFilter">
+          <div>
+            <div class="div-filter">
+              Filtro Ativo
+              <span class="icon-close" @click="removeFilter()">
+                <i class="icon-tag fas fa-times-circle"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </b-col>
+      <b-col xs="4" sm="4" md="4" lg="4" xl="4">
+        <div class="div-button">
+          <Button _key="btnSearch" type="info" title="Buscar" classIcon="fas fa-search" size="small"
+            :clicked="executeSearch" />
+          <Button _key="btnClean" type="info" title="Limpar" classIcon="fas fa-broom" size="small"
+            :clicked="executeClean" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Button from "../forms/Button";
+import SelectStatic from "../forms/SelectStatic.vue";
+
+import { mapMutations, mapGetters, mapState } from "vuex";
+
+export default {
+  components: { Button, SelectStatic },
+  name: "Search",
+  data() {
+    return {
+      showFilterStorage: false,
+    }
+  },
+  computed: {
+    ...mapState("generic", ["queryTags"]),
+    ...mapGetters("generic", ["getFilterStorage"]),
+    search: {
+      get() {
+        return this.$store.state.generic.search;
+      },
+      set(value) {
+        this.updateSearch(value);
+      },
+    },
+    hasActiveFilter() {
+      const filterStorage = this.getFilterStorage(this.$route.name);
+      return filterStorage && (
+        filterStorage.baseParams.search !== '' ||
+        filterStorage.baseParams.currentPage !== 1 ||
+        this.queryTags.length > 0
+      );
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateSearch",
+      "executedSearch",
+      "clearedSearch",
+      "addEvent"
+    ]),
+    executeSearch() {
+      this.executedSearch();
+    },
+    executeClean() {
+      this.clearedSearch();
+      let search = { content: "", filter: { content: "Contém", id: "contains" } };
+      this.updateSearch(search);
+    },
+    verifyCleanSearch() {
+      if (this.search.content.length == 0) this.clearedSearch();
+    },
+    removeFilter() {
+      this.addEvent({ name: "filterStorageRemoved" });
+      this.executeClean();
+    }
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  padding-top: 28px;
+}
+
+.div-button {
+  padding-top: 33px;
+}
+
+::placeholder {
+  color: #b8c4d2;
+}
+
+.molded {
+
+  height: 45px;
+  font-size: 14px;
+  padding: 5px 8px 6px 15px;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid #E5E4E8;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: none;
+  color: rgb(38, 41, 44);
+}
+
+input[type="text"] {
+  width: 100%;
+  height: 30px;
+  font-size: 14px;
+  border: 0px solid white;
+  background-color: rgb(255, 255, 255);
+}
+
+input[type="text"]:focus {
+  outline: none;
+}
+
+.div-select {
+  margin-top: -30px;
+  margin-right: 5px;
+}
+
+.filter-active {
+  margin-right: 13px;
+  margin-left: -10px;
+  color: #F1BC31;
+}
+
+.div-filter {
+  margin-left: 13px;
+  font-size: 12px;
+  background-color: #F1BC31;
+  color: white;
+  margin-top: 5px;
+  padding-left: 7px;
+  padding-right: 5px;
+  border-radius: 15px;
+  width: 110px;
+  cursor: pointer !important;
+}
+
+.icon-close {
+  font-size: 15px;
+  cursor: pointer !important;
+}
+</style>

package/src/component/shared/SelectOption.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="div-main" :class="alignment">
+    <div class="title" :style="'font-size:' + titleSize + 'px;'">
+      {{ title }}
+    </div>
+    <div class="alignment" v-for="option in options">
+      <div class="select-option" :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ 'selected-option': option.value == selected }" @click="optionSelected(option.value)">
+        <div class="text-center">
+          <span class="title" :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
+            <i v-if="size === 'small'" :class="option.icon" :style="option.iconStyle"></i>
+            {{ option.title }}
+          </span>
+          <div v-if="size === 'medium'" class="icon div-icon" :style="'font-size:' + option.iconSize + 'px;'">
+            <i :class="option.icon" :style="option.iconStyle"></i>
+          </div>
+        </div>
+        <div v-if="option.tipId">
+          <i v-b-tooltip.hover :title="tip(option.tipId)" class="fas fa-question-circle"></i>
+        </div>
+      </div>
+    </div>
+    <div class="div-btn" v-if="showButtonNext">
+      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null"
+        :classIcon="buttonClassIcon" :size="buttonSize" :clicked="execute" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SelectOption",
+  components: {
+    Button,
+  },
+  props: {
+    title: String,
+    titleSize: Number,
+    fieldTarget: String,
+    buttonSize: String,
+    buttonClassIcon: String,
+    showButtonNext: { type: Boolean, default: true },
+    size: { type: String, default: "medium" },
+    alignment: { type: String, default: "text-center" },
+    disabled: Boolean,
+    width: Number,
+    height: Number,
+    options: Array,
+    initialValue: Number,
+    value: Number,
+    clickedNext: Function,
+  },
+  data() {
+    return {
+      selected: null,
+    };
+  },
+  created() {
+    this.selected = this.initialValue;
+  },
+  methods: {
+    ...mapMutations("generic", ["addFilter", "removeLoading"]),
+    optionSelected(value) {
+      if (!this.disabled) {
+        this.selected = value;
+        this.$emit("input", value);
+        this.executeFilter(value);
+      }
+    },
+    executeFilter(value) {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: value };
+        this.addFilter(obj);
+      }
+    },
+    execute() {
+      let self = this;
+      setTimeout(function () {
+        self.removeLoading(["btnClickedNext"]);
+        if (self.clickedNext) self.clickedNext();
+      }, 350);
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["tip"]),
+  },
+  watch: {
+    value: {
+      handler(value) {
+        this.selected = value;
+      },
+      deep: true,
+    },
+  }
+};
+</script>
+<style scoped>
+.div-main {
+
+  padding: 0px;
+}
+
+.select-option {
+  cursor: pointer;
+  border: 1px solid #e5e4e8;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 16px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
+}
+
+.select-option:hover {
+  background-color: white;
+}
+
+.alignment {
+  display: inline-block;
+}
+
+.selected-option {
+  background-color: white;
+  border-color: #4680a5;
+}
+
+.icon {
+  margin-top: 5px;
+  color: #577696;
+}
+
+.text {
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.title {
+  margin-bottom: 10px;
+}
+
+.div-btn {
+  margin-top: 10px;
+}
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
+
+.div-icon {
+  margin-right: 10px;
+}
+</style>

package/src/component/shared/Table.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div class="icon-print" v-print="'#printTable'">
+      <i title="Imprimir" class="fas fa-print"></i>
+    </div>
+    <table id="printTable" class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th class="td-checkbox" v-if="showChecks">
+            <div class="hide-print">
+              <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="hide-print" :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 print from "vue-print-nb";
+
+import draggable from "vuedraggable";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  components: { draggable, TableItem },
+  directives: {
+    print,
+  },
+  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;
+}
+
+.icon-print {
+  font-size: 16px;
+  cursor: pointer;
+  margin-bottom: 5px;
+  width: 100px;
+}
+
+.title-table-print {
+  font-size: 13.8px;
+  margin-left: 6px;
+}
+</style>

package/src/component/shared/TableButton.vue

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

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