feat: !WIP implement projects table

1 files changed, 84 insertions, 2 deletions

diff --git a/code/app/src/routes/(main)/(app)/projects/+page.svelte b/code/app/src/routes/(main)/(app)/projects/+page.svelte
index 683938a..ad273ab 100644
--- a/code/app/src/routes/(main)/(app)/projects/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/+page.svelte
@@ -1,5 +1,87 @@
 <script lang="ts">
-    import { createSvelteTable } from "@tanstack/svelte-table";
+  import { Button } from "$lib/components";
+  import type { Project } from "$lib/models/projects/Project";
+  import { onMount } from "svelte";
+  import { faker } from "@faker-js/faker";
+  import { Temporal } from "temporal-polyfill";
+  import { createTable, Subscribe, Render } from "svelte-headless-table";
+  import { ProjectStatus } from "$lib/models/projects/ProjectStatus";
+  import { writable, type Writable } from "svelte/store";
+  import LL from "$lib/i18n/i18n-svelte";
+
+  let projects: Writable<Array<Project>> = writable([]);
+
+  onMount(() => {
+    let i = 0;
+    const tempProjects = [];
+    while (i < 101) {
+      tempProjects.push({
+        id: crypto.randomUUID(),
+        name: faker.word.preposition(),
+        start: Temporal.Now.plainDateISO(),
+        description: faker.lorem.words(3),
+        members: [],
+        status: ProjectStatus.IDLE,
+      });
+      i++;
+    }
+    projects.set(tempProjects);
+  });
+
+  const table = createTable(projects);
+  const columns = table.createColumns([
+    table.column({ header: $LL.name(), accessor: "name" }),
+    table.column({ header: "Status", accessor: "status" }),
+    table.column({ header: "Start", accessor: "start" }),
+    table.column({ header: "Description", accessor: "description" }),
+  ]);
+
+  const { headerRows, rows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns);
 </script>
 
-<h1>Projects</h1>
+<div class="px-4 sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold text-gray-900">Projects</h1>
+      <p class="mt-2 text-sm text-gray-700">A list of all the projects in your organsation.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <Button text="Create project" />
+    </div>
+  </div>
+  <div class="-mx-4 mt-8 overflow-hidden sm:-mx-6 md:mx-0 MuonW PowerTable">
+    <table {...$tableAttrs} class="min-w-full divide-y divide-gray-300">
+      <thead class="bg-gray-50">
+        {#each $headerRows as headerRow (headerRow.id)}
+          <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
+            <tr {...rowAttrs}>
+              {#each headerRow.cells as cell (cell.id)}
+                <Subscribe attrs={cell.attrs()} let:attrs>
+                  <th {...attrs} class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                    <Render of={cell.render()} />
+                  </th>
+                </Subscribe>
+              {/each}
+            </tr>
+          </Subscribe>
+        {/each}
+      </thead>
+      <tbody {...$tableBodyAttrs} class="divide-y divide-gray-200 bg-white">
+        {#each $rows as row (row.id)}
+          <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+            <tr {...rowAttrs}>
+              {#each row.cells as cell (cell.id)}
+                {@const materialisedCell = cell.render()}
+                <Subscribe attrs={cell.attrs()} let:attrs>
+                  <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6" {...attrs}>
+                    <Render of={materialisedCell} />
+                  </td>
+                </Subscribe>
+              {/each}
+            </tr>
+          </Subscribe>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>