Skip to content

Commit cb41c9c

Browse files
szczepanmasnyszczepanmasny
committed
use data table row in children table
1 parent 73763c2 commit cb41c9c

File tree

7 files changed

+217
-178
lines changed

7 files changed

+217
-178
lines changed

‎src/utils/crud/components/Button.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<v-tooltip top>
3+
<v-btn
4+
fab
5+
:small="small"
6+
:dark="dark"
7+
:class="{xs: xs}"
8+
:color="color"
9+
@click="emitClick()"
10+
slot="activator"
11+
>
12+
<v-icon>{{ icon }}</v-icon>
13+
</v-btn>
14+
<span>{{ tooltip }}</span>
15+
</v-tooltip>
16+
</template>
17+
18+
<script>
19+
20+
export default {
21+
props: {
22+
small: {
23+
type: Boolean,
24+
default: true,
25+
},
26+
dark: {
27+
type: Boolean,
28+
default: true,
29+
},
30+
xs: {
31+
type: Boolean,
32+
default: false,
33+
},
34+
color: {
35+
type: String,
36+
},
37+
tooltip: {
38+
type: String
39+
},
40+
icon: {
41+
type: String
42+
},
43+
disabled: {
44+
type: Boolean,
45+
default: false
46+
}
47+
},
48+
methods: {
49+
emitClick () {
50+
this.$emit('clicked')
51+
}
52+
}
53+
}
54+
55+
</script>
56+
57+
<style scoped>
58+
.xs {
59+
width: 25px;
60+
height: 25px;
61+
margin: 3 !important;
62+
}
63+
64+
.xs > div {
65+
padding: 3px !important;
66+
}
67+
68+
.xs > div > i {
69+
height: 12px !important;
70+
width: 12px !important;
71+
line-height: 12px;
72+
}
73+
</style>

‎src/utils/crud/components/ChildrenTable.vue‎

Lines changed: 37 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -94,72 +94,31 @@
9494
:no-data-text="$t('global.datatable.noDataAvailable')"
9595
:rows-per-page-text="$t('global.datatable.rowsPerPageText')">
9696
<template slot="items" slot-scope="props">
97-
<tr @dblclick="rowDblclickAction(props.item.meta.id)" :class="activityClass(props.item.meta.active)">
98-
<!-- action buttons -->
99-
<td class="cell-nowrap">
100-
<!-- edit record -->
101-
<v-tooltip top v-if="editButton">
102-
<v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id)" slot="activator">
103-
<v-icon>edit</v-icon>
104-
</v-btn>
105-
<span>{{ $t('global.datatable.buttons.edit') }}</span>
106-
</v-tooltip>
107-
<!-- custom buttons -->
108-
<v-tooltip top v-for="(customButton) in customButtons" :key="customButton.name">
109-
<v-btn fab small class="xs white--text" :color="customButton.color" @click="custom(customButton.name, props.item, props.index)" slot="activator">
110-
<v-icon>{{ customButton.icon }}</v-icon>
111-
</v-btn>
112-
<span>{{ customButton.text }}</span>
113-
</v-tooltip>
114-
<!-- buttons for open modal with item elements -->
115-
<v-tooltip top v-for="(button, key) in itemElements" :key="key">
116-
<v-btn
117-
fab
118-
small
119-
class="xs white--text"
120-
:color="button.color"
121-
@click="editItemElements(key, props.item.meta.id)"
122-
slot="activator"
123-
>
124-
<v-icon>{{ button.icon }}</v-icon>
125-
</v-btn>
126-
<span>{{ button.buttonText }}</span>
127-
</v-tooltip>
128-
<!-- suspend/restore record (if soft deletes are enabled) -->
129-
<template v-if="['soft', 'both'].includes(deleteMode)">
130-
<v-tooltip top v-if="props.item.meta.active == '1'">
131-
<v-btn fab small class="xs white--text" color="red" @click="suspend(props.item.meta.id)" slot="activator">
132-
<v-icon>undo</v-icon>
133-
</v-btn>
134-
<span>{{ $t('global.datatable.buttons.suspend') }}</span>
135-
</v-tooltip>
136-
<v-tooltip top v-else>
137-
<v-btn fab small class="xs white--text" color="green" @click="restore(props.item.meta.id)" slot="activator">
138-
<v-icon>redo</v-icon>
139-
</v-btn>
140-
<span>{{ $t('global.datatable.buttons.restore') }}</span>
141-
</v-tooltip>
142-
</template>
143-
<!-- hard delete -->
144-
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
145-
<v-btn fab small class="xs white--text" color="red" @click="destroy(props.item.meta.id)" slot="activator">
146-
<v-icon>delete</v-icon>
147-
</v-btn>
148-
<span>{{ $t('global.datatable.buttons.delete') }}</span>
149-
</v-tooltip>
150-
</td>
151-
<!-- table fields -->
152-
<template v-for="(field, key) in props.item">
153-
<td v-if="key != 'meta'" :key="key" max-width="20px !important;">
154-
<span v-if="columnTextModes[key] == 'html'" v-html="field"></span>
155-
<span v-else-if="columnTextModes[key] == 'cropped'" class="cell-nowrap">{{ field | cropped }}</span>
156-
<span v-else-if="columnTextModes[key] == 'text'">{{ field }}</span>
157-
</td>
158-
</template>
159-
</tr>
97+
<data-table-row
98+
:props="props"
99+
:edit-button='editButton'
100+
:custom-buttons='customButtons'
101+
:delete-mode='deleteMode'
102+
:edit-mode="editMode"
103+
:item-elements="itemElements"
104+
:column-text-modes="setColumnTextModes(props)"
105+
@edit="edit"
106+
@custom="custom"
107+
@suspend="suspend"
108+
@restore="restore"
109+
@destroy="destroy"
110+
@editItemElements="editItemElements"
111+
@doubleClick="resolveRowDoubleClick"
112+
></data-table-row>
160113
</template>
161114
<template slot="pageText" slot-scope="{ pageStart, pageStop, itemsLength }">
162-
<data-table-footer @setPage="setPage" :pagination="pagination" :pageStart="pageStart" :pageStop="pageStop" :itemsLength="itemsLength"></data-table-footer>
115+
<data-table-footer
116+
@setPage="setPage"
117+
:pagination="pagination"
118+
:pageStart="pageStart"
119+
:pageStop="pageStop"
120+
:itemsLength="itemsLength"
121+
></data-table-footer>
163122
</template>
164123
</v-data-table>
165124
<div class="details-loader-container">
@@ -178,9 +137,14 @@ import {
178137
} from 'vuex'
179138
import ClientSideFilteringMixin from '../mixins/datatable-client-side-filtering'
180139
import HelperMixin from '../mixins/datatable-helper'
140+
import DataTableRow from '../components/DataTableRow.vue'
141+
import crud from '@/config/crud'
181142
182143
export default {
183144
mixins: [ClientSideFilteringMixin, HelperMixin],
145+
components: {
146+
DataTableRow
147+
},
184148
props: {
185149
title: String,
186150
fieldsInfo: Array,
@@ -226,21 +190,10 @@ export default {
226190
detailsLoader: {
227191
type: Boolean,
228192
default: false
229-
}
230-
},
231-
data () {
232-
return {}
233-
},
234-
filters: {
235-
cropped (field) {
236-
let rField
237-
const maxLength = 40
238-
if (typeof field === 'string' || field instanceof String) {
239-
rField = field.length <= maxLength ? field : `${field.substring(0, maxLength - 3)}...`
240-
} else {
241-
rField = field
242-
}
243-
return rField
193+
},
194+
editMode: {
195+
type: Boolean,
196+
default: crud.editMode === undefined ? true : crud.editMode
244197
}
245198
},
246199
computed: {
@@ -254,6 +207,9 @@ export default {
254207
},
255208
excelName () {
256209
return `${this.$t(`global.routes.${this.page}`)} - ${this.title}`
210+
},
211+
columnTextModes () {
212+
return this.setColumnTextModes()
257213
}
258214
},
259215
methods: {
@@ -264,12 +220,8 @@ export default {
264220
...mapActions('crud', [
265221
'getItemElements'
266222
]),
267-
activityClass (isActive) {
268-
let className = ''
269-
if (['soft', 'both'].includes(this.deleteMode)) {
270-
className = parseInt(isActive) === 1 ? 'row-active' : 'row-inactive'
271-
}
272-
return className
223+
resolveRowDoubleClick (item) {
224+
this.edit(item.meta.id)
273225
},
274226
edit (id) {
275227
this.$parent.edit(id)
@@ -306,32 +258,12 @@ export default {
306258
const obj = this.itemElements[name]
307259
this.setItemElementsInfo([id, obj])
308260
this.getItemElements()
309-
},
310-
rowDblclickAction (id) {
311-
if (this.editButton) {
312-
this.edit(id)
313-
}
314261
}
315262
}
316263
}
317264
</script>
318265

319266
<style scoped>
320-
.xs {
321-
width: 25px;
322-
height: 25px;
323-
margin: 3 !important;
324-
}
325-
326-
.xs > div {
327-
padding: 3px !important;
328-
}
329-
330-
.xs > div > i {
331-
height: 12px !important;
332-
width: 12px !important;
333-
line-height: 12px;
334-
}
335267
.child-card {
336268
min-height: 400px;
337269
max-height: calc(100vh - 150px);

‎src/utils/crud/components/DataTableClientSide.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,17 @@
106106
:custom-buttons='customButtons'
107107
:delete-mode='deleteMode'
108108
:item-elements="itemElements"
109-
:column-text-modes="columnTextModes(props)"
109+
:column-text-modes="setColumnTextModes(props)"
110110
:edit-mode="editMode"
111111
:select-many-mode="selectManyMode"
112+
:current-item-id="currentItemId"
112113
@edit="edit"
113114
@custom="custom"
114115
@suspend="suspend"
115116
@restore="restore"
116117
@destroy="destroy"
117118
@editItemElements="editItemElements"
119+
@doubleClick="resolveRowDoubleClick"
118120
></data-table-row>
119121
</template>
120122
<template slot="pageText" slot-scope="{ pageStart, pageStop, itemsLength }">

0 commit comments

Comments
 (0)