Skip to content

Commit b2aa5a6

Browse files
rubanraj54rubanraj54
committed
Row component is merged into main component (scope access issue)
1 parent 2029412 commit b2aa5a6

File tree

2 files changed

+141
-76
lines changed

2 files changed

+141
-76
lines changed

‎src/App.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@
2525
sort: true,
2626
uniqueId: true
2727
},
28+
{
29+
label: "id",
30+
name: "id",
31+
filter: {
32+
type: "simple",
33+
placeholder: "id"
34+
},
35+
sort: true,
36+
uniqueId: true,
37+
slot_name:"my_duplicate_id_column"
38+
},
2839
{
2940
label: "title",
3041
name: "title",

‎src/components/VueBootstrap4Table.vue‎

Lines changed: 130 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -7,63 +7,77 @@
77
<div class="table-responsive">
88
<table class="table table-striped table-bordered">
99
<thead>
10-
<tr>
11-
<th v-show="checkbox_rows" class="text-center justify-content-center" @click="selectAllCheckbox($event)">
12-
<div class="form-check vbt-select-all-checkbox">
13-
<input class="form-check-input" type="checkbox" v-model="select_all_rows" value="" @change="selectAllHandleChange($event)">
14-
</div>
15-
</th>
16-
17-
<slot name="columns" :columns="vbt_data.columns">
18-
<th v-for="(column, key, index) in vbt_data.columns" :key="index" v-on="isSortableColumn(column) ? { click: () => updateSort(column) } : {}" class="text-center" v-bind:class="{'vbt-sort-cursor':isSortableColumn(column)}">
19-
<slot name="column" :column="column">{{column.label}}</slot>
10+
<tr>
11+
<th v-show="checkbox_rows" class="text-center justify-content-center" @click="selectAllCheckbox($event)">
12+
<!-- <div class="form-check vbt-select-all-checkbox">
13+
<input class="form-check-input" type="checkbox" v-model="select_all_rows" value="" @change="selectAllHandleChange($event)">
14+
</div> -->
15+
<div class="custom-control custom-checkbox">
16+
<input type="checkbox" class="custom-control-input" v-model="select_all_rows" value="" @change="selectAllHandleChange($event)"/>
17+
<label class="custom-control-label"></label>
18+
</div>
19+
</th>
20+
21+
<slot name="columns" :columns="vbt_data.columns">
22+
<th v-for="(column, key, index) in vbt_data.columns" :key="index" v-on="isSortableColumn(column) ? { click: () => updateSort(column) } : {}" class="text-center" v-bind:class="{'vbt-sort-cursor':isSortableColumn(column)}">
23+
<slot name="column" :column="column">{{column.label}}</slot>
24+
25+
<template v-if='isSortableColumn(column)'>
26+
<template v-if="!isSort(column)">
27+
<div class="float-right">
28+
<slot name="no-sort-icon">
29+
&#x1F825;&#x1F827;
30+
</slot>
31+
</div>
32+
</template>
2033

21-
<template v-if='isSortableColumn(column)'>
22-
<template v-if="!isSort(column)">
34+
<template v-else>
35+
<template v-if="query.sort.order==='asc'">
2336
<div class="float-right">
24-
<slot name="no-sort-icon">
25-
&#x1F825;&#x1F827;
37+
<slot name="sort-asc-icon">
38+
&#x1F825;
2639
</slot>
2740
</div>
2841
</template>
2942

43+
<template v-else-if="query.sort.order==='desc'">
44+
<slot name="sort-desc-icon">
45+
<div class="float-right">&#x1F827;</div>
46+
</slot>
47+
</template>
48+
3049
<template v-else>
31-
<template v-if="query.sort.order==='asc'">
32-
<div class="float-right">
33-
<slot name="sort-asc-icon">
34-
&#x1F825;
35-
</slot>
36-
</div>
37-
</template>
38-
39-
<template v-else-if="query.sort.order==='desc'">
40-
<slot name="sort-desc-icon">
41-
<div class="float-right">&#x1F827;</div>
50+
<div class="float-right">
51+
<slot name="no-sort-icon">
52+
&#x1F825;&#x1F827;
4253
</slot>
43-
</template>
44-
45-
<template v-else>
46-
<div class="float-right">
47-
<slot name="no-sort-icon">
48-
&#x1F825;&#x1F827;
49-
</slot>
50-
</div>
51-
</template>
54+
</div>
5255
</template>
5356
</template>
54-
</th>
55-
</slot>
56-
</tr>
57-
</thead>
58-
<!-- <Header :columns="vbt_data.columns" :query="query" v-on:update-sort="updateSort" :checkboxRows="checkbox_rows" @select-all-items="selectAllItems" @unselect-all-items="unSelectAllItems"></Header> -->
57+
</template>
58+
</th>
59+
</slot>
60+
</tr>
61+
</thead>
5962
<tbody>
6063
<tr class="table-active">
6164
<td v-show="checkbox_rows"></td>
6265
<td v-for="(column, key, index) in vbt_data.columns" :key="index">
6366
<Simple v-if="hasFilter(column)" :column="column" @update-filter="updateFilter" @clear-filter="clearFilter"></Simple>
6467
</td>
6568
</tr>
66-
<Row v-for="(row, key, index) in vbt_data.rows" :key="index" :row="row" :selectedItems="selected_items" :columns="vbt_data.columns" :checkboxRows="checkbox_rows" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem" :highlight-row-hover="highlight_row_hover" :highlight-row-hover-color="highlight_row_hover_color" :rowsSelectable="rows_selectable"></Row>
69+
<!-- data rows stars here -->
70+
<tr v-for="(row, key, index) in vbt_data.rows" :key="index" ref="vbt_row" v-bind:style='{"background": (canHighlightHover(row,row_hovered)) ? rowHighlightColor : ""}' @mouseover="rowHovered(row)" @mouseleave="rowHoveredOut(row)" v-on="rows_selectable ? { click: () => selectCheckboxByRow(row) } : {}">
71+
<!-- <tr v-for="(row, key, index) in vbt_data.rows" :key="index" ref="vbt_row" v-bind:style='{"background": (row_higlighted) ? rowHighlightColor : ""}' v-on="rowsSelectable ? { click: () => selectCheckbox() } : {}" > -->
72+
<CheckBox :checkboxRows="checkbox_rows" :selectedItems="selected_items" :rowsSelectable="rows_selectable" :row="row" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem"></CheckBox>
73+
<td v-for="(column, key, hindex) in vbt_data.columns" :key="hindex" class="text-center">
74+
<slot :name="getCellSlotName(column)" :row="row" :column="column" :cell_value="getValueFromRow(row,column.name)">
75+
{{getValueFromRow(row,column.name)}}
76+
</slot>
77+
</td>
78+
</tr>
79+
<!-- data rows ends here -->
80+
<!-- <Row v-for="(row, key, index) in vbt_data.rows" :key="index" :row="row" :selectedItems="selected_items" :columns="vbt_data.columns" :checkboxRows="checkbox_rows" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem" :highlight-row-hover="highlight_row_hover" :highlight-row-hover-color="highlight_row_hover_color" :rowsSelectable="rows_selectable"></Row> -->
6781
</tbody>
6882
</table>
6983
</div>
@@ -143,11 +157,8 @@
143157
<script>
144158
import _ from "lodash";
145159
146-
import Header from "./Header.vue";
147-
import Row from "./Row.vue";
160+
import CheckBox from "./CheckBox.vue";
148161
import Simple from "./Filters/Simple.vue";
149-
import Pagination from "./Pagination.vue";
150-
import PaginationInfo from "./PaginationInfo.vue";
151162
152163
import {
153164
EventBus
@@ -193,23 +204,22 @@ export default {
193204
highlight_row_hover: false,
194205
highlight_row_hover_color: "#d6d6d6",
195206
rows_selectable: false,
196-
select_all_rows: false
197-
207+
select_all_rows: false,
208+
row_hovered: null
198209
};
199210
},
200211
mounted() {
201212
this.vbt_data = _.cloneDeep(this.data);
202-
213+
let self = this;
203214
// check if user mentioned unique id for a column, if not set unique id for all items
204-
if (!this.hasUniqueId) {
205-
this.original_rows = _.map(this.vbt_data.rows, function (element, index) {
206-
return _.extend({}, element, {
207-
"vbt_id": index
208-
});
209-
});
210-
} else {
211-
this.original_rows = _.cloneDeep(this.vbt_data.rows);
212-
}
215+
this.original_rows = _.map(this.vbt_data.rows, function (element, index) {
216+
let extra = {};
217+
if (!self.hasUniqueId) {
218+
extra.vbt_id = index + 1;
219+
}
220+
// extra.row_higlighted = false;
221+
return _.extend({}, element, extra);
222+
});
213223
214224
this.initConfig();
215225
this.filter();
@@ -221,11 +231,8 @@ export default {
221231
222232
},
223233
components: {
224-
Header,
225-
Row,
234+
CheckBox,
226235
Simple,
227-
Pagination,
228-
PaginationInfo
229236
},
230237
methods: {
231238
initConfig() {
@@ -286,6 +293,8 @@ export default {
286293
this.refresh();
287294
},
288295
addSelectedItem(item) {
296+
console.log(item);
297+
289298
this.selected_items.push(item);
290299
291300
let difference = [];
@@ -297,9 +306,11 @@ export default {
297306
}
298307
299308
if (difference.length == 0) {
300-
EventBus.$emit('select-select-all-items-checkbox', "from main");
309+
this.select_all_rows = true;
310+
// EventBus.$emit('select-select-all-items-checkbox', "from main");
301311
} else {
302-
EventBus.$emit('unselect-select-all-items-checkbox', "from main");
312+
this.select_all_rows = false;
313+
// EventBus.$emit('unselect-select-all-items-checkbox', "from main");
303314
}
304315
},
305316
selectAllItems() {
@@ -336,7 +347,8 @@ export default {
336347
return false;
337348
}
338349
});
339-
EventBus.$emit('unselect-select-all-items-checkbox');
350+
// EventBus.$emit('unselect-select-all-items-checkbox');
351+
this.select_all_rows = false;
340352
},
341353
updateFilter(payload) {
342354
let event = payload.event;
@@ -463,7 +475,38 @@ export default {
463475
} else {
464476
return column.sort;
465477
}
466-
}
478+
},
479+
// row method starts here
480+
getValueFromRow(row, name) {
481+
return _.get(row, name);
482+
},
483+
getCellSlotName(column) {
484+
if (_.has(column,"slot_name")) {
485+
return column.slot_name;
486+
}
487+
return column.name.replace('.','_');
488+
},
489+
rowHovered(row) {
490+
this.row_hovered = _.get(row,this.uniqueId);
491+
},
492+
rowHoveredOut(row) {
493+
this.row_hovered = null;
494+
},
495+
canHighlightHover(row,row_hovered) {
496+
return _.get(row,this.uniqueId) == row_hovered;
497+
},
498+
selectCheckboxByRow(row) {
499+
let result = _.find(this.selected_items, function(selected_item,key){
500+
return _.get(selected_item,this.uniqueId) == _.get(row,this.uniqueId);
501+
}.bind(this));
502+
503+
if (typeof result === "undefined") {
504+
this.addSelectedItem(row);
505+
} else {
506+
this.removeSelectedItem(row);
507+
}
508+
},
509+
// row method ends here
467510
},
468511
computed: {
469512
// pagination computed properties -start
@@ -544,6 +587,9 @@ export default {
544587
},
545588
546589
// pagination info computed properties - end
590+
rowHighlightColor() {
591+
return (this.highlight_row_hover) ? this.highlight_row_hover_color : "";
592+
}
547593
548594
},
549595
watch: {
@@ -567,17 +613,18 @@ export default {
567613
handler: function (newVal, oldVal) {
568614
569615
this.vbt_data = _.cloneDeep(newVal);
616+
let self = this;
570617
571618
// check if user mentioned unique id for a column, if not set unique id for all items
572-
if (!this.hasUniqueId) {
573-
this.original_rows = _.map(this.vbt_data.rows, function (element, index) {
574-
return _.extend({}, element, {
575-
"vbt_id": index
576-
});
577-
});
578-
} else {
579-
this.original_rows = _.cloneDeep(this.vbt_data.rows);
580-
}
619+
this.original_rows = _.map(this.vbt_data.rows, function (element, index) {
620+
let extra = {};
621+
if (!self.hasUniqueId) {
622+
extra.vbt_id = index + 1;
623+
}
624+
// extra.row_higlighted = false;
625+
return _.extend({}, element, extra);
626+
});
627+
581628
this.filter();
582629
},
583630
deep: true
@@ -591,7 +638,9 @@ export default {
591638
temp_filtered_results: {
592639
handler: function (newVal, oldVal) {
593640
if (this.selected_items.length == 0) {
594-
EventBus.$emit('unselect-select-all-items-checkbox');
641+
// EventBus.$emit('unselect-select-all-items-checkbox');
642+
this.select_all_rows = false;
643+
595644
return;
596645
}
597646
@@ -604,9 +653,11 @@ export default {
604653
}
605654
606655
if (difference.length == 0) {
607-
EventBus.$emit('select-select-all-items-checkbox');
656+
// EventBus.$emit('select-select-all-items-checkbox');
657+
this.select_all_rows = true;
608658
} else {
609-
EventBus.$emit('unselect-select-all-items-checkbox');
659+
this.select_all_rows = false;
660+
// EventBus.$emit('unselect-select-all-items-checkbox');
610661
}
611662
},
612663
deep: true
@@ -666,6 +717,9 @@ export default {
666717
.vbt-sort-cursor {
667718
cursor: pointer;
668719
}
720+
.custom-control-label {
721+
vertical-align: top;
722+
}
669723
</style>
670724

671725

0 commit comments

Comments
 (0)