User management interface (#60)

Co-authored-by: Diogo Correia <[email protected]>

Author: ogoidmatos

backend/src/api/members/models.js

@@ -9,7 +9,7 @@ const memberCreate = Joi.object({
     .regex(/^ist\d+$/)
     .required(),
   active: Joi.boolean().default(true),
-  role: Joi.string().equal('admin', 'admin').default('user'),
+  role: Joi.string().equal('admin', 'user').default('user'),
 })
   .rename('istId', 'ist_id')
   .required();
@@ -20,7 +20,7 @@ const memberUpdate = Joi.object({
     .max(12)
     .regex(/^ist\d+$/),
   active: Joi.boolean(),
-  role: Joi.string().equal('admin', 'admin'),
+  role: Joi.string().equal('admin', 'user'),
 })
   .rename('istId', 'ist_id')
   .required()

frontend/src/api/members.api.js

@@ -1,7 +1,13 @@
 import httpClient from './httpClient';
 
-const END_POINT = '/members';
+const ENDPOINT = '/member';
 
-const getAllMembers = () => httpClient.get(END_POINT);
+export const getAllMembers = () => httpClient.get(`${ENDPOINT}s`);
 
-export { getAllMembers };
+export const getMember = (id) => httpClient.get(`${ENDPOINT}/${id}`);
+
+export const addMember = (data) => httpClient.post(ENDPOINT, data);
+
+export const deleteMember = (id) => httpClient.delete(`${ENDPOINT}/${id}`);
+
+export const updateMember = (id, data) => httpClient.post(`${ENDPOINT}/${id}`, data);

frontend/src/components/members/MembersTable.vue

@@ -7,7 +7,7 @@
         <v-spacer></v-spacer>
         <v-dialog v-model="dialog" max-width="600px">
           <template #activator="{ on, attrs }">
-            <v-btn color="secondary" dark class="mb-2" v-bind="attrs" v-on="on"> New Item </v-btn>
+            <v-btn color="secondary" dark class="mb-2" v-bind="attrs" v-on="on"> New Member </v-btn>
           </template>
           <v-card>
             <v-form ref="form" lazy-validation @submit.prevent="save">
@@ -45,7 +45,7 @@
                     </v-col>
                     <v-col cols="4">
                       <v-select
-                        v-model="editedItem.state"
+                        v-model="editedItem.active"
                         label="State"
                         :items="states"
                         filled
@@ -84,11 +84,11 @@
         {{ item.role }}
       </v-chip>
     </template>
-    <!--<template #[`item.type`]="{ item }">
-      <v-chip :color="typeColors[item.type]" dark class="capitalized">
-        {{ item.type }}
+    <template #[`item.active`]="{ item }">
+      <v-chip :color="stateColors[item.active]" dark class="capitalized">
+        {{ (states.find((v) => v.value == item.active) || {}).text }}
       </v-chip>
-    </template>-->
+    </template>
   </v-data-table>
 </template>
 
@@ -103,6 +103,7 @@ export default {
       { text: 'Member', value: 'name' },
       { text: 'IST Id', value: 'istId' },
       { text: 'Role', value: 'role' },
+      { text: 'State', value: 'active' },
       { text: 'Actions', value: 'actions', sortable: false },
     ],
     editedIndex: -1,
@@ -113,19 +114,23 @@ export default {
       name: '',
       istId: '',
       role: '',
-      state: '',
+      active: '',
     },
     roleColors: {
       admin: 'blue',
-      user: 'grey',
+      user: 'yellow darken-4',
+    },
+    stateColors: {
+      true: 'green',
+      false: 'grey',
     },
     roles: [
       { text: 'Admin', value: 'admin' },
       { text: 'User', value: 'user' },
     ],
     states: [
-      { text: 'Active', value: 'active' },
-      { text: 'Inactive', value: 'inactive' },
+      { text: 'Active', value: true },
+      { text: 'Inactive', value: false },
     ],
   }),
 

frontend/src/components/membersTest/MembersTest.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <v-row justify="center">{{ hello }}</v-row>
-    <MembersTest />
     <v-row justify="center"> Lista de itens que podes requesitar </v-row>
     <v-row justify="center">
       <v-col cols="11" lg="8" md="10">
@@ -17,14 +16,12 @@
 
 <script>
 import RequestItemList from '@/components/elements/RequestItemList.vue';
-import MembersTest from '@/components/membersTest/MembersTest.vue';
 
 export default {
   name: 'MyRequestsComponent',
 
   components: {
     RequestItemList,
-    MembersTest,
   },
 
   data: function () {

frontend/src/components/pages/MyRequests.vue

@@ -1,23 +1,54 @@
 // import the api endpoints
-import { getAllMembers } from '@/api/members.api';
+import * as memberApi from '@/api/members.api';
 
 const state = {
   members: [],
 };
 
-const getters = {};
+const getters = {
+  getMember(id) {
+    return state.members.find((member) => member.id == id);
+  },
+};
 
 const actions = {
   async fetchMembers({ commit }) {
-    const response = await getAllMembers();
+    const response = await memberApi.getAllMembers();
     commit('SET_MEMBERS', response.data);
   },
+  async fetchMember({ commit }, id) {
+    const response = await memberApi.getMember(id);
+    commit('SET_MEMBER', response.data);
+  },
+  async createMember({ commit }, data) {
+    const response = await memberApi.addMember(data);
+    commit('SET_MEMBER', response.data);
+  },
+  async deleteMember({ commit }, id) {
+    await memberApi.deleteMember(id);
+    commit('REMOVE_MEMBER', id);
+  },
+  async updateMember({ commit }, { id, data }) {
+    const response = await memberApi.updateMember(id, data);
+    commit('SET_MEMBER', { ...response.data, id });
+  },
 };
 
 const mutations = {
   SET_MEMBERS(state, data) {
     state.members = data;
   },
+  SET_MEMBER(state, data) {
+    const index = state.members.findIndex((member) => member.id == data.id);
+
+    if (index === -1) state.members.push(data);
+    // editing the array doesn't trigger DOM refresh, but splice does
+    else state.members.splice(index, 1, data);
+  },
+  REMOVE_MEMBER(state, id) {
+    const index = state.members.findIndex((member) => member.id == id);
+    state.members.splice(index, 1); // removes element from array and shifts the others
+  },
 };
 
 export default {