FEAT: add show type and funding cat. to add show modal

src/components/ShowManagerModalSuperuser.vue

@@ -9,27 +9,28 @@
     >
       <b-container fluid>
         <b-row>
-          <b-col cols="2">
+          <b-col cols="3">
             Name of the show:
           </b-col>
-          <b-col cols="10">
+          <b-col cols="9">
             <b-form-input
               v-model="newShow.name"
               type="text"
               placeholder="Enter a title for this new show"
             />
           </b-col>
-          <b-col cols="2" />
-          <b-col cols="10">
+          <b-col cols="3" />
+          <b-col cols="9">
             <small class="slug">Slug: {{ temporarySlug }}</small>
           </b-col>
         </b-row>
         <br>
+
         <b-row>
-          <b-col cols="2">
+          <b-col cols="3">
             Short description:
           </b-col>
-          <b-col cols="10">
+          <b-col cols="9">
             <b-form-input
               v-model="newShow.short_description"
               type="text"
@@ -37,6 +38,47 @@
             />
           </b-col>
         </b-row>
+        <br>
+
+        <b-row>
+          <b-col cols="3">
+            Show type:
+          </b-col>
+          <b-col cols="9">
+            <div v-if="!loaded.types">
+              <img
+                src="../assets/radio.gif"
+                alt="loading data"
+              >
+            </div>
+            <div v-else>
+              <b-form-select
+                v-model="newShow.type"
+                :options="showTypeSelector"
+              />
+            </div>
+          </b-col>
+        </b-row>
+        
+        <b-row>
+          <b-col cols="3">
+            Funding category:
+          </b-col>
+          <b-col cols="9">
+            <div v-if="!loaded.fundingcategories">
+              <img
+                src="../assets/radio.gif"
+                alt="loading data"
+              >
+            </div>
+            <div v-else>
+              <b-form-select
+                v-model="newShow.fundingcategory"
+                :options="showFundingCategorySelector"
+              />
+            </div>
+          </b-col>
+        </b-row>
       </b-container>
     </b-modal>
 
@@ -72,8 +114,8 @@ export default {
         name: "",
         slug: "",
         short_description: "",
-        type: 1,
-        fundingcategory: 1,
+        type: 0,
+        fundingcategory: 0,
         category: [],
         hosts: [],
         owners: [],
@@ -84,14 +126,44 @@ export default {
       deletedShow: {
         id: null,
         name: '',
-      }
+      },
+      loaded: {
+        types: false,
+        fundingcategories: false,
+      },
+      types: [],
+      fundingcategories: [],
     }
   },
+
   computed: {
     temporarySlug: function () {
       return this.slug(this.newShow.name)
-    }
+    },
+
+    showTypeSelector: function () {
+      let options = []
+      for (let i in this.types) {
+        options.push({
+          value: this.types[i].id,
+          text: this.types[i].type
+        })
+      }
+      return options
+    },
+
+    showFundingCategorySelector: function () {
+      let options = []
+      for (let i in this.fundingcategories) {
+        options.push({
+          value: this.fundingcategories[i].id,
+          text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')'
+        })
+      }
+      return options
+    },
   },
+
   methods: {
     addShow (event) {
       // prevent the modal from closing automatically on click
@@ -138,20 +210,54 @@ export default {
       })
     },
 
+    // clear and fetch modal data and open the modal to add new shows
     showModalAddShow () {
       this.newShow.name = ''
       this.newShow.slug = ''
       this.newShow.short_description = ''
-      // TODO:
-      // - load types & funding categories
+      this.loadTypes()
+      this.loadFundingCategories()
       this.$refs.modalAddShow.show()
     },
 
+    // open the deletion confirmation modal
     showModalDeleteShow (id, name) {
       this.deletedShow.id = id
       this.deletedShow.name = name
       this.$refs.modalDeleteShow.show()
-    }
+    },
+
+    // fetch all available (that is: active) show type from steering
+    loadTypes () {
+      this.loaded.types = false
+      axios.get(process.env.VUE_APP_API_STEERING + 'types/?active=true', {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(response => {
+        this.types = response.data
+        this.loaded.types = true
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not load available show types. See console for details.')
+      })
+    },
+
+    // fetch all available (that is: active) funding categories from steering
+    loadFundingCategories () {
+      this.loaded.fundingcategories = false
+      axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/?active=true', {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(response => {
+        this.fundingcategories = response.data
+        this.loaded.fundingcategories = true
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not load available funding categories. See console for details.')
+      })
+    },
   }
 }
 </script>