@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/shared/Report.vue

@@ -1,250 +0,0 @@
-<template>
-  <div class="preview">
-    <div class="toolbar">
-      <div class="icon-toolbar" v-print="'#printMeSub'">
-        <i class="fas fa-print"></i>
-      </div>
-      <div v-if="loadingFile" class="icon-toolbar">
-        <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
-      </div>
-      <div v-else @click="generatePDF" class="icon-toolbar">
-        <i class="fa-solid fa-file-pdf"></i>
-      </div>
-      <div class="icon-toolbar icon-excel">
-        <ExportExcel :nameFile="name" :header="header" :data="data" />
-      </div>
-    </div>
-    <ScrollBar :minHeight="400" :maxHeight="500">
-      <br />
-      <div id="printMeSub" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
-        <HeaderReport :title="titleHeader" />
-        <table class="table table-responsive-md">
-          <thead>
-            <tr>
-              <th v-for="(obj, ind) in header" :key="ind">
-                <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
-                  <i class="fas fa-search" v-if="obj.iconSearch"></i>
-                  <span class="title-header"> {{ obj.title }}</span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
-              <td v-for="(obj, ind) in header" :key="ind">
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'text'">
-                  {{ row[obj.field] }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'date'">
-                  {{ row[obj.field] | moment("DD/MM/YYYY") }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'dateTime'">
-                  {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'currency'">
-                  {{ row[obj.field] | currency }}
-                </div>
-              </td>
-            </tr>
-          </tbody>
-          <tbody v-show="data.length == 0">
-            <tr>
-              <td colspan="12">
-                <span>Nenhum registro encontrado!</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div>
-          <TotalizationReport :totalization="totalization" :totalizationCustom="totalizationCustom"
-            :totalRecords="data.length" />
-        </div>
-      </div>
-    </ScrollBar>
-  </div>
-</template>
-
-<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";
-import html2pdf from 'html2pdf.js'
-
-import { mapMutations } from "vuex";
-
-export default {
-  directives: {
-    print,
-  },
-  props: ["name", "titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
-  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
-  data() {
-    return {
-      loadingFile: false,
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["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;
-      }
-    },
-    sendEvent(eventName, data) {
-      if (eventName) this.addEvent({ name: eventName, data: data });
-    },
-    async generatePDF() {
-      try {
-        this.loadingFile = true;
-
-        const element = document.getElementById('printMeSub');
-
-        const opt = {
-          margin: 0,
-          filename: this.name + '.pdf',
-          image: { type: 'jpeg', quality: 0.98 },
-          html2canvas: { scale: 2 },
-          jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
-        };
-
-        await html2pdf()
-          .set(opt)
-          .from(element)
-          .save();
-
-      } catch (error) {
-        console.error('Erro ao gerar PDF:', error);
-      } finally {
-        this.loadingFile = false;
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-table tbody tr td {
-  width: 1100px;
-}
-
-.table thead tr {
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-}
-
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 0px !important;
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-  padding-right: 5px !important;
-  border-bottom: 0px !important;
-  border-top: 0px !important;
-  font-size: 13px !important;
-}
-
-.title-header {
-  font-size: 12px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.table-number {
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.table-main {
-  color: #757d8c;
-  max-width: 200px;
-}
-
-.table-currency {
-  font-size: 12px;
-  min-width: 100px;
-}
-
-.preview {
-  background-color: #fafafa;
-  padding-bottom: 20px;
-  border: 1px solid #e4e6ec;
-}
-
-.loading-icon {
-  color: orange;
-  font-size: 19px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.toolbar {
-  height: 40px;
-  border-bottom: 1px hsl(0, 0%, 82.7%) solid;
-  overflow: hidden;
-}
-
-.icon-toolbar {
-  width: 20px;
-  font-size: 18px;
-  margin-left: 10px;
-  margin-top: 2px;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.a4 {
-  max-width: 1100px;
-  padding: 20px;
-  border-radius: var(--ck-border-radius);
-  background: white;
-  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
-  margin: 0 auto;
-}
-
-.footer {
-  margin-bottom: 10px;
-}
-
-.icon-excel {
-  color: green;
-}
-
-.danger {
-  color: #f0134d;
-}
-
-.progress-rent {
-  color: #4bb4e2;
-}
-
-.accepted {
-  color: #38a169;
-}
-
-.rejected {
-  color: #f0134d;
-}
-</style>

package/src/component/shared/SaveCancel.vue

@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <FixedBar :position="positionFixedBar" backgroundColor="#FAFAFC"
-      v-show="formDirty && !modal.open && on || showFixed">
-      <div :class="{ collapsed: menuCollapsed, notCollapsed: !menuCollapsed }"
-        :style="'margin-bottom:' + marginBottom + 'px'">
-        <Button _key="cancelSaveCancel" eventName="cancelSaveCancel" title="Cancelar" type="danger" size="small"
-          :clicked="cancel" />
-        <Button _key="saveSaveCancel" :eventName="eventName" classIcon="fa-solid fa-floppy-disk" title="Salvar"
-          type="success" :disabled="!isFormValid(formName)" size="medium" />
-        <slot></slot>
-      </div>
-    </FixedBar>
-  </div>
-</template>
-<script>
-import FixedBar from "@nixweb/nixloc-ui/src/component/layout/FixedBar.vue";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-import { mapState, mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "SaveCancel",
-  components: { FixedBar, Button },
-  props: {
-    formName: String,
-    showFixed: {
-      type: Boolean,
-      default: false,
-    },
-    eventName: {
-      type: String,
-      default: "saveSaveCancel",
-    },
-    positionFixedBar: {
-      type: String,
-      default: "footer",
-    },
-    marginBottom: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      id: this.$route.params.id,
-      on: false,
-    };
-  },
-  mounted() {
-    if (!this.id) {
-      let self = this;
-      setTimeout(function () {
-        self.resetValidation(this.formName);
-        self.updateFormDirty(false);
-        self.removeLoading(["panel"]);
-      }, 350);
-    }
-
-    let self = this;
-    setTimeout(function () {
-      self.updateFormDirty(false);
-      self.on = true;
-    }, 1000);
-  },
-  computed: {
-    ...mapState("validation", ["formDirty"]),
-    ...mapState("generic", ["loading"]),
-    ...mapGetters("generic", ["event"]),
-    ...mapGetters("validation", ["isFormValid"]),
-    ...mapState("generic", ["modal", "menuCollapsed"]),
-  },
-  methods: {
-    ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
-    ...mapMutations("generic", ["removeLoading", "hideSideBar"]),
-    cancel() {
-      this.updateFormDirty(false);
-      this.removeLoading(["cancelSaveCancel"]);
-      this.hideSideBar();
-    },
-  },
-  watch: {
-    "modal.open": function () {
-      this.updateFormDirty(false);
-    },
-  },
-};
-</script>
-<style scoped>
-.collapsed {
-  margin-left: 0px;
-  transition: all 0.4s ease;
-}
-
-.notCollapsed {
-  margin-left: 130px;
-  transition: all 0.4s ease;
-}
-</style>

package/src/component/shared/Search.vue

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

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