initial teammate panel

JulienR1 · Nov 3, 2023 · 573054d · 573054d
1 parent ae4a95a
commit 573054d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 17 deletions.
diff --git a/web/src/modules/dashboards/panels/teammates/service.ts b/web/src/modules/dashboards/panels/teammates/service.ts
@@ -7,6 +7,10 @@ export async function fetchTeammates([userId, dashboardId]: [
   number,
   number,
 ]): Promise<TeammateSchema[]> {
+  if (userId < 0 || dashboardId < 0) {
+    return [];
+  }
+
   const teammates = await request(`/dashboards/${dashboardId}/users`).get(
     z.array(TeammateSchema),
   );

diff --git a/web/src/modules/dashboards/panels/teammates/teammates-panel.tsx b/web/src/modules/dashboards/panels/teammates/teammates-panel.tsx
@@ -1,11 +1,8 @@
 import { useAuth } from "@modules/auth";
 import { useDashboard } from "@modules/dashboards";
-import {
-  Component,
-  ResourceSource,
-  createEffect,
-  createResource,
-} from "solid-js";
+import { Profile } from "@modules/layout";
+import { Card } from "@ui";
+import { Component, Index, Show, Suspense, createResource } from "solid-js";
 import { fetchTeammates } from "./service";
 
 type TeammatesPanelProps = {};
@@ -14,15 +11,52 @@ export const TeammatesPanel: Component<TeammatesPanelProps> = (props) => {
   const auth = useAuth();
   const dashboard = useDashboard();
 
-  const params: ResourceSource<[number, number]> = () => [
-    auth.user()?.id ?? -1,
-    dashboard.selectedDashboard()?.id ?? -1,
-  ];
-  const [teammates] = createResource(params, fetchTeammates, {
-    initialValue: [],
-  });
+  const [teammates] = createResource(
+    () =>
+      [
+        auth.user()?.id ?? -1,
+        dashboard.selectedDashboard()?.id ?? -1,
+      ] satisfies [number, number],
+    fetchTeammates,
+  );
 
-  createEffect(() => console.log(teammates()));
+  const isPersonalDashboard = () =>
+    dashboard.selectedDashboard()?.key === "personal";
 
-  return <>teammates</>;
+  return (
+    <Card title="Équipe">
+      <Suspense fallback={<p>loading</p>}>
+        <Show
+          when={!isPersonalDashboard()}
+          fallback={
+            <p class="text-xs opacity-75 md:text-sm">
+              Ce tableau de bord est seulement le vôtre.
+            </p>
+          }
+        >
+          <Show
+            when={(teammates() ?? []).length > 0}
+            fallback={
+              <p class="text-xs opacity-75 md:text-sm">
+                Aucune autre personne ayant accès à ce tableau de bord
+              </p>
+            }
+          >
+            <ul>
+              <Index each={teammates()}>
+                {(teammate) => (
+                  <li class="flex items-center gap-2">
+                    <Profile user={teammate} />
+                    <p class="text-sm capitalize md:text-sm">
+                      {teammate().firstname} {teammate().lastname}
+                    </p>
+                  </li>
+                )}
+              </Index>
+            </ul>
+          </Show>
+        </Show>
+      </Suspense>
+    </Card>
+  );
 };
diff --git a/web/src/modules/layout/components/profile.tsx b/web/src/modules/layout/components/profile.tsx
@@ -1,9 +1,11 @@
 import { UserSchema } from "@modules/auth";
 import { Skeleton } from "@ui";
-import { Component, Resource, Show, Suspense } from "solid-js";
+import { Accessor, Component, Resource, Show, Suspense } from "solid-js";
+
+type User = Omit<UserSchema, "username"> | null;
 
 type ProfileProps = {
-  user: Resource<UserSchema | null>;
+  user: Resource<User> | Accessor<User>;
 };
 
 export const Profile: Component<ProfileProps> = (props) => {