From 4dbef3fcd7a14437d55c555cf10d50de8e50d7d1 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Fri, 9 Dec 2022 11:57:12 +0900
Subject: feat: Move everything out of $lib

---
 .../src/routes/(main)/(app)/projects/+page.svelte  | 228 +++++++++++----------
 .../(main)/(app)/projects/create/+page.svelte      |  20 +-
 2 files changed, 127 insertions(+), 121 deletions(-)

(limited to 'code/app/src/routes/(main)/(app)/projects')

diff --git a/code/app/src/routes/(main)/(app)/projects/+page.svelte b/code/app/src/routes/(main)/(app)/projects/+page.svelte
index e39a886..1508118 100644
--- a/code/app/src/routes/(main)/(app)/projects/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/+page.svelte
@@ -1,137 +1,143 @@
 <script lang="ts">
-  import { Button, ProjectStatusBadge, Input } 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 { addSortBy, addTableFilter } from "svelte-headless-table/plugins";
-  import { ProjectStatus } from "$lib/models/projects/ProjectStatus";
-  import { writable, type Writable } from "svelte/store";
-  import { ChevronDownIcon, ChevronUpIcon, ChevronUpDownIcon, MagnifyingGlassIcon, FunnelIcon } from "$lib/components/icons";
-  import LL from "$lib/i18n/i18n-svelte";
-  import { goto } from "$app/navigation";
+    import {Button, ProjectStatusBadge, Input} from "$components";
+    import type {Project} from "$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 {addSortBy, addTableFilter} from "svelte-headless-table/plugins";
+    import {ProjectStatus} from "$models/projects/ProjectStatus";
+    import {writable, type Writable} from "svelte/store";
+    import {
+        ChevronDownIcon,
+        ChevronUpIcon,
+        ChevronUpDownIcon,
+        MagnifyingGlassIcon,
+        FunnelIcon,
+    } from "$components/icons";
+    import LL from "$i18n/i18n-svelte";
+    import {goto} from "$app/navigation";
 
-  let projects: Writable<Array<Project>> = writable([]);
+    let projects: Writable<Array<Project>> = writable([]);
 
-  onMount(() => {
-    let i = 0;
-    const tempProjects = [];
-    while (i < 101) {
-      tempProjects.push({
-        id: crypto.randomUUID(),
-        name: faker.lorem.word(),
-        start: Temporal.Now.plainDateISO().toLocaleString(),
-        description: faker.lorem.words(3),
-        members: [],
-        status: ProjectStatus.IDLE,
-      });
-      i++;
-    }
-    projects.set(tempProjects);
-  });
+    onMount(() => {
+        let i = 0;
+        const tempProjects = [];
+        while (i < 101) {
+            tempProjects.push({
+                id: crypto.randomUUID(),
+                name: faker.lorem.word(),
+                start: Temporal.Now.plainDateISO().toLocaleString(),
+                description: faker.lorem.words(3),
+                members: [],
+                status: ProjectStatus.IDLE,
+            });
+            i++;
+        }
+        projects.set(tempProjects);
+    });
 
-  function on_open_project(event) {
-    if (event.code && (event.code !== "Enter" || event.code !== "Space")) return;
-    const name = event.target.innerText;
-    const projectId = $projects.find((p) => p.name === name).id;
-    goto("/projects/" + projectId);
-  }
+    function on_open_project(event) {
+        if (event.code && (event.code !== "Enter" || event.code !== "Space")) return;
+        const name = event.target.innerText;
+        const projectId = $projects.find((p) => p.name === name).id;
+        goto("/projects/" + projectId);
+    }
 
-  const table = createTable(projects, {
-    sort: addSortBy(),
-    filter: addTableFilter(),
-  });
+    const table = createTable(projects, {
+        sort: addSortBy(),
+        filter: addTableFilter(),
+    });
 
-  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", plugins: { sort: { disable: true } } }),
-  ]);
+    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", plugins: {sort: {disable: true}}}),
+    ]);
 
-  const { headerRows, rows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(columns);
-  const { filterValue } = pluginStates.filter;
+    const {headerRows, rows, tableAttrs, tableBodyAttrs, pluginStates} = table.createViewModel(columns);
+    const {filterValue} = pluginStates.filter;
 </script>
 
 <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" href="/projects/create" />
-  </div>
+    <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" href="/projects/create"/>
+    </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}
-                      on:keypress={props.sort.toggle}
-                      class="{props.sort.disabled
+    <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}
+                                            on:keypress={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 />
+                        <ChevronUpIcon/>
                       {:else if props.sort.order === "desc"}
-                        <ChevronDownIcon />
+                        <ChevronDownIcon/>
                       {:else if !props.sort.disabled}
-                        <ChevronUpDownIcon />
+                        <ChevronUpDownIcon/>
                       {/if}
                     </span>
-                    {#if cell.id === "status"}
+                                    {#if cell.id === "status"}
                       <span class="invisible text-gray-400 cursor-pointer group-hover:visible group-focus:visible ml-2 flex-none rounded">
-                        <FunnelIcon />
+                        <FunnelIcon/>
                       </span>
-                    {/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"}
+                                    {/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={on_open_project} on:keypress={on_open_project}>
-                      <Render of={materialisedCell} />
+                      <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>
+                                {:else if cell.id === "status"}
+                                    <ProjectStatusBadge status={materialisedCell.toString()}/>
+                                {:else}
+                                    <Render of={materialisedCell}/>
+                                {/if}
+                            </td>
+                        </Subscribe>
+                    {/each}
+                </tr>
+            </Subscribe>
+        {/each}
+        </tbody>
+    </table>
 </div>
diff --git a/code/app/src/routes/(main)/(app)/projects/create/+page.svelte b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
index 1741506..ab38b2e 100644
--- a/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { useSWR } from "sswr";
-    import { Input, TextArea, Combobox, Button } from "$lib/components";
-    import type { ProjectMember } from "$lib/models/projects/ProjectMember";
-    import LL from "$lib/i18n/i18n-svelte";
+    import {useSWR} from "sswr";
+    import {Input, TextArea, Combobox, Button} from "$components";
+    import type {ProjectMember} from "$models/projects/ProjectMember";
+    import LL from "$i18n/i18n-svelte";
 
     const formData = {
         name: {
@@ -36,16 +36,16 @@
         alert("Submitted");
     }
 
-    const { data: members } = useSWR("projectMembers");
+    const {data: members} = useSWR("projectMembers");
 </script>
 
 <h1>Create a new project</h1>
 <form on:submit|preventDefault={submit_form_async} class="max-w-md flex flex-col gap-2">
-    <Input label="Name" bind:value={formData.name.value} errors={formData.name.errors} required />
-    <TextArea label="Description" bind:value={formData.description.value} errors={formData.description.errors} />
+    <Input label="Name" bind:value={formData.name.value} errors={formData.name.errors} required/>
+    <TextArea label="Description" bind:value={formData.description.value} errors={formData.description.errors}/>
     <section class="grid grid-flow-row sm:grid-flow-col gap-2">
-        <Input type="date" label="Start" bind:value={formData.start.value} errors={formData.start.errors} />
-        <Input type="date" label="Stop" bind:value={formData.stop.value} errors={formData.stop.errors} />
+        <Input type="date" label="Start" bind:value={formData.start.value} errors={formData.start.errors}/>
+        <Input type="date" label="Stop" bind:value={formData.stop.value} errors={formData.stop.errors}/>
     </section>
     <Combobox options={$members} label={$LL.app.members()}>
         <svelte:fragment slot="no-records">
@@ -57,5 +57,5 @@
             {/if}
         </svelte:fragment>
     </Combobox>
-    <Button text={$LL.submit()} />
+    <Button text={$LL.submit()}/>
 </form>
-- 
cgit v1.3