Skip to content

Commit 9756367

Browse files
szczepanmasnyszczepanmasny
committed
merged datatable components, added favicon, added page selector
1 parent 36a2d4b commit 9756367

16 files changed

+517
-383
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
66
<title>Vue CRUD</title>
77
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
8+
<link rel="shortcut icon" type="image/png" href="/static/favicon.png">
89
</head>
910
<body>
1011
<div id="app"></div>

‎src/crud/components/ChildrenTable.vue‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
:disable-initial-sort="true"
6565
:must-sort="true"
6666
:rows-per-page-items="[10, 25, { text: $t('all'), value: -1 }]"
67+
:pagination.sync="pagination"
6768
light
6869
:headers="headers"
6970
:items="filteredItems"
@@ -128,7 +129,7 @@
128129
</tr>
129130
</template>
130131
<template slot="pageText" slot-scope="{ pageStart, pageStop, itemsLength }">
131-
{{ $t('records') }} {{ pageStart }} - {{ pageStop }} {{ $t('from') }} {{ itemsLength }}
132+
<data-table-footer @setPage="setPage" :pagination="pagination" :pageStart="pageStart" :pageStop="pageStop" :itemsLength="itemsLength"></data-table-footer>
132133
</template>
133134
</v-data-table>
134135
<div class="details-loader-container">
@@ -142,11 +143,10 @@
142143
<script>
143144
import ClientSideFilteringMixin from "../mixins/datatable-client-side-filtering.js";
144145
import HelperMixin from "../mixins/datatable-helper.js";
145-
import MessagesMixin from "../mixins/datatable-messages.js";
146146
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
147147
148148
export default {
149-
mixins: [ClientSideFilteringMixin, HelperMixin, MessagesMixin],
149+
mixins: [ClientSideFilteringMixin, HelperMixin],
150150
props: {
151151
fieldsInfo: Array,
152152
deleteMode: {
@@ -200,6 +200,19 @@ export default {
200200
data() {
201201
return {};
202202
},
203+
filters: {
204+
cropped(field) {
205+
let rField
206+
let maxLength = 40
207+
if (typeof field === 'string' || field instanceof String) {
208+
rField = field.length <= maxLength ? field : field.substring(0, maxLength - 3) + '...'
209+
}
210+
else {
211+
rField = field
212+
}
213+
return rField
214+
}
215+
},
203216
computed: {
204217
tableFields() {
205218
return this.fieldsInfo.filter(field => field.table != false && field.type != 'divider');
@@ -216,6 +229,13 @@ export default {
216229
...mapActions("crud", [
217230
"getItemElements",
218231
]),
232+
activityClass(isActive) {
233+
let className = ""
234+
if(['soft', 'both'].includes(this.deleteMode)){
235+
className = parseInt(isActive) == 1 ? 'row-active' : 'row-inactive'
236+
}
237+
return className
238+
},
219239
edit(id) {
220240
this.$parent.edit(id);
221241
},

‎src/crud/components/DataTableClientSide.vue‎

Lines changed: 31 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -3,81 +3,15 @@
33
<v-card-title class="card-title table-controls">
44
<v-layout row wrap>
55
<v-flex xs12 lg4>
6-
<!-- Dialog for creating item -->
7-
<v-tooltip top>
8-
<v-btn fab dark color="green" @click="create()" slot="activator">
9-
<v-icon>add</v-icon>
10-
</v-btn>
11-
<span>{{ $t('add') }}</span>
12-
</v-tooltip>
13-
<!-- Multiple edit -->
14-
<v-tooltip top>
15-
<v-btn fab small dark color="orange" @click="editSelected()" slot="activator">
16-
<v-icon>edit</v-icon>
17-
</v-btn>
18-
<span>{{ $t('buttons.editSelected') }}</span>
19-
</v-tooltip>
20-
<!-- suspend/restore record (if soft deletes are enabled) -->
21-
<template v-if="['soft', 'both'].includes(deleteMode)">
22-
<v-tooltip top>
23-
<v-btn
24-
outline
25-
class="white--text"
26-
fab
27-
small
28-
color="red"
29-
@click="suspendSelected"
30-
slot="activator"
31-
>
32-
<v-icon>undo</v-icon>
33-
</v-btn>
34-
<span>{{ $t('buttons.suspendSelected') }}</span>
35-
</v-tooltip>
36-
<v-tooltip top>
37-
<v-btn
38-
outline
39-
class="white--text"
40-
fab
41-
small
42-
color="green"
43-
@click="restoreSelected"
44-
slot="activator"
45-
>
46-
<v-icon>redo</v-icon>
47-
</v-btn>
48-
<span>{{ $t('buttons.restoreSelected') }}</span>
49-
</v-tooltip>
50-
</template>
51-
<!-- hard delete -->
52-
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
53-
<v-btn
54-
outline
55-
class="white--text"
56-
fab
57-
small
58-
color="red"
59-
@click="destroySelected"
60-
slot="activator"
61-
>
62-
<v-icon>delete</v-icon>
63-
</v-btn>
64-
<span>{{ $t('buttons.deleteSelected') }}</span>
65-
</v-tooltip>
66-
<!-- Refresh table -->
67-
<v-tooltip top>
68-
<v-btn
69-
outline
70-
class="white--text"
71-
fab
72-
small
73-
color="blue"
74-
@click="refreshTable()"
75-
slot="activator"
76-
>
77-
<v-icon>refresh</v-icon>
78-
</v-btn>
79-
<span>{{ $t('buttons.refreshTable') }}</span>
80-
</v-tooltip>
6+
<data-table-controls
7+
:deleteMode="deleteMode"
8+
@create="create"
9+
@editSelected="editSelected"
10+
@suspendSelected="suspendSelected"
11+
@restoreSelected="restoreSelected"
12+
@destroySelected="destroySelected"
13+
@refreshTable="refreshTable"
14+
></data-table-controls>
8115
</v-flex>
8216

8317
<v-flex xs12 lg8 text-xs-left text-lg-right>
@@ -145,6 +79,7 @@
14579
v-model="selected"
14680
select-all="black"
14781
:rows-per-page-items="[20, 50, { text: $t('all'), value: -1 }]"
82+
:pagination.sync="pagination"
14883
light
14984
:headers="headers"
15085
:items="filteredItems"
@@ -154,148 +89,27 @@
15489
:loading="loading"
15590
>
15691
<template slot="items" slot-scope="props">
157-
<tr @dblclick="rowDblclickAction(props.item)" :class="activityClass(props.item.meta.active)">
158-
159-
160-
<td>
161-
<v-checkbox hide-details v-model="props.selected" color="black"></v-checkbox>
162-
</td>
163-
164-
<!-- action buttons -->
165-
<td class="cell-nowrap">
166-
<!-- edit record -->
167-
<v-tooltip top v-if="editButton">
168-
<v-btn
169-
fab
170-
small
171-
class="xs white--text"
172-
color="orange"
173-
@click="edit(props.item.meta.id)"
174-
slot="activator"
175-
>
176-
<v-icon>edit</v-icon>
177-
</v-btn>
178-
<span>{{ $t('buttons.edit') }}</span>
179-
</v-tooltip>
180-
<!-- custom buttons -->
181-
<v-tooltip top v-for="(customButton) in customButtons" :key="customButton.name">
182-
<v-btn
183-
fab
184-
small
185-
class="xs white--text"
186-
:color="customButton.color"
187-
@click="custom(customButton.name, props.item)"
188-
slot="activator"
189-
>
190-
<v-icon>{{ customButton.icon }}</v-icon>
191-
</v-btn>
192-
<span>{{ customButton.text }}</span>
193-
</v-tooltip>
194-
<!-- buttons for open modal with item elements -->
195-
<v-tooltip top v-for="(button, key) in itemElements" :key="key">
196-
<v-btn
197-
outline
198-
fab
199-
small
200-
class="xs white--text"
201-
:color="button.color"
202-
@click="editItemElements(key, props.item.meta.id)"
203-
slot="activator"
204-
>
205-
<v-icon>{{ button.icon }}</v-icon>
206-
</v-btn>
207-
<span>{{ button.buttonText }}</span>
208-
</v-tooltip>
209-
<!-- suspend/restore record (if soft deletes are enabled) -->
210-
<template v-if="['soft', 'both'].includes(deleteMode)">
211-
<v-tooltip top v-if="props.item.meta.active == '1'">
212-
<v-btn
213-
outline
214-
fab
215-
small
216-
class="xs white--text"
217-
color="red"
218-
@click="suspend(props.item.meta.id)"
219-
slot="activator"
220-
>
221-
<v-icon>undo</v-icon>
222-
</v-btn>
223-
<span>{{ $t('buttons.suspend') }}</span>
224-
</v-tooltip>
225-
<v-tooltip top v-else>
226-
<v-btn
227-
outline
228-
fab
229-
small
230-
class="xs white--text"
231-
color="green"
232-
@click="restore(props.item.meta.id)"
233-
slot="activator"
234-
>
235-
<v-icon>redo</v-icon>
236-
</v-btn>
237-
<span>{{ $t('buttons.restore') }}</span>
238-
</v-tooltip>
239-
</template>
240-
<!-- hard delete -->
241-
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
242-
<v-btn
243-
outline
244-
fab
245-
small
246-
class="xs white--text"
247-
color="red"
248-
@click="destroy(props.item.meta.id)"
249-
slot="activator"
250-
>
251-
<v-icon>delete</v-icon>
252-
</v-btn>
253-
<span>{{ $t('buttons.delete') }}</span>
254-
</v-tooltip>
255-
<!-- file mode -->
256-
<template v-if="fileMode">
257-
<v-tooltip top>
258-
<v-btn
259-
outline
260-
fab
261-
small
262-
class="xs white--text"
263-
color="blue"
264-
@click="download(props.item)"
265-
slot="activator"
266-
>
267-
<v-icon>file_download</v-icon>
268-
</v-btn>
269-
<span>{{ $t('buttons.download') }}</span>
270-
</v-tooltip>
271-
<v-tooltip top v-if="isImage(props.item.type)">
272-
<v-btn
273-
outline
274-
fab
275-
small
276-
class="xs white--text"
277-
color="blue"
278-
@click="showImage(props.item)"
279-
slot="activator"
280-
>
281-
<v-icon>search</v-icon>
282-
</v-btn>
283-
<span>{{ $t('buttons.show') }}</span>
284-
</v-tooltip>
285-
</template>
286-
</td>
287-
<!-- table fields -->
288-
<td v-if="key != 'meta'" v-for="(field, key) in props.item" :key="key" max-width="20px !important;">
289-
<span v-if="columnTextModes[key] == 'html'" v-html="field"></span>
290-
<span v-else-if="columnTextModes[key] == 'cropped'" class="cell-nowrap">{{ field | cropped }}</span>
291-
<span v-else-if="columnTextModes[key] == 'text'">{{ field }}</span>
292-
</td>
293-
</tr>
92+
<data-table-row
93+
:props="props"
94+
:editButton='editButton'
95+
:customButtons='customButtons'
96+
:deleteMode='deleteMode'
97+
:itemElements="itemElements"
98+
:fileMode="fileMode"
99+
:columnTextModes="columnTextModes"
100+
@edit="edit"
101+
@custom="custom"
102+
@suspend="suspend"
103+
@restore="restore"
104+
@destroy="destroy"
105+
@editItemElements="editItemElements"
106+
@download="download"
107+
@showImage="showImage"
108+
></data-table-row>
109+
</template>
110+
<template slot="pageText" slot-scope="{ pageStart, pageStop, itemsLength }">
111+
<data-table-footer @setPage="setPage" :pagination="pagination" :pageStart="pageStart" :pageStop="pageStop" :itemsLength="itemsLength"></data-table-footer>
294112
</template>
295-
<template
296-
slot="pageText"
297-
slot-scope="{ pageStart, pageStop, itemsLength }"
298-
>{{ $t('records') }} {{ pageStart }} - {{ pageStop }} {{ $t('from') }} {{ itemsLength }}</template>
299113
</v-data-table>
300114
</v-card>
301115
</template>
@@ -304,11 +118,10 @@
304118
import MainMixin from "../mixins/datatable-main.js";
305119
import ClientSideFilteringMixin from "../mixins/datatable-client-side-filtering.js";
306120
import HelperMixin from "../mixins/datatable-helper.js";
307-
import MessagesMixin from "../mixins/datatable-messages.js";
308121
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
309122
310123
export default {
311-
mixins: [MainMixin, ClientSideFilteringMixin, HelperMixin, MessagesMixin],
124+
mixins: [MainMixin, ClientSideFilteringMixin, HelperMixin],
312125
data() {
313126
return {};
314127
},

0 commit comments

Comments
 (0)