catalog editor: add validation and exit dialog

cateditor/src/components/CatalogEditor.vue

@@ -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')
     },

cateditor/src/components/CatalogInfo.vue

@@ -20,13 +20,25 @@
             label="Region"></v-select>
         </v-flex>
         <v-flex d-flex grow>
-          <v-text-field v-model="name" label="Catalog name" required></v-text-field>
+          <v-text-field
+            v-model="name"
+            label="Catalog name"
+            :rules="[rules.required]"
+          ></v-text-field>
+        </v-flex>
+
+        <v-flex d-flex shrink>
+          <v-text-field
+            v-model="email"
+            :rules="[rules.emailRules]"
+            label="Email"
+          ></v-text-field>
         </v-flex>
       </v-layout>
 
       <v-layout row>
         <!-- TODO only if admin! -->
-        <v-flex d-flex shrink>
+        <v-flex d-flex shrink v-if="isAdmin">
           <v-checkbox v-model="master" label="Region master"></v-checkbox>
         </v-flex>
         <v-flex d-flex shrink>
@@ -40,8 +52,6 @@
         </v-flex>
       </v-layout>
 
-      <!-- TODO: email selects -->
-
     </v-layout>
   </v-container>
 </template>
@@ -49,11 +59,30 @@
 <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: true, // TODO
+    rules: {
+      required: value => {
+        return !!value || 'Required'
+      },
+      emailRules: value => {
+        if (!lazyUser) {
+          // 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: {
@@ -65,6 +94,15 @@ export default {
       }
     },
 
+    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')

cateditor/src/components/ExitEditorDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="show" persistent max-width="280">
+      <v-card>
+
+        <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
+          <v-card-title class="ma-0 pa-2 pl-3">
+            Quit Editor
+            <v-spacer></v-spacer>
+            <v-icon color="white" @click="show = false">clear</v-icon>
+          </v-card-title>
+        </v-card>
+
+        <v-card-text>
+          Abandon changes and return to the catalog list?
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn flat @click="show = false">Back to editing</v-btn>
+          <v-btn flat href="/catalogs">Quit</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+export default {
+  data: () => ({
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+  },
+}
+</script>
+
+<style>
+</style>