add simple modal for fallback ID plus prover ID validation

src/components/shows/MetaSimpleTypes.vue

@@ -112,14 +112,14 @@
       <b-col lg="6">
         <p>
           <b-badge variant="light">
-            Fallback List/Pool:
+            Fallback Playlist ID:
           </b-badge>
           <span v-if="selectedShow.fallback_id === ''"><small><i>(none set)</i></small></span>
-          <span v-else>ID: {{ selectedShow.fallback_id }}</span>
+          <span v-else>{{ selectedShow.fallback_id }}</span>
           <img
             src="../../assets/16x16/emblem-system.png"
             alt="edit"
-            @click="notYetImplemented()"
+            @click="openModalFallback()"
           >
         </p>
       </b-col>
@@ -155,8 +155,6 @@
       />
     </b-modal>
 
-    <!-- TODO: use b-form outside the b-form-input, so that
-               simple input validation works automagically -->
     <b-modal
       ref="modalCBAid"
       title="CBA Series ID"
@@ -165,13 +163,24 @@
     >
       <b-form-input
         v-model="id"
-        type="number"
+        :state="validId"
         placeholder="Put the CBA Series ID of your show here"
       />
     </b-modal>
 
-    <!-- TODO: use b-form outside the b-form-input, so that
-               simple input validation works automagically -->
+    <b-modal
+      ref="modalFallback"
+      title="Fallback playlist ID"
+      size="lg"
+      @ok="saveFallback"
+    >
+      <b-form-input
+        v-model="id"
+        :state="validId"
+        placeholder="Put the ID of the playlist here, which should be used as a fallback"
+      />
+    </b-modal>
+
     <b-modal
       ref="modalPredecessor"
       title="Predecessor of this show"
@@ -307,6 +316,10 @@ export default {
       return null
     },
 
+    validId () {
+      return this.id === null || RegExp('^[0-9]*$').test(this.id)
+    },
+
     ...mapGetters({
       selectedShow: 'shows/selectedShow',
       types: 'shows/types',
@@ -331,6 +344,11 @@ export default {
       this.$refs.modalCBAid.show()
     },
 
+    openModalFallback() {
+      this.id = this.selectedShow.fallback_id
+      this.$refs.modalFallback.show()
+    },
+
     openModalPredecessor() {
       this.id = this.selectedShow.predecessor
       this.$refs.modalPredecessor.show()
@@ -369,8 +387,23 @@ export default {
     },
 
     saveCBAid (event) {
-      let id = this.id === '' ? null : this.id
-      this.saveProperty('cba_series_id', id, this.$refs.modalCBAid, event)
+      if (this.validId) {
+        let id = this.id === '' ? null : this.id
+        this.saveProperty('cba_series_id', id, this.$refs.modalCBAid, event)
+      } else {
+        event.preventDefault()
+        alert ('Please provide a valid integer value as ID')
+      }
+    },
+
+    saveFallback (event) {
+      if (this.validId) {
+        let id = this.id === '' ? null : this.id
+        this.saveProperty('fallback_id', id, this.$refs.modalFallback, event)
+      } else {
+        event.preventDefault()
+        alert ('Please provide a valid integer value as ID')
+      }
     },
 
     savePredecessor (event) {