From 634cb641f1319c8e8b0d921fd5ed7562fb6383b6 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Tue, 8 Oct 2024 18:24:00 +0200
Subject: [PATCH] fix project creation

---
 TODO                                 |   1 -
 dashboard/pages/project_creation.vue |  10 +-
 dashboard/pages/project_selector.vue | 167 ---------------------------
 3 files changed, 5 insertions(+), 173 deletions(-)
 delete mode 100644 dashboard/pages/project_selector.vue

diff --git a/TODO b/TODO
index ee2da03..034eec3 100644
--- a/TODO
+++ b/TODO
@@ -2,7 +2,6 @@
 
 - Reactivity on project delete (update dropdown) + test guest
 
-- project creation
 - Event funnel / metadata analyzer / user flow
 - Refactor UI Data analyst
 - Remove Top Events from web analytics and move to custom events (with raw data access)
diff --git a/dashboard/pages/project_creation.vue b/dashboard/pages/project_creation.vue
index 4f92699..e87c5f3 100644
--- a/dashboard/pages/project_creation.vue
+++ b/dashboard/pages/project_creation.vue
@@ -7,9 +7,9 @@ const creating = ref<boolean>(false);
 
 const router = useRouter();
 
-const { projects, refresh } = useProjectsList();
+const { projectList, actions } = useProject();
 
-const isFirstProject = computed(() => { return projects.value?.length == 0; })
+const isFirstProject = computed(() => { return projectList.value?.length == 0; })
 
 import { Lit } from 'litlyx-js';
 
@@ -35,11 +35,11 @@ async function createProject() {
             body: JSON.stringify({ name: projectName.value })
         });
 
-        await refresh();
+        await actions.refreshProjectsList();
 
-        const newActiveProjectId = projects.value?.[projects.value?.length - 1]._id.toString();
+        const newActiveProjectId = projectList.value?.[projectList.value?.length - 1]._id.toString();
         if (newActiveProjectId) {
-            await setActiveProject(newActiveProjectId);
+            await actions.setActiveProject(newActiveProjectId);
         }
 
         router.push('/');
diff --git a/dashboard/pages/project_selector.vue b/dashboard/pages/project_selector.vue
deleted file mode 100644
index 4359523..0000000
--- a/dashboard/pages/project_selector.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script setup lang="ts">
-definePageMeta({ layout: 'dashboard' });
-
-const { projects, refresh } = useProjectsList();
-const { guestProjects, refresh: refreshGuest } = useGuestProjectsList();
-const { pid } = useActiveProjectId();
-
-const { data: maxProjects } = useFetch("/api/user/max_projects", signHeaders());
-
-async function deleteProject(projectId: string, projectName: string) {
-    const sure = confirm(`Are you sure to delete the project ${projectName} ?`);
-    if (!sure) return;
-
-    try {
-
-        await $fetch('/api/project/delete', {
-            method: 'DELETE',
-            ...signHeaders({ 'Content-Type': 'application/json' }),
-            body: JSON.stringify({ project_id: projectId })
-        });
-
-        await refresh();
-
-        if (pid.value == projectId) {
-            const firstProjectId = projects.value?.[0]?._id.toString();
-            if (firstProjectId) {
-                await setActiveProject(firstProjectId);
-            }
-        }
-
-    } catch (ex: any) {
-        alert(ex.message);
-    }
-
-
-}
-
-
-async function leaveProject(projectId: string, projectName: string) {
-    const sure = confirm(`Are you sure to leave the project ${projectName} ?`);
-    if (!sure) return;
-
-    try {
-
-        await $fetch('/api/project/members/leave', signHeaders());
-
-        await refreshGuest();
-
-        if (pid.value == projectId) {
-            const firstProjectId = projects.value?.[0]?._id.toString();
-            if (firstProjectId) {
-                await setActiveProject(firstProjectId);
-            }
-        }
-
-    } catch (ex: any) {
-        alert(ex.message);
-    }
-
-}
-
-const router = useRouter();
-
-const { setToken } = useAccessToken();
-
-async function onProjectClick(pid: string) {
-    await setActiveProject(pid)
-    router.push('/')
-}
-
-async function deleteAccount() {
-    const sure = confirm("Are you sure you want to delete this account ?");
-    if (!sure) return;
-    await $fetch("/api/user/delete_account", {
-        ...signHeaders(),
-        method: "DELETE"
-    })
-
-    setToken('');
-    location.href = "/login"
-}
-
-</script>
-
-
-<template>
-
-    <div class="h-full w-full pb-40 lg:pb-0 project-selector overflow-y-auto">
-
-        <div class="flex flex-col justify-center mt-16 gap-10 px-10" v-if="projects">
-
-            <div class="flex gap-4 items-center flex-col md:flex-row">
-                <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 }}
-                    </div>
-                </div>
-                 <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
-                    class="bg-blue-500/20 hover:bg-blue-500/30 px-4 py-1 flex items-center gap-4 rounded-xl cursor-pointer">
-                    <div class="h-full aspect-[1/1] flex items-center justify-center">
-                        <i class="fas fa-plus text-[1rem] text-text-sub/80"></i>
-                    </div>
-                    <div>
-                        <div class="text-text font-semibold manrope text-[1.3rem]">
-                            Create new project
-                        </div>
-                    </div>
-                </NuxtLink>
-
-
-            </div>
-
-            <div class="text-text/85 mt-8 poppis text-[1.2rem]" v-if="projects.length == 0">
-                Create your first project...
-            </div>
-
-            <div class="flex gap-12 flex-wrap" v-if="pid">
-
-                <div v-for="e of projects">
-                    <DashboardProjectSelectionCard @click="onProjectClick(e._id.toString())"
-                        :active="pid == e._id.toString()" :title="e.name"
-                        :subtitle="pid == e._id.toString() ? 'ATTIVO' : ''"
-                        :chip="e.premium ? 'PREMIUM PLAN' : 'FREE PLAN'">
-                    </DashboardProjectSelectionCard>
-                    <div @click="deleteProject(e._id.toString(), e.name)"
-                        class="mt-4 rounded-lg bg-[#3a3a3b] hover:bg-[#4f4f50] cursor-pointer hover:text-red-500 flex items-center justify-center py-3">
-                        <i class="far fa-trash"></i>
-                    </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 @click="leaveProject(e._id.toString(), e.name)"
-                        class="mt-4 rounded-lg bg-[#3a3a3b] hover:bg-[#4f4f50] cursor-pointer hover:text-red-500 flex items-center justify-center py-3">
-                        <i class="far fa-right-from-bracket"></i>
-                    </div>
-                </div>
-
-            </div>
-
-
-
-
-        </div>
-
-        <div class="px-10">
-            <CardTitled title="Danger zone" :sub="''" class="p-4 mt-8">
-
-                <div
-                    class="outline rounded-lg w-fit px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
-                    <div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
-                    <div @click="deleteAccount()"
-                        class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
-                        Delete account
-                    </div>
-                </div>
-
-            </CardTitled>
-        </div>
-
-    </div>
-
-</template>