move show owner display and modal to own component

src/components/ShowManager.vue

@@ -234,6 +234,7 @@
       <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
       <show-metaSimpleTypes />
       <show-metaArrays />
+      <show-metaOwners />
 
       <b-row>
         <b-col lg="2">
@@ -292,8 +293,9 @@
 
 <script>
 import showJumbotron from './ShowJumbotron.vue'
-import showMetaSimpleTypes from './ShowMetaArrays.vue'
-import showMetaArrays from './ShowMetaSimpleTypes.vue'
+import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
+import showMetaArrays from './ShowMetaArrays.vue'
+import showMetaOwners from './ShowMetaOwners.vue'
 import modalNotes from './ShowManagerModalNotes.vue'
 import modalShow from './ShowManagerModalShow.vue'
 import modalSuperuser from './ShowManagerModalSuperuser.vue'
@@ -314,6 +316,7 @@ export default {
     'show-jumbotron': showJumbotron,
     'show-metaArrays': showMetaArrays,
     'show-metaSimpleTypes': showMetaSimpleTypes,
+    'show-metaOwners': showMetaOwners,
   },
 
   // generic functions that we want to use from our mixins folder
@@ -388,6 +391,7 @@ export default {
 
     currentShow () { return this.$store.state.shows.selected.index },
     currentShowID () { return this.$store.state.shows.selected.id },
+    isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
 
     // As the show description should allow to be html-formatted, we have to
     // make sure no malicous code can be inserted into the DOM. For that the
@@ -523,6 +527,7 @@ export default {
       this.$store.dispatch('shows/fetchMetaArray', {property: 'musicfocus'})
       this.$store.dispatch('shows/fetchMetaArray', {property: 'languages'})
       this.$store.dispatch('shows/fetchMetaArray', {property: 'hosts'})
+      if (this.isSuperuser) { this.$store.dispatch('auth/fetchUsers') }
       this.loaded.shows = false
       var uri = process.env.VUE_APP_API_STEERING_SHOWS
       // normal users should only see their own shows, only superusers see all shows

src/components/ShowManagerModalSuperuser.vue

@@ -81,100 +81,6 @@
         </b-row>
       </b-container>
     </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 v-slot:cell(name)="data">
-              {{ data.item.first_name }} {{ data.item.last_name }}
-            </template>
-            <template v-slot:cell(username)="data">
-              <small>{{ data.value }}</small>
-            </template>
-            <template v-slot:cell(email)="data">
-              <small>{{ data.value }}</small>
-            </template>
-            <template v-slot:cell(options)="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 v-slot:cell(name)="data">
-            {{ data.item.first_name }} {{ data.item.last_name }}
-          </template>
-          <template v-slot:cell(username)="data">
-            <small>{{ data.value }}</small>
-          </template>
-          <template v-slot:cell(email)="data">
-            <small>{{ data.value }}</small>
-          </template>
-          <template v-slot:cell(options)="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>
 
@@ -209,8 +115,6 @@ export default {
       types: [],
       fundingcategories: [],
       users: [],
-      owners: [],
-      ownersTableFields: ['name', 'username', 'email', 'options']
     }
   },
 
@@ -290,51 +194,6 @@ 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
-      let updatedShow = this.getUpdateShowObject()
-      updatedShow.owners = []
-      for (let i in this.owners) {
-        updatedShow.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, updatedShow, {
-        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 = ''
@@ -344,33 +203,6 @@ export default {
       this.loadFundingCategories()
       this.$refs.modalAddShow.show()
     },
-
-    // open the modal to edit a show's owners
-    showModalOwners (show) {
-      this.show = show
-      this.owners = []
-      this.loadUsers()
-      this.$refs.modalOwners.show()
-    },
-
-    // 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>

src/components/ShowMetaOwners.vue

+<template>
+  <div>
+    <hr v-if="isSuperuser">
+    <b-row v-if="isSuperuser">
+      <b-col lg="2">
+        <b-badge
+          variant="info"
+          style="width:80%;"
+        >
+          Owners:
+        </b-badge> <img
+          src="../assets/16x16/emblem-system.png"
+          alt="edit"
+          @click="openModalOwners()"
+        >
+      </b-col>
+      <b-col lg="10">
+        <div v-if="users.length > 0">
+          <p v-if="selectedShow.owners.length === 0">
+            <small><i>(none set)</i></small>
+          </p>
+          <p v-else>
+            <!-- TODO: make link on name; when user clicks, open modal to edit host -->
+            <ul>
+              <li
+                v-for="owner in ownerDetails"
+                :key="owner.id"
+              >
+                {{ owner.first_name }} {{ owner.last_name }}
+                <b-badge variant="light">
+                  username:
+                </b-badge> <small>{{ owner.username }}</small>
+                <span v-if="owner.email.length > 0">
+                  <b-badge variant="light">
+                    email:
+                  </b-badge> <small>{{ owner.email }}</small>
+                </span>
+              </li>
+            </ul>
+          </p>
+        </div>
+        <div v-else>
+          <img
+            src="../assets/radio.gif"
+            height="24px"
+            alt="loading data"
+          ><br>
+        </div>
+      </b-col>
+    </b-row>
+    <hr v-if="isSuperuser">
+
+    <!-- Modal to edit show owners -->
+    <b-modal
+      ref="modalOwners"
+      title="Edit owners of the show"
+      size="lg"
+      @ok="saveOwners"
+    >
+      <div v-if="users.length > 0">
+        <p>
+          Users with access to <b>{{ selectedShow.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 v-slot:cell(name)="data">
+              {{ data.item.first_name }} {{ data.item.last_name }}
+            </template>
+            <template v-slot:cell(username)="data">
+              <small>{{ data.value }}</small>
+            </template>
+            <template v-slot:cell(email)="data">
+              <small>{{ data.value }}</small>
+            </template>
+            <template v-slot:cell(options)="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 v-slot:cell(name)="data">
+            {{ data.item.first_name }} {{ data.item.last_name }}
+          </template>
+          <template v-slot:cell(username)="data">
+            <small>{{ data.value }}</small>
+          </template>
+          <template v-slot:cell(email)="data">
+            <small>{{ data.value }}</small>
+          </template>
+          <template v-slot:cell(options)="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>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data () {
+    return {
+      owners: [],
+      ownersTableFields: ['name', 'username', 'email', 'options']
+    }
+  },
+  computed: {
+    shows () { return this.$store.state.shows.shows },
+    isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
+    loaded () {
+      return {
+        owners: false,
+      }
+    },
+
+    ownerDetails () {
+      let owners = []
+      for (let id of this.selectedShow.owners) {
+        owners.push(this.users.find(o => o.id === id))
+      }
+      return owners
+    },
+
+    ...mapGetters({
+      selectedShow: 'shows/selectedShow',
+      users: 'auth/users',
+    })
+  },
+  methods: {
+    openModalOwners () {
+      this.owners = []
+      for (let id of this.selectedShow.owners) {
+        this.owners.push(this.users.find(o => o.id === id))
+      }
+      this.$refs.modalOwners.show()
+    },
+
+    saveOwners (event) {
+      event.preventDefault()
+      let newOwners = []
+      for (let i in this.owners) {
+        newOwners.push(this.owners[i].id)
+      }
+      this.$store.dispatch('shows/updateProperty', {
+        id: this.selectedShow.id,
+        property: 'owners',
+        value: newOwners,
+        callback: () => {
+          this.$refs.modalOwners.hide()
+        }
+      })
+    },
+
+    // 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 saveOwners 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 saveOwners 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))
+      }
+    },
+
+  }
+}
+</script>

src/store/modules/auth.js

 import axios from 'axios'
 import oidc from 'oidc-client'
+import handleApiError from '../handleApiError'
 
 const oidcmgr = new oidc.UserManager({
   userStore: new oidc.WebStorageStateStore(),
@@ -25,12 +26,14 @@ const state = {
     logged_in: false,
     steeringUser: null
   },
+  users: [],
   userOIDC: null,
 }
 
 const getters = {
   access_token: state => state.user.access_token,
   user: state => state.user,
+  users: state => state.users,
 }
 
 const mutations = {
@@ -54,6 +57,10 @@ const mutations = {
     state.user.steeringUser = {...user}
   },
 
+  setUsers (state, users) {
+    state.users = users
+  },
+
   setAccessToken (state, token) {
     state.user.access_token = token
   },
@@ -91,6 +98,20 @@ const actions = {
     })
   },
 
+  fetchUsers (ctx, data) {
+    ctx.commit('setUsers', [])
+    axios.get(process.env.VUE_APP_API_STEERING + 'users', {
+      withCredentials: true,
+      headers: { 'Authorization': 'Bearer ' + ctx.state.user.access_token }
+    }).then(response => {
+      ctx.commit('setUsers', response.data)
+      if (data && typeof(data.callback) === 'function') { data.callback() }
+    }).catch(error => {
+      handleApiError(this, error, 'could not load steering users')
+      if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
+    })
+  },
+
   oidcInit (ctx) {
     // TODO: remove oidc logging after thorough testing
     oidc.Log.logger = console
@@ -153,7 +174,7 @@ const actions = {
       this.$log.error(err)
       alert('Error: something went wrong when logging out. See console for details.')
     })
-  }
+  },
 }
 
 export default {