diff --git a/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx b/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx index b0cd1fc7e..8d890ee4b 100644 --- a/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx +++ b/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx @@ -23,6 +23,9 @@ export default function FieldMappingsTable({ isLoading }: { mappings: Mapping[] | undefined; isLoading: boolean }) { + const countDefined = mappings?.filter(mapping => mapping.status === "defined").length; + const countMapped = mappings?.filter(mapping => mapping.status === "mapped").length; + return ( <>
@@ -32,7 +35,7 @@ export default function FieldMappingsTable({ Defined -

0

+

{countDefined}

 @@ -41,7 +44,7 @@ export default function FieldMappingsTable({ Mapped -

3

+

{countMapped}
diff --git a/packages/webapp/src/components/dashboard/components/user-nav.tsx b/packages/webapp/src/components/dashboard/components/user-nav.tsx index 8baf833a0..bb58a0fa8 100644 --- a/packages/webapp/src/components/dashboard/components/user-nav.tsx +++ b/packages/webapp/src/components/dashboard/components/user-nav.tsx @@ -13,8 +13,29 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" +import useProfile from "@/hooks/useProfile"; +import useProfileStore from "@/state/profileStore"; +import { useEffect } from "react"; export function UserNav() { + const {data} = useProfile(); + if(!data) { + console.log("loading profiles"); + } + const { profile, setProfile } = useProfileStore(); + + useEffect(()=> { + if(data){ + setProfile({ + id_user: data[0].id_user, + email: data[0].email, + first_name: data[0].first_name, + last_name: data[0].last_name, + id_organization: data[0].id_organization as string, + }) + } + }, [data, setProfile]); + return ( @@ -28,15 +49,16 @@ import {
-

shadcn

+

+ {profile && profile.first_name} +

- m@example.com + {profile && profile.email}

- Profile diff --git a/packages/webapp/src/components/shared/team-switcher.tsx b/packages/webapp/src/components/shared/team-switcher.tsx index 452efce0e..d544530e5 100644 --- a/packages/webapp/src/components/shared/team-switcher.tsx +++ b/packages/webapp/src/components/shared/team-switcher.tsx @@ -41,9 +41,12 @@ import { } from "@/components/ui/popover" import useProjectMutation from "@/hooks/mutations/useProjectMutation" import useOrganisationMutation from "@/hooks/mutations/useOrganisationMutation" -import { useState } from "react" -import useProjectStore, { projects } from "@/state/projectStore" +import { useEffect, useState } from "react" +import useProjectStore from "@/state/projectStore" import useOrganisationStore, { organisations } from "@/state/organisationStore" +import useProfileStore from "@/state/profileStore" +import useProjects from "@/hooks/useProjects" +import { Skeleton } from "../ui/skeleton" type PopoverTriggerProps = React.ComponentPropsWithoutRef @@ -64,10 +67,21 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { const [orgName, setOrgName] = useState(''); const [projectName, setProjectName] = useState(''); + const { data : projects, isLoading: isloadingProjects } = useProjects(); + + const { selectedProject, setSelectedProject } = useProjectStore(); const { selectedOrganisation, setSelectedOrganisation } = useOrganisationStore(); + const { profile } = useProfileStore(); + + useEffect(()=>{ + if(projects){ + setSelectedProject(projects[0]); + } + },[projects, setSelectedProject]) + const handleOpenChange = (open: boolean) => { setShowNewDialog(prevState => ({ ...prevState, open })); @@ -76,6 +90,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { const { mutate: mutateProject } = useProjectMutation(); const { mutate: mutateOrganisation } = useOrganisationMutation(); + //TODO const handleOrgSubmit = (e: React.FormEvent) => { e.preventDefault(); // Prevent default form submission mutateOrganisation({ @@ -89,7 +104,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { e.preventDefault(); // Prevent default form submission mutateProject({ name: projectName, - id_organization: "890e7d54-7620-43bc-9cdb-48a5fcd85bde", //TODO + id_organization: profile!.id_organization, }); setShowNewDialog({open: false}) }; @@ -106,7 +121,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { className={cn("w-[250px] justify-between", className)} > - {selectedProject.label} + {selectedProject?.name} @@ -116,34 +131,52 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { Not found. - {projects.map((project) => ( - { - setSelectedProject(project) - setOpen(false) - }} - className="text-sm" - > - - ( + { + setSelectedProject(project) + setOpen(false) + }} + className="text-sm" + > + + + SC + + {project.name} + - SC - - {project.label} - - - ))} + + )) : Array.from({ length: 6 }).map((_, index) => ( + + + + SC + + + + ) + ) + } {organisations.map((organisation) => ( diff --git a/packages/webapp/src/components/shared/user-nav.tsx b/packages/webapp/src/components/shared/user-nav.tsx deleted file mode 100644 index 088cfc9b3..000000000 --- a/packages/webapp/src/components/shared/user-nav.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { - Avatar, - AvatarFallback, - AvatarImage, - } from "@/components/ui/avatar" - import { Button } from "@/components/ui/button" - import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuTrigger, - } from "@/components/ui/dropdown-menu" - - export function UserNav() { - return ( - - - - - - -
-

shadcn

-

- m@example.com -

-
- - - - - Profile - ⇧⌘P - - - Billing - ⌘B - - - Settings - ⌘S - - New Team - - - - Log out - ⇧⌘Q - - - - ) - } \ No newline at end of file diff --git a/packages/webapp/src/hooks/useProfile.tsx b/packages/webapp/src/hooks/useProfile.tsx index d9bd6022a..b21875319 100644 --- a/packages/webapp/src/hooks/useProfile.tsx +++ b/packages/webapp/src/hooks/useProfile.tsx @@ -1 +1,19 @@ //import { useQuery } from '@tanstack/react-query'; +import config from '@/utils/config'; +import { useQuery } from '@tanstack/react-query'; +import {users as User} from "@api/exports"; + +const useProfile = () => { + //TODO + return useQuery({ + queryKey: ['profile'], + queryFn: async (): Promise => { + const response = await fetch(`${config.API_URL}/auth/users`); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + } + }); +}; +export default useProfile; diff --git a/packages/webapp/src/state/organisationStore.ts b/packages/webapp/src/state/organisationStore.ts index 4ed9563fb..5f93fc36a 100644 --- a/packages/webapp/src/state/organisationStore.ts +++ b/packages/webapp/src/state/organisationStore.ts @@ -4,11 +4,7 @@ export const organisations = [ { label: "Acme Inc.", value: "acme-inc", - }, - { - label: "Monsters Inc.", - value: "monsters", - }, + } ]; interface OrganisationT { diff --git a/packages/webapp/src/state/profileStore.ts b/packages/webapp/src/state/profileStore.ts new file mode 100644 index 000000000..38f5feeab --- /dev/null +++ b/packages/webapp/src/state/profileStore.ts @@ -0,0 +1,22 @@ +import { create } from 'zustand'; + +interface User { + id_user: string; + email: string; + first_name: string; + last_name: string; + id_organization: string; +} + +interface ProfileState { + profile: User | null; + setProfile: (profile: User) => void; +} + + +const useProfileStore = create()((set) => ({ + profile: null, + setProfile: (profile_: User) => set({ profile: profile_ }), +})); + +export default useProfileStore; diff --git a/packages/webapp/src/state/projectStore.ts b/packages/webapp/src/state/projectStore.ts index 9bfa4ac78..925fd4f36 100644 --- a/packages/webapp/src/state/projectStore.ts +++ b/packages/webapp/src/state/projectStore.ts @@ -1,33 +1,14 @@ import { create } from 'zustand'; - -export const projects = [ - { - label: "Financial Project", - value: "personal", - }, - { - label: "Data Project", - value: "personal1", - }, - { - label: "Marketing Project", - value: "personal2", - }, -]; - -interface ProjectT { - label: string; - value: string; -} +import {projects as Project} from "@api/exports"; interface ProjectState { - selectedProject: ProjectT; - setSelectedProject: (project: ProjectT) => void; + selectedProject: Project | null; + setSelectedProject: (project: Project) => void; } const useProjectStore = create()((set) => ({ - selectedProject: projects[0], - setSelectedProject: (project: ProjectT) => set({ selectedProject: project }), + selectedProject: null, + setSelectedProject: (project: Project) => set({ selectedProject: project }), })); export default useProjectStore;