FEAT: add modal to edit show owners

src/components/ShowManager.vue

@@ -411,7 +411,7 @@
           </b-badge> <img
             src="../assets/16x16/emblem-system.png"
             alt="edit"
-            @click="$refs.appModalSuperuser.showModalOwners()"
+            @click="$refs.appModalSuperuser.showModalOwners(shows[currentShow])"
           >
         </b-col>
         <b-col lg="10">

src/components/ShowManagerModalSuperuser.vue

@@ -99,6 +99,124 @@
         Are you sure you want to continue?
       </div>
     </b-modal>
+
+    <!-- Modal to edit show owners -->
+    <b-modal
+      ref="modalOwners"
+      title="Edit owners of the show"
+      size="lg"
+      @ok="updateOwners"
+    >
+      <div v-if="loaded.users">
+        <p>
+          Users with access to <b>{{ show.name }}</b>:
+        </p>
+        <div v-if="owners.length === 0">
+          <ul>
+            <li>
+              <small><i>(none set)</i></small>
+            </li>
+          </ul>
+        </div>
+        <div v-else>
+          <b-table
+            striped
+            hover
+            :items="owners"
+            :fields="ownersTableFields"
+          >
+            <template
+              slot="name"
+              slot-scope="data"
+            >
+              {{ data.item.first_name }} {{ data.item.last_name }}
+            </template>
+            <template
+              slot="username"
+              slot-scope="data"
+            >
+              <small>{{ data.value }}</small>
+            </template>
+            <template
+              slot="email"
+              slot-scope="data"
+            >
+              <small>{{ data.value }}</small>
+            </template>
+            <template
+              slot="options"
+              slot-scope="data"
+            >
+              <b-button
+                variant="danger"
+                size="sm"
+                @click="deleteOwner(data.item.id)"
+              >
+                Delete
+              </b-button>
+            </template>
+          </b-table>
+        </div>
+
+        <hr>
+
+        <!-- TODO: as the list of users might be quite large we need some sort
+          of pagination and/or a search box. also those users who already have
+          access should not be listed (or at least the add button should be disabled)
+        -->
+        <p>
+          You can
+          <b-badge variant="success">
+            add new users
+          </b-badge>
+          from the table below:
+        </p>
+        <b-table
+          striped
+          hover
+          :items="users"
+          :fields="ownersTableFields"
+        >
+          <template
+            slot="name"
+            slot-scope="data"
+          >
+            {{ data.item.first_name }} {{ data.item.last_name }}
+          </template>
+          <template
+            slot="username"
+            slot-scope="data"
+          >
+            <small>{{ data.value }}</small>
+          </template>
+          <template
+            slot="email"
+            slot-scope="data"
+          >
+            <small>{{ data.value }}</small>
+          </template>
+          <template
+            slot="options"
+            slot-scope="data"
+          >
+            <b-button
+              variant="success"
+              size="sm"
+              @click="addOwner(data.item.id)"
+            >
+              Add
+            </b-button>
+          </template>
+        </b-table>
+      </div>
+      <div v-else>
+        <img
+          src="../assets/radio.gif"
+          height="32px"
+          alt="loading user data"
+        >
+      </div>
+    </b-modal>
   </div>
 </template>
 
@@ -127,12 +245,17 @@ export default {
         id: null,
         name: '',
       },
+      show: null,
       loaded: {
         types: false,
         fundingcategories: false,
+        users: false,
       },
       types: [],
       fundingcategories: [],
+      users: [],
+      owners: [],
+      ownersTableFields: ['name', 'username', 'email', 'options']
     }
   },
 
@@ -231,6 +354,50 @@ export default {
       })
     },
 
+    // remove an owner from the list of show owners
+    deleteOwner (id) {
+      // we only have to find the item in our array and splice it out
+      // saving is done when the updateOwners method is called
+      let i = this.owners.findIndex(o => o.id === id)
+      this.owners.splice(i, 1)
+    },
+
+    // add a user as an owner to the list of show owners
+    addOwner (id) {
+      // we only have to push the user object to our owners array, if it is
+      // not already there. saving is done by the updateOwners method.
+      if (this.owners.findIndex(o => o.id === id) >= 0) {
+        alert('This user already has access to the show.')
+      } else {
+        this.owners.push(this.users.find(u => u.id === id))
+      }
+    },
+
+    // set new list of show owners by updating the show
+    updateOwners (event) {
+      // prevent the modal from closing automatically on click
+      event.preventDefault()
+      // now we have to fill the show's owner list anew with the selected owners
+      this.show.owners = []
+      for (let i in this.owners) {
+        this.show.owners.push(this.owners[i].id)
+      }
+      // ready to update the show
+      let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
+      axios.put(uri, this.show, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(() => {
+        this.$refs.modalOwners.hide()
+        this.$parent.loadAndSwitch(this.show.id)
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not update show owners. See console for details.')
+        // and we leave the modal open, so no call to its .hide function here
+      })
+    },
+
     // clear and fetch modal data and open the modal to add new shows
     showModalAddShow () {
       this.newShow.name = ''
@@ -248,8 +415,12 @@ export default {
       this.$refs.modalDeleteShow.show()
     },
 
-    showModalOwners () {
-      alert('coming soon')
+    // open the modal to edit a show's owners
+    showModalOwners (show) {
+      this.show = show
+      this.owners = []
+      this.loadUsers()
+      this.$refs.modalOwners.show()
     },
 
     // fetch all available (that is: active) show type from steering
@@ -283,6 +454,25 @@ export default {
         alert('Error: could not load available funding categories. See console for details.')
       })
     },
+
+    // fetch all users from steering
+    loadUsers () {
+      this.loaded.users = false
+      axios.get(process.env.VUE_APP_API_STEERING + 'users', {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(response => {
+        this.users = response.data
+        for (let i in this.show.owners) {
+          this.owners.push(this.users.find(user => user.id === this.show.owners[i]))
+        }
+        this.loaded.users = true
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not load users. See console for details.')
+      })
+    },
   }
 }
 </script>