@nixweb/nixloc-ui 0.0.269 → 0.0.270
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
danger: type === 'danger',
|
|
13
13
|
disabled: disabled,
|
|
14
14
|
}" :disabled="disabled" @click="execute()">
|
|
15
|
-
<i :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
|
|
15
|
+
<i class="div-icon-btn" :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
|
|
16
16
|
<span v-if="!isLoading(this._key)">{{ title }}</span>
|
|
17
17
|
<vue-loading v-if="isLoading(this._key)" type="bubbles" color="#fff"
|
|
18
18
|
:size="{ width: '26px', height: '26px' }"></vue-loading>
|
|
@@ -64,6 +64,10 @@ export default {
|
|
|
64
64
|
margin-left: 5px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
.div-icon-btn {
|
|
68
|
+
margin-right: 3px;
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
.title {
|
|
68
72
|
margin: 2px;
|
|
69
73
|
}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div>
|
|
4
|
+
<div class="div-btn side-by-side">
|
|
5
|
+
<Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
|
|
6
|
+
:title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
|
|
7
|
+
classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
|
|
8
|
+
</div>
|
|
9
|
+
<div v-show="show" class="side-by-side">
|
|
10
|
+
<div class="input-container">
|
|
11
|
+
<input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
<div v-show="show">
|
|
17
|
+
<div class="div-loading">
|
|
18
|
+
<Loading type="line" :center="false" v-show="loading" />
|
|
19
|
+
</div>
|
|
20
|
+
<ScrollBar :minHeight="0" :maxHeight="200">
|
|
21
|
+
<div class="div-check">
|
|
22
|
+
<div class="div-items" v-for="item in data" :key="item.id">
|
|
23
|
+
<b-form-checkbox v-model="item.selected" @change="add(item)">
|
|
24
|
+
<span class="title">{{ item.content }}</span>
|
|
25
|
+
</b-form-checkbox>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div v-if="totalRecords > 20 && data.length < totalRecords">
|
|
29
|
+
<div class="after-list text-center">
|
|
30
|
+
<Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
|
|
31
|
+
:clicked="loadingMore" />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</ScrollBar>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
|
|
41
|
+
import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
|
|
42
|
+
import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
|
|
43
|
+
import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
|
|
44
|
+
|
|
45
|
+
import { mapGetters, mapMutations, mapActions } from "vuex";
|
|
46
|
+
|
|
47
|
+
export default {
|
|
48
|
+
name: "CheckboxServer",
|
|
49
|
+
components: {
|
|
50
|
+
Button, ScrollBar, Loading, InputText
|
|
51
|
+
},
|
|
52
|
+
props: {
|
|
53
|
+
title: String,
|
|
54
|
+
url: String,
|
|
55
|
+
propsParams: Object,
|
|
56
|
+
value: Array,
|
|
57
|
+
},
|
|
58
|
+
data() {
|
|
59
|
+
return {
|
|
60
|
+
show: false,
|
|
61
|
+
loading: true,
|
|
62
|
+
data: [],
|
|
63
|
+
selected: [],
|
|
64
|
+
totalRecords: 0,
|
|
65
|
+
baseParams: {
|
|
66
|
+
search: "",
|
|
67
|
+
currentPage: 1,
|
|
68
|
+
totalPerPage: 20,
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
mounted() {
|
|
73
|
+
this.getAll();
|
|
74
|
+
},
|
|
75
|
+
computed: {
|
|
76
|
+
...mapGetters("generic", ["showModal", "event"]),
|
|
77
|
+
quantitySelected() {
|
|
78
|
+
return this.selected.length > 0 ? this.selected.length : 0;
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
methods: {
|
|
82
|
+
...mapMutations("generic", ["removeLoading"]),
|
|
83
|
+
...mapActions("generic", ["getApi"]),
|
|
84
|
+
getAll() {
|
|
85
|
+
let obj = { ...this.baseParams, ...this.propsParams };
|
|
86
|
+
let params = { url: this.url, obj: obj };
|
|
87
|
+
this.loading = true;
|
|
88
|
+
this.getApi(params).then((response) => {
|
|
89
|
+
this.totalRecords = response.content.totalRecords;
|
|
90
|
+
if (this.baseParams.currentPage == 1) {
|
|
91
|
+
this.data = [];
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
let self = this;
|
|
95
|
+
response.content.data.forEach(item => {
|
|
96
|
+
self.data.push(item);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
this.markSelected();
|
|
100
|
+
|
|
101
|
+
this.loading = false;
|
|
102
|
+
this.removeLoading(["loadingMore"]);
|
|
103
|
+
});
|
|
104
|
+
},
|
|
105
|
+
loadingMore() {
|
|
106
|
+
this.baseParams.currentPage++;
|
|
107
|
+
this.getAll();
|
|
108
|
+
},
|
|
109
|
+
add(item) {
|
|
110
|
+
const index = this.selected.indexOf(item.content);
|
|
111
|
+
if (index > -1) {
|
|
112
|
+
this.selected.splice(index, 1);
|
|
113
|
+
} else {
|
|
114
|
+
this.selected.push(item.content);
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
showHide() {
|
|
118
|
+
this.show = this.show == true ? false : true;
|
|
119
|
+
this.removeLoading(["btnShow"]);
|
|
120
|
+
},
|
|
121
|
+
markSelected() {
|
|
122
|
+
this.data.forEach(item => {
|
|
123
|
+
if (this.selected.includes(item.content)) {
|
|
124
|
+
item.selected = true;
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
watch: {
|
|
130
|
+
selected: {
|
|
131
|
+
handler(value) {
|
|
132
|
+
this.$emit("input", value);
|
|
133
|
+
},
|
|
134
|
+
deep: true,
|
|
135
|
+
},
|
|
136
|
+
'baseParams.search': {
|
|
137
|
+
handler(value) {
|
|
138
|
+
this.getAll();
|
|
139
|
+
},
|
|
140
|
+
deep: true,
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
};
|
|
144
|
+
</script>
|
|
145
|
+
|
|
146
|
+
<style scoped>
|
|
147
|
+
.div-check {
|
|
148
|
+
margin: 10px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.div-items {
|
|
152
|
+
margin-left: 10px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.div-loading {
|
|
156
|
+
margin-top: 3px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.div-btn {
|
|
160
|
+
padding-bottom: 5px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.div-icon {
|
|
164
|
+
margin-left: 10px;
|
|
165
|
+
font-size: 16px;
|
|
166
|
+
color: green;
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.input-container {
|
|
171
|
+
display: flex;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
margin: 20px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
input {
|
|
177
|
+
padding-left: 10px;
|
|
178
|
+
padding-right: 10px;
|
|
179
|
+
padding-top: 4px;
|
|
180
|
+
padding-bottom: 4px;
|
|
181
|
+
border: 1px solid #E5E4E8;
|
|
182
|
+
border-radius: 20px;
|
|
183
|
+
outline: none;
|
|
184
|
+
font-size: 13px;
|
|
185
|
+
width: 300px;
|
|
186
|
+
}
|
|
187
|
+
</style>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</b-col>
|
|
8
8
|
<b-col sm="3">
|
|
9
9
|
<div class="div-btn">
|
|
10
|
-
<Button _key="btnAddFilter" backGroundColor="#
|
|
10
|
+
<Button _key="btnAddFilter" backGroundColor="#017AFF" color="white"
|
|
11
11
|
classIcon="fa-regular fa-plus-large" size="small" :clicked="add" />
|
|
12
12
|
</div>
|
|
13
13
|
</b-col>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<b-row>
|
|
19
19
|
<b-col sm="11">
|
|
20
20
|
<CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
|
|
21
|
-
v-model="item.value" />
|
|
21
|
+
:initialValue="item.value" v-model="item.value" />
|
|
22
22
|
|
|
23
23
|
<div class="div-date">
|
|
24
24
|
<DateTime v-if="item.type == 'date' || item.type == 'dateRange'" :title="item.title"
|
|
@@ -37,7 +37,12 @@
|
|
|
37
37
|
</b-row>
|
|
38
38
|
</div>
|
|
39
39
|
|
|
40
|
+
<div v-if="item.type == 'multiOptions'">
|
|
41
|
+
<div class="div-multi-options">
|
|
42
|
+
<CheckboxServer :title="item.title" :url="item.url" v-model="item.value" />
|
|
43
|
+
</div>
|
|
40
44
|
|
|
45
|
+
</div>
|
|
41
46
|
<InputText v-if="item.type == 'text'" :title="item.title" v-model="item.value" />
|
|
42
47
|
</b-col>
|
|
43
48
|
<b-col sm="1">
|
|
@@ -49,7 +54,7 @@
|
|
|
49
54
|
</div>
|
|
50
55
|
</div>
|
|
51
56
|
<div class="text-center">
|
|
52
|
-
<Button _key="btnApply" title="Aplicar" backGroundColor="#
|
|
57
|
+
<Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
|
|
53
58
|
:clicked="apply" />
|
|
54
59
|
</div>
|
|
55
60
|
</div>
|
|
@@ -63,6 +68,7 @@ import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
|
|
|
63
68
|
import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
|
|
64
69
|
import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
|
|
65
70
|
import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
|
|
71
|
+
import CheckboxServer from "@nixweb/nixloc-ui/src/component/forms/CheckboxServer";
|
|
66
72
|
import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
|
|
67
73
|
import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
|
|
68
74
|
|
|
@@ -71,13 +77,16 @@ import { mapMutations, mapGetters } from "vuex";
|
|
|
71
77
|
export default {
|
|
72
78
|
name: "FilterBuilder",
|
|
73
79
|
props: ["filters", "value"],
|
|
74
|
-
components: { SelectStatic, Button, CheckboxGroup, InputText, ScrollBar, DateTime, InputDecimal },
|
|
80
|
+
components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, ScrollBar, DateTime, InputDecimal },
|
|
75
81
|
data() {
|
|
76
82
|
return {
|
|
77
83
|
filterSelected: {},
|
|
78
|
-
filtersAdded: [],
|
|
84
|
+
filtersAdded: [{ "id": "dateRange", "content": "Período de Locação", "field": "PeriodRent", "title": "Período de Locação", "type": "dateRange", "value": ["06/08/2024", "31/08/2024"] }, { "id": "options", "content": "Faturamento", "field": "StatusInvoiceName", "options": [{ "text": "Faturado", "value": "Faturado" }, { "text": "Parcial", "value": "Parcial" }, { "text": "Não Faturado", "value": "Não Faturado" }, { "text": "Não Fatura", "value": "Não Fatura" }], "title": "Faturamento", "type": "options", "value": ["Parcial", "Não Faturado"] }, { "id": "decimal", "content": "Valor", "field": "TotalValue", "title": "Valor", "type": "decimal", "valueStart": 100, "valueEnd": 200 }],
|
|
79
85
|
}
|
|
80
86
|
},
|
|
87
|
+
mounted() {
|
|
88
|
+
this.addEvent({ name: "stringFilter", data: this.filterFinal });
|
|
89
|
+
},
|
|
81
90
|
computed: {
|
|
82
91
|
...mapGetters("generic", ["event"]),
|
|
83
92
|
options() {
|
|
@@ -91,6 +100,7 @@ export default {
|
|
|
91
100
|
options: filter.options,
|
|
92
101
|
title: filter.title,
|
|
93
102
|
type: filter.type,
|
|
103
|
+
url: filter.url,
|
|
94
104
|
value: filter.value
|
|
95
105
|
});
|
|
96
106
|
});
|
|
@@ -168,10 +178,16 @@ export default {
|
|
|
168
178
|
margin-bottom: 10px;
|
|
169
179
|
}
|
|
170
180
|
|
|
181
|
+
|
|
171
182
|
.icon-remove {
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
justify-content: center;
|
|
186
|
+
height: 60px;
|
|
187
|
+
width: 30px;
|
|
188
|
+
cursor: pointer;
|
|
172
189
|
color: #F0134D;
|
|
173
190
|
cursor: pointer;
|
|
174
|
-
margin-top: 15px;
|
|
175
191
|
font-size: 17px;
|
|
176
192
|
}
|
|
177
193
|
</style>
|