From 4b42c5235482fe0d3811b4e2936614c79e20d970 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 15 Oct 2022 16:40:58 +0800
Subject: feat: !WIP start of create project page

---
 .../src/routes/(main)/(app)/projects/+page.svelte  | 150 ++++++++++-----------
 1 file changed, 74 insertions(+), 76 deletions(-)

(limited to 'code/app/src/routes/(main)/(app)/projects/+page.svelte')

diff --git a/code/app/src/routes/(main)/(app)/projects/+page.svelte b/code/app/src/routes/(main)/(app)/projects/+page.svelte
index ceb08b4..55e9372 100644
--- a/code/app/src/routes/(main)/(app)/projects/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/+page.svelte
@@ -21,7 +21,7 @@
       tempProjects.push({
         id: crypto.randomUUID(),
         name: faker.word.preposition(),
-        start: Temporal.Now.plainDateISO(),
+        start: Temporal.Now.plainDateISO().toLocaleString(),
         description: faker.lorem.words(3),
         members: [],
         status: ProjectStatus.IDLE,
@@ -52,85 +52,83 @@
   const { filterValue } = pluginStates.filter;
 </script>
 
-<div class="py-2 px-5">
-  <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 inline-flex gap-1 sm:flex-none">
-      <Input icon={MagnifyingGlassIcon} placeholder="Search" bind:value={$filterValue} />
-      <Button text="Create project" />
-    </div>
+<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="-mx-2 mt-6 rounded-md shadow overflow-auto max-h-[80vh] sm:-mx-6 md:mx-0">
-    <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} class="shadow-sm">
-              {#each headerRow.cells as cell (cell.id)}
-                <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-                  <th
-                    {...attrs}
-                    scope="col"
-                    class="sticky top-0 bg-gray-50 bg-opacity-100 whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
-                    <div class="group inline-flex">
-                      <Render of={cell.render()} />
-                      <span
-                        on:click={props.sort.toggle}
-                        class="{props.sort.disabled
-                          ? 'bg-gray-200 text-gray-900 group-hover:bg-gray-300'
-                          : 'invisible text-gray-400 group-hover:visible group-focus:visible'}
+  <div class="mt-4 sm:mt-0 sm:ml-16 inline-flex gap-1 sm:flex-none">
+    <Input icon={MagnifyingGlassIcon} placeholder="Search" bind:value={$filterValue} />
+    <Button text="Create project" href="/projects/new" />
+  </div>
+</div>
+<div class="-mx-2 mt-6 rounded-md shadow overflow-auto max-h-[80vh] sm:-mx-6 md:mx-0">
+  <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} class="shadow-sm">
+            {#each headerRow.cells as cell (cell.id)}
+              <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
+                <th
+                  {...attrs}
+                  scope="col"
+                  class="sticky top-0 bg-gray-50 bg-opacity-100 whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900"
+                >
+                  <div class="group inline-flex">
+                    <Render of={cell.render()} />
+                    <span
+                      on:click={props.sort.toggle}
+                      class="{props.sort.disabled
+                        ? 'bg-gray-200 text-gray-900 group-hover:bg-gray-300'
+                        : 'invisible text-gray-400 group-hover:visible group-focus:visible'}
                           {props.sort.disabled ? '' : 'cursor-pointer'}
                           ml-2 flex-none rounded"
-                      >
-                        {#if props.sort.order === "asc"}
-                          <ChevronUpIcon />
-                        {:else if props.sort.order === "desc"}
-                          <ChevronDownIcon />
-                        {:else if !props.sort.disabled}
-                          <ChevronUpDownIcon />
-                        {/if}
-                      </span>
-                      {#if cell.id === "status"}
-                        <span class="invisible text-gray-400 cursor-pointer group-hover:visible group-focus:visible ml-2 flex-none rounded">
-                          <FunnelIcon />
-                        </span>
+                    >
+                      {#if props.sort.order === "asc"}
+                        <ChevronUpIcon />
+                      {:else if props.sort.order === "desc"}
+                        <ChevronDownIcon />
+                      {:else if !props.sort.disabled}
+                        <ChevronUpDownIcon />
                       {/if}
-                    </div>
-                  </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 {...attrs} class="whitespace-nowrap px-2 py-2 text-sm">
-                    {#if cell.id === "name"}
-                      <span class="link" title="Open project" on:click={() => goto_project(materialisedCell.toString())}>
-                        <Render of={materialisedCell} />
+                    </span>
+                    {#if cell.id === "status"}
+                      <span class="invisible text-gray-400 cursor-pointer group-hover:visible group-focus:visible ml-2 flex-none rounded">
+                        <FunnelIcon />
                       </span>
-                    {:else if cell.id === "status"}
-                      <ProjectStatusBadge status={materialisedCell.toString()} />
-                    {:else}
-                      <Render of={materialisedCell} />
                     {/if}
-                  </td>
-                </Subscribe>
-              {/each}
-            </tr>
-          </Subscribe>
-        {/each}
-      </tbody>
-    </table>
-  </div>
+                  </div>
+                </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 {...attrs} class="whitespace-nowrap px-2 py-2 text-sm">
+                  {#if cell.id === "name"}
+                    <span class="link" title="Open project" on:click={() => goto_project(materialisedCell.toString())}>
+                      <Render of={materialisedCell} />
+                    </span>
+                  {:else if cell.id === "status"}
+                    <ProjectStatusBadge status={materialisedCell.toString()} />
+                  {:else}
+                    <Render of={materialisedCell} />
+                  {/if}
+                </td>
+              </Subscribe>
+            {/each}
+          </tr>
+        </Subscribe>
+      {/each}
+    </tbody>
+  </table>
 </div>
-- 
cgit v1.3