· 6 years ago · Oct 10, 2019, 07:06 AM
1<template>
2 <div>
3 <lego-page id="legoGridGuide">
4 <lego-data-grid ref="sampleGrid"
5 :grid-configuration="gridConfiguration"
6 :header-info="headerInfo"
7 :info="info"
8 :uuid="uuid"
9 @add="addButtonClicked"
10 @delete="deleteButtonClicked"
11 @modify="modifyButtonClicked"
12 @lazyLoad="sendLazyLoadRequest"
13 @pagination="sendPageableRequest" >
14 <template v-slot:info__right="infoRightScope" >
15 <span style="margin-left:10px;">Unit: </span><b>{{info.unit}}</b>
16 </template>
17 </lego-data-grid>
18 <template>
19 <div id="toast">
20<!-- <div id="img">Icon</div>-->
21 <div id="desc">{{toast}}</div></div>
22 </template>
23 </lego-page>
24
25 </div>
26
27
28</template>
29
30<script>
31export default{
32 name: 'lego-grid-page',
33 data() { return {
34 systemKey:"lego10000",
35 toast:'',
36 headers:new Set(),
37 gridConfiguration: {
38 dataType: 'full', // 'full', 'lazy', 'page'
39 // fixedHeader: false,
40 // headerHeight: 20, // header has fixed height. [px]
41 // rowHeight: 20, // each row has fixed height. [px]
42 // visibleRowNum: 10, // rowHeight * visibleRowNum = gridBody height
43 // fixedColumn: false,
44 // rowExpandable: false,
45 // expandedRowHeight: 100, // each expanded row has fixed height. [px]
46 // checkboxEnable: false,
47 // lazyBuffer: 20,
48 // pagination: true, // dataType: 'full' & 'page' only. ignored when 'lazy'
49 // inlineEdit: false,
50 rowHeight: 36,
51 fixedColumn: true
52 },
53 info: {
54 totalCnt: 0,
55 unit: 'KRW'
56 },
57 uuid:'dataKey',
58 headerInfo: [
59
60 {
61 name: 'id',
62 label: 'id',
63 align: 'left',
64 dataField: 'emailId',
65 // filter: { type: 'none' }, // default is none.
66 width: 100,
67 grow: false,
68 },
69 {
70 name: 'fullmail',
71 label: 'email',
72 align: 'left',
73 dataField: ['emailId', 'emailDomain'],
74 dataBuilder: dataField => dataField[0] + '@' +dataField[1],
75 filter: {
76 type: 'single-select',
77 domain: ['a','b','c','d']
78 },
79 width: 300,
80 grow: false
81 },
82 {
83 name: 'gender',
84 label: 'gender',
85 align: 'left',
86 dataField: 'gender',
87 filter: {
88 type: 'single-select',
89 domain: ['a','b','c','d']
90 },
91 width: 100,
92 grow: false
93 },
94
95 {
96 name: 'department',
97 label: 'department',
98 align: 'left',
99 dataField: 'department',
100 filter: {
101 type: 'order',
102 initial: ''
103 },
104 width: 100,
105 grow: false
106 },
107
108 {
109 label: 'career Level',
110 align: 'left',
111 dataField: 'careerLevel',
112 filter: {
113 type: 'text-field',
114 initial: 'CL1'
115 }, // default is none.
116
117 width: 100,
118 grow: false,
119 },
120 {
121 label: 'company',
122 align: 'left',
123 dataField: 'company',
124 filter: {
125 type: 'single-select',
126 domain: ['GOOGLE','SAMSUNG','INFINITY LAB','AMAZON'],
127 },
128 width: 100,
129 grow: false
130 },
131 {
132 label: 'create Date',
133 align: 'left',
134 dataField: 'createDate',
135 filter: {
136 type: 'single-select',
137 domain: ['a','b','c','d']
138 },
139 width: 100,
140 grow: false
141 },
142
143 {
144 label: 'description',
145 align: 'left',
146 dataField: 'description',
147 filter: {
148 type: 'single-select',
149 domain: ['WgZ0TqEktDZLW','ZZauZw0','27UDjZl','BGN32a8vpg6umBvmDgxmV5d0']
150 },
151 width: 100,
152 grow: false
153 },
154 {
155 label: 'due Date',
156 align: 'left',
157 dataField: 'dueDate',
158 filter: {
159 type: 'single-select',
160 domain: ['2019-08-28T03:24:12Z',
161 '2019-09-10T03:24:19z']
162 },
163 width: 100,
164 grow: false
165 },
166 {
167 label: 'email Domain',
168 align: 'left',
169 dataField: 'emailDomain',
170 filter: {
171 type: 'single-select',
172 domain: ['naver.com','hotmail.com','gmail.com','korea.com']
173 },
174 width: 100,
175 grow: false
176 },
177 {
178 label: 'email Id',
179 align: 'left',
180 dataField: 'emailId',
181 filter: {
182 type: 'multi-select',
183 domain: ['N1YQEvnh','jRG70T0q','wr44dBmf','sHo3hlgl' ]
184 },
185 width: 100,
186 grow: false
187 },
188
189 {
190 label: 'first Name',
191 align: 'left',
192 dataField: 'firstName',
193 filter: {
194 type: 'order',
195 initial: ''
196 },
197 width: 100,
198 grow: true
199 },
200
201 {
202 label: 'ip',
203 align: 'left',
204 dataField: 'ip',
205 filter: {
206 type: 'order',
207 initial: ''
208 },
209 width: 100,
210 grow: true
211 },
212 {
213 label: 'last Name',
214 align: 'left',
215 dataField: 'lastName',
216 filter: {
217 type: 'order',
218 initial: ''
219 },
220 width: 100,
221 grow: true
222 },
223 {
224 label: 'phone',
225 align: 'left',
226 dataField: 'phone',
227 filter: {
228 type: 'order',
229 initial: ''
230 },
231 width: 100,
232 grow: true
233 },
234 {
235 label: 'score',
236 align: 'left',
237 dataField: 'score',
238 filter: {
239 type: 'order',
240 initial: ''
241 },
242 width: 100,
243 grow: true
244 },
245 {
246 label: 'status',
247 align: 'left',
248 dataField: 'status',
249 filter: {
250 type: 'order',
251 initial: ''
252 },
253 width: 100,
254 grow: true
255 },
256 {
257 label: 'update Date',
258 align: 'left',
259 dataField: 'updateDate',
260 filter: {
261 type: 'order',
262 initial: ''
263 },
264 width: 100,
265 grow: true
266 },
267 ]
268
269 }},
270 created() {
271 this.getFullData();
272 this.getHeaders();
273 this.validateDataHeaders();
274 },
275 methods: {
276 launchToast(toast){
277 this.toast=toast
278 let x = document.getElementById("toast")
279 x.className = "show";
280 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
281 },
282 getHeaders(){
283 this.headers= new Set(this.headerInfo.map((val)=>val.dataField))
284 },
285 async createGridRow(data){
286 //todo: adding the data replace the api and the payload {data}
287
288 if(this.validateDataHeaders(data)){
289 this.$store.state.bus.$emit("loader", true)
290 let toastMsg= await this.$http.post('/rest/v1/grid/{systemKey}'.replace('{systemKey}', this.systemKey), data)
291 .then(res => res
292 ).catch(err => {
293 console.log("error fetching the data", err)
294 return err
295 })
296 this.launchToast(`1 Row added `)
297 await this.refresh()
298 this.$store.state.bus.$emit("loader", false)
299 }
300 },
301 async deleteGridRows(data){
302 //todo: deleting the data replace the api and the payload {data} don't know what to do with this data for now
303 //todo? validation but since it is not required
304 console.log("validation is done...", data)
305
306 this.$store.state.bus.$emit("loader", true)
307 let payload = []
308 data.forEach((v)=>{
309 payload.push({"dataKey":v})
310 })
311
312 console.log(payload)
313 let toastMsg = await this.$http.delete('/rest/v1/grid/{systemKey}'.replace('{systemKey}',
314 this.systemKey),
315 {
316 data:payload
317 }
318 ).then(res => {
319 return res
320 }).catch(err => {
321 return err
322 })
323 this.launchToast(toastMsg.data + " Row(s) Deleted ");
324 await this.reset()
325 this.$store.state.bus.$emit("loader", false)
326
327 },
328 async deleteGridRow(data){
329 //todo: deleting the data replace the api and the payload {data}
330
331 if(this.validateDataHeaders(data)){
332 this.$store.state.bus.$emit("loader", true)
333 await this.$http.get('/rest/v1/grid/{systemKey}/{dataKey}'
334 .replace('{systemKey}', this.systemKey)
335 .replace('{dataKey}', '1000')
336 )
337 .then(res => {
338 this.$refs.sampleGrid.setData(res.data.data);
339 this.info.totalCnt = res.data.data.length;
340 return false;
341 }).catch(err => {
342 console.log("error fetching the data", err)
343 return false
344 })
345 this.$store.state.bus.$emit("loader", false)
346 }
347 }, // this is redundant i guess
348 async updateGridRow(data){
349 //todo: deleting the data replace the api and the payload {data}
350
351 if(this.validateDataHeaders(data)){
352 this.$store.state.bus.$emit("loader", true)
353 let toastMsg =await this.$http.put('/rest/v1/grid/{systemKey}/{dataKey}'
354 .replace('{systemKey}', this.systemKey)
355 .replace('{dataKey}', data.dataKey),
356 data
357 ).then(res => res).catch(err => {
358 console.log("error fetching the data", err)
359 return err
360 })
361 await this.reset()
362 console.log(toastMsg)
363 if(data.dataKey===toastMsg.data)
364 this.launchToast(`Row Updated`)
365 else
366 this.launchToast('Row not Updated')
367
368 this.$store.state.bus.$emit("loader", false)
369 }
370 },
371 validateDataHeaders(data){
372 // considering the data headers are in the the headerInfo
373 // console.log("data passed: ", data)
374 // for(const key in Object.keys(data))
375 // if(!this.headers.has(key)){
376 // console.log("the header does not contain the key: ", key)
377 // return false
378 // }
379 return true
380 },
381 async getFullData(){
382
383 /*******************************************************************
384 * WE WILL EMIT THE EVENT LOADER TO THE EVENT BUS SUCH THAT ANY COMPONENT LISTENING TO EVENT BUS CAN HANDLE THE EVENT
385 * ASYNC AWAIT CAN BE USED TO MAKE THE EXECUTION SYNCHRONOUS
386 * SO AFTER THE EXECUTION OF THE PROMISE THE LOADER EVENT CAN BE EMITTED AGAIN TO STOP THE LOADER IN SOME COMPONENT
387 ****************************************************************/
388 this.$store.state.bus.$emit("loader", true)
389 await this.$http.get('/rest/v1/grid/{systemKey}/full'.replace('{systemKey}', 'lego10000'))
390 .then(res => {
391 this.$refs.sampleGrid.setData(res.data.data);
392 this.info.totalCnt = res.data.data.length;
393 return false;
394 }).catch(err => {
395 console.log("error fetching the data", err)
396 return false
397 })
398 this.$store.state.bus.$emit("loader", false)
399 },
400 addButtonClicked()
401 {
402 // this.$nofity({text: 'addButtonClicked. maybe confirm modal showed up?'})
403 console.log("add button is clicked", this.$store.state.row_modified)
404 //todo add the row in the state
405 this.createGridRow(this.$store.state.row_modified)
406 },
407 deleteButtonClicked() {
408 // this.$nofity({text: 'deleteButtonClicked. maybe confirm modal showed up?'})
409 console.log("delete button is clicked", this.$store.state.checkedListItems)
410 this.deleteGridRows(this.$store.state.checkedListItems)
411
412 },
413 modifyButtonClicked() {
414 // this.$nofity({text: 'modifyButtonClicked. maybe confirm modal showed up?'})
415 console.log("update button is clicked", this.$store.state.row_modified)
416 this.updateGridRow( this.$store.state.row_modified)
417
418
419 },
420 sendLazyLoadRequest(filterOption) {
421 let requestBody = this.makeProperFilterOptionRequestBody(filterOption);
422 this.$http.get('/rest/v2/grid/{systemKey}/lazy'.replace('{systemKey}', this.systemKey),{
423 requestBody
424 })
425 },
426 sendPageableRequest(filterOption) {
427
428 },
429 makeProperFilterOptionRequestBody(filterOption) {
430 return filterOption;
431 },
432 reset(){
433 // this is for reseting the data in the store again
434 this.$store.state.row_modified={}
435 this.$store.state.modifyClicked=false
436 this.$store.state.checkedListItems.clear()
437 console.log(this.$store.state.checkedListItems.size)
438 this.refresh()
439 },
440 refresh(){
441 if(this.gridConfiguration.dataType==="full") this.getFullData()
442 }
443 }
444}
445</script>
446
447<style scoped lang="scss">
448
449
450
451</style>
452<style lang="scss">
453// for test
454.lego-grid__data-row__item {
455 overflow:visible;
456 display:inline-block;
457 text-overflow: ellipsis;
458 white-space: nowrap;
459}
460.lego-grid__header{
461 position: fixed;
462 top: 0;
463}
464#toast {
465 visibility: hidden;
466 max-width: 50px;
467 height: 50px;
468 /*margin-left: -125px;*/
469 margin: auto;
470 background-color: #333;
471 color: #fff;
472 text-align: center;
473 border-radius: 2px;
474
475 position: fixed;
476 z-index: 1;
477 left: 0;right:0;
478 bottom: 30px;
479 font-size: 17px;
480 white-space: nowrap;
481}
482#toast #img{
483 width: 50px;
484 height: 50px;
485
486 float: left;
487
488 padding-top: 16px;
489 padding-bottom: 16px;
490
491 box-sizing: border-box;
492
493
494 background-color: #111;
495 color: #fff;
496}
497#toast #desc{
498
499
500 color: #fff;
501
502 padding: 16px;
503
504 overflow: hidden;
505 white-space: nowrap;
506}
507
508#toast.show {
509 visibility: visible;
510 -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
511 animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
512}
513
514@-webkit-keyframes fadein {
515 from {bottom: 0; opacity: 0;}
516 to {bottom: 30px; opacity: 1;}
517}
518
519@keyframes fadein {
520 from {bottom: 0; opacity: 0;}
521 to {bottom: 30px; opacity: 1;}
522}
523
524@-webkit-keyframes expand {
525 from {min-width: 50px}
526 to {min-width: 350px}
527}
528
529@keyframes expand {
530 from {min-width: 50px}
531 to {min-width: 350px}
532}
533@-webkit-keyframes stay {
534 from {min-width: 350px}
535 to {min-width: 350px}
536}
537
538@keyframes stay {
539 from {min-width: 350px}
540 to {min-width: 350px}
541}
542@-webkit-keyframes shrink {
543 from {min-width: 350px;}
544 to {min-width: 50px;}
545}
546
547@keyframes shrink {
548 from {min-width: 350px;}
549 to {min-width: 50px;}
550}
551
552@-webkit-keyframes fadeout {
553 from {bottom: 30px; opacity: 1;}
554 to {bottom: 60px; opacity: 0;}
555}
556
557@keyframes fadeout {
558 from {bottom: 30px; opacity: 1;}
559 to {bottom: 60px; opacity: 0;}
560}
561// #legoGridGuide .lego-grid *:hover {background-color: setOpacity(red,0.1);}
562
563
564</style>