@nixweb/nixloc-ui 0.0.283 → 0.0.285

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.283",
+  "version": "0.0.285",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/Tag.vue

@@ -66,12 +66,19 @@ export default {
   font-size: 13px;
   height: 32px;
   margin: 4px 8px 4px 0;
-  width: 100%;
   outline: none;
   padding: 0 6px 0 16px;
   position: relative;
   white-space: nowrap;
   cursor: pointer;
+
+}
+
+.title-tag {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .div-tag {

package/src/component/report/Fields.vue

@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <Button _key="btnFields" color="black" backGroundColor="#F0F0F0" title="Campos"
+            classIcon="fa-sharp fa-solid fa-text-size" size="small" :clicked="open" />
+
+        <Modal title="Campos" :width="600" :height="200" v-if="showModal('fields')">
+            <b-row>
+                <b-col sm="6">
+                    <ScrollBar :minHeight="300" :maxHeight="300">
+                        <div v-for="item in data">
+                            <b-form-checkbox v-model="item.show" :value="true" :unchecked-value="false">
+                                <span class="title">{{ item.title }}</span>
+                            </b-form-checkbox>
+                        </div>
+                    </ScrollBar>
+                </b-col>
+                <b-col sm="6">
+                    <RadioGroup :options="[
+                        { text: 'Crescente', value: 'asc' },
+                        { text: 'Decrescente', value: 'desc' },
+                    ]" v-model="ordering" />
+                    <SelectStatic title="Ordenar" :initialValue="initialValue" fieldTarget="order" :data="options"
+                        v-model="fieldOrdering" />
+                </b-col>
+            </b-row>
+
+            <div class="text-center">
+                <Button _key="btnApply" backGroundColor="#017AFF" color="white" title="Aplicar" size="small"
+                    :clicked="apply" />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+    name: "Fields",
+    props: ["data", "value"],
+    components: {
+        Modal,
+        Button,
+        ScrollBar,
+        CheckboxSimple,
+        RadioGroup,
+        SelectStatic
+    },
+    data() {
+        return {
+            initialValue: {},
+            ordering: "asc",
+            fieldOrdering: {},
+        }
+    },
+    created() {
+        this.initialValue = { content: this.data[0].title, id: this.data[0].fieldOrderBy };
+        this.$emit("input", { ordering: this.ordering, field: this.data[0].fieldOrderBy });
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+        options() {
+            let data = [];
+            this.data.forEach(item => {
+                var obj = { content: item.title, id: item.fieldOrderBy }
+                data.push(obj);
+            });
+            return data;
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "openModal", "hideModal", "removeLoading"]),
+        open() {
+            this.openModal("fields");
+            this.removeLoading(["btnFields"]);
+        },
+        apply() {
+            this.removeLoading(["btnApply"]);
+            this.hideModal();
+            this.addEvent({ name: "orderedFilter" });
+        }
+    },
+    watch: {
+        fieldOrdering: {
+            handler() {
+                this.$emit("input", { ordering: this.ordering, field: this.fieldOrdering.id });
+            },
+            deep: true,
+        },
+        ordering: {
+            handler() {
+                this.$emit("input", { ordering: this.ordering, field: this.fieldOrdering.id });
+            },
+            deep: true,
+        },
+    },
+}
+
+</script>

package/src/component/report/Report.vue

@@ -0,0 +1,276 @@
+<template>
+    <div class="main">
+        <Panel :module="module" layout="large" :title="name" :showVerticalFilter="false" :showSearch="false"
+            :showButtons="false">
+            <div slot="content-main">
+                <br>
+                <div class="div-btn">
+                    <Molded>
+                        <div class="div-filter">
+                            <div class="side-by-side">
+                                <div class="div-filter">
+                                    <Button _key="btnSearchReport" :disabled="loading || !isValid" type="primary"
+                                        title="Buscar" classIcon="fas fa-file-search" size="medium" :clicked="getAll" />
+                                </div>
+                            </div>
+                            <div class="side-by-side">
+                                <Fields :data="header" v-model="ordering" />
+                            </div>
+                            <div class="side-by-side">
+                                <FilterQuery :filters="filters" v-model="stringFilter" />
+                            </div>
+                        </div>
+                    </Molded>
+                </div>
+                <div v-if="liveTotalRecords != totalRecords">
+                    <ProgressBar :text="`Carregando ${liveTotalRecords} registros de ${totalRecords}`"
+                        :value="liveTotalRecords" :max="totalRecords" size="medium" />
+                </div>
+                <div v-if="!isValid">
+                    <Alert type="info">
+                        <span>
+                            É necessário informar o filtro <b>{{ fieldsRequired }}</b>, clique no botão <b> <i
+                                    class="div-icon-btn fa-sharp fa-solid fa-filters" aria-hidden="true"></i> Filtros
+                            </b>para
+                            adicionar.
+                        </span>
+                    </Alert>
+                </div>
+                <div v-if="show" class="preview">
+                    <div class="toolbar">
+                        <div class="icon-toolbar" v-print="'#printMe'">
+                            <i class="fas fa-print"></i>
+                        </div>
+                        <div class="icon-toolbar icon-excel">
+                            <ExportExcel :nameFile="name" :header="dataConditional" :data="data" />
+                        </div>
+                        <div v-if="loading" class="icon-toolbar">
+                            <vue-loading type="bubbles" color="orange" :size="{ width: '26px', height: '26px' }">
+                            </vue-loading>
+                        </div>
+                    </div>
+                    <ScrollBar :minHeight="400" :maxHeight="820">
+                        <br />
+                        <div id="printMe" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
+                            <HeaderReport :title="name" />
+                            <div>
+                                <span>Total de <b> {{ totalRecords }}</b> registro(s) </span>
+                            </div>
+                            <ReportTable :header="dataConditional" :data="data" />
+                            <Totalization :totalization="totalization" />
+                        </div>
+                    </ScrollBar>
+                </div>
+            </div>
+        </Panel>
+        <br>
+        <br>
+    </div>
+</template>
+
+<script>
+
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import HeaderReport from "../shared/HeaderReport.vue";
+import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+import ReportTable from "@nixweb/nixloc-ui/src/component/report/ReportTable.vue";
+import Totalization from "@nixweb/nixloc-ui/src/component/report/Totalization.vue";
+import FilterQuery from '@nixweb/nixloc-ui/src/component/shared/filter-builder/FilterQuery.vue'
+import ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Fields from "@nixweb/nixloc-ui/src/component/report/Fields.vue";
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import print from "vue-print-nb";
+
+import { mapMutations, mapActions, mapGetters } from "vuex";
+
+
+export default {
+    directives: {
+        print,
+    },
+    props: ["name", "module", "urlGet", "header", "filters", "minHeight"],
+    components: { ScrollBar, HeaderReport, Alert, ExportExcel, ReportTable, Molded, FilterQuery, Button, Fields, Panel, Loading, Totalization, ProgressBar },
+    data() {
+        return {
+            loading: false,
+            show: false,
+            data: [],
+            totalization: [],
+            ordering: {},
+            stringFilter: [],
+            totalRecords: 0,
+            currentPage: 1,
+            totalPerPage: 50,
+            pagination: []
+        }
+    },
+    mounted() {
+        this.removeLoading(["panel"]);
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        dataConditional() {
+            return this.header.filter(item => item.show);
+        },
+        liveTotalRecords() {
+            return this.data.length;
+        },
+        isValid() {
+            var hasRequired = this.filters.some(item => item.required);
+            if (hasRequired) {
+                return this.stringFilter.some(item => item.required == true && item.value !== "");
+            } else {
+                return true;
+            }
+        },
+        fieldsRequired() {
+            let title = "";
+            var filter = this.filters.filter(item => item.required);
+            filter.forEach(item => {
+                title += item.title + ' ou '
+            });
+            return title.replace(/ ou\s*$/, '');
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["removeLoading"]),
+        ...mapActions("generic", ["getApi"]),
+        getAll() {
+            if (this.isValid) {
+                this.removeLoading(["btnSearchReport"]);
+                this.loading = true;
+                let params = {
+                    url: this.urlGet,
+                    obj:
+                    {
+                        stringFilter: JSON.stringify(this.stringFilter),
+                        fieldOrder: this.ordering.field,
+                        ordering: this.ordering.ordering,
+                        currentPage: this.currentPage,
+                        totalPerPage: this.totalPerPage,
+                        noPaginated: true
+                    }
+                };
+
+                this.getApi(params).then((response) => {
+                    let self = this;
+                    this.totalization = response.content.totalization;
+                    this.totalRecords = response.content.totalRecords;
+
+                    if (this.pagination.length == 0) {
+                        this.currentPage = 1;
+                        this.data = [];
+                    }
+
+                    if (this.pagination.length == 0) {
+                        var pagination = response.content.totalRecords / this.totalPerPage;
+                        var arr = Math.ceil(pagination);
+                        for (var i = 1; i <= arr; i++) {
+                            self.pagination.push(i);
+                        }
+                    } else {
+                        this.pagination.pop();
+                    }
+
+                    response.content.data.forEach(item => {
+                        self.data.push(item);
+                    });
+
+                    this.show = true;
+                    setTimeout(function () {
+                        self.loading = false;
+
+                    }, 500);
+
+                    this.verifyIfPagination();
+                });
+            }
+        },
+        verifyIfPagination() {
+            if (this.pagination.length > 0) {
+                this.currentPage++;
+
+                let self = this;
+                setTimeout(function () {
+                    self.getAll();
+                }, 500);
+            } else {
+                this.currentPage = 1;
+            }
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (this.show) {
+                    if (event.name == "stringFilter" || event.name == "orderedFilter") {
+                        let self = this;
+                        setTimeout(function () {
+                            self.getAll();
+                        }, 500);
+                    }
+                }
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.main {
+    margin-bottom: 30px;
+}
+
+.div-btn {
+    margin-bottom: 30px;
+}
+
+.preview {
+    background-color: #fafafa;
+    padding-bottom: 20px;
+    border: 1px solid #e4e6ec;
+    height: 100%;
+}
+
+.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: 1200px;
+    padding: 20px;
+    border-radius: var(--ck-border-radius);
+    background: white;
+    box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
+    margin: 0 auto;
+}
+
+.div-filter {
+    margin-bottom: -12px;
+}
+
+.footer {
+    margin-bottom: 10px;
+}
+
+.icon-excel {
+    color: green;
+}
+</style>

package/src/component/report/ReportTable.vue

@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <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)">
+                            {{ row[obj.field] }}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody v-show="data.length == 0">
+                <tr>
+                    <td colspan="12">
+                        <span>Nenhum registro encontrado!</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+</template>
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ReportTable",
+    props: ["header", "data"],
+    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 });
+        }
+    },
+}
+
+</script>
+<style scoped>
+table tbody tr td {
+    max-width: 350px;
+}
+
+.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;
+}
+</style>

package/src/component/report/Totalization.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <hr class="hr-report" />
+        <div class="text-right" v-for="item in totalization" :key="item.title">
+            <b-row>
+                <b-col sm="10">
+                    <span>
+                        <span class="title-report-header">
+                            {{ item.title }} ..................
+                        </span>
+                    </span>
+                </b-col>
+                <b-col sm="2">
+                    {{ item.value }}
+                </b-col>
+            </b-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Totalization",
+    props: ["totalization"],
+
+}
+
+</script>
+<style scoped>
+.hr-report {
+    background: black !important;
+    height: 0px !important;
+}
+</style>

package/src/component/shared/ExportExcel.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <download-excel :fields="column" :data="data" :before-finish="exportFinished" worksheet="Planilha"
-      :name="`${fileName}.xls`">
+      :name="`${nameFile}.xls`">
       <i class="fas fa-file-excel"></i>
     </download-excel>
   </div>
@@ -17,6 +17,7 @@ export default {
   props: {
     header: Array,
     data: Array,
+    nameFile: String
   },
   components: {
     Button,
@@ -48,7 +49,7 @@ export default {
       return object;
     },
     fileName() {
-      return this.$route.matched[0].props.default.report;
+      return this.nameFile;
     },
   },
 };

package/src/component/shared/filter-builder/FilterBuilder.vue

@@ -34,7 +34,8 @@
                                         v-model="item.value" />
                                 </div>
                             </div>
-                            <InputText v-if="item.type == 'text'" :title="item.title" v-model="item.value" />
+                            <InputText v-if="item.type == 'text' || item.type == 'patrimony'" :title="item.title"
+                                v-model="item.value" />
                         </b-col>
                         <b-col sm="1">
                             <div class="icon-remove" @click="removeItem(item.field)">
@@ -99,6 +100,7 @@ export default {
                         type: filter.type,
                         url: filter.url,
                         value: filter.value,
+                        required: filter.required,
                         propsParams: filter.propsParams
                     });
             });
@@ -111,6 +113,7 @@ export default {
                 field: item.field,
                 type: item.type,
                 originalValue: item.value,
+                required: item.required,
                 value: item.type == "decimal" ? [item.valueStart, item.valueEnd].join(',') : Array.isArray(item.value) ? item.value.join(',') : item.value
             }));
         },