Skip to content

Commit

Permalink
crud customization
Browse files Browse the repository at this point in the history
  • Loading branch information
szczepanmasny committed Feb 27, 2019
1 parent 8df3099 commit a416114
Show file tree
Hide file tree
Showing 9 changed files with 221 additions and 95 deletions.
2 changes: 1 addition & 1 deletion examples/crm/main.js
Expand Up @@ -10,7 +10,7 @@ import store from './store'
import './register-service-worker'
import { api } from './config/api'

Vue.config.productionTip = false
Vue.config.productionTip = true
Vue.http.options.emulateJSON = true;
Vue.http.options.root = api.url + api.path.default
Vue.http.interceptors.push((request, next) => {
Expand Down
2 changes: 1 addition & 1 deletion examples/simple-crud/main.js
Expand Up @@ -10,7 +10,7 @@ import store from './store'
import './register-service-worker'
import { api } from './config/api'

Vue.config.productionTip = false
Vue.config.productionTip = true
Vue.http.options.emulateJSON = true;
Vue.http.options.root = api.url + api.path.default

Expand Down
175 changes: 117 additions & 58 deletions examples/simple-crud/routes/Crud.vue
@@ -1,62 +1,121 @@
<template>
<div>
<crud :prefix="prefix" :path="path" :pageTitle="pageTitle" :fieldsInfo="fieldsInfo" :detailsTitle="$t('detailsTitle')">
</crud>
<alert-box></alert-box>
</div>
</template>

<script>
import Crud from '@/utils/crud/components/Crud.vue'
import AlertBox from "@/utils/app/components/AlertBox.vue";
export default {
data() {
return {
prefix: 'demo',
path: 'tasks',
pageTitle: 'demo.tasks',
}
},
computed: {
fieldsInfo() {
return [{
text: this.$t('fields.id'),
name: 'id',
details: false,
},
{
type: 'input',
column: 'name',
text: this.$t('fields.name'),
name: 'name',
multiedit: false
},
{
type: 'input',
column: 'description',
text: this.$t('fields.description'),
name: 'description',
required: false
},
]
<div style="margin:20px;">
<h1 style="text-align:center">CRUD confguration</h1>
<v-layout row wrap>
<v-flex xs12 md6 lg3 px-5>
<v-text-field label="detailsTitle" v-model="detailsTitle"></v-text-field>
<v-select label="deleteMode" :items="['none', 'soft', 'hard', 'both', 'filter']" v-model="deleteMode"></v-select>
<v-switch color="green" label="refreshButton" v-model="refreshButton"></v-switch>
</v-flex>

<v-flex xs12 md6 lg3 px-5>
<v-switch color="green" label="exportButton" v-model="exportButton"></v-switch>
<v-switch color="green" label="fieldFilters" v-model="fieldFilters"></v-switch>
<v-switch color="green" label="mainFilter" v-model="mainFilter"></v-switch>
</v-flex>

<v-flex xs12 md6 lg3 px-5>
<v-switch color="green" label="createMode" v-model="createMode"></v-switch>
<v-switch color="green" label="editMode" v-model="editMode"></v-switch>
<v-switch color="green" label="editButton" v-model="editButton"></v-switch>
</v-flex>

<v-flex xs12 md6 lg3 px-5>
<v-switch color="green" label="selectManyMode" v-model="selectManyMode"></v-switch>
<v-switch color="green" label="updateManyMode" v-model="updateManyMode"></v-switch>
<v-switch color="green" label="removeManyMode" v-model="removeManyMode"></v-switch>
</v-flex>
</v-layout>
<h1 style="text-align:center">CRUD</h1>
<crud
:prefix="prefix"
:path="path"
:pageTitle="pageTitle"
:fieldsInfo="fieldsInfo"
:detailsTitle="detailsTitle"
:deleteMode="deleteMode"
:refreshButton="refreshButton"
:exportButton="exportButton"
:fieldFilters="fieldFilters"
:mainFilter="mainFilter"
:createMode="createMode"
:editMode="editMode"
:editButton="editButton"
:selectManyMode="selectManyMode"
:updateManyMode="updateManyMode"
:removeManyMode="removeManyMode"
>
</crud>
<alert-box></alert-box>
</div>
</template>

<script>
import Crud from '@/utils/crud/components/Crud.vue'
import AlertBox from "@/utils/app/components/AlertBox.vue";
export default {
data() {
return {
prefix: 'demo',
path: 'tasks',
pageTitle: 'demo.tasks',
detailsTitle: '',
deleteMode: 'soft',
refreshButton: true,
exportButton: true,
fieldFilters: true,
mainFilter: true,
createMode: true,
editMode: true,
editButton: true,
selectManyMode: true,
updateManyMode: true,
removeManyMode: true,
}
},
created() {
this.detailsTitle = this.$t('detailsTitle')
},
computed: {
fieldsInfo() {
return [{
text: this.$t('fields.id'),
name: 'id',
details: false,
},
{
type: 'input',
column: 'name',
text: this.$t('fields.name'),
name: 'name',
multiedit: false
},
{
type: 'input',
column: 'description',
text: this.$t('fields.description'),
name: 'description',
required: false
},
]
},
},
},
components: {
Crud,
AlertBox,
},
i18n: {
messages: {
en: {
detailsTitle: 'Task',
fields: {
id: 'Id',
name: 'Name',
description: 'Description'
components: {
Crud,
AlertBox,
},
i18n: {
messages: {
en: {
detailsTitle: 'Task',
fields: {
id: 'Id',
name: 'Name',
description: 'Description'
}
}
}
}
},
}
</script>
},
}
</script>
43 changes: 39 additions & 4 deletions src/utils/crud/components/Crud.vue
Expand Up @@ -11,8 +11,15 @@
:tableFields="tableFields"
:primaryKey="primaryKey"
:activeColumnName="activeColumnName"
:creator="creator"
:editor="editor"
:createMode="createMode"
:editMode="editMode"
:mainFilter="mainFilter"
:fieldFilters="fieldFilters"
:refreshButton="refreshButton"
:exportButton="exportButton"
:selectManyMode="selectManyMode"
:updateManyMode="updateManyMode"
:removeManyMode="removeManyMode"
></component>
<item-details :title="detailsTitle" :detailsFields="detailsFields"></item-details>
<item-elements></item-elements>
Expand Down Expand Up @@ -99,11 +106,39 @@ export default {
},
default: 'ClientSide'
},
creator: {
createMode: {
type: Boolean,
default: true
},
editor: {
editMode: {
type: Boolean,
default: true
},
mainFilter: {
type: Boolean,
default: true
},
fieldFilters: {
type: Boolean,
default: true
},
exportButton: {
type: Boolean,
default: true
},
refreshButton: {
type: Boolean,
default: true
},
selectManyMode: {
type: Boolean,
default: true
},
updateManyMode: {
type: Boolean,
default: true
},
removeManyMode: {
type: Boolean,
default: true
},
Expand Down
21 changes: 14 additions & 7 deletions src/utils/crud/components/DataTableClientSide.vue
Expand Up @@ -2,19 +2,25 @@
<v-card>
<data-table-controls
:deleteMode="deleteMode"
:createMode="createMode"
:editMode="editMode"
:mainFilter="mainFilter"
:fieldFilters="fieldFilters"
:refreshButton="refreshButton"
:selectManyMode="selectManyMode"
:updateManyMode="updateManyMode"
:removeManyMode="removeManyMode"
@create="create"
@editSelected="editSelected"
@suspendSelected="suspendSelected"
@restoreSelected="restoreSelected"
@destroySelected="destroySelected"
@refreshTable="refreshTable"
@clearFilters="clearFilters"
:creator="creator"
:editor="editor"
>
<template slot="center">
<!-- Search by fields -->
<v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
<v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;" v-if="fieldFilters">
<v-btn small fab dark slot="activator" class="primary">
<v-icon>filter_list</v-icon>
</v-btn>
Expand All @@ -40,7 +46,7 @@
</v-menu>

<!-- Search in table -->
<span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
<span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;" v-if="mainFilter">
<v-text-field
append-icon="search"
:label="$t('global.datatable.search')"
Expand Down Expand Up @@ -68,7 +74,7 @@
</template>
</template>
<template slot="right">
<v-tooltip left>
<v-tooltip left v-if="exportButton">
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
<v-icon>save_alt</v-icon>
</v-btn>
Expand All @@ -82,7 +88,7 @@
:disable-initial-sort="true"
:must-sort="true"
v-model="selected"
select-all="black"
:select-all="selectManyMode ? 'black' : false"
:rows-per-page-items="[20, 50, { text: $t('global.datatable.all'), value: -1 }]"
:pagination.sync="pagination"
light
Expand All @@ -101,7 +107,8 @@
:deleteMode='deleteMode'
:itemElements="itemElements"
:columnTextModes="columnTextModes"
:editor="editor"
:editMode="editMode"
:selectManyMode="selectManyMode"
@edit="edit"
@custom="custom"
@suspend="suspend"
Expand Down

0 comments on commit a416114

Please sign in to comment.