forge/Anvil
1
0
Fork 0
Code Pull requests Activity

feat: new projects page

Browse source 
This is the page that will be reached after a new project was added or
imported unless there have been projects before already.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-03-13 14:31:33 +01:00
parent edfbcce5a2
commit 08e739440e
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
14 changed files with 602 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/molecules/MoreFilters.svelte Normal file
View file

@ -0,0 +1,31 @@
<!--
Form to select more filters.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { TriangleDown24 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
submit: ''
};
</script>
<form class="bg-surface-100 h-8 flex flex-col justify-center px-4">
<button type="submit" class="flex submit text-surface-400">
{$_(i18n.submit)}
<TriangleDown24 fill="currentColor" class="ms-4 self-center" />
</button>
</form>

50
src/lib/components/molecules/Pagination.svelte Normal file
View file

@ -0,0 +1,50 @@
<!--
Pagination for a page.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { ChevronLeft24, ChevronRight24 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
next: '',
previous: ''
};
</script>
<nav class="flex gap-4 items-center justify-center">
<a href="?page=-1" class="flex gap-2 text-primary-500">
<ChevronLeft24 fill="currentColor" />
{$_(i18n.previous)}
</a>
<a href="?page=1" class="text-surface-500">1</a>
<a href="?page=2" class="text-surface-500">2</a>
<a href="?page=3" class="text-surface-500">3</a>
<a
href="?page=4"
class="bg-primary-500 text-white rounded h-8 w-8 flex justify-center items-center"
>
4
</a>
<a href="?page=5" class="text-surface-500">5</a>
<a href="?page=6" class="text-surface-500">6</a>
<span>…</span>
<a href="?page=17" class="text-surface-500">17</a>
<a href="?page=18" class="text-surface-500">18</a>
<a href="?page=+1" class="flex gap-2 text-primary-500">
{$_(i18n.next)}
<ChevronRight24 fill="currentColor" />
</a>
</nav>

31
src/lib/components/molecules/Projects.svelte Normal file
View file

@ -0,0 +1,31 @@
<!--
Filter for more projects.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { Filter24 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
submit: ''
};
</script>
<form>
<button type="submit" class="flex submit text-surface-400">
<Filter24 fill="currentColor" class="ms-4 self-center" />
{$_(i18n.submit)}
</button>
</form>

41
src/lib/components/molecules/Search.svelte Normal file
View file

@ -0,0 +1,41 @@
<!--
Form for searching a project.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { Search24 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
placeholder: '',
submit: ''
};
</script>
<form class="w-96">
<div class="flex input">
<Search24 fill="currentColor" class="ms-4 self-center" />
<input
id="search"
name="search"
type="search"
class="bg-surface-200 border-none"
placeholder={$_(i18n.placeholder)}
/>
<button type="submit" class="submit bg-surface-400 text-white w-40">
{$_(i18n.submit)}
</button>
</div>
</form>

31
src/lib/components/molecules/Starred.svelte Normal file
View file

@ -0,0 +1,31 @@
<!--
Filter for more favourites.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { Filter24 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
submit: ''
};
</script>
<form>
<button type="submit" class="flex submit text-surface-400">
<Filter24 fill="currentColor" class="ms-4 self-center" />
{$_(i18n.submit)}
</button>
</form>

108
src/lib/components/organisms/FileTable.svelte Normal file
View file

@ -0,0 +1,108 @@
<!--
FileTable organism.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import {
EyeClosed16,
RepoForked16,
Repo24,
Star16,
TriangleDown16,
TriangleDown24
} from 'svelte-octicons';
import { _ } from 'svelte-i18n';
/**
* Translation keys.
*/
export let i18n = {
heading: {
lastUpdated: '',
name: ''
},
table: {
updated: ''
}
};
/**
* Available projects.
*/
export let projects = [];
</script>
<table class="w-4/5 min-w-96 px-4 mx-auto">
<thead>
<tr class="flex justify-between gap-4 bg-surface-100 h-8">
<th class="flex text-surface-400 mx-4">
{$_(i18n.heading.name)}
<TriangleDown24 fill="currentColor" />
</th>
<th class="text-surface-400 mx-4">
{$_(i18n.heading.lastUpdated)}
</th>
</tr>
</thead>
<tbody>
{#each projects as project}
<tr class="flex justify-between gap-4 bg-white border">
<td class="flex mx-4 gap-4">
<Repo24 fill="currentColor" />
<div class="flex flex-col">
<div class="flex">
<span class="text-primary-500">{project.name}</span>
{#each project.members as member}
<a href="/people/{member.slug}">
<img src={member.avatar} alt={member.name} />
</a>
{/each}
</div>
<div class="text-surface-400">
{project.description}
</div>
<div class="flex gap-2">
{#each project.tags as tag}
<a href={tag.link} class="bg-primary-100 text-primary-500 rounded-full px-2">
{tag.name}
</a>
{/each}
</div>
</div>
</td>
<td>
<div class="flex flex-col px-4 py-4">
<div class="flex justify-between gap-4">
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
<RepoForked16 fill="currentColor" />
</button>
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
<Star16 fill="currentColor" />
</button>
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2 flex">
<EyeClosed16 fill="currentColor" />
<TriangleDown16 fill="currentColor" />
</button>
</div>
<div class="text-surface-400">
{$_(i18n.table.updated, {
values: {
relativeTime: project.lastUpdated.toISOString()
}
})}
</div>
</div>
</td>
</tr>
{/each}
</tbody>
</table>

25
src/lib/components/pages/Projects.svelte Normal file
View file

@ -0,0 +1,25 @@
<!--
Projects page.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import ProjectsTemplate from '../templates/Projects.svelte';
/**
* Data populated by SvelteKit
*/
export let data = {
projects: []
};
</script>
<ProjectsTemplate {data} />

7
src/lib/components/templates/Profile.svelte
View file

@ -20,6 +20,13 @@ You should have received a copy of the GNU Affero General Public License along w
import Created from '../atoms/Created.svelte';
import DisplayName from '../atoms/DisplayName.svelte';
/**
* Translation keys.
*/
const i18n = {
heading: 'page.profile.heading'
};
/**
* Required context for populating the template.
*/

76
src/lib/components/templates/Projects.svelte Normal file
View file

@ -0,0 +1,76 @@
<!--
Projects template.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { AlertFill16, Info16, Repo24, Upload16 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
import MoreFilters from '$lib/components/molecules/MoreFilters.svelte';
import Pagination from '$lib/components/molecules/Pagination.svelte';
import Projects from '$lib/components/molecules/Projects.svelte';
import Search from '$lib/components/molecules/Search.svelte';
import Starred from '$lib/components/molecules/Starred.svelte';
import FileTable from '$lib/components/organisms/FileTable.svelte';
/**
* Translation keys.
*/
const i18n = {
fileTable: {
heading: {
lastUpdated: 'page.projects.table.heading.last_updated',
name: 'page.projects.table.heading.name'
},
table: {
updated: 'page.projects.file_table.updated'
}
},
moreFilters: {
submit: 'page.projects.form.fields.more_filters.submit'
},
pagination: {
next: 'page.projects.nav.next',
previous: 'page.projects.nav.previous'
},
projects: {
submit: 'page.projects.form.fields.projects.submit'
},
search: {
placeholder: 'page.projects.form.fields.search.placeholder',
submit: 'page.projects.form.fields.search.submit'
},
starred: {
submit: 'page.projects.form.fields.starred.submit'
}
};
/**
* Required context for populating the template.
*/
export let data = {
projects: []
};
</script>
<section class="w-full flex flex-col gap-8 bg-white">
<div class="flex mx-auto w-full items-center justify-center">
<Search i18n={i18n.search} />
<Projects i18n={i18n.projects} />
<Starred i18n={i18n.starred} />
<MoreFilters i18n={i18n.moreFilters} />
</div>
<FileTable i18n={i18n.fileTable} projects={data.projects} />
<Pagination i18n={i18n.pagination} />
</section>

32
src/lib/i18n/locales/de.json
View file

@ -79,6 +79,38 @@
"heading": "Projekte"
}
},
"projects": {
"file_table": {
"updated": ""
},
"form": {
"fields": {
"more_filters": {
"submit": ""
},
"projects": {
"submit": ""
},
"search": {
"placeholder": "",
"submit": ""
},
"starred": {
"submit": ""
}
}
},
"nav": {
"next": "",
"previous": ""
},
"table": {
"heading": {
"last_updated": "",
"name": ""
}
}
},
"welcome": "Willkommen bei Anvil!"
}
}

32
src/lib/i18n/locales/en.json
View file

@ -79,6 +79,38 @@
"heading": "Projects"
}
},
"projects": {
"file_table": {
"updated": "Updated {relativeTime}"
},
"form": {
"fields": {
"more_filters": {
"submit": "More Filters"
},
"projects": {
"submit": "My projects"
},
"search": {
"placeholder": "Search or filter",
"submit": "Submit"
},
"starred": {
"submit": "Starred"
}
}
},
"nav": {
"next": "Next",
"previous": "Previous"
},
"table": {
"heading": {
"last_updated": "Last updated",
"name": "Name"
}
}
},
"welcome": "Welcome to Anvil!"
}
}

32
src/lib/i18n/locales/he.json
View file

@ -79,6 +79,38 @@
"heading": "פרויקטים"
}
},
"projects": {
"file_table": {
"updated": ""
},
"form": {
"fields": {
"more_filters": {
"submit": ""
},
"projects": {
"submit": ""
},
"search": {
"placeholder": "",
"submit": ""
},
"starred": {
"submit": ""
}
}
},
"nav": {
"next": "",
"previous": ""
},
"table": {
"heading": {
"last_updated": "",
"name": ""
}
}
},
"welcome": ""
}
}

92
src/routes/projects/+page.server.js Normal file
View file

@ -0,0 +1,92 @@
/* Providing context for ImportProject page.
* Copyright (C) 2024 André Jaenisch
* SPDX-FileCopyrightText: 2024 André Jaenisch
* SPDX-License-Identifier: AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
return {
projects: [
{
name: 'Project A',
description:
'This software project is a web-based application that will allow users to book appointments online.',
avatar: 'https://example.com',
// Date back three months
lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
members: [
{
name: 'Person A',
avatar: 'https://example.com',
slug: 'a'
},
{
name: 'Person B',
avatar: 'https://example.com',
slug: 'b'
},
{
name: 'Person C',
avatar: 'https://example.com',
slug: 'c'
}
],
tags: [
{
name: 'ActivityPub',
link: '/tag/ActivityPub'
},
{
name: 'css',
link: '/tag/css'
},
{
name: 'guile',
link: '/tag/guile'
}
]
},
{
name: 'Project B',
description:
'This software project is a web-based application that will allow users to book appointments online.',
avatar: 'https://example.com',
// Date back three months
lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
members: [
{
name: 'Person A',
avatar: 'https://example.com',
slug: 'a'
},
{
name: 'Person B',
avatar: 'https://example.com',
slug: 'b'
}
],
tags: [
{
name: 'ActivityPub',
link: '/tag/ActivityPub'
},
{
name: 'css',
link: '/tag/css'
},
{
name: 'guile',
link: '/tag/guile'
}
]
}
]
};
}

14
src/routes/projects/+page.svelte Normal file
View file

@ -0,0 +1,14 @@
<!--
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<script>
import Projects from '$lib/components/pages/Projects.svelte';
/** @type {import('./types').PageData} */
export let data;
</script>
<Projects {data} />