@nixweb/nixloc-ui 1.19.0 → 1.20.0

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

@@ -1,221 +1,221 @@
-<template>
-    <div>
-        <b-row>
-            <b-col sm="9">
-                <SelectStatic title="Tipo" :onlyQuery="true" :data="options" :markFormDirty="true"
-                    v-model="filterSelected" />
-            </b-col>
-        </b-row>
-        <div>
-            <div v-for="item in filtersAdded">
-                <div class="molded">
-                    <b-row>
-                        <b-col sm="11">
-                            <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
-                                :initialValue="item.value" v-model="item.value" />
-                            <div class="div-date">
-                                <DateTime v-if="item.type == 'date' || item.type == 'dateRange'" :title="item.title"
-                                    format="DD/MM/YYYY" type="date" :range="true" :confirm="true" confirmText="Ok"
-                                    placeholder v-model="item.value" />
-                            </div>
-                            <div v-if="item.type == 'decimal'">
-                                <b-row>
-                                    <b-col sm="6">
-                                        <InputDecimal title="Valor Inicial" v-model="item.valueStart" />
-                                    </b-col>
-                                    <b-col sm="6">
-                                        <InputDecimal title="Valor Final" v-model="item.valueEnd" />
-                                    </b-col>
-                                </b-row>
-                            </div>
-                            <div v-if="item.type == 'multiOptions' || item.type == 'listOptions'">
-                                <div class="div-multi-options">
-                                    <CheckboxServer v-if="!item.options" :title="item.title"
-                                        :propsParams="item.propsParams" :url="item.url" v-model="item.value" />
-
-                                    <CheckboxGroup v-else :title="item.title" :options="item.options"
-                                        :initialValue="item.value" v-model="item.value" />
-                                </div>
-                            </div>
-
-                            <RadioGroup v-if="item.type == 'radio'" :title="item.title" :options="item.options"
-                                v-model="item.value" />
-
-                            <InputText v-if="item.type == 'text' || item.type == 'patrimony'" :title="item.title"
-                                v-model="item.value" />
-
-                            <InputNumber v-if="item.type == 'number'" :title="item.title" v-model="item.value" />
-                        </b-col>
-                        <b-col sm="1">
-                            <div class="icon-remove" @click="removeItem(item.field)">
-                                <i class="fas fa-times"></i>
-                            </div>
-                        </b-col>
-                    </b-row>
-                </div>
-            </div>
-        </div>
-        <div class="text-center">
-            <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
-                :clicked="apply" />
-        </div>
-    </div>
-</template>
-
-<script>
-
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
-import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
-import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
-import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
-import CheckboxServer from "@nixweb/nixloc-ui/src/component/forms/CheckboxServer";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
-import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
-
-import { mapMutations, mapState, mapGetters } from "vuex";
-
-export default {
-    name: "FilterBuilder",
-    props: ["filters", "value"],
-    components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, InputNumber, ScrollBar, DateTime, InputDecimal, RadioGroup },
-    data() {
-        return {
-            filterSelected: {},
-            filtersAdded: [],
-        }
-    },
-    mounted() {
-        var filterStorage = this.getQueryFilter(this.$route.name);
-        if (filterStorage) {
-            this.filtersAdded = filterStorage.filtersAdded;
-            this.addEvent({ name: "stringFilter", data: this.filterFinal });
-        }
-
-    },
-    computed: {
-        ...mapGetters("generic", ["event", "getQueryFilter"]),
-        ...mapState("generic", ["filterQuery"]),
-        options() {
-            let options = [];
-            this.filters.forEach(filter => {
-                options.push(
-                    {
-                        id: filter.type,
-                        content: filter.title,
-                        listName: filter.listName,
-                        field: filter.field,
-                        options: filter.options,
-                        title: filter.title,
-                        type: filter.type,
-                        url: filter.url,
-                        value: filter.value,
-                        required: filter.required,
-                        propsParams: filter.propsParams
-                    });
-            });
-            return options;
-        },
-        filterFinal() {
-            return this.filtersAdded.map(item => ({
-                routeName: this.$route.name,
-                title: item.title,
-                listName: item.listName,
-                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.toString()
-            }));
-        },
-    },
-    methods: {
-        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading", "addFilterQuery"]),
-        add() {
-            if (this.filterSelected.id && !this.contentExists(this.filterSelected.field)) {
-                this.filtersAdded.push(this.filterSelected);
-                this.filterSelected = { content: "", id: "" };
-            }
-            this.removeLoading(["btnAddFilter"]);
-        },
-        contentExists(field) {
-            return this.filtersAdded.some(item => item.field === field);
-        },
-        removeItem(field) {
-            this.filtersAdded = this.filtersAdded.filter(item => item.field !== field);
-        },
-        apply() {
-            this.addEvent({ name: "stringFilter", data: this.filterFinal });
-            this.hideModal();
-            this.removeLoading(["btnApply"]);
-        }
-    },
-    watch: {
-        event: {
-            handler(event) {
-
-                if (event.name == "tagFilterRemove") {
-                    this.removeItem(event.data.field);
-                    this.addEvent({ name: "stringFilter" });
-                }
-
-                if (event.name == "filterStorageRemoved") {
-                    this.filtersAdded = [];
-                    this.addEvent({ name: "stringFilter", data: this.filterFinal });
-                }
-            },
-            deep: true,
-        },
-        filterFinal: {
-            handler(filterFinal) {
-                this.$emit("input", filterFinal);
-                this.addFilterQuery({ routeName: this.$route.name, filtersAdded: this.filtersAdded });
-            },
-            deep: true,
-        },
-        filterSelected: {
-            handler(filterSelected) {
-                this.add();
-            },
-            deep: true,
-        },
-    },
-}
-
-
-</script>
-
-<style scoped>
-.div-btn {
-    margin-top: 38px;
-}
-
-.div-date {
-    width: 300px;
-}
-
-.molded {
-    border: 1px solid #e8eaed;
-    background-color: white;
-    border-radius: 8px !important;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 10px;
-    margin-bottom: 10px;
-}
-
-
-.icon-remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 60px;
-    width: 30px;
-    cursor: pointer;
-    color: #F0134D;
-    cursor: pointer;
-    font-size: 17px;
-}
+<template>
+    <div>
+        <b-row>
+            <b-col sm="9">
+                <SelectStatic title="Tipo" :onlyQuery="true" :data="options" :markFormDirty="true"
+                    v-model="filterSelected" />
+            </b-col>
+        </b-row>
+        <div>
+            <div v-for="item in filtersAdded">
+                <div class="molded">
+                    <b-row>
+                        <b-col sm="11">
+                            <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
+                                :initialValue="item.value" v-model="item.value" />
+                            <div class="div-date">
+                                <DateTime v-if="item.type == 'date' || item.type == 'dateRange'" :title="item.title"
+                                    format="DD/MM/YYYY" type="date" :range="true" :confirm="true" confirmText="Ok"
+                                    placeholder v-model="item.value" />
+                            </div>
+                            <div v-if="item.type == 'decimal'">
+                                <b-row>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Inicial" v-model="item.valueStart" />
+                                    </b-col>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Final" v-model="item.valueEnd" />
+                                    </b-col>
+                                </b-row>
+                            </div>
+                            <div v-if="item.type == 'multiOptions' || item.type == 'listOptions'">
+                                <div class="div-multi-options">
+                                    <CheckboxServer v-if="!item.options" :title="item.title"
+                                        :propsParams="item.propsParams" :url="item.url" v-model="item.value" />
+
+                                    <CheckboxGroup v-else :title="item.title" :options="item.options"
+                                        :initialValue="item.value" v-model="item.value" />
+                                </div>
+                            </div>
+
+                            <RadioGroup v-if="item.type == 'radio'" :title="item.title" :options="item.options"
+                                v-model="item.value" />
+
+                            <InputText v-if="item.type == 'text' || item.type == 'patrimony'" :title="item.title"
+                                v-model="item.value" />
+
+                            <InputNumber v-if="item.type == 'number'" :title="item.title" v-model="item.value" />
+                        </b-col>
+                        <b-col sm="1">
+                            <div class="icon-remove" @click="removeItem(item.field)">
+                                <i class="fas fa-times"></i>
+                            </div>
+                        </b-col>
+                    </b-row>
+                </div>
+            </div>
+        </div>
+        <div class="text-center">
+            <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
+                :clicked="apply" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import CheckboxServer from "@nixweb/nixloc-ui/src/component/forms/CheckboxServer";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+
+import { mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+    name: "FilterBuilder",
+    props: ["filters", "value"],
+    components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, InputNumber, ScrollBar, DateTime, InputDecimal, RadioGroup },
+    data() {
+        return {
+            filterSelected: {},
+            filtersAdded: [],
+        }
+    },
+    mounted() {
+        var filterStorage = this.getQueryFilter(this.$route.name);
+        if (filterStorage) {
+            this.filtersAdded = filterStorage.filtersAdded;
+            this.addEvent({ name: "stringFilter", data: this.filterFinal });
+        }
+
+    },
+    computed: {
+        ...mapGetters("generic", ["event", "getQueryFilter"]),
+        ...mapState("generic", ["filterQuery"]),
+        options() {
+            let options = [];
+            this.filters.forEach(filter => {
+                options.push(
+                    {
+                        id: filter.type,
+                        content: filter.title,
+                        listName: filter.listName,
+                        field: filter.field,
+                        options: filter.options,
+                        title: filter.title,
+                        type: filter.type,
+                        url: filter.url,
+                        value: filter.value,
+                        required: filter.required,
+                        propsParams: filter.propsParams
+                    });
+            });
+            return options;
+        },
+        filterFinal() {
+            return this.filtersAdded.map(item => ({
+                routeName: this.$route.name,
+                title: item.title,
+                listName: item.listName,
+                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.toString()
+            }));
+        },
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading", "addFilterQuery"]),
+        add() {
+            if (this.filterSelected.id && !this.contentExists(this.filterSelected.field)) {
+                this.filtersAdded.push(this.filterSelected);
+                this.filterSelected = { content: "", id: "" };
+            }
+            this.removeLoading(["btnAddFilter"]);
+        },
+        contentExists(field) {
+            return this.filtersAdded.some(item => item.field === field);
+        },
+        removeItem(field) {
+            this.filtersAdded = this.filtersAdded.filter(item => item.field !== field);
+        },
+        apply() {
+            this.addEvent({ name: "stringFilter", data: this.filterFinal });
+            this.hideModal();
+            this.removeLoading(["btnApply"]);
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+
+                if (event.name == "tagFilterRemove") {
+                    this.removeItem(event.data.field);
+                    this.addEvent({ name: "stringFilter" });
+                }
+
+                if (event.name == "filterStorageRemoved") {
+                    this.filtersAdded = [];
+                    this.addEvent({ name: "stringFilter", data: this.filterFinal });
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+                this.addFilterQuery({ routeName: this.$route.name, filtersAdded: this.filtersAdded });
+            },
+            deep: true,
+        },
+        filterSelected: {
+            handler(filterSelected) {
+                this.add();
+            },
+            deep: true,
+        },
+    },
+}
+
+
+</script>
+
+<style scoped>
+.div-btn {
+    margin-top: 38px;
+}
+
+.div-date {
+    width: 300px;
+}
+
+.molded {
+    border: 1px solid #e8eaed;
+    background-color: white;
+    border-radius: 8px !important;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    margin-bottom: 10px;
+}
+
+
+.icon-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    width: 30px;
+    cursor: pointer;
+    color: #F0134D;
+    cursor: pointer;
+    font-size: 17px;
+}
 </style>

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

@@ -1,95 +1,95 @@
-<template>
-    <div class="div-main-filter">
-        <div>
-            <Button _key="btnFilter" tooltip="Aplicar Filtros" color="black" backGroundColor="#F0F0F0" title="Filtros"
-                classIcon="fa-sharp fa-solid fa-filters" size="small" :clicked="openFilter" />
-
-            <div class="side-by-side" v-for="item in tags">
-                <div class="div-tag">
-                    <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag"
-                        :clickedBody="openFilter" :clickedRemove="removeTag" :title="item.title" :value="item.value"
-                        :tagRemoved="false" />
-                </div>
-            </div>
-        </div>
-
-        <Modal title="Filtros" :width="700" :height="750" v-show="showModal('filter')">
-            <slot></slot>
-            <FilterBuilder :filters="filters" v-model="filterFinal" />
-        </Modal>
-    </div>
-</template>
-
-<script>
-
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import FilterBuilder from "./FilterBuilder.vue";
-import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
-
-import { mapGetters, mapMutations } from "vuex";
-
-
-export default {
-    name: "FilterQuery",
-    props: ["filters", "showDateYearMonth", "value"],
-    components: {
-        Button, Modal, FilterBuilder, Tag
-    },
-    data() {
-        return {
-            filterFinal: [],
-            tags: [],
-        }
-    },
-    computed: {
-        ...mapGetters("generic", ["showModal", "event"]),
-    },
-    methods: {
-        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags", "updateFilterFinal"]),
-        openFilter() {
-            this.openModal("filter");
-            this.removeLoading(["btnFilter"]);
-        },
-        removeTag(params) {
-            this.tags = this.tags.filter(item => item.field !== params.field);
-            this.addEvent({ name: "tagFilterRemove", data: params });
-        }
-    },
-    watch: {
-        event: {
-            handler(event) {
-                if (event.name == "stringFilter") {
-                    var data = JSON.stringify(event.data);
-                    this.tags = JSON.parse(data);
-                }
-            },
-            deep: true,
-        },
-        filterFinal: {
-            handler(filterFinal) {
-                this.$emit("input", filterFinal);
-                this.updateFilterFinal(filterFinal);
-            },
-            deep: true,
-        },
-        tags: {
-            handler(tags) {
-                this.updateQueryTags(tags);
-            },
-            deep: true,
-        },
-    },
-
-}
-
-</script>.
-<style>
-.div-main-filter {
-    margin-bottom: 20px;
-}
-
-.div-tag {
-    margin-left: 2px;
-}
-</style>
+<template>
+    <div class="div-main-filter">
+        <div>
+            <Button _key="btnFilter" tooltip="Aplicar Filtros" color="black" backGroundColor="#F0F0F0" title="Filtros"
+                classIcon="fa-sharp fa-solid fa-filters" size="small" :clicked="openFilter" />
+
+            <div class="side-by-side" v-for="item in tags">
+                <div class="div-tag">
+                    <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag"
+                        :clickedBody="openFilter" :clickedRemove="removeTag" :title="item.title" :value="item.value"
+                        :tagRemoved="false" />
+                </div>
+            </div>
+        </div>
+
+        <Modal title="Filtros" :width="700" :height="750" v-show="showModal('filter')">
+            <slot></slot>
+            <FilterBuilder :filters="filters" v-model="filterFinal" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import FilterBuilder from "./FilterBuilder.vue";
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
+
+import { mapGetters, mapMutations } from "vuex";
+
+
+export default {
+    name: "FilterQuery",
+    props: ["filters", "showDateYearMonth", "value"],
+    components: {
+        Button, Modal, FilterBuilder, Tag
+    },
+    data() {
+        return {
+            filterFinal: [],
+            tags: [],
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal", "event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags", "updateFilterFinal"]),
+        openFilter() {
+            this.openModal("filter");
+            this.removeLoading(["btnFilter"]);
+        },
+        removeTag(params) {
+            this.tags = this.tags.filter(item => item.field !== params.field);
+            this.addEvent({ name: "tagFilterRemove", data: params });
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "stringFilter") {
+                    var data = JSON.stringify(event.data);
+                    this.tags = JSON.parse(data);
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+                this.updateFilterFinal(filterFinal);
+            },
+            deep: true,
+        },
+        tags: {
+            handler(tags) {
+                this.updateQueryTags(tags);
+            },
+            deep: true,
+        },
+    },
+
+}
+
+</script>.
+<style>
+.div-main-filter {
+    margin-bottom: 20px;
+}
+
+.div-tag {
+    margin-left: 2px;
+}
+</style>