Add basic role management UI

ui/components/accounts/AccountsList.vue

@@ -7,36 +7,31 @@
           <oc-table-cell type="head" v-text="$gettext('Username')" />
           <oc-table-cell type="head" v-text="$gettext('Display name')" />
           <oc-table-cell type="head" v-text="$gettext('Email')" />
+          <oc-table-cell type="head" v-text="$gettext('Role')" />
           <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="$gettext('Uid number')" />
           <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="$gettext('Gid number')" />
           <oc-table-cell shrink type="head" v-text="$gettext('Enabled')" />
         </oc-table-row>
       </oc-table-group>
       <oc-table-group>
-        <oc-table-row v-for="account in accounts" :key="`account-list-row-${account.id}`">
-          <oc-table-cell>
-            <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
-          </oc-table-cell>
-          <oc-table-cell v-text="account.onPremisesSamAccountName" />
-          <oc-table-cell v-text="account.displayName || '-'" />
-          <oc-table-cell v-text="account.mail" />
-          <oc-table-cell v-text="account.uidNumber || '-'" />
-          <oc-table-cell v-text="account.gidNumber || '-'" />
-          <oc-table-cell class="uk-text-center">
-            <oc-icon v-if="account.accountEnabled" name="ready" variation="success" :aria-label="$gettext('Account is enabled')" />
-            <oc-icon v-else name="deprecated" variation="danger" :aria-label="$gettext('Account is disabled')" />
-          </oc-table-cell>
-        </oc-table-row>
+        <accounts-list-row
+          v-for="account in accounts"
+          :key="`account-list-row-${account.id}`"
+          :account="account"
+        />
       </oc-table-group>
     </oc-table>
   </div>
 </template>
 
 <script>
-import Avatar from './Avatar.vue'
+import AccountsListRow from './AccountsListRow.vue'
+
 export default {
   name: 'AccountsList',
-  components: { Avatar },
+  components: {
+    AccountsListRow
+  },
   props: {
     accounts: {
       type: Array,

ui/components/accounts/AccountsListRow.vue

@@ -0,0 +1,139 @@
+<template>
+  <oc-table-row>
+    <oc-table-cell>
+      <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
+    </oc-table-cell>
+    <oc-table-cell v-text="account.onPremisesSamAccountName" />
+    <oc-table-cell v-text="account.displayName || '-'" />
+    <oc-table-cell v-text="account.mail" />
+    <oc-table-cell>
+      <oc-button :class="`accounts-roles-select-trigger-${account.id}`" variation="raw">
+        <span class="uk-flex uk-flex-middle">
+          {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
+          <oc-icon name="expand_more" aria-hidden="true" />
+        </span>
+      </oc-button>
+      <oc-drop
+        :drop-id="`accounts-roles-select-dropdown-${account.id}`"
+        :toggle="`.accounts-roles-select-trigger-${account.id}`"
+        mode="click"
+        close-on-click
+        :options="{ delayHide: 0 }"
+      >
+        <ul class="uk-nav">
+          <li v-for="role in roles" :key="role.id" class="uk-margin-small">
+            <oc-button variation="raw" @click="changeRole(role.id)">
+              <span v-text="role.displayName" :class="{ 'uk-text-bold': role === currentRole }" />
+            </oc-button>
+          </li>
+        </ul>
+      </oc-drop>
+    </oc-table-cell>
+    <oc-table-cell v-text="account.uidNumber || '-'" />
+    <oc-table-cell v-text="account.gidNumber || '-'" />
+    <oc-table-cell class="uk-text-center">
+      <oc-icon v-if="account.accountEnabled" name="ready" variation="success" :aria-label="$gettext('Account is enabled')" />
+      <oc-icon v-else name="deprecated" variation="danger" :aria-label="$gettext('Account is disabled')" />
+    </oc-table-cell>
+  </oc-table-row>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+import { isObjectEmpty } from '../../helpers/utils'
+import Avatar from './Avatar.vue'
+
+export default {
+  name: 'AccountsListRow',
+
+  components: { Avatar },
+
+  props: {
+    account: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      currentRole: null,
+      currentAssignment: null
+    }
+  },
+
+  computed: {
+    ...mapGetters(['getToken', 'configuration']),
+    ...mapState('Accounts', ['roles']),
+
+    headers () {
+      const headers = new Headers()
+
+      headers.append('Authorization', 'Bearer ' + this.getToken)
+
+      return headers
+    }
+  },
+
+  created () {
+    this.getUsersCurrentRole()
+  },
+
+  methods: {
+    changeRole (roleId) {
+      this.removeAssignment().then(() => this.addAssignment(roleId))
+    },
+
+    removeAssignment () {
+      if (this.currentAssignment === null) {
+        return Promise.resolve()
+      }
+
+      return fetch(`${this.configuration.server}/api/v0/settings/assignments-remove`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: this.headers,
+        body: JSON.stringify({
+          id: this.currentAssignment.id
+        })
+      })
+    },
+
+    addAssignment (roleId) {
+      fetch(`${this.configuration.server}/api/v0/settings/assignments-add`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: this.headers,
+        body: JSON.stringify({
+          account_uuid: this.account.id,
+          role_id: roleId
+        })
+      }).then(() => {
+        this.getUsersCurrentRole()
+      })
+    },
+
+    async getUsersCurrentRole () {
+      let assignedRole = await fetch(`${this.configuration.server}/api/v0/settings/assignments-list`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: this.headers,
+        body: JSON.stringify({
+          account_uuid: this.account.id
+        })
+      })
+
+      assignedRole = await assignedRole.json()
+
+      if (isObjectEmpty(assignedRole)) {
+        return
+      }
+
+      this.currentAssignment = assignedRole.assignments[0]
+      this.currentRole = this.roles.find(role => {
+        return role.id === assignedRole.assignments[0].roleId
+      })
+    }
+  }
+}
+</script>

ui/helpers/utils.js

@@ -0,0 +1,8 @@
+/**
+ * Asserts wheter the given object is empty
+ * @param {Object} obj Object to be checked
+ * @returns {Boolean}
+ */
+export function isObjectEmpty (obj) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object
+}

ui/store/index.js

@@ -7,7 +7,8 @@ import axios from 'axios'
 const state = {
   config: null,
   initialized: false,
-  accounts: {}
+  accounts: {},
+  roles: null
 }
 
 const getters = {
@@ -32,6 +33,9 @@ const mutations = {
   },
   SET_ACCOUNTS (state, accounts) {
     state.accounts = accounts
+  },
+  SET_ROLES (state, roles) {
+    state.roles = roles
   }
 }
 
@@ -42,6 +46,7 @@ const actions = {
 
   async initialize ({ commit, dispatch }) {
     await dispatch('fetchAccounts')
+    await dispatch('fetchRoles')
     commit('SET_INITIALIZED', true)
   },
 
@@ -61,6 +66,24 @@ const actions = {
         status: 'danger'
       }, { root: true })
     }
+  },
+
+  async fetchRoles ({ commit, rootGetters }) {
+    const headers = new Headers()
+
+    headers.append('Authorization', 'Bearer ' + rootGetters.getToken)
+
+    let roles = await fetch(`${rootGetters.configuration.server}/api/v0/settings/roles-list`, {
+      method: 'POST',
+      mode: 'cors',
+      headers: this.headers,
+      body: JSON.stringify({
+        account_uuid: rootGetters.user.id
+      })
+    })
+
+    roles = await roles.json()
+    commit('SET_ROLES', roles.bundles)
   }
 }