1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<script lang="ts">
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>
<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>
|
