Merge branch 'develop' into #6-Room-Overview

src/components/AdministratorTable.vue

@@ -0,0 +1,117 @@
+<template>
+  <b-container>
+    <b-row class="mt-5 mb-1">
+      <h1>Administrators</h1>
+    </b-row>
+    <b-row>
+      <b-col cols="12" md="6" class="px-0">
+        <b-form-group
+          label="Search"
+          label-for="filterInput"
+          class="my-4 mx-0"
+        >
+          <b-input-group>
+            <b-form-input
+              v-model="filter"
+              type="search"
+              id="filterInput"
+            ></b-form-input>
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+      <b-col cols="12" md="6" class="mt-0 mb-4 pb-1 pb-md-2 px-0 d-flex flex-row justify-content-between justify-content-md-around align-items-start align-items-md-end">
+        <b-checkbox :disabled="filterByAdmins ? true : false" v-model="filterByStandardUsers" switch>Default user</b-checkbox>
+        <b-checkbox :disabled="filterByStandardUsers ? true : false" v-model="filterByAdmins" switch>Administrator</b-checkbox>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-table
+          primary-key="id"
+          striped
+          responsive
+          hover
+          :filter="filter"
+          :fields="fields"
+          :items="filterByStandardUsers ? onlyStandardUser : filterByAdmins ? onlyAdmins : items">
+        <template v-slot:cell(isAdmin) = "data">
+        <b-form-checkbox
+          @change="changeAdminStatus(data.item)"
+          :id="data.item.initials"
+          v-model="data.item.isAdmin"
+          name="checkbox-1"
+        ></b-form-checkbox>
+      </template>
+      </b-table>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import { userService } from '@/services/user.service'
+export default {
+  data () {
+    return {
+      users: [],
+      filter: null,
+      filterByStandardUsers: false,
+      filterByAdmins: false
+    }
+  },
+  async mounted () {
+    await this.fetchAllUsers()
+  },
+  methods: {
+    async fetchAllUsers () {
+      const response = await userService.fetchAllUsers()
+      this.users = response
+    },
+    onFiltered (filteredItems) {
+      // Trigger pagination to update the number of buttons/pages due to filtering
+      this.totalRows = filteredItems.length
+      this.currentPage = 1
+    },
+    async changeAdminStatus (user) {
+      try {
+        await userService.setAdminStatus(user)
+      } catch (error) {
+        console.error(error.message)
+      }
+    }
+  },
+  computed: {
+    items () {
+      const users = this.users
+      users.forEach(user => {
+        const userName = `${user.firstName} ${user.lastName}`
+        user.userName = userName
+      })
+      return users
+    },
+    onlyStandardUser () {
+      const users = this.users
+      const standardUsers = users.filter(user => user.isAdmin !== true)
+      standardUsers.forEach(user => {
+        const userName = `${user.firstName} ${user.lastName}`
+        user.userName = userName
+      })
+      return standardUsers
+    },
+    onlyAdmins () {
+      const users = this.users
+      const standardUsers = users.filter(user => user.isAdmin === true)
+      standardUsers.forEach(user => {
+        const userName = `${user.firstName} ${user.lastName}`
+        user.userName = userName
+      })
+      return standardUsers
+    },
+    fields () {
+      return [
+        { key: 'userName', label: 'Username', sortable: true },
+        { key: 'initials', label: 'Initials', sortable: true },
+        { key: 'isAdmin', label: 'is Administrator', sortable: true }
+      ]
+    }
+  }
+}
+</script>

src/router/index.js

@@ -1,8 +1,9 @@
+import { userService } from '@/services/user.service'
+import AdminCredentials from '@/views/AdminCredentials'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home'
 import SignIn from '../views/SignIn'
-import { userService } from '@/services/user.service'
 import RoomOverview from '@/views/RoomOverview'
 
 Vue.use(VueRouter)
@@ -18,20 +19,33 @@ const routes = [
     path: '/signin',
     name: 'SignIn',
     component: SignIn,
+    meta: { displayNavbar: false },
     beforeEnter: (to, from, next) => {
       if (userService.isLoggedIn()) {
         next({ name: 'Home' })
       } else {
         next()
       }
-    },
-    meta: { displayNavbar: false }
+    }
   },
   {
     path: '/rooms',
     name: 'RoomOverview',
     component: RoomOverview,
     beforeEnter: guard
+  },
+  {
+    path: '/administrators',
+    name: 'AdminCredentials',
+    component: AdminCredentials,
+    beforeEnter: async (to, from, next) => {
+      const currentUser = await userService.currentUser()
+      if (userService.isLoggedIn() && currentUser.isAdmin === true) {
+        next()
+      } else {
+        next({ name: 'Home' })
+      }
+    }
   }
 ]
 

src/services/user.service.js

@@ -37,6 +37,21 @@ class UserService {
     }
   }
 
+  async fetchAllUsers () {
+    const users = []
+    const response = await $db().collection(COLLECTION_NAME).get()
+    response.forEach(doc => {
+      users.push({
+        id: doc.id,
+        firstName: doc.data().firstName,
+        lastName: doc.data().lastName,
+        initials: doc.data().initials,
+        isAdmin: doc.data().isAdmin === undefined || doc.data().isAdmin === null ? false : doc.data().isAdmin
+      })
+    })
+    return users
+  }
+
   async fetchUserByInitials (initials) {
     const users = []
     const response = await $db().collection(COLLECTION_NAME).where('initials', '==', initials).get()
@@ -56,24 +71,25 @@ class UserService {
     const userDoc = await $db().collection(COLLECTION_NAME).doc(userId).get()
     return {
       id: userDoc.id,
+      isAdmin: userDoc.data().isAdmin,
       firstName: userDoc.data().firstName,
       lastName: userDoc.data().lastName,
       initials: userDoc.data().initials
     }
   }
 
-  currentUser () {
+  async currentUser () {
     const userId = localStorage.getItem('userId')
     let result = null
 
     if (userId) {
       if (this.user && this.user.userId === userId) {
         result = this.user
       } else {
-        result = this.fetchUserById(userId)
+        result = await this.fetchUserById(userId)
       }
     }
-    return Promise.resolve(result)
+    return result
   }
 
   isLoggedIn () {
@@ -101,6 +117,27 @@ class UserService {
     })
     return await roomService.getRoomByID(myRoom)
   }
+
+  async setAdminStatus (user) {
+    console.log('🚀 ~ user', user)
+    const updatedUser = {
+      firstName: user.firstName,
+      lastName: user.lastName,
+      initials: user.initials,
+      isAdmin: user.isAdmin
+    }
+    try {
+      await $db().collection(COLLECTION_NAME).doc(user.id).update(updatedUser)
+    } catch (error) {
+      console.log('Something went wrong with setting isAdmin to value x: ' + error)
+      this.$notify({
+        group: 'network',
+        title: 'Error',
+        type: 'error',
+        text: error.message
+      })
+    }
+  }
 }
 
 export const userService = new UserService()

src/views/AdminCredentials.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <administrator-table />
+    </div>
+</template>
+
+<script>
+import AdministratorTable from '@/components/AdministratorTable.vue'
+export default {
+  components: {
+    AdministratorTable
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>