Add "model crud" component
This commit is contained in:
Lance Edgar
parent
2c728216a1
commit
c87fd1ab35
3 changed files with 391 additions and 0 deletions
|
|
@ -3,6 +3,7 @@ import ByjoveMenu from './menu'
|
||||||
import ByjoveLogo from './logo'
|
import ByjoveLogo from './logo'
|
||||||
import ByjoveFeedback from './feedback'
|
import ByjoveFeedback from './feedback'
|
||||||
import ByjoveModelIndex from './model-index'
|
import ByjoveModelIndex from './model-index'
|
||||||
|
import ByjoveModelCrud from './model-crud'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ByjoveApp,
|
ByjoveApp,
|
||||||
|
|
@ -10,4 +11,5 @@ export {
|
||||||
ByjoveLogo,
|
ByjoveLogo,
|
||||||
ByjoveFeedback,
|
ByjoveFeedback,
|
||||||
ByjoveModelIndex,
|
ByjoveModelIndex,
|
||||||
|
ByjoveModelCrud,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
361
src/components/model-crud/ByjoveModelCrud.vue
Normal file
361
src/components/model-crud/ByjoveModelCrud.vue
Normal file
|
|
@ -0,0 +1,361 @@
|
||||||
|
<template>
|
||||||
|
<div :class="getModelSlug()">
|
||||||
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<router-link :to="getModelPathPrefix() + '/'">{{ getModelIndexTitle() }}</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="isRow">
|
||||||
|
<router-link :to="getModelPathPrefix() + '/' + record._parent_uuid">{{ renderParentHeaderLabel(record) }}</router-link>
|
||||||
|
<!-- {{ renderParentHeaderLabel(record) }} -->
|
||||||
|
</li>
|
||||||
|
<li v-if="mode == 'creating'">
|
||||||
|
New
|
||||||
|
</li>
|
||||||
|
<li v-if="mode == 'viewing'">
|
||||||
|
{{ renderHeaderLabel(record) }}
|
||||||
|
</li>
|
||||||
|
<li v-if="mode == 'editing' || mode == 'deleting'">
|
||||||
|
<router-link :to="getModelPathPrefix() + '/' + record.uuid">{{ renderHeaderLabel(record) }}</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="mode == 'editing'">
|
||||||
|
Edit
|
||||||
|
</li>
|
||||||
|
<li v-if="mode == 'deleting'">
|
||||||
|
Delete
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<slot></slot>
|
||||||
|
|
||||||
|
<b-button v-if="allowEdit && mode == 'viewing' && hasModelPerm('edit')"
|
||||||
|
type="is-primary"
|
||||||
|
tag="router-link"
|
||||||
|
:to="getModelPathPrefix() + '/' + record.uuid + '/edit'">
|
||||||
|
Edit This
|
||||||
|
</b-button>
|
||||||
|
|
||||||
|
<div v-if="mode == 'creating' || mode == 'editing'"
|
||||||
|
class="buttons">
|
||||||
|
<b-button type="is-primary"
|
||||||
|
:disabled="saveDisabled"
|
||||||
|
@click="save()">
|
||||||
|
Save
|
||||||
|
</b-button>
|
||||||
|
<b-button v-if="mode == 'creating'"
|
||||||
|
tag="router-link"
|
||||||
|
:to="getModelPathPrefix() + '/'">
|
||||||
|
Cancel
|
||||||
|
</b-button>
|
||||||
|
<b-button v-if="mode == 'editing'"
|
||||||
|
tag="router-link"
|
||||||
|
:to="getModelPathPrefix() + '/' + record.uuid">
|
||||||
|
Cancel
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="hasRows && mode == 'viewing'">
|
||||||
|
<b-menu>
|
||||||
|
<b-menu-list>
|
||||||
|
<b-menu-item v-for="row in rows"
|
||||||
|
:key="row.uuid"
|
||||||
|
tag="router-link"
|
||||||
|
:to="getRowPathPrefix() + '/' + row.uuid">
|
||||||
|
<template slot="label" slot-scope="props">
|
||||||
|
<span v-html="renderRowLabel(row)"></span>
|
||||||
|
</template>
|
||||||
|
</b-menu-item>
|
||||||
|
</b-menu-list>
|
||||||
|
</b-menu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ByjoveModelCrud',
|
||||||
|
props: {
|
||||||
|
mode: String,
|
||||||
|
modelName: String,
|
||||||
|
modelSlug: String,
|
||||||
|
modelTitle: String,
|
||||||
|
modelTitlePlural: String,
|
||||||
|
modelIndexTitle: String,
|
||||||
|
modelPermissionPrefix: String,
|
||||||
|
modelPathPrefix: String,
|
||||||
|
modelRoutePrefix: String,
|
||||||
|
apiIndexUrl: String,
|
||||||
|
apiObjectUrl: String,
|
||||||
|
labelRenderer: Function,
|
||||||
|
parentHeaderLabelRenderer: Function,
|
||||||
|
headerLabelRenderer: Function,
|
||||||
|
rowLabelRenderer: Function,
|
||||||
|
hasRows: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
apiRowsUrl: String,
|
||||||
|
isRow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
rowPathPrefix: String,
|
||||||
|
rowFilters: {
|
||||||
|
type: Function,
|
||||||
|
default: (uuid) => {
|
||||||
|
return JSON.stringify([{field: 'batch_uuid', op: 'eq', value: uuid}])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
allowEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
saveDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
record: {},
|
||||||
|
rows: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// TODO: why doesn't beforeRouteUpdate() work instead?
|
||||||
|
// cf. https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
|
||||||
|
watch: {
|
||||||
|
'$route' (to, from) {
|
||||||
|
if (to.name == (this.getModelRoutePrefix() + '.edit') && !this.hasModelPerm('edit')) {
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "You do not have permission to access that page.",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
this.$router.push(this.getModelPathPrefix() + '/')
|
||||||
|
}
|
||||||
|
|
||||||
|
// re-fetch record in case it was just changed
|
||||||
|
if (to.name != (this.getModelRoutePrefix() + '.new')) {
|
||||||
|
this.fetch(to.params.uuid)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// beforeRouteUpdate (to, from, next) {
|
||||||
|
// // re-fetch record in case it was just changed
|
||||||
|
// if (to.name != (this.getModelRoutePrefix() + '.new')) {
|
||||||
|
// this.fetch(to.params.uuid)
|
||||||
|
// }
|
||||||
|
// next()
|
||||||
|
// },
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
// redirect if user doesn't have permission to be here
|
||||||
|
if ((this.mode == 'creating' && !this.hasModelPerm('create'))
|
||||||
|
|| (this.mode == 'editing' && !this.hasModelPerm('edit'))) {
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "You do not have permission to access that page.",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
this.$router.push(this.getModelPathPrefix() + '/')
|
||||||
|
}
|
||||||
|
|
||||||
|
// fetch initial page data unless 'creating'
|
||||||
|
if (this.mode != 'creating') {
|
||||||
|
this.fetch(this.$route.params.uuid)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
getModelSlug() {
|
||||||
|
if (this.modelSlug) {
|
||||||
|
return this.modelSlug
|
||||||
|
}
|
||||||
|
return this.modelName.toLowerCase() + 's'
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelTitle() {
|
||||||
|
if (this.modelTitle) {
|
||||||
|
return this.modelTitle
|
||||||
|
}
|
||||||
|
return this.modelName
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelTitlePlural() {
|
||||||
|
if (this.modelTitlePlural) {
|
||||||
|
return this.modelTitlePlural
|
||||||
|
}
|
||||||
|
return this.getModelTitle() + 's'
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelIndexTitle() {
|
||||||
|
if (this.modelIndexTitle) {
|
||||||
|
return this.modelIndexTitle
|
||||||
|
}
|
||||||
|
return this.getModelTitlePlural()
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelPathPrefix() {
|
||||||
|
if (this.modelPathPrefix) {
|
||||||
|
return this.modelPathPrefix
|
||||||
|
}
|
||||||
|
return '/' + this.getModelSlug()
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelRoutePrefix() {
|
||||||
|
if (this.modelRoutePrefix) {
|
||||||
|
return this.modelRoutePrefix
|
||||||
|
}
|
||||||
|
return this.getModelSlug()
|
||||||
|
},
|
||||||
|
|
||||||
|
getRowPathPrefix() {
|
||||||
|
if (this.rowPathPrefix) {
|
||||||
|
return this.rowPathPrefix
|
||||||
|
}
|
||||||
|
return '/' + this.getModelSlug() + '/rows'
|
||||||
|
},
|
||||||
|
|
||||||
|
getApiIndexUrl() {
|
||||||
|
if (this.apiIndexUrl) {
|
||||||
|
return this.apiIndexUrl
|
||||||
|
}
|
||||||
|
return '/api/' + this.getModelSlug()
|
||||||
|
},
|
||||||
|
|
||||||
|
getApiObjectUrl() {
|
||||||
|
if (this.apiObjectUrl) {
|
||||||
|
return this.apiObjectUrl
|
||||||
|
}
|
||||||
|
let url = this.getApiIndexUrl()
|
||||||
|
// drop trailing 's' then add slash
|
||||||
|
return url.slice(0, -1) + '/'
|
||||||
|
},
|
||||||
|
|
||||||
|
getApiRowsUrl() {
|
||||||
|
return this.apiRowsUrl
|
||||||
|
},
|
||||||
|
|
||||||
|
getModelPermissionPrefix() {
|
||||||
|
if (this.modelPermissionPrefix) {
|
||||||
|
return this.modelPermissionPrefix
|
||||||
|
}
|
||||||
|
return this.getModelSlug()
|
||||||
|
},
|
||||||
|
|
||||||
|
hasPerm(perm) {
|
||||||
|
|
||||||
|
// if user is root then assume permission
|
||||||
|
if (this.$store.state.user && this.$store.state.user.is_root) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// otherwise do true perm check for user
|
||||||
|
return this.$store.state.permissions.includes(perm)
|
||||||
|
},
|
||||||
|
|
||||||
|
hasModelPerm(perm) {
|
||||||
|
|
||||||
|
// do normal check, but first add prefix
|
||||||
|
let prefix = this.getModelPermissionPrefix()
|
||||||
|
return this.hasPerm(prefix + '.' + perm)
|
||||||
|
},
|
||||||
|
|
||||||
|
renderLabel(obj) {
|
||||||
|
if (this.labelRenderer) {
|
||||||
|
return this.labelRenderer(obj)
|
||||||
|
}
|
||||||
|
return obj._str
|
||||||
|
},
|
||||||
|
|
||||||
|
renderHeaderLabel(obj) {
|
||||||
|
if (this.headerLabelRenderer) {
|
||||||
|
return this.headerLabelRenderer(obj)
|
||||||
|
}
|
||||||
|
return this.renderLabel(obj)
|
||||||
|
},
|
||||||
|
|
||||||
|
renderParentHeaderLabel(obj) {
|
||||||
|
if (this.parentHeaderLabelRenderer) {
|
||||||
|
return this.parentHeaderLabelRenderer(obj)
|
||||||
|
}
|
||||||
|
return this.renderLabel(obj)
|
||||||
|
},
|
||||||
|
|
||||||
|
renderRowLabel(row) {
|
||||||
|
if (this.rowLabelRenderer) {
|
||||||
|
return this.rowLabelRenderer(row)
|
||||||
|
}
|
||||||
|
return row._str
|
||||||
|
},
|
||||||
|
|
||||||
|
fetch(uuid) {
|
||||||
|
this.$http.get(this.getApiObjectUrl() + uuid).then(response => {
|
||||||
|
this.record = response.data.data
|
||||||
|
this.$emit('refresh', this.record)
|
||||||
|
if (this.hasRows) {
|
||||||
|
this.fetchRows(uuid)
|
||||||
|
}
|
||||||
|
}, response => {
|
||||||
|
if (response.status == 403) { // forbidden; redirect to model index
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "You do not have permission to access that page.",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
this.$router.push(this.getModelPathPrefix() + '/')
|
||||||
|
} else {
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "Failed to fetch page data!",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchRows(uuid) {
|
||||||
|
let params = {
|
||||||
|
filters: this.rowFilters(uuid),
|
||||||
|
orderBy: 'modified',
|
||||||
|
ascending: 0,
|
||||||
|
}
|
||||||
|
this.$http.get(this.getApiRowsUrl(), {params: params}).then(response => {
|
||||||
|
this.rows = response.data.data
|
||||||
|
|
||||||
|
}, response => {
|
||||||
|
if (response.status == 403) { // forbidden; redirect to home page
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "You do not have permission to access that page.",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
this.$router.push('/')
|
||||||
|
} else {
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "Failed to fetch page data!",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
save() {
|
||||||
|
let url = this.getApiIndexUrl()
|
||||||
|
if (this.mode != 'creating') {
|
||||||
|
url = this.getApiObjectUrl() + this.record.uuid
|
||||||
|
}
|
||||||
|
this.$emit('save', url)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
28
src/components/model-crud/index.js
Normal file
28
src/components/model-crud/index.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// Import vue component
|
||||||
|
import ByjoveModelCrud from './ByjoveModelCrud.vue'
|
||||||
|
|
||||||
|
// Declare install function executed by Vue.use()
|
||||||
|
export function install(Vue) {
|
||||||
|
if (install.installed) return;
|
||||||
|
install.installed = true;
|
||||||
|
Vue.component('ByjoveModelCrud', ByjoveModelCrud);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create module definition for Vue.use()
|
||||||
|
const plugin = {
|
||||||
|
install,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-install when vue is found (eg. in browser via <script> tag)
|
||||||
|
let GlobalVue = null;
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
GlobalVue = window.Vue;
|
||||||
|
} else if (typeof global !== 'undefined') {
|
||||||
|
GlobalVue = global.Vue;
|
||||||
|
}
|
||||||
|
if (GlobalVue) {
|
||||||
|
GlobalVue.use(plugin);
|
||||||
|
}
|
||||||
|
|
||||||
|
// To allow use as module (npm/webpack/etc.) export component
|
||||||
|
export default ByjoveModelCrud
|
||||||
Loading…
Add table
Add a link
Reference in a new issue