add members | phase 1

dashboard/pages/members.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+
+definePageMeta({ layout: 'dashboard' });
+
+const activeProject = useActiveProject();
+
+const columns = [
+    { key: 'me', label: '' },
+    { key: 'email', label: 'Email' },
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    // { key: 'pending', label: 'Pending' },
+]
+
+const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', signHeaders());
+
+const showAddMember = ref<boolean>(false);
+
+const addMemberEmail = ref<string>("");
+
+async function addMember() {
+
+    if (addMemberEmail.value.length === 0) return;
+
+    try {
+
+        showAddMember.value = false;
+
+        await $fetch('/api/project/members/add', {
+            method: 'POST',
+            ...signHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ email: addMemberEmail.value }),
+            onResponseError({ request, response, options }) {
+                alert(response.statusText);
+            }
+        });
+
+        addMemberEmail.value = '';
+
+        refreshMembers();
+
+    } catch (ex: any) { }
+
+
+
+}
+
+</script>
+
+
+<template>
+
+    <div class="home w-full h-full px-10 lg:px-6 overflow-y-auto pb-[12rem] md:pb-0 py-2">
+
+
+        <div class="flex flex-col gap-4">
+
+            <div @click="showAddMember = !showAddMember;"
+                class="flex items-center gap-2 bg-menu w-fit px-3 py-2 rounded-lg hover:bg-menu/80 cursor-pointer">
+                <i class="fas fa-plus"></i>
+                <div> Add member </div>
+            </div>
+
+            <div v-if="showAddMember" class="flex gap-4 items-center">
+                <input v-model="addMemberEmail" class="focus:outline-none bg-menu px-4 py-1 rounded-lg" type="text"
+                    placeholder="user email">
+                <div @click="addMember" class="bg-menu w-fit py-1 px-4 rounded-lg hover:bg-menu/80 cursor-pointer">
+                    Add
+                </div>
+            </div>
+
+            <UTable :rows="members || []" :columns="columns">
+                <template #me-data="e">
+                    <i v-if="e.row.me" class="far fa-user"></i>
+                    <i v-if="!e.row.me"></i>
+                </template>
+            </UTable>
+
+        </div>
+
+    </div>
+
+</template>

dashboard/pages/project_selector.vue

@@ -3,6 +3,7 @@
 definePageMeta({ layout: 'dashboard' });
 
 const { projects, refresh } = useProjectsList();
+const { guestProjects } = useGuestProjectsList();
 const { pid } = useActiveProjectId();
 
 const { data: maxProjects } = useFetch("/api/user/max_projects", signHeaders());
@@ -69,7 +70,7 @@ async function deleteAccount() {
                 <div class="flex gap-4 items-center">
                     <div class="text-text font-bold text-[1.5rem]"> Projects </div>
                     <div class="text-text-sub/90 text-[1rem] font-semibold lato">
-                        {{ projects?.length ?? '-' }} / {{maxProjects || 3}}
+                        {{ projects?.length ?? '-' }} / {{ maxProjects || 3 }}
                     </div>
                 </div>
                 <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
@@ -101,9 +102,18 @@ async function deleteAccount() {
                     </div>
                 </div>
 
+                <div v-for="e of guestProjects">
+                    <DashboardProjectSelectionCard class="outline outline-[2px] outline-yellow-200"
+                        @click="onProjectClick(e._id.toString())" :title="e.name" :active="pid == e._id.toString()"
+                        :subtitle="pid == e._id.toString() ? 'ATTIVO' : ''" :chip="''">
+                    </DashboardProjectSelectionCard>
+                </div>
 
             </div>
 
+
+
+
         </div>
 
         <div class="px-10">