Skip to content

Commit 8c7af2a

Browse files
szczepanmasnyszczepanmasny
committed
previous/next item in extended details
1 parent 0b0ef16 commit 8c7af2a

File tree

12 files changed

+139
-23
lines changed

12 files changed

+139
-23
lines changed

‎src/crud/components/Crud.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@ export default {
129129
'setPath',
130130
'setCreationMode',
131131
]),
132-
custom(name, item) {
133-
this.$parent[name](item)
132+
custom(name, item, index) {
133+
this.$parent[name](item, index)
134134
},
135135
itemElementsClosed(){
136136
this.refreshTable()

‎src/crud/components/DataTableClientSide.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,9 @@ export default {
140140
},
141141
computed: {
142142
...mapState("crud", ['loading', "detailsDialog", "tableRefreshing"]),
143+
totalItems() {
144+
return this.filteredItems.length
145+
}
143146
},
144147
watch: {
145148
detailsDialog(val) {
@@ -151,11 +154,20 @@ export default {
151154
if (val) {
152155
this.getItems();
153156
}
154-
}
157+
},
155158
},
156159
methods: {
157160
...mapMutations("crud", ["refreshTable"]),
158161
...mapActions("crud", ["getItems"]),
162+
moveDetailsItem(page, index){
163+
this.pagination.page = page
164+
let realIndex = (page - 1) * this.pagination.rowsPerPage + index
165+
let newItemId = this.filteredItems[realIndex].meta.id
166+
this.setCurrentItem({id:newItemId, index:index})
167+
this.getItemDetails([newItemId]).then(response => {
168+
this.showItemDetailsDialog();
169+
})
170+
}
159171
}
160172
};
161173
</script>

‎src/crud/components/DataTableRow.vue‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tr @dblclick="rowDblclickAction(props.item)" :class="activityClass(props.item.meta.active)">
2+
<tr @dblclick="rowDblclickAction(props.item, props.index)" :class="[activityClass(props.item.meta.active), currentClass(props.item.meta.id)]">
33
<td>
44
<v-checkbox
55
hide-details
@@ -11,14 +11,14 @@
1111
<td class="cell-nowrap">
1212
<!-- edit record -->
1313
<v-tooltip top v-if="editButton">
14-
<v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id)" slot="activator">
14+
<v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id, props.index)" slot="activator">
1515
<v-icon>edit</v-icon>
1616
</v-btn>
1717
<span>{{ $t('global.datatable.buttons.edit') }}</span>
1818
</v-tooltip>
1919
<!-- custom buttons -->
2020
<v-tooltip top v-for="(customButton) in customButtons" :key="customButton.name">
21-
<v-btn fab :disabled="!props.item.meta.buttons[customButton.name]" small class="xs white--text" :color="customButton.color" @click="custom(customButton.name, props.item)" slot="activator">
21+
<v-btn fab :disabled="!props.item.meta.buttons[customButton.name]" small class="xs white--text" :color="customButton.color" @click="custom(customButton.name, props.item, props.index)" slot="activator">
2222
<v-icon>{{ customButton.icon }}</v-icon>
2323
</v-btn>
2424
<span>{{ customButton.text }}</span>
@@ -67,6 +67,7 @@
6767

6868
<script>
6969
import FileDetails from './FileDetails.vue'
70+
import { mapState } from "vuex";
7071
7172
export default {
7273
components: {
@@ -93,6 +94,9 @@ export default {
9394
return rField
9495
},
9596
},
97+
computed: {
98+
...mapState("crud", ['currentItemId']),
99+
},
96100
methods: {
97101
fileFieldToJSON(field) {
98102
return JSON.parse(field)
@@ -104,9 +108,13 @@ export default {
104108
}
105109
return className
106110
},
107-
rowDblclickAction(item) {
111+
currentClass(itemId) {
112+
let currentId = this.currentItemId
113+
return itemId == currentId ? 'secondary' : ''
114+
},
115+
rowDblclickAction(item, index) {
108116
if(this.editButton){
109-
this.edit(item.meta.id)
117+
this.edit(item.meta.id, index)
110118
}
111119
else {
112120
let goToItemButton = false
@@ -117,12 +125,12 @@ export default {
117125
}
118126
}
119127
if(goToItemButton){
120-
this.custom('goToItem', item)
128+
this.custom('goToItem', item, index)
121129
}
122130
}
123131
},
124-
edit(id) {this.$emit('edit', id)},
125-
custom(name, item) {this.$emit('custom', name, item)},
132+
edit(id, index) {this.$emit('edit', id, index)},
133+
custom(name, item, index) {this.$emit('custom', name, item, index)},
126134
suspend(id) {this.$emit('suspend', id)},
127135
restore(id) {this.$emit('restore', id)},
128136
destroy(id) {this.$emit('destroy', id)},

‎src/crud/components/DataTableServerSide.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,17 @@ export default {
189189
}
190190
}, 500)
191191
},
192+
moveDetailsItem(page, index){
193+
this.ignorePaginationWatcher = true
194+
this.pagination.page = page
195+
this.getItemsServerSide([this.params]).then(response => {
196+
let newItemId = this.items[index].meta.id
197+
this.setCurrentItem({id:newItemId, index:index})
198+
this.getItemDetails([newItemId]).then(response => {
199+
this.showItemDetailsDialog();
200+
})
201+
})
202+
},
192203
exportToExcel() {
193204
this.excelLoading = true
194205
let headers = this.cleanHeaders.map(header => header.text)

‎src/crud/components/ItemDetailsContainer.vue‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
<v-btn icon dark @click.native="refresh()">
1818
<v-icon>refresh</v-icon>
1919
</v-btn>
20+
<v-btn icon dark @click.native="previous()">
21+
<v-icon>navigate_before</v-icon>
22+
</v-btn>
23+
<v-btn icon dark @click.native="next()">
24+
<v-icon>navigate_next</v-icon>
25+
</v-btn>
2026
<v-btn icon @click.native="close()" dark>
2127
<v-icon>close</v-icon>
2228
</v-btn>
@@ -79,7 +85,9 @@
7985
...mapMutations('crud', [
8086
'hideItemDetailsDialog',
8187
'setIdColumn',
82-
'setChildItemsMapping'
88+
'setChildItemsMapping',
89+
'moveItem',
90+
'setNextItem'
8391
]),
8492
escapeHandler(event) {
8593
if (event.which == 27) {
@@ -91,6 +99,12 @@
9199
},
92100
close() {
93101
this.hideItemDetailsDialog()
102+
},
103+
previous() {
104+
this.moveItem(['previous', true])
105+
},
106+
next() {
107+
this.moveItem(['next', true])
94108
}
95109
},
96110
}

‎src/crud/mixins/datatable-main.js‎

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default {
2929
},
3030
computed: {
3131
...mapState(["filesPath", 'page']),
32-
...mapState("crud", ["prefix", "path"]),
32+
...mapState("crud", ["prefix", "path", 'nextItem', 'moveItemRun', 'moveItemDirection', "currentItemIndex"]),
3333
...mapGetters("crud", ["itemsList"]),
3434
selectedIds() {
3535
return this.selected.map(item => item.id);
@@ -41,17 +41,61 @@ export default {
4141
return this.$t('global.routes.' + this.page)
4242
}
4343
},
44+
watch: {
45+
moveItemRun(val){
46+
if (val) {
47+
let moveItemDirection = this.moveItemDirection
48+
let currentIndex = this.currentItemIndex
49+
let page = this.pagination.page
50+
let rowsPerPage = this.pagination.rowsPerPage
51+
let totalItems = this.totalItems
52+
let possible = true
53+
if(moveItemDirection == 'previous'){
54+
if(currentIndex > 0) {
55+
currentIndex -= 1
56+
}
57+
else if (page > 1){
58+
page -= 1
59+
currentIndex = rowsPerPage - 1
60+
}
61+
else {
62+
possible = false
63+
}
64+
}
65+
else if(moveItemDirection == 'next'){
66+
if(currentIndex < rowsPerPage - 1 && (page - 1) * rowsPerPage + currentIndex + 1 < totalItems) {
67+
currentIndex += 1
68+
}
69+
else if (page < Math.ceil(totalItems/rowsPerPage)){
70+
page += 1
71+
currentIndex = 0
72+
}
73+
else {
74+
possible = false
75+
}
76+
}
77+
if(possible) {
78+
this.moveDetailsItem(page, currentIndex)
79+
}
80+
this.moveItem(['', false])
81+
}
82+
}
83+
},
4484
methods: {
4585
...mapMutations(["alertError"]),
4686
...mapMutations("crud", [
87+
"showItemDetailsDialog",
88+
"setCurrentItem",
4789
"resetItems",
4890
"resetItem",
4991
"editItemDialog",
5092
"createItemDialog",
5193
"multipleEditDialog",
5294
"setItemElementsInfo",
5395
"editItemElementsDialog",
54-
"setSelectedIds"
96+
"setSelectedIds",
97+
"setCurrentItem",
98+
"moveItem"
5599
]),
56100
...mapActions("crud", [
57101
"getItem",
@@ -60,9 +104,11 @@ export default {
60104
"deleteItem",
61105
"getItemElements",
62106
"mulitipleItemsUpdate",
63-
"mulitipleItemsDelete"
107+
"mulitipleItemsDelete",
108+
"getItemDetails"
64109
]),
65-
edit(id) {
110+
edit(id, index) {
111+
this.setCurrentItem({id:id, index:index})
66112
this.getItem([id]).then(response => {
67113
this.editItemDialog(id);
68114
})
@@ -159,8 +205,8 @@ export default {
159205
]);
160206
}
161207
},
162-
custom(name, item) {
163-
this.$parent.custom(name, item);
208+
custom(name, item, index) {
209+
this.$parent.custom(name, item, index);
164210
},
165211
editItemElements(name, id) {
166212
let obj = this.itemElements[name];

‎src/crud/mixins/extended-controller.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@ export default {
3434
}
3535
},
3636
methods: {
37-
...mapMutations("crud", ["showItemDetailsDialog", "setCreatedItemStatus"]),
37+
...mapMutations("crud", ["showItemDetailsDialog", "setCreatedItemStatus", "setCurrentItem"]),
3838
...mapActions("crud", ["getItemDetails"]),
39-
goToItem(item) {
39+
goToItem(item, index) {
40+
this.setCurrentItem({id:item.id, index:index})
4041
this.getItemDetails([item.id]).then(response => {
4142
this.showItemDetailsDialog();
4243
})

‎src/routes/main/components/Sidebar.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div @click="click()" @mouseleave="mouseleave()">
2+
<div @click="click()" @mouseover="mouseover()" @mouseleave="mouseleave()">
33
<v-navigation-drawer
44
permanent
55
:mini-variant="$store.state.sidebarMini"
@@ -47,7 +47,7 @@ import { mapState, mapGetters, mapMutations } from "vuex";
4747
4848
export default {
4949
computed: {
50-
...mapState(["sidebarMini", "sidebar", "sidebarItems"]),
50+
...mapState(["sidebarMini", "sidebar", "sidebarItems", "sidebarExpandOn"]),
5151
...mapGetters("auth", ["checkRole"])
5252
},
5353
props: {
@@ -59,7 +59,12 @@ export default {
5959
'setSidebarWidth'
6060
]),
6161
click() {
62-
if(this.sidebarMini) {
62+
if(this.sidebarMini && this.sidebarExpandOn == 'click') {
63+
this.setSidebarWidth(false)
64+
}
65+
},
66+
mouseover() {
67+
if(this.sidebarMini && this.sidebarExpandOn == 'mouseover') {
6368
this.setSidebarWidth(false)
6469
}
6570
},

‎src/store/modules/crud/mutations.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,23 @@ let mutations = {
2323
},
2424
resetItems(state) {
2525
state.items = []
26+
state.currentItemId = null
27+
state.currentItemIndex = null
2628
},
2729
setSelectedIds(state, items) {
2830
state.selectedIds = items.map(item => item.id);
2931
},
32+
setCurrentItem(state, item){
33+
state.currentItemId = item.id
34+
state.currentItemIndex = item.index
35+
},
36+
moveItem(state, [direction, run]) {
37+
state.moveItemRun = run
38+
state.moveItemDirection = direction
39+
},
40+
setNextItem(state, bool) {
41+
state.previousItem = bool
42+
},
3043
// details item
3144
setDetailsLoader(state, bool) {
3245
state.detailsLoading = bool

‎src/store/modules/crud/state.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ let state = {
66
items: [],
77
totalItems: 0,
88
loading: true,
9+
currentItemId: null,
10+
currentItemIndex: null,
11+
moveItemRun: false,
12+
moveItemDirection: null,
913
details: {
1014
show: false,
1115
id: null,

0 commit comments

Comments
 (0)