Skip to content

Commit 033d2f4

Browse files
szczepanmasnyszczepanmasny
committed
datatable messages moved to locales, added export do Excel
1 parent edb6cb3 commit 033d2f4

16 files changed

+325
-308
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"babel-polyfill": "^6.26.0",
13+
"file-saver": "^2.0.0",
1314
"register-service-worker": "^1.5.2",
1415
"vue": "^2.5.17",
1516
"vue-i18n": "^8.5.0",
@@ -24,6 +25,7 @@
2425
"@vue/cli-plugin-babel": "^3.2.0",
2526
"@vue/cli-plugin-pwa": "^3.2.0",
2627
"@vue/cli-service": "^3.2.0",
28+
"script-loader": "^0.7.2",
2729
"stylus": "^0.54.5",
2830
"stylus-loader": "^3.0.2",
2931
"vue-cli-plugin-vuetify": "^0.4.6",

‎src/crud/components/ChildrenTable.vue‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<v-btn fab small dark color="green" @click="create()" slot="activator">
1010
<v-icon>add</v-icon>
1111
</v-btn>
12-
<span>{{ $t('add') }}</span>
12+
<span>{{ $t('global.datatable.add') }}</span>
1313
</v-tooltip>
1414
<!-- custom buttons -->
1515
<v-tooltip top v-for="(customHeaderButton) in customHeaderButtons" :key="customHeaderButton.name">
@@ -23,7 +23,7 @@
2323
<v-flex xs12 xl8 text-xs-left text-xl-right>
2424

2525
<!-- Search by fields -->
26-
<v-menu offset-y :close-on-content-click="false">
26+
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
2727
<v-btn small fab dark slot="activator" class="primary">
2828
<v-icon>filter_list</v-icon>
2929
</v-btn>
@@ -34,7 +34,7 @@
3434
v-model="item.mode"
3535
item-text="text"
3636
item-value="name"
37-
:label="$t('filterModes.label')"
37+
:label="$t('global.datatable.filterModes.label')"
3838
hide-details
3939
@input="updateColumnFilterMode($event, index)"
4040
></v-autocomplete>
@@ -44,17 +44,24 @@
4444
</v-menu>
4545

4646
<!-- Search in table -->
47-
<span style="display:inline-block;margin-left:50px;width:250px;">
48-
<v-text-field append-icon="search" :label="$t('search')" single-line hide-details v-model="search" min-width="200"></v-text-field>
47+
<span style="margin-right:30px;display:inline-block;width:250px;">
48+
<v-text-field append-icon="search" :label="$t('global.datatable.search')" single-line hide-details v-model="search" min-width="200"></v-text-field>
4949
</span>
5050

5151
<!-- Select statuses (active/inactive) -->
5252
<template v-if="['soft', 'both'].includes(deleteMode)">
53-
<span style="display:inline-block;margin-left:50px;width:250px;">
54-
<v-autocomplete :label="$t('status.title')" v-bind:items="statuses" v-model="selectedStatuses" single-line item-text="text" item-value="value" multiple chips></v-autocomplete>
53+
<span style="margin-right:30px;display:inline-block;width:250px;">
54+
<v-autocomplete :label="$t('global.datatable.status.title')" v-bind:items="statuses" v-model="selectedStatuses" single-line item-text="text" item-value="value" multiple chips></v-autocomplete>
5555
</span>
5656
</template>
5757

58+
<v-tooltip left>
59+
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator">
60+
<v-icon>save_alt</v-icon>
61+
</v-btn>
62+
<span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
63+
</v-tooltip>
64+
5865
</v-flex>
5966
</v-layout>
6067
</v-card-title>
@@ -63,14 +70,14 @@
6370
<v-data-table
6471
:disable-initial-sort="true"
6572
:must-sort="true"
66-
:rows-per-page-items="[10, 25, { text: $t('all'), value: -1 }]"
73+
:rows-per-page-items="[10, 25, { text: $t('global.datatable.all'), value: -1 }]"
6774
:pagination.sync="pagination"
6875
light
6976
:headers="headers"
7077
:items="filteredItems"
71-
:no-results-text="$t('noMatchingResults')"
72-
:no-data-text="$t('noDataAvailable')"
73-
:rows-per-page-text="$t('rowsPerPageText')">
78+
:no-results-text="$t('global.datatable.noMatchingResults')"
79+
:no-data-text="$t('global.datatable.noDataAvailable')"
80+
:rows-per-page-text="$t('global.datatable.rowsPerPageText')">
7481
<template slot="items" slot-scope="props">
7582
<tr @dblclick="rowDblclickAction(props.item.meta.id)" :class="activityClass(props.item.meta.active)">
7683
<!-- action buttons -->
@@ -80,7 +87,7 @@
8087
<v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id)" slot="activator">
8188
<v-icon>edit</v-icon>
8289
</v-btn>
83-
<span>{{ $t('buttons.edit') }}</span>
90+
<span>{{ $t('global.datatable.buttons.edit') }}</span>
8491
</v-tooltip>
8592
<!-- buttons for open modal with item elements -->
8693
<v-tooltip top v-for="(button, key) in itemElements" :key="key">
@@ -103,21 +110,21 @@
103110
<v-btn fab small outline class="xs white--text" color="red" @click="suspend(props.item.meta.id)" slot="activator">
104111
<v-icon>undo</v-icon>
105112
</v-btn>
106-
<span>{{ $t('buttons.suspend') }}</span>
113+
<span>{{ $t('global.datatable.buttons.suspend') }}</span>
107114
</v-tooltip>
108115
<v-tooltip top v-else>
109116
<v-btn fab small outline class="xs white--text" color="green" @click="restore(props.item.meta.id)" slot="activator">
110117
<v-icon>redo</v-icon>
111118
</v-btn>
112-
<span>{{ $t('buttons.restore') }}</span>
119+
<span>{{ $t('global.datatable.buttons.restore') }}</span>
113120
</v-tooltip>
114121
</template>
115122
<!-- hard delete -->
116123
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
117124
<v-btn outline fab small class="xs white--text" color="red" @click="destroy(props.item.meta.id)" slot="activator">
118125
<v-icon>delete</v-icon>
119126
</v-btn>
120-
<span>{{ $t('buttons.delete') }}</span>
127+
<span>{{ $t('global.datatable.buttons.delete') }}</span>
121128
</v-tooltip>
122129
</td>
123130
<!-- table fields -->

‎src/crud/components/DataTableClientSide.vue‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<v-flex xs12 lg8 text-xs-left text-lg-right>
1818
<!-- Search by fields -->
19-
<v-menu offset-y :close-on-content-click="false">
19+
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
2020
<v-btn small fab dark slot="activator" class="primary">
2121
<v-icon>filter_list</v-icon>
2222
</v-btn>
@@ -27,7 +27,7 @@
2727
v-model="item.mode"
2828
item-text="text"
2929
item-value="name"
30-
:label="$t('filterModes.label')"
30+
:label="$t('global.datatable.filterModes.label')"
3131
hide-details
3232
@input="updateColumnFilterMode($event, index)"
3333
></v-autocomplete>
@@ -42,10 +42,10 @@
4242
</v-menu>
4343

4444
<!-- Search in table -->
45-
<span style="display:inline-block;margin-left:50px;width:250px;">
45+
<span style="margin-right:30px;display:inline-block;width:250px;">
4646
<v-text-field
4747
append-icon="search"
48-
:label="$t('search')"
48+
:label="$t('global.datatable.search')"
4949
single-line
5050
hide-details
5151
v-model="search"
@@ -55,9 +55,9 @@
5555

5656
<!-- Select statuses (active/inactive) -->
5757
<template v-if="['soft', 'both'].includes(deleteMode)">
58-
<span style="display:inline-block;margin-left:50px;width:250px;">
58+
<span style="margin-right:30px;display:inline-block;width:250px;">
5959
<v-autocomplete
60-
:label="$t('status.title')"
60+
:label="$t('global.datatable.status.title')"
6161
v-bind:items="statuses"
6262
v-model="selectedStatuses"
6363
single-line
@@ -68,6 +68,14 @@
6868
></v-autocomplete>
6969
</span>
7070
</template>
71+
72+
<v-tooltip left>
73+
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator">
74+
<v-icon>save_alt</v-icon>
75+
</v-btn>
76+
<span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
77+
</v-tooltip>
78+
7179
</v-flex>
7280
</v-layout>
7381
</v-card-title>
@@ -78,14 +86,14 @@
7886
:must-sort="true"
7987
v-model="selected"
8088
select-all="black"
81-
:rows-per-page-items="[20, 50, { text: $t('all'), value: -1 }]"
89+
:rows-per-page-items="[20, 50, { text: $t('global.datatable.all'), value: -1 }]"
8290
:pagination.sync="pagination"
8391
light
8492
:headers="headers"
8593
:items="filteredItems"
86-
:no-results-text="$t('noMatchingResults')"
87-
:no-data-text="$t('noDataAvailable')"
88-
:rows-per-page-text="$t('rowsPerPageText')"
94+
:no-results-text="$t('global.datatable.noMatchingResults')"
95+
:no-data-text="$t('global.datatable.noDataAvailable')"
96+
:rows-per-page-text="$t('global.datatable.rowsPerPageText')"
8997
:loading="loading"
9098
>
9199
<template slot="items" slot-scope="props">
@@ -152,7 +160,7 @@ export default {
152160
},
153161
methods: {
154162
...mapMutations("crud", ["refreshTable"]),
155-
...mapActions("crud", ["getItems"])
163+
...mapActions("crud", ["getItems"]),
156164
}
157165
};
158166
</script>

‎src/crud/components/DataTableControls.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,36 @@
55
<v-btn fab dark color="green" @click="create()" slot="activator">
66
<v-icon>add</v-icon>
77
</v-btn>
8-
<span>{{ $t('add') }}</span>
8+
<span>{{ $t('global.datatable.add') }}</span>
99
</v-tooltip>
1010
<!-- Multiple edit -->
1111
<v-tooltip top>
1212
<v-btn fab small dark color="orange" @click="editSelected()" slot="activator">
1313
<v-icon>edit</v-icon>
1414
</v-btn>
15-
<span>{{ $t('buttons.editSelected') }}</span>
15+
<span>{{ $t('global.datatable.buttons.editSelected') }}</span>
1616
</v-tooltip>
1717
<!-- suspend/restore record (if soft deletes are enabled) -->
1818
<template v-if="['soft', 'both'].includes(deleteMode)">
1919
<v-tooltip top>
2020
<v-btn outline class="white--text" fab small color="red" @click="suspendSelected()" slot="activator">
2121
<v-icon>undo</v-icon>
2222
</v-btn>
23-
<span>{{ $t('buttons.suspendSelected') }}</span>
23+
<span>{{ $t('global.datatable.buttons.suspendSelected') }}</span>
2424
</v-tooltip>
2525
<v-tooltip top>
2626
<v-btn outline class="white--text" fab small color="green" @click="restoreSelected()" slot="activator">
2727
<v-icon>redo</v-icon>
2828
</v-btn>
29-
<span>{{ $t('buttons.restoreSelected') }}</span>
29+
<span>{{ $t('global.datatable.buttons.restoreSelected') }}</span>
3030
</v-tooltip>
3131
</template>
3232
<!-- hard delete -->
3333
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
3434
<v-btn outline class="white--text" fab small color="red" @click="destroySelected()" slot="activator">
3535
<v-icon>delete</v-icon>
3636
</v-btn>
37-
<span>{{ $t('buttons.deleteSelected') }}</span>
37+
<span>{{ $t('global.datatable.buttons.deleteSelected') }}</span>
3838
</v-tooltip>
3939
<!-- Refresh table -->
4040
<v-tooltip top>
@@ -49,15 +49,13 @@
4949
>
5050
<v-icon>refresh</v-icon>
5151
</v-btn>
52-
<span>{{ $t('buttons.refreshTable') }}</span>
52+
<span>{{ $t('global.datatable.buttons.refreshTable') }}</span>
5353
</v-tooltip>
5454
</span>
5555
</template>
5656

5757
<script>
58-
import MessagesMixin from "../mixins/messages-datatable-controls.js";
5958
export default {
60-
mixins: [MessagesMixin],
6159
props: [
6260
'deleteMode',
6361
],

‎src/crud/components/DataTableFooter.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<span>
33
<span>
4-
{{ $t('records') }} {{ pageStart }} - {{ pageStop }} {{ $t('from') }} {{ itemsLength }}
4+
{{ $t('global.datatable.records') }} {{ pageStart }} - {{ pageStop }} {{ $t('global.datatable.from') }} {{ itemsLength }}
55
</span>
66
<span style="margin-left:30px;">
7-
{{ $t('page') }}:
7+
{{ $t('global.datatable.page') }}:
88
&nbsp;
99
<span style="width:50px;display:inline-block !important;">
1010
<v-text-field :value="pagination.page" @input="setPage($event)" type="number" min="1" :max="calcPages"></v-text-field>
@@ -14,9 +14,7 @@
1414
</template>
1515

1616
<script>
17-
import MessagesMixin from "../mixins/messages-datatable-footer.js";
1817
export default {
19-
mixins: [MessagesMixin],
2018
props: [
2119
'pageStart',
2220
'pageStop',

‎src/crud/components/DataTableRow.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id)" slot="activator">
1515
<v-icon>edit</v-icon>
1616
</v-btn>
17-
<span>{{ $t('buttons.edit') }}</span>
17+
<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">
@@ -36,21 +36,21 @@
3636
<v-btn outline fab small class="xs white--text" color="red" @click="suspend(props.item.meta.id)" slot="activator">
3737
<v-icon>undo</v-icon>
3838
</v-btn>
39-
<span>{{ $t('buttons.suspend') }}</span>
39+
<span>{{ $t('global.datatable.buttons.suspend') }}</span>
4040
</v-tooltip>
4141
<v-tooltip top v-else>
4242
<v-btn outline fab small class="xs white--text" color="green" @click="restore(props.item.meta.id)" slot="activator">
4343
<v-icon>redo</v-icon>
4444
</v-btn>
45-
<span>{{ $t('buttons.restore') }}</span>
45+
<span>{{ $t('global.datatable.buttons.restore') }}</span>
4646
</v-tooltip>
4747
</template>
4848
<!-- hard delete -->
4949
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
5050
<v-btn outline fab small class="xs white--text" color="red" @click="destroy(props.item.meta.id)" slot="activator">
5151
<v-icon>delete</v-icon>
5252
</v-btn>
53-
<span>{{ $t('buttons.delete') }}</span>
53+
<span>{{ $t('global.datatable.buttons.delete') }}</span>
5454
</v-tooltip>
5555
</td>
5656
<!-- table fields -->
@@ -66,11 +66,9 @@
6666
</template>
6767

6868
<script>
69-
import MessagesMixin from "../mixins/messages-datatable-row.js";
7069
import FileDetails from './FileDetails.vue'
7170
7271
export default {
73-
mixins: [MessagesMixin],
7472
components: {
7573
FileDetails
7674
},

‎src/crud/components/DataTableServerSide.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<v-flex xs12 lg8 text-xs-left text-lg-right>
1919

2020
<!-- Search by fields -->
21-
<v-menu offset-y :close-on-content-click="false">
21+
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
2222
<v-btn small fab dark slot="activator" class="primary">
2323
<v-icon>filter_list</v-icon>
2424
</v-btn>
@@ -29,7 +29,7 @@
2929
v-model="item.mode"
3030
item-text="text"
3131
item-value="name"
32-
:label="$t('filterModes.label')"
32+
:label="$t('global.datatable.filterModes.label')"
3333
hide-details
3434
@input="updateColumnFilterModeEvent($event, index)"
3535
></v-autocomplete>
@@ -39,14 +39,14 @@
3939
</v-menu>
4040

4141
<!-- Search in table -->
42-
<span style="display:inline-block;margin-left:50px;width:250px;">
43-
<v-text-field append-icon="search" :label="$t('search')" single-line hide-details v-model="search" min-width="200" @input="searchItems(true)"></v-text-field>
42+
<span style="margin-right:30px;display:inline-block;width:250px;">
43+
<v-text-field append-icon="search" :label="$t('global.datatable.search')" single-line hide-details v-model="search" min-width="200" @input="searchItems(true)"></v-text-field>
4444
</span>
4545

4646
<!-- Select statuses (active/inactive) -->
4747
<template v-if="['soft', 'both'].includes(deleteMode)">
48-
<span style="display:inline-block;margin-left:50px;width:250px;">
49-
<v-autocomplete :label="$t('status.title')" v-bind:items="statuses" v-model="selectedStatuses" single-line item-text="text" item-value="value" multiple chips></v-autocomplete>
48+
<span style="margin-right:30px;display:inline-block;width:250px;">
49+
<v-autocomplete :label="$t('global.datatable.status.title')" v-bind:items="statuses" v-model="selectedStatuses" single-line item-text="text" item-value="value" multiple chips></v-autocomplete>
5050
</span>
5151
</template>
5252

@@ -67,9 +67,9 @@
6767
light
6868
:headers="headers"
6969
:items="items"
70-
:no-results-text="$t('noMatchingResults')"
71-
:no-data-text="$t('noDataAvailable')"
72-
:rows-per-page-text="$t('rowsPerPageText')"
70+
:no-results-text="$t('global.datatable.noMatchingResults')"
71+
:no-data-text="$t('global.datatable.noDataAvailable')"
72+
:rows-per-page-text="$t('global.datatable.rowsPerPageText')"
7373
:total-items="totalItems"
7474
:loading="loading"
7575
>

0 commit comments

Comments
 (0)