Jobs list (#120)

sorting and filtering functionality for jobs --------- Co-authored-by: Andreas Nordahl <andnorda@gmail.com>
nais · Jan 28, 2025 · 9a0fcc0 · 9a0fcc0
1 parent 2ade48c
commit 9a0fcc0
Show file tree

Hide file tree

Showing 11 changed files with 696 additions and 204 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
 		"test": "vitest"
 	},
 	"devDependencies": {
-		"@nais/ds-svelte-community": "^1.0.0-next.16",
+		"@nais/ds-svelte-community": "^1.0.0-next.18",
 		"@navikt/ds-css": "^7.9.1",
 		"@sveltejs/adapter-node": "^5.2.11",
 		"@sveltejs/kit": "^2.15.2",

diff --git a/src/lib/icons/SortAscendingIcon.svelte b/src/lib/icons/SortAscendingIcon.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		size?: string;
+		[key: string]: unknown;
+	}
+
+	let { size = '1em', ...rest }: Props = $props();
+</script>
+
+<svg
+	{...rest}
+	width={size}
+	height={size}
+	viewBox="0 0 15 10"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M0.75 9.16634C0.75 9.51152 0.893908 9.79134 1.07143 9.79134H7.92857C8.10609 9.79134 8.25 9.51152 8.25 9.16634C8.25 8.82116 8.10609 8.54134 7.92857 8.54134H1.07143C0.893909 8.54134 0.75 8.82116 0.75 9.16634ZM0.75 5.00033C0.75 5.3455 0.90816 5.62533 1.10326 5.62533H5.81341C6.00851 5.62533 6.16667 5.3455 6.16667 5.00033C6.16667 4.65515 6.00851 4.37533 5.81341 4.37533H1.10326C0.90816 4.37533 0.75 4.65515 0.75 5.00033ZM1.20455 1.45866C0.953507 1.45866 0.75 1.17884 0.75 0.83366C0.75 0.488484 0.953507 0.20866 1.20455 0.20866H3.62879C3.87983 0.20866 4.08333 0.488484 4.08333 0.83366C4.08333 1.17884 3.87983 1.45866 3.62879 1.45866H1.20455Z"
+		fill="#010B18"
+		fill-opacity="0.68"
+	/>
+	<path
+		d="M10.9817 0.380004C10.7376 0.155452 10.3418 0.155452 10.0978 0.380004L7.18111 3.06334C6.93703 3.28789 6.93703 3.65196 7.18111 3.87651C7.42518 4.10106 7.82091 4.10106 8.06499 3.87651L9.91471 2.17476V9.21992C9.91471 9.53748 10.1945 9.79492 10.5397 9.79492C10.8849 9.79492 11.1647 9.53748 11.1647 9.21992V2.17476L13.0144 3.87651C13.2585 4.10106 13.6542 4.10106 13.8983 3.87651C14.1424 3.65196 14.1424 3.28789 13.8983 3.06334L10.9817 0.380004Z"
+		fill="#010B18"
+		fill-opacity="0.68"
+	/>
+</svg>
diff --git a/src/lib/icons/SortDescendingIcon.svelte b/src/lib/icons/SortDescendingIcon.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		size?: string;
+		[key: string]: unknown;
+	}
+
+	let { size = '1em', ...rest }: Props = $props();
+</script>
+
+<svg
+	{...rest}
+	width={size}
+	height={size}
+	viewBox="0 0 15 10"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M0.75 0.833008C0.75 0.48783 0.893908 0.208008 1.07143 0.208008H7.92857C8.10609 0.208008 8.25 0.48783 8.25 0.833008C8.25 1.17819 8.10609 1.45801 7.92857 1.45801L1.07143 1.45801C0.893909 1.45801 0.75 1.17819 0.75 0.833008ZM0.75 4.99967C0.75 4.6545 0.90816 4.37467 1.10326 4.37467H5.81341C6.00851 4.37467 6.16667 4.6545 6.16667 4.99967C6.16667 5.34485 6.00851 5.62467 5.81341 5.62467H1.10326C0.90816 5.62467 0.75 5.34485 0.75 4.99967ZM1.20455 8.54134C0.953507 8.54134 0.75 8.82116 0.75 9.16634C0.75 9.51152 0.953507 9.79134 1.20455 9.79134H3.62879C3.87983 9.79134 4.08333 9.51152 4.08333 9.16634C4.08333 8.82116 3.87983 8.54134 3.62879 8.54134H1.20455Z"
+		fill="#010B18"
+		fill-opacity="0.68"
+	/>
+	<path
+		d="M10.9817 9.62C10.7376 9.84455 10.3418 9.84455 10.0978 9.62L7.18111 6.93666C6.93703 6.71211 6.93703 6.34804 7.18111 6.12349C7.42518 5.89894 7.82091 5.89894 8.06499 6.12349L9.91471 7.82524L9.91471 0.780078C9.91471 0.462515 10.1945 0.205078 10.5397 0.205078C10.8849 0.205078 11.1647 0.462515 11.1647 0.780078L11.1647 7.82524L13.0144 6.12349C13.2585 5.89894 13.6542 5.89894 13.8983 6.12349C14.1424 6.34804 14.1424 6.71211 13.8983 6.93666L10.9817 9.62Z"
+		fill="#010B18"
+		fill-opacity="0.68"
+	/>
+</svg>
diff --git a/src/lib/utils/searchparams.svelte.ts b/src/lib/utils/searchparams.svelte.ts
@@ -4,7 +4,7 @@ import { page } from '$app/state';
 export const changeParams = (params: Record<string, string>) => {
 	const query = new URLSearchParams(page.url.searchParams);
 	for (const [key, value] of Object.entries(params)) {
-		if (value === '') {
+		if (key !== 'environments' && value === '') {
 			query.delete(key);
 			continue;
 		}

diff --git a/src/routes/team/[team]/(teamPages)/jobs/+page.gql b/src/routes/team/[team]/(teamPages)/jobs/+page.gql
@@ -1,10 +1,10 @@
 query Jobs($team: Slug!, $orderBy: JobOrder, $filter: TeamJobsFilter) @cache(policy: NetworkOnly) {
-	team(slug: $team) @loading {
-		environments @loading {
+	team(slug: $team) {
+		environments {
 			name
 		}
-		jobs(first: 20, orderBy: $orderBy, filter: $filter) @paginate(mode: SinglePage) @loading {
-			pageInfo @loading {
+		jobs(first: 20, orderBy: $orderBy, filter: $filter) @paginate(mode: SinglePage) {
+			pageInfo {
 				totalCount
 				endCursor
 				startCursor
@@ -13,11 +13,19 @@ query Jobs($team: Slug!, $orderBy: JobOrder, $filter: TeamJobsFilter) @cache(pol
 				pageEnd
 				pageStart
 			}
-			nodes @loading(count: 20) {
+			nodes {
 				name
 				environment {
 					name
 				}
+				runs(first: 1) {
+					nodes {
+						startTime
+						status {
+							state
+						}
+					}
+				}
 				status {
 					state
 				}