feat(Roles): add inheritance count to roles overview

simonknittel · Jan 13, 2025 · aa27284 · aa27284
1 parent b823ae8
commit aa27284
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 28 deletions.
diff --git a/app/src/app/app/roles/[id]/inheritance/page.tsx b/app/src/app/app/roles/[id]/inheritance/page.tsx
@@ -67,7 +67,7 @@ export default async function Page({ params }: Props) {
 
       <section className="rounded-2xl bg-neutral-800/50 p-4 lg:p-8 mt-4">
         <h2 className="text-xl font-bold mb-2">Vererbungen</h2>
-        <p>
+        <p className="max-w-prose">
           Die Rolle <SingleRole role={role} className="inline-flex align-sub" />{" "}
           erhält alle Berechtigungen von den folgenden ausgewählten Rollen. Im
           Karrieresystem gelten die folgenden Rollen ebenfalls als

diff --git a/app/src/events/components/ParticipantsTab.tsx b/app/src/events/components/ParticipantsTab.tsx
@@ -10,13 +10,13 @@ import { Suspense } from "react";
 import type { z } from "zod";
 import { getParticipants } from "../utils/getParticipants";
 
+const GRID_COLS = "grid-cols-[160px_1fr]";
+
 type Props = Readonly<{
   className?: string;
   event: Awaited<ReturnType<typeof getEvent>>["data"];
 }>;
 
-const GRID_COLS = "grid-cols-[160px,1fr]";
-
 export const ParticipantsTab = async ({ className, event }: Props) => {
   const authentication = await requireAuthentication();
 

diff --git a/app/src/roles/components/RolesTile.tsx b/app/src/roles/components/RolesTile.tsx
@@ -4,6 +4,8 @@ import clsx from "clsx";
 import Image from "next/image";
 import { getRoles } from "../queries";
 
+const GRID_COLS = "grid-cols-[1fr_128px]";
+
 type Props = Readonly<{
   className?: string;
 }>;
@@ -13,32 +15,69 @@ export const RolesTile = async ({ className }: Props) => {
 
   return (
     <section
-      className={clsx(className, "p-4 lg:p-8 rounded-2xl bg-neutral-800/50 ")}
+      className={clsx(
+        "p-4 lg:p-8 rounded-2xl bg-neutral-800/50 overflow-hidden",
+        className,
+      )}
     >
-      {roles.map((role) => (
-        <Link
-          key={role.id}
-          href={`/app/roles/${role.id}`}
-          className="flex items-center gap-2 hover:bg-neutral-800 p-2 rounded"
-          prefetch={false}
-        >
-          {role.iconId ? (
-            <div className="aspect-square size-8 flex items-center justify-center rounded overflow-hidden">
-              <Image
-                src={`https://${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${role.iconId}`}
-                alt=""
-                width={32}
-                height={32}
-                className="max-w-full max-h-full"
-              />
-            </div>
-          ) : (
-            <div className="size-8" />
-          )}
-
-          <p className="font-bold">{role.name}</p>
-        </Link>
-      ))}
+      <table className="w-full">
+        <thead>
+          <tr
+            className={clsx(
+              "grid items-center gap-4 text-left text-neutral-500 -mx-2",
+              GRID_COLS,
+            )}
+          >
+            <th className="px-2">Rolle</th>
+            <th className="px-2">Vererbungen</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {roles.map((role) => (
+            <tr
+              key={role.id}
+              className={clsx("grid items-center gap-4 -mx-2", GRID_COLS)}
+            >
+              <td className="h-14 overflow-hidden">
+                <Link
+                  href={`/app/roles/${role.id}`}
+                  className="flex items-center gap-2 hover:bg-neutral-800 px-2 rounded h-full"
+                  prefetch={false}
+                >
+                  {role.iconId ? (
+                    <div className="aspect-square size-8 flex items-center justify-center rounded overflow-hidden flex-none">
+                      <Image
+                        src={`https://${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${role.iconId}`}
+                        alt=""
+                        width={32}
+                        height={32}
+                        className="max-w-full max-h-full"
+                      />
+                    </div>
+                  ) : (
+                    <div className="size-8 flex-none" />
+                  )}
+
+                  <p className="font-bold overflow-hidden text-ellipsis whitespace-nowrap">
+                    {role.name}
+                  </p>
+                </Link>
+              </td>
+
+              <td className="h-14">
+                <Link
+                  href={`/app/roles/${role.id}/inheritance`}
+                  className="flex items-center gap-2 hover:bg-neutral-800 px-2 rounded h-full"
+                  prefetch={false}
+                >
+                  {role.inherits.length > 0 ? role.inherits.length : "-"}
+                </Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
 
       {roles.length <= 0 && (
         <p className="text-neutral-500 italic">Keine Rollen vorhanden</p>