185 lines
4.3 KiB
Vue
185 lines
4.3 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
|
|
<v-row>
|
|
<v-col cols="8">
|
|
<v-text-field
|
|
v-model="name"
|
|
label="Catalog name"
|
|
:rules="[rules.required]"
|
|
autofocus
|
|
class="headline font-weight-medium"
|
|
height="30px"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<v-select
|
|
v-model="season"
|
|
:items="seasons"
|
|
item-value="id"
|
|
item-text="name"
|
|
:rules="[rules.required]"
|
|
label="Season"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-select
|
|
v-model="region"
|
|
:items="regions"
|
|
item-value="id"
|
|
item-text="name"
|
|
:rules="[rules.required]"
|
|
label="Region"
|
|
class="pl-4"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="8">
|
|
<v-text-field
|
|
v-model="email"
|
|
:rules="[rules.emailRules]"
|
|
label="Email"
|
|
hint="Get notified when the catalog PDF is done"
|
|
persistent-hint
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<v-checkbox
|
|
v-model="isPublic"
|
|
label="Public"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-checkbox v-model="prices" label="Show prices"/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col v-if="isAdmin" cols="4">
|
|
<v-checkbox v-model="utility" label="Is Utility?"/>
|
|
</v-col>
|
|
<v-col v-if="isAdmin" cols="4">
|
|
<v-checkbox v-model="master" label="Region master"/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
var seasons = JSON.parse(document.getElementById('seasons').textContent)
|
|
var regions = JSON.parse(document.getElementById('regions').textContent)
|
|
var lazyUser = JSON.parse(document.getElementById('lazyUser').textContent)
|
|
|
|
export default {
|
|
data: () => ({
|
|
seasons: seasons,
|
|
regions: regions,
|
|
isAdmin: false, // TODO
|
|
rules: {
|
|
required: value => {
|
|
return !!value || 'Required'
|
|
},
|
|
emailRules: value => {
|
|
if (!lazyUser && !value) {
|
|
// signed-up user doesn't need email
|
|
return true
|
|
}
|
|
if (!value) {
|
|
return 'Required'
|
|
} else {
|
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
return pattern.test(value) || 'Invalid email'
|
|
}
|
|
},
|
|
},
|
|
}),
|
|
computed: {
|
|
name: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('name')
|
|
},
|
|
set(name) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'name', value: name })
|
|
}
|
|
},
|
|
|
|
email: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('email')
|
|
},
|
|
set(email) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'email', value: email })
|
|
}
|
|
},
|
|
|
|
season: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('season')
|
|
},
|
|
set(season) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'season', value: season })
|
|
}
|
|
},
|
|
|
|
region: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('region')
|
|
},
|
|
set(region) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'region', value: region })
|
|
}
|
|
},
|
|
|
|
master: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('master')
|
|
},
|
|
set(master) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'master', value: master })
|
|
}
|
|
},
|
|
|
|
isPublic: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('public')
|
|
},
|
|
set(isPublic) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'public', value: isPublic })
|
|
}
|
|
},
|
|
|
|
prices: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('show_prices')
|
|
},
|
|
set(showPrices) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'show_prices', value: showPrices })
|
|
}
|
|
},
|
|
|
|
utility: {
|
|
get() {
|
|
return this.$store.getters.catalogProperty('is_utility')
|
|
},
|
|
set(isUtility) {
|
|
this.$store.dispatch('setCatalogProperty', { key: 'is_utility', value: isUtility })
|
|
}
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|