Skip to content

Commit e415df3

Browse files
szczepanmasnyszczepanmasny
committed
improved getting async data (huge tables and filters)
1 parent 17ea075 commit e415df3

File tree

3 files changed

+224
-97
lines changed

3 files changed

+224
-97
lines changed

‎src/crud/components/DataTableServerSide.vue‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -244,18 +244,6 @@ export default {
244244
this.getItemsServerSide([this.params]);
245245
}
246246
},
247-
newSearchRequest(val) {
248-
this.newSearchRequest = false
249-
if (val && !this.searching) {
250-
this.searching = true
251-
this.getItemsServerSide([this.params]).then(response => {
252-
this.searching = false
253-
if(this.newSearchRequest){
254-
this.searchItems()
255-
}
256-
})
257-
}
258-
}
259247
},
260248
methods: {
261249
...mapActions("crud", ["getItemsServerSide"]),
@@ -268,8 +256,13 @@ export default {
268256
this.searchItems()
269257
},
270258
searchItems(){
271-
this.newSearchRequest = false
272-
setTimeout(() => this.newSearchRequest = true, 100)
259+
let params1 = JSON.stringify(this.params)
260+
setTimeout(() => {
261+
let params2 = JSON.stringify(this.params)
262+
if(params1 === params2){
263+
this.getItemsServerSide([this.params])
264+
}
265+
}, 500)
273266
},
274267
}
275268
};

‎src/crud/components/ItemDetails.vue‎

Lines changed: 155 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,117 @@
11
<template>
22
<v-dialog persistent v-model="details.show" max-width="600" style="position:static !important;">
33
<v-card>
4-
<v-card-title class="headline">
5-
{{ details.action == 'multiedit' ? $t('multipleUpdateTitle') : title }}
6-
</v-card-title>
4+
<v-card-title
5+
class="headline"
6+
>{{ details.action == 'multiedit' ? $t('multipleUpdateTitle') : title }}</v-card-title>
77
<v-form v-model="details.formValid">
88
<v-card-text class="details-list">
9-
10-
<div v-for="(field, i) in fields" :key="i" v-if="field.multipleUpdate || details.action != 'multiedit'">
9+
<div
10+
v-for="(field, i) in fields"
11+
:key="i"
12+
v-if="field.multipleUpdate || details.action != 'multiedit'"
13+
>
1114
<v-layout row wrap>
12-
<v-flex class="sm1" v-if="details.action == 'multiedit'" >
15+
<v-flex class="sm1" v-if="details.action == 'multiedit'">
1316
<input type="checkbox" v-model="field.updateColumn">
1417
</v-flex>
1518
<v-flex :class="details.action == 'multiedit' ? 'sm11' : 'sm12'">
16-
1719
<!-- input -->
18-
<v-text-field hide-details :required="isRequired(field.required)" v-if="field.type == 'input'" :label="field.text"
19-
v-model="field.value"></v-text-field>
20+
<v-text-field
21+
hide-details
22+
:required="isRequired(field.required)"
23+
v-if="field.type == 'input'"
24+
:label="field.text"
25+
v-model="field.value"
26+
></v-text-field>
2027

2128
<!-- number -->
22-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'number'" :label="field.text"
23-
v-model="field.value" type="number" step="1" min="0"></v-text-field>
29+
<v-text-field
30+
hide-details
31+
:required="isRequired(field.required)"
32+
v-else-if="field.type == 'number'"
33+
:label="field.text"
34+
v-model="field.value"
35+
type="number"
36+
step="1"
37+
min="0"
38+
></v-text-field>
2439

2540
<!-- decimal -->
26-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'decimal'" :label="field.text"
27-
v-model="field.value" type="number" step="0.01" min="0"></v-text-field>
41+
<v-text-field
42+
hide-details
43+
:required="isRequired(field.required)"
44+
v-else-if="field.type == 'decimal'"
45+
:label="field.text"
46+
v-model="field.value"
47+
type="number"
48+
step="0.01"
49+
min="0"
50+
></v-text-field>
2851

2952
<!--date -->
30-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'date'" :label="field.text"
31-
v-model="field.value" mask="####-##-##" return-masked-value></v-text-field>
53+
<v-text-field
54+
hide-details
55+
:required="isRequired(field.required)"
56+
v-else-if="field.type == 'date'"
57+
:label="field.text"
58+
v-model="field.value"
59+
mask="####-##-##"
60+
return-masked-value
61+
></v-text-field>
3262

3363
<!--time -->
34-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'time'" :label="field.text" v-model="field.value" mask="##:##" return-masked-value></v-text-field>
64+
<v-text-field
65+
hide-details
66+
:required="isRequired(field.required)"
67+
v-else-if="field.type == 'time'"
68+
:label="field.text"
69+
v-model="field.value"
70+
mask="##:##"
71+
return-masked-value
72+
></v-text-field>
3573

3674
<!--datetime -->
37-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'datetime'" :label="field.text" v-model="field.value" mask="####-##-## ##:##:##" return-masked-value></v-text-field>
75+
<v-text-field
76+
hide-details
77+
:required="isRequired(field.required)"
78+
v-else-if="field.type == 'datetime'"
79+
:label="field.text"
80+
v-model="field.value"
81+
mask="####-##-## ##:##:##"
82+
return-masked-value
83+
></v-text-field>
3884

3985
<!-- text area -->
40-
<v-text-field hide-details :required="isRequired(field.required)" v-else-if="field.type == 'textarea'" :label="field.text"
41-
v-model="field.value" multi-line></v-text-field>
86+
<v-text-field
87+
hide-details
88+
:required="isRequired(field.required)"
89+
v-else-if="field.type == 'textarea'"
90+
:label="field.text"
91+
v-model="field.value"
92+
multi-line
93+
></v-text-field>
4294

4395
<!-- file upload -->
4496
<template v-else-if="field.type == 'file'">
4597
<v-btn dark class="blue jbtn-file">
46-
{{ $t('upload') }}<input id="selectFile" type="file" @change="fileSelected" accept="*" :multiple="false" :disabled="false" ref="fileInput" >
98+
{{ $t('upload') }}
99+
<input
100+
id="selectFile"
101+
type="file"
102+
@change="fileSelected"
103+
accept="*"
104+
:multiple="false"
105+
:disabled="false"
106+
ref="fileInput"
107+
>
47108
</v-btn>
48109
</template>
49110

50111
<!-- select -->
51112
<template v-else-if="field.type == 'select'">
52-
<v-select v-if="field.async"
113+
<v-select
114+
v-if="field.async"
53115
hide-details
54116
:required="isRequired(field.required)"
55117
:loading="searchLoading['search_' + field.name]"
@@ -63,7 +125,8 @@
63125
bottom
64126
autocomplete
65127
></v-select>
66-
<v-select v-else
128+
<v-select
129+
v-else
67130
hide-details
68131
:required="isRequired(field.required)"
69132
:items="field.list.data"
@@ -77,33 +140,36 @@
77140
</template>
78141

79142
<!-- date picker -->
80-
81143
<v-menu
82-
v-else-if="field.type == 'datePicker'"
83-
lazy
84-
:close-on-content-click="true"
85-
v-model="field.show"
86-
transition="scale-transition"
87-
offset-y
88-
full-width
89-
:nudge-right="40"
90-
min-width="290px"
91-
:return-value.sync="field.value"
92-
>
93-
<v-text-field
94-
hide-details
95-
slot="activator"
96-
:label="field.text"
97-
v-model="field.value"
98-
prepend-icon="event"
99-
></v-text-field>
100-
<v-date-picker v-model="field.value" no-title scrollable></v-date-picker>
101-
</v-menu>
144+
v-else-if="field.type == 'datePicker'"
145+
lazy
146+
:close-on-content-click="true"
147+
v-model="field.show"
148+
transition="scale-transition"
149+
offset-y
150+
full-width
151+
:nudge-right="40"
152+
min-width="290px"
153+
:return-value.sync="field.value"
154+
>
155+
<v-text-field
156+
hide-details
157+
slot="activator"
158+
:label="field.text"
159+
v-model="field.value"
160+
prepend-icon="event"
161+
></v-text-field>
162+
<v-date-picker v-model="field.value" no-title scrollable></v-date-picker>
163+
</v-menu>
102164

103165
<!-- rich text editor -->
104166
<template v-else-if="field.type == 'richTextBox'">
105167
<label>{{field.text}}</label>
106-
<vue-editor id="editor" v-model="field.value" :editorOptions="{bounds: '#editor'}"></vue-editor>
168+
<vue-editor
169+
id="editor"
170+
v-model="field.value"
171+
:editorOptions="{bounds: '#editor'}"
172+
></vue-editor>
107173
<br>
108174
</template>
109175

@@ -112,17 +178,34 @@
112178
<input type="checkbox" color="blue" :label="field.text" v-model="field.value">
113179
<label class="checkbox-label">{{field.text}}</label>
114180
</span>
115-
116181
</v-flex>
117182
</v-layout>
118183
</div>
119184
</v-card-text>
120185
<v-card-actions>
121186
<v-spacer></v-spacer>
122187
<v-btn color="black" flat="flat" @click.native="close()">{{ $t('buttons.close') }}</v-btn>
123-
<v-btn :disabled="!details.formValid" v-if="details.action == 'create'" color="green" flat="flat" @click="store()">{{ $t('buttons.create') }}</v-btn>
124-
<v-btn :disabled="!details.formValid" v-else-if="details.action == 'edit'" color="orange" flat="flat" @click="update()">{{ $t('buttons.modify') }}</v-btn>
125-
<v-btn :disabled="!details.formValid" v-else-if="details.action == 'multiedit'" color="orange" flat="flat" @click="updateSelected()">{{ $t('buttons.modifySelected') }}</v-btn>
188+
<v-btn
189+
:disabled="!details.formValid"
190+
v-if="details.action == 'create'"
191+
color="green"
192+
flat="flat"
193+
@click="store()"
194+
>{{ $t('buttons.create') }}</v-btn>
195+
<v-btn
196+
:disabled="!details.formValid"
197+
v-else-if="details.action == 'edit'"
198+
color="orange"
199+
flat="flat"
200+
@click="update()"
201+
>{{ $t('buttons.modify') }}</v-btn>
202+
<v-btn
203+
:disabled="!details.formValid"
204+
v-else-if="details.action == 'multiedit'"
205+
color="orange"
206+
flat="flat"
207+
@click="updateSelected()"
208+
>{{ $t('buttons.modifySelected') }}</v-btn>
126209
</v-card-actions>
127210
</v-form>
128211
</v-card>
@@ -147,7 +230,7 @@ export default {
147230
},
148231
searchPhrases: {},
149232
searchLoading: {},
150-
searchData: {},
233+
searchData: {}
151234
};
152235
},
153236
created() {
@@ -161,10 +244,9 @@ export default {
161244
if (field.async) {
162245
this.$set(this.searchPhrases, "search_" + field.name, "");
163246
this.$set(this.searchLoading, "search_" + field.name, false);
164-
this.$set(this.searchData, "search_" + field.name, [])
165-
this.$set(field.list, 'oldSearch', "")
166-
}
167-
else {
247+
this.$set(this.searchData, "search_" + field.name, []);
248+
this.$set(field.list, "oldSearch", "");
249+
} else {
168250
field.list.data = [];
169251
let selectItems;
170252
Vue.http.get(url).then(response => {
@@ -202,7 +284,7 @@ export default {
202284
watch: {
203285
details: {
204286
handler(val) {
205-
if (val.show == true && val.action == 'edit') {
287+
if (val.show == true && val.action == "edit") {
206288
for (let field of this.fields) {
207289
if (field.type == "select") {
208290
if (field.async) {
@@ -239,13 +321,19 @@ export default {
239321
},
240322
searchPhrases: {
241323
handler(val) {
242-
for (let field of this.fields) {
243-
if (field.type == "select") {
244-
if (field.async) {
245-
let search = val["search_" + field.name]
246-
if (search != null && search != undefined && search != field.list.oldSearch) {
247-
field.list.oldSearch = search
248-
let data
324+
setTimeout(() => {
325+
for (let field of this.fields) {
326+
if (field.type == "select" && field.async) {
327+
let search = val["search_" + field.name];
328+
let newSearch = this.searchPhrases["search_" + field.name];
329+
if (
330+
search != null &&
331+
search != undefined &&
332+
search != field.list.oldSearch &&
333+
search == newSearch
334+
) {
335+
field.list.oldSearch = search;
336+
let data;
249337
let url = field.url + "/phrase/" + val["search_" + field.name];
250338
this.$set(this.searchLoading, "search_" + field.name, true);
251339
Vue.http.get(url).then(response => {
@@ -269,11 +357,11 @@ export default {
269357
data = items;
270358
}
271359
this.$set(this.searchData, "search_" + field.name, data);
272-
})
360+
});
273361
}
274362
}
275363
}
276-
}
364+
}, 500);
277365
},
278366
deep: true
279367
}
@@ -339,7 +427,7 @@ export default {
339427
}
340428
},
341429
methods: {
342-
...mapActions("crud", ["updateItem", "storeItem", "mulitipleItemsUpdate",]),
430+
...mapActions("crud", ["updateItem", "storeItem", "mulitipleItemsUpdate"]),
343431
...mapMutations("crud", ["resetItem"]),
344432
close() {
345433
this.details.show = false;
@@ -369,11 +457,10 @@ export default {
369457
]);
370458
},
371459
updateSelected() {
372-
let filteredFields = this.fields
373-
.filter(field => field.updateColumn)
374-
let keyValuePairs = {}
460+
let filteredFields = this.fields.filter(field => field.updateColumn);
461+
let keyValuePairs = {};
375462
for (let field of filteredFields) {
376-
keyValuePairs[field.column] = field.value
463+
keyValuePairs[field.column] = field.value;
377464
}
378465
this.mulitipleItemsUpdate([
379466
{

0 commit comments

Comments
 (0)