Skip to content

Commit a416114

Browse files
szczepanmasnyszczepanmasny
committed
crud customization
1 parent 8df3099 commit a416114

File tree

9 files changed

+221
-95
lines changed

9 files changed

+221
-95
lines changed

‎examples/crm/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import store from './store'
1010
import './register-service-worker'
1111
import { api } from './config/api'
1212

13-
Vue.config.productionTip = false
13+
Vue.config.productionTip = true
1414
Vue.http.options.emulateJSON = true;
1515
Vue.http.options.root = api.url + api.path.default
1616
Vue.http.interceptors.push((request, next) => {

‎examples/simple-crud/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import store from './store'
1010
import './register-service-worker'
1111
import { api } from './config/api'
1212

13-
Vue.config.productionTip = false
13+
Vue.config.productionTip = true
1414
Vue.http.options.emulateJSON = true;
1515
Vue.http.options.root = api.url + api.path.default
1616

‎examples/simple-crud/routes/Crud.vue‎

Lines changed: 117 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,121 @@
11
<template>
2-
<div>
3-
<crud :prefix="prefix" :path="path" :pageTitle="pageTitle" :fieldsInfo="fieldsInfo" :detailsTitle="$t('detailsTitle')">
4-
</crud>
5-
<alert-box></alert-box>
6-
</div>
7-
</template>
8-
9-
<script>
10-
import Crud from '@/utils/crud/components/Crud.vue'
11-
import AlertBox from "@/utils/app/components/AlertBox.vue";
12-
13-
export default {
14-
data() {
15-
return {
16-
prefix: 'demo',
17-
path: 'tasks',
18-
pageTitle: 'demo.tasks',
19-
}
20-
},
21-
computed: {
22-
fieldsInfo() {
23-
return [{
24-
text: this.$t('fields.id'),
25-
name: 'id',
26-
details: false,
27-
},
28-
{
29-
type: 'input',
30-
column: 'name',
31-
text: this.$t('fields.name'),
32-
name: 'name',
33-
multiedit: false
34-
},
35-
{
36-
type: 'input',
37-
column: 'description',
38-
text: this.$t('fields.description'),
39-
name: 'description',
40-
required: false
41-
},
42-
]
2+
<div style="margin:20px;">
3+
<h1 style="text-align:center">CRUD confguration</h1>
4+
<v-layout row wrap>
5+
<v-flex xs12 md6 lg3 px-5>
6+
<v-text-field label="detailsTitle" v-model="detailsTitle"></v-text-field>
7+
<v-select label="deleteMode" :items="['none', 'soft', 'hard', 'both', 'filter']" v-model="deleteMode"></v-select>
8+
<v-switch color="green" label="refreshButton" v-model="refreshButton"></v-switch>
9+
</v-flex>
10+
11+
<v-flex xs12 md6 lg3 px-5>
12+
<v-switch color="green" label="exportButton" v-model="exportButton"></v-switch>
13+
<v-switch color="green" label="fieldFilters" v-model="fieldFilters"></v-switch>
14+
<v-switch color="green" label="mainFilter" v-model="mainFilter"></v-switch>
15+
</v-flex>
16+
17+
<v-flex xs12 md6 lg3 px-5>
18+
<v-switch color="green" label="createMode" v-model="createMode"></v-switch>
19+
<v-switch color="green" label="editMode" v-model="editMode"></v-switch>
20+
<v-switch color="green" label="editButton" v-model="editButton"></v-switch>
21+
</v-flex>
22+
23+
<v-flex xs12 md6 lg3 px-5>
24+
<v-switch color="green" label="selectManyMode" v-model="selectManyMode"></v-switch>
25+
<v-switch color="green" label="updateManyMode" v-model="updateManyMode"></v-switch>
26+
<v-switch color="green" label="removeManyMode" v-model="removeManyMode"></v-switch>
27+
</v-flex>
28+
</v-layout>
29+
<h1 style="text-align:center">CRUD</h1>
30+
<crud
31+
:prefix="prefix"
32+
:path="path"
33+
:pageTitle="pageTitle"
34+
:fieldsInfo="fieldsInfo"
35+
:detailsTitle="detailsTitle"
36+
:deleteMode="deleteMode"
37+
:refreshButton="refreshButton"
38+
:exportButton="exportButton"
39+
:fieldFilters="fieldFilters"
40+
:mainFilter="mainFilter"
41+
:createMode="createMode"
42+
:editMode="editMode"
43+
:editButton="editButton"
44+
:selectManyMode="selectManyMode"
45+
:updateManyMode="updateManyMode"
46+
:removeManyMode="removeManyMode"
47+
>
48+
</crud>
49+
<alert-box></alert-box>
50+
</div>
51+
</template>
52+
53+
<script>
54+
import Crud from '@/utils/crud/components/Crud.vue'
55+
import AlertBox from "@/utils/app/components/AlertBox.vue";
56+
57+
export default {
58+
data() {
59+
return {
60+
prefix: 'demo',
61+
path: 'tasks',
62+
pageTitle: 'demo.tasks',
63+
detailsTitle: '',
64+
deleteMode: 'soft',
65+
refreshButton: true,
66+
exportButton: true,
67+
fieldFilters: true,
68+
mainFilter: true,
69+
createMode: true,
70+
editMode: true,
71+
editButton: true,
72+
selectManyMode: true,
73+
updateManyMode: true,
74+
removeManyMode: true,
75+
}
76+
},
77+
created() {
78+
this.detailsTitle = this.$t('detailsTitle')
79+
},
80+
computed: {
81+
fieldsInfo() {
82+
return [{
83+
text: this.$t('fields.id'),
84+
name: 'id',
85+
details: false,
86+
},
87+
{
88+
type: 'input',
89+
column: 'name',
90+
text: this.$t('fields.name'),
91+
name: 'name',
92+
multiedit: false
93+
},
94+
{
95+
type: 'input',
96+
column: 'description',
97+
text: this.$t('fields.description'),
98+
name: 'description',
99+
required: false
100+
},
101+
]
102+
},
43103
},
44-
},
45-
components: {
46-
Crud,
47-
AlertBox,
48-
},
49-
i18n: {
50-
messages: {
51-
en: {
52-
detailsTitle: 'Task',
53-
fields: {
54-
id: 'Id',
55-
name: 'Name',
56-
description: 'Description'
104+
components: {
105+
Crud,
106+
AlertBox,
107+
},
108+
i18n: {
109+
messages: {
110+
en: {
111+
detailsTitle: 'Task',
112+
fields: {
113+
id: 'Id',
114+
name: 'Name',
115+
description: 'Description'
116+
}
57117
}
58118
}
59-
}
60-
},
61-
}
62-
</script>
119+
},
120+
}
121+
</script>

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

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,15 @@
1111
:tableFields="tableFields"
1212
:primaryKey="primaryKey"
1313
:activeColumnName="activeColumnName"
14-
:creator="creator"
15-
:editor="editor"
14+
:createMode="createMode"
15+
:editMode="editMode"
16+
:mainFilter="mainFilter"
17+
:fieldFilters="fieldFilters"
18+
:refreshButton="refreshButton"
19+
:exportButton="exportButton"
20+
:selectManyMode="selectManyMode"
21+
:updateManyMode="updateManyMode"
22+
:removeManyMode="removeManyMode"
1623
></component>
1724
<item-details :title="detailsTitle" :detailsFields="detailsFields"></item-details>
1825
<item-elements></item-elements>
@@ -99,11 +106,39 @@ export default {
99106
},
100107
default: 'ClientSide'
101108
},
102-
creator: {
109+
createMode: {
103110
type: Boolean,
104111
default: true
105112
},
106-
editor: {
113+
editMode: {
114+
type: Boolean,
115+
default: true
116+
},
117+
mainFilter: {
118+
type: Boolean,
119+
default: true
120+
},
121+
fieldFilters: {
122+
type: Boolean,
123+
default: true
124+
},
125+
exportButton: {
126+
type: Boolean,
127+
default: true
128+
},
129+
refreshButton: {
130+
type: Boolean,
131+
default: true
132+
},
133+
selectManyMode: {
134+
type: Boolean,
135+
default: true
136+
},
137+
updateManyMode: {
138+
type: Boolean,
139+
default: true
140+
},
141+
removeManyMode: {
107142
type: Boolean,
108143
default: true
109144
},

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@
22
<v-card>
33
<data-table-controls
44
:deleteMode="deleteMode"
5+
:createMode="createMode"
6+
:editMode="editMode"
7+
:mainFilter="mainFilter"
8+
:fieldFilters="fieldFilters"
9+
:refreshButton="refreshButton"
10+
:selectManyMode="selectManyMode"
11+
:updateManyMode="updateManyMode"
12+
:removeManyMode="removeManyMode"
513
@create="create"
614
@editSelected="editSelected"
715
@suspendSelected="suspendSelected"
816
@restoreSelected="restoreSelected"
917
@destroySelected="destroySelected"
1018
@refreshTable="refreshTable"
1119
@clearFilters="clearFilters"
12-
:creator="creator"
13-
:editor="editor"
1420
>
1521
<template slot="center">
1622
<!-- Search by fields -->
17-
<v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
23+
<v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;" v-if="fieldFilters">
1824
<v-btn small fab dark slot="activator" class="primary">
1925
<v-icon>filter_list</v-icon>
2026
</v-btn>
@@ -40,7 +46,7 @@
4046
</v-menu>
4147

4248
<!-- Search in table -->
43-
<span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
49+
<span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;" v-if="mainFilter">
4450
<v-text-field
4551
append-icon="search"
4652
:label="$t('global.datatable.search')"
@@ -68,7 +74,7 @@
6874
</template>
6975
</template>
7076
<template slot="right">
71-
<v-tooltip left>
77+
<v-tooltip left v-if="exportButton">
7278
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
7379
<v-icon>save_alt</v-icon>
7480
</v-btn>
@@ -82,7 +88,7 @@
8288
:disable-initial-sort="true"
8389
:must-sort="true"
8490
v-model="selected"
85-
select-all="black"
91+
:select-all="selectManyMode ? 'black' : false"
8692
:rows-per-page-items="[20, 50, { text: $t('global.datatable.all'), value: -1 }]"
8793
:pagination.sync="pagination"
8894
light
@@ -101,7 +107,8 @@
101107
:deleteMode='deleteMode'
102108
:itemElements="itemElements"
103109
:columnTextModes="columnTextModes"
104-
:editor="editor"
110+
:editMode="editMode"
111+
:selectManyMode="selectManyMode"
105112
@edit="edit"
106113
@custom="custom"
107114
@suspend="suspend"

0 commit comments

Comments
 (0)