alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

catalog editor: add validation and exit dialog

Browse Source
This commit is contained in:
Seth Ladygo
2019-05-17 02:16:58 -07:00
parent c9e0ed6d4f
commit d1aca308ba
3 changed files with 154 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
cateditor/src/components/CatalogEditor.vue
View File

@ -1,61 +1,84 @@
<template>
<v-stepper v-model="step">
<v-form ref="form" v-model="valid">
<v-stepper v-model="step">
<Loading text="Loading" :show="loadingCatalog"/>
<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-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/> -->
<CatalogContents/>
<v-btn flat>Cancel</v-btn>
<v-btn @click="step = 1" disabled>Back</v-btn>
<v-btn @click="step = 2" color="primary" class="black--text">Next</v-btn>
</v-stepper-content>
<v-stepper-items>
<v-stepper-content step="1">
<CatalogInfo/>
<v-spacer></v-spacer>
<v-btn flat @click="popExit()">Cancel</v-btn>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
:disabled="!valid"
@click="step = 2"
color="primary"
class="black--text">Next</v-btn>
</template>
<span>{{ nextTooltipText }}</span>
</v-tooltip>
</v-stepper-content>
<v-stepper-content step="2">
<CatalogContents/>
<v-btn flat>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-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">
<v-card
class="mb-5"
color="grey lighten-1"
height="200px"
></v-card>
<!-- <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-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>
</v-stepper>
<ExitEditorDialog v-model="showExitEditorPopup"/>
</v-form>
</template>
<script>
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
CatalogContents,
/* CatalogPagination, */
ExitEditorDialog,
},
data: () => ({
step: 1,
valid: false, // is the whole editor in a valid state?
nextTooltipText: 'asd',
showExitEditorPopup: false,
}),
computed: {
loadingCatalog() {
@ -66,6 +89,9 @@ export default {
},
},
methods: {
popExit: function(id) {
this.showExitEditorPopup = true
},
saveCatalog() {
this.$store.dispatch('saveCatalog')
},