diff options
Diffstat (limited to 'code/app/src/routes/(main)/(app)/projects/+page.svelte')
| -rw-r--r-- | code/app/src/routes/(main)/(app)/projects/+page.svelte | 150 |
1 files changed, 74 insertions, 76 deletions
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> |