Add members

client/package.json

@@ -11,8 +11,7 @@
     "@mdi/font": "7.4.47",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
-    "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
+    "vue": "^3.4.31"
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",
@@ -38,6 +37,7 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "^2.0.3",
     "vue-router": "^4.4.0",
-    "vue-tsc": "^2.0.26"
+    "vue-tsc": "^2.0.26",
+    "vuetify": "^3.6.13"
   }
 }

client/src/api/axios.ts

@@ -14,4 +14,15 @@ const BaseClient: AxiosInstance = axios.create({
   timeout: 1000,
 });
 
-export { AuthClient, BaseClient };
+async function Search(searchInput:any) {
+  await AuthClient.get(`/members/search/${searchInput}`)
+  .then(response=>{
+    console.log('Search results:', response.data);
+    return response.data;
+  })
+  .catch(error=>{
+    console.error('Error searching for members:', error);
+  })
+}
+
+export default{ AuthClient, BaseClient, Search };

client/src/components.d.ts

@@ -7,8 +7,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/test.vue')['default']

client/src/main.ts

@@ -12,9 +12,11 @@ import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
+import router from './router'
+import vuetify from './plugins/vuetify'
 
 const app = createApp(App)
 
 registerPlugins(app)
 
-app.mount('#app')
+app.use(router).use(vuetify).mount('#app')

client/src/pages/AddMembers.vue

@@ -0,0 +1,83 @@
+<template>
+    <div style="margin-left: 7cm; margin-right: 7cm;">
+        <v-container>
+            <v-row >
+                <v-typography class="mt-2 text-h4 text-blue-darken-4" variant="h5">ALL MEMBERS</v-typography>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" @click="addMember">
+                    INVITE MEMBERS
+                </v-btn>
+            </v-row>
+
+            <v-row>
+                <v-typography class="mt-2 text-h6 text-grey-darken-2 mb-8" variant="h6">-There are {{ count }} members registered</v-typography>
+            </v-row>
+            <br>
+
+            <v-row>
+                <h4  class="mb-2">Search Members</h4>
+            </v-row>
+
+            <v-row>
+                <v-text-field v-model="searchText" label="Search" variant="outlined"></v-text-field>
+                <v-btn color="primary" variant="outlined" @click="SearchMember"  style="height: 56px; width:80px; padding: 0; margin: 0;">Search</v-btn>
+            </v-row>
+
+                    <!-- seperate component for displaying members? -->
+            <v-row>
+                <v-col v-for="member in members" :key="member.email" cols="12" sm="6" md="4">
+                    <v-card class="ma-2" outlined>
+                        <v-card-title>{{ member.name }}</v-card-title>
+                        <v-card-subtitle>{{ member.email }}</v-card-subtitle>
+                        <v-card-actions>
+                        <v-btn @click="viewMember(member.id)">View Details</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-col>
+        </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { defineProps } from 'vue';
+import axios from '@/api/axios';
+export default{
+    setup(){
+        const props =defineProps({
+            count:{
+                type :Number,
+                required : true,
+            },
+            members:{
+                type :Array,
+                required :true, 
+            },
+        });
+
+
+        let searchText=ref("");
+
+        const addMember = () => {
+        };
+
+
+        const SearchMember = async () => {
+            try {
+               members.value= await axios.Search(searchText.value);
+            } catch (error) {
+                console.error('Error searching for members:', error);
+            }
+        };
+
+        return{
+            props,
+            SearchMember,
+            addMember,
+            searchText
+        }
+    }
+
+}
+</script>

client/src/plugins/vuetify.ts

@@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
   },
 })

client/src/router/index.ts

@@ -7,10 +7,11 @@
 // Composables
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/', component: () => import('@/pages/DashboardView.vue') }
+    { path: '/', component: () => import('@/pages/AddMembers.vue') }
   ],
 })
 

client/src/typed-router.d.ts

@@ -18,6 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    '/AddMembers': RouteRecordInfo<'/AddMembers', '/AddMembers', Record<never, never>, Record<never, never>>,
     '/DashboardView': RouteRecordInfo<'/DashboardView', '/DashboardView', Record<never, never>, Record<never, never>>,
   }
 }

package.json

@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"vuetify": "3.7.0-beta.1"
+	}
+}