138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<template>
|
|
<v-form ref="form" v-model="valid">
|
|
<v-stepper v-model="step">
|
|
|
|
<Loading text="Loading" :show="loadingCatalog"/>
|
|
|
|
<v-stepper-header ma-0 pa-0>
|
|
<v-stepper-step :complete="step > 1" step="1">Catalog info</v-stepper-step>
|
|
<v-divider></v-divider>
|
|
<v-stepper-step :complete="step > 2" step="2">Contents</v-stepper-step>
|
|
<!-- <v-divider></v-divider>
|
|
<v-stepper-step step="3">Pagination</v-stepper-step> -->
|
|
</v-stepper-header>
|
|
|
|
<v-stepper-items>
|
|
<v-stepper-content step="1">
|
|
<CatalogInfo/>
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat @click="popExit()">Cancel</v-btn>
|
|
<v-btn
|
|
:disabled="!valid"
|
|
@click="step = 2"
|
|
color="primary"
|
|
class="black--text">Next</v-btn>
|
|
</v-stepper-content>
|
|
|
|
<v-stepper-content step="2">
|
|
<CatalogContents/>
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat @click="popExit()">Cancel</v-btn>
|
|
<v-btn @click="step = 1">Back</v-btn>
|
|
<!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> -->
|
|
<v-btn
|
|
:disabled="!valid"
|
|
:loading="savingCatalog"
|
|
@click.stop="saveCatalog()"
|
|
color="primary"
|
|
class="black--text">Done</v-btn>
|
|
</v-stepper-content>
|
|
|
|
<!-- <v-stepper-content step="3">
|
|
<CatalogPagination/>
|
|
<v-btn flat>Cancel</v-btn>
|
|
<v-btn @click="step = 2">Back</v-btn>
|
|
<v-btn color="primary" class="black--text">Save</v-btn>
|
|
</v-stepper-content> -->
|
|
</v-stepper-items>
|
|
|
|
</v-stepper>
|
|
|
|
<ExitEditorDialog v-model="showExitEditorPopup"/>
|
|
|
|
<v-snackbar v-model="showPublicNotice" color="success"
|
|
multi-line top :timeout="10000">
|
|
This is a public catalog.<br/>
|
|
Changes will be saved in a new catalog that you own.
|
|
<v-btn dark flat @click="showPublicNotice = false">Close</v-btn>
|
|
</v-snackbar>
|
|
|
|
</v-form>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import Loading from './Loading'
|
|
import CatalogInfo from './CatalogInfo'
|
|
import CatalogContents from './CatalogContents'
|
|
/* import CatalogPagination from './CatalogPagination' */
|
|
import ExitEditorDialog from './ExitEditorDialog'
|
|
|
|
export default {
|
|
components: {
|
|
Loading,
|
|
CatalogInfo,
|
|
CatalogContents,
|
|
/* CatalogPagination, */
|
|
ExitEditorDialog,
|
|
},
|
|
data: () => ({
|
|
step: 1,
|
|
valid: false, // is the whole editor in a valid state?
|
|
showExitEditorPopup: false,
|
|
showPublicNotice: false,
|
|
}),
|
|
computed: {
|
|
loadingCatalog() {
|
|
return this.$store.getters.loadingCatalog
|
|
},
|
|
savingCatalog() {
|
|
return this.$store.getters.savingCatalog
|
|
},
|
|
...mapState([
|
|
'catalog',
|
|
'catalogSavedOK',
|
|
]),
|
|
},
|
|
methods: {
|
|
popExit: function(id) {
|
|
this.showExitEditorPopup = true
|
|
},
|
|
saveCatalog() {
|
|
this.$store.dispatch('saveCatalog')
|
|
},
|
|
},
|
|
watch: {
|
|
catalog(value) {
|
|
if (value) {
|
|
var userID = JSON.parse(document.getElementById('userID').textContent)
|
|
console.log('catalog changed', value.owner, userID)
|
|
if (value.owner && value.owner !== userID) {
|
|
this.showPublicNotice = true
|
|
}
|
|
}
|
|
},
|
|
catalogSavedOK(value) {
|
|
if (value) {
|
|
console.log('catalog saved. redirecting to catalog list...')
|
|
window.location.href = '/catalogs'
|
|
}
|
|
}
|
|
},
|
|
mounted: function() {
|
|
// catalogID is set by django
|
|
// in a script block in our parent page.
|
|
var catalogID = JSON.parse(document.getElementById('catalogID').textContent)
|
|
if (catalogID > 0) {
|
|
this.$store.dispatch('loadCatalog', catalogID)
|
|
} else {
|
|
this.$store.dispatch('newCatalog')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|