ソースを参照

Prop fix on ListView

master
George Williams 4年前
コミット
6f3f000d6f
1個のファイルの変更78行の追加69行の削除
  1. 78
    69
      src/components/shared/listView.vue

+ 78
- 69
src/components/shared/listView.vue ファイルの表示

2
 <template>
2
 <template>
3
   <div>
3
   <div>
4
     <div style="height:5px"></div>
4
     <div style="height:5px"></div>
5
-    <div class="d-flex justify-content-between ">
5
+    <div class="d-flex justify-content-between">
6
       <div class="p-2" v-if="!hideSearch">
6
       <div class="p-2" v-if="!hideSearch">
7
         <float-label label="SEARCH">
7
         <float-label label="SEARCH">
8
           <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
8
           <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
14
       <div class="p-2">
14
       <div class="p-2">
15
         <div class="d-flex flex-row">
15
         <div class="d-flex flex-row">
16
           <div class="p2" v-if="showColumnChooser">
16
           <div class="p2" v-if="showColumnChooser">
17
-            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
18
-              Column Chooser
19
-            </div>
17
+            <div
18
+              class="btn-solid-blue cursor-pointer"
19
+              data-toggle="modal"
20
+              data-target="#myModal"
21
+            >Column Chooser</div>
20
             <div class="col-md-12">
22
             <div class="col-md-12">
21
               <div id="myModal" class="modal fade" role="dialog">
23
               <div id="myModal" class="modal fade" role="dialog">
22
                 <div class="modal-dialog modal-lg" style="width:500px">
24
                 <div class="modal-dialog modal-lg" style="width:500px">
35
             </div>
37
             </div>
36
           </div>
38
           </div>
37
           <div class="p2" v-if="selectedItems.length > 0">
39
           <div class="p2" v-if="selectedItems.length > 0">
38
-            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
39
-              Clear Selected
40
-            </div>
40
+            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">Clear Selected</div>
41
           </div>
41
           </div>
42
           <div class="p2" v-if="showNew">
42
           <div class="p2" v-if="showNew">
43
-            <div class="btn-solid-blue cursor-pointer" @click="onNew()">
44
-              New
45
-            </div>
43
+            <div class="btn-solid-blue cursor-pointer" @click="onNew()">New</div>
46
           </div>
44
           </div>
47
         </div>
45
         </div>
48
       </div>
46
       </div>
64
                 :class="{ active: hover === c }"
62
                 :class="{ active: hover === c }"
65
               >
63
               >
66
                 <div class="d-flex bd-highlight">
64
                 <div class="d-flex bd-highlight">
67
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
68
-                    {{ column | toProper }}
69
-                  </div>
70
-                  <div v-else class="p-2 w-100 bd-highlight">
71
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
72
-                  </div>
65
+                  <div
66
+                    v-if="displayHeaders.length === 0"
67
+                    class="p-2 w-100 bd-highlight"
68
+                  >{{ column | toProper }}</div>
69
+                  <div
70
+                    v-else
71
+                    class="p-2 w-100 bd-highlight"
72
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
73
                   <div class="p-2 flex-shrink-1 bd-highlight">
73
                   <div class="p-2 flex-shrink-1 bd-highlight">
74
                     <img
74
                     <img
75
                       src="../../../public/img/sort-up.png"
75
                       src="../../../public/img/sort-up.png"
98
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
98
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
99
           >
99
           >
100
             <td v-for="(column, c) in Columns" :key="c">
100
             <td v-for="(column, c) in Columns" :key="c">
101
-              <div v-if="displayFormats.length === 0">
102
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
103
-              </div>
101
+              <div
102
+                v-if="displayFormats.length === 0"
103
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
104
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
104
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
105
-                <div v-if="item[column] !== '0001-01-01T00:00:00'">
106
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
107
-                </div>
108
-              </div>
109
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
110
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
105
+                <div
106
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
107
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
111
               </div>
108
               </div>
109
+              <div
110
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
111
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
112
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
112
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
113
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
113
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
114
               </div>
114
               </div>
115
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
115
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
116
             </td>
116
             </td>
117
             <td v-if="showCustomAction" class="my-width">
117
             <td v-if="showCustomAction" class="my-width">
118
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
119
-                {{ CustomActionHeading }}
120
-              </button>
118
+              <button
119
+                type="button"
120
+                class="btn my-btn"
121
+                @click="onCustomClick(item)"
122
+              >{{ CustomActionHeading }}</button>
121
             </td>
123
             </td>
122
             <td v-if="editable" class="my-width">
124
             <td v-if="editable" class="my-width">
123
               <a @click="onEdit(item)" class="p-3">
125
               <a @click="onEdit(item)" class="p-3">
137
       <div class="d-flex justify-content-between" v-if="showPager">
139
       <div class="d-flex justify-content-between" v-if="showPager">
138
         <div class="p-1">
140
         <div class="p-1">
139
           {{
141
           {{
140
-            currentPage +
141
-              " / " +
142
-              PageCount +
143
-              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
142
+          currentPage +
143
+          " / " +
144
+          PageCount +
145
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
144
           }}
146
           }}
145
         </div>
147
         </div>
146
         <div class="p-1">
148
         <div class="p-1">
185
   components: {
187
   components: {
186
     BasePagination,
188
     BasePagination,
187
     Alert,
189
     Alert,
188
-    ListViewControl
190
+    ListViewControl,
189
   },
191
   },
190
   mounted() {
192
   mounted() {
191
     try {
193
     try {
201
   },
203
   },
202
   props: {
204
   props: {
203
     compact: {
205
     compact: {
204
-      default: true
206
+      default: true,
205
     },
207
     },
206
     allowSelect: {
208
     allowSelect: {
207
-      default: true
209
+      default: true,
208
     },
210
     },
209
     allowMultipleSelect: {
211
     allowMultipleSelect: {
210
-      default: false
212
+      default: false,
211
     },
213
     },
212
     hideSearch: {
214
     hideSearch: {
213
-      default: false
215
+      default: false,
214
     },
216
     },
215
     showNew: {
217
     showNew: {
216
-      default: true
218
+      default: true,
217
     },
219
     },
218
     items: undefined,
220
     items: undefined,
219
     editable: {
221
     editable: {
220
-      default: false
222
+      default: false,
221
     },
223
     },
222
     deleteable: {
224
     deleteable: {
223
-      default: false
225
+      default: false,
224
     },
226
     },
225
     columnCount: {
227
     columnCount: {
226
-      default: 6
228
+      default: 6,
227
     },
229
     },
228
     showPager: {
230
     showPager: {
229
-      default: true
231
+      default: true,
230
     },
232
     },
231
     title: {
233
     title: {
232
-      default: undefined
234
+      default: undefined,
233
     },
235
     },
234
     sortKey: {
236
     sortKey: {
235
-      default: "id"
237
+      default: "id",
236
     },
238
     },
237
     hideItemCount: {
239
     hideItemCount: {
238
-      default: false
240
+      default: false,
239
     },
241
     },
240
     currentPage: {
242
     currentPage: {
241
-      default: 1
243
+      default: 1,
242
     },
244
     },
243
     bordered: {
245
     bordered: {
244
-      default: true
246
+      default: true,
245
     },
247
     },
246
     striped: {
248
     striped: {
247
-      default: true
249
+      default: true,
248
     },
250
     },
249
     showColumnChooser: {
251
     showColumnChooser: {
250
-      default: true
252
+      default: true,
251
     },
253
     },
252
     displayColumns: {
254
     displayColumns: {
253
-      default: []
255
+      type: Array,
256
+      default: () => [],
254
     },
257
     },
255
     displayFormats: {
258
     displayFormats: {
256
-      default: []
259
+      type: Array,
260
+      default: () => [],
257
     },
261
     },
258
     displayHeaders: {
262
     displayHeaders: {
259
-      default: []
263
+      type: Array,
264
+      default: () => [],
260
     },
265
     },
261
     showCustomAction: {
266
     showCustomAction: {
262
-      default: false
267
+      default: false,
263
     },
268
     },
264
     CustomActionHeading: {
269
     CustomActionHeading: {
265
-      default: ""
270
+      default: "",
266
     },
271
     },
267
     CustomActionCondition: {
272
     CustomActionCondition: {
268
-      default: ""
269
-    }
273
+      default: "",
274
+    },
270
   },
275
   },
271
   data() {
276
   data() {
272
     return {
277
     return {
279
       visibleItemsPerPageCount: 20,
284
       visibleItemsPerPageCount: 20,
280
       itemsPerPageList: ItemsPerPageList,
285
       itemsPerPageList: ItemsPerPageList,
281
       visibleColumn: [],
286
       visibleColumn: [],
282
-      allColumn: []
287
+      allColumn: [],
283
     };
288
     };
284
   },
289
   },
285
   methods: {
290
   methods: {
301
         for (const i in Object.keys(this.items)) {
306
         for (const i in Object.keys(this.items)) {
302
           const item = this.items[i];
307
           const item = this.items[i];
303
           for (const o in Object.keys(item)) {
308
           for (const o in Object.keys(item)) {
304
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
309
+            if (
310
+              !listAll.includes(Object.keys(item)[o]) &&
311
+              !Array.isArray(Object.values(item)[o])
312
+            ) {
305
               const columnName = Object.keys(item)[o];
313
               const columnName = Object.keys(item)[o];
306
-              if (!listAll.some(x => x.column === columnName)) {
314
+              if (!listAll.some((x) => x.column === columnName)) {
307
                 listAll.push({
315
                 listAll.push({
308
                   column: columnName,
316
                   column: columnName,
309
-                  show: _.filter(listAll, x => x.show).length < this.columnCount
317
+                  show:
318
+                    _.filter(listAll, (x) => x.show).length < this.columnCount,
310
                 });
319
                 });
311
               }
320
               }
312
             }
321
             }
321
     },
330
     },
322
     isSelected(i) {
331
     isSelected(i) {
323
       const ind = this.getActualIndex(i);
332
       const ind = this.getActualIndex(i);
324
-      return _.some(this.selectedItems, x => x === ind);
333
+      return _.some(this.selectedItems, (x) => x === ind);
325
     },
334
     },
326
     onNew() {
335
     onNew() {
327
       this.$emit("onNew");
336
       this.$emit("onNew");
357
     },
366
     },
358
     onRowClick(item, i) {
367
     onRowClick(item, i) {
359
       const ind = this.getActualIndex(i);
368
       const ind = this.getActualIndex(i);
360
-      if (_.some(this.selectedItems, x => x === ind)) {
361
-        this.selectedItems = this.selectedItems.filter(x => x !== ind);
369
+      if (_.some(this.selectedItems, (x) => x === ind)) {
370
+        this.selectedItems = this.selectedItems.filter((x) => x !== ind);
362
       } else {
371
       } else {
363
         if (!this.allowMultipleSelect) {
372
         if (!this.allowMultipleSelect) {
364
           this.selectedItems = [];
373
           this.selectedItems = [];
411
         if (array[i] === value) return true;
420
         if (array[i] === value) return true;
412
       }
421
       }
413
       return false;
422
       return false;
414
-    }
423
+    },
415
   },
424
   },
416
   computed: {
425
   computed: {
417
     ListWidth() {
426
     ListWidth() {
438
           listColumns.push(this.displayColumns[i]);
447
           listColumns.push(this.displayColumns[i]);
439
         }
448
         }
440
       } else {
449
       } else {
441
-        const list = _.filter(this.allColumn, x => x.show);
450
+        const list = _.filter(this.allColumn, (x) => x.show);
442
         for (const i in list) {
451
         for (const i in list) {
443
           const item = list[i];
452
           const item = list[i];
444
           if (item) {
453
           if (item) {
455
       return list;
464
       return list;
456
     },
465
     },
457
     FilteredItems() {
466
     FilteredItems() {
458
-      const list = _.filter(this.items, item =>
467
+      const list = _.filter(this.items, (item) =>
459
         Object.values(item).some(
468
         Object.values(item).some(
460
-          i =>
469
+          (i) =>
461
             JSON.stringify(i)
470
             JSON.stringify(i)
462
               .toLowerCase()
471
               .toLowerCase()
463
               .indexOf(this.searchItem.toLowerCase()) > -1
472
               .indexOf(this.searchItem.toLowerCase()) > -1
475
       return list.slice(startSlice, endSlice);
484
       return list.slice(startSlice, endSlice);
476
     },
485
     },
477
 
486
 
478
-    GetAllColumn() {}
479
-  }
487
+    GetAllColumn() {},
488
+  },
480
 };
489
 };
481
 </script>
490
 </script>
482
 <style scoped>
491
 <style scoped>

読み込み中…
キャンセル
保存