Improved id and timestamp layout on jobs table

Author: zonia3000

__tests__/JobsList.test.js

@@ -89,27 +89,27 @@ describe('JobsList', () => {
 		// Verify default sorting
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[3].textContent).eq(
-			'10/30/2023, 10:30:38 AM'
+			'30/10/2023 10:30:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[3].textContent).eq(
-			'10/30/2023, 10:15:38 AM'
+			'30/10/2023 10:15:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[3].textContent).eq(
-			'10/30/2023, 10:00:38 AM'
+			'30/10/2023 10:00:38'
 		);
 
 		// Sort by start date
 		const startDateSorter = table.querySelector('thead th:nth-child(4)');
 		await fireEvent.click(startDateSorter);
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[3].textContent).eq(
-			'10/30/2023, 10:00:38 AM'
+			'30/10/2023 10:00:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[3].textContent).eq(
-			'10/30/2023, 10:15:38 AM'
+			'30/10/2023 10:15:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[3].textContent).eq(
-			'10/30/2023, 10:30:38 AM'
+			'30/10/2023 10:30:38'
 		);
 	});
 

__tests__/TimestampCell.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+
+import TimestampCell from '../src/lib/components/jobs/TimestampCell.svelte';
+
+describe('TimestampCell', () => {
+	it('handles null timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: null }
+		});
+		expect(result.container.textContent).eq('-');
+	});
+
+	it('handles empty timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: '' }
+		});
+		expect(result.container.textContent).eq('-');
+	});
+
+	it('handles valid timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: '2024-02-09T10:35:56.237579+00:00' }
+		});
+		expect(result.container.textContent).eq('9/2/2024 11:35:56');
+	});
+});

package.json

@@ -11,7 +11,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"pre-commit": "lint-staged",
-		"test": "TZ=Europe/Rome vitest"
+		"test": "TZ=Europe/Rome LANG='it-IT' vitest"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.40.0",

src/lib/components/jobs/JobsList.svelte

@@ -10,6 +10,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { removeDuplicatedItems } from '$lib/common/component_utilities';
 	import StandardDismissableAlert from '../common/StandardDismissableAlert.svelte';
+	import TimestampCell from './TimestampCell.svelte';
 
 	/** @type {() => Promise<import('$lib/types').ApplyWorkflow[]>} */
 	export let jobUpdater;
@@ -178,7 +179,7 @@
 	<table class="table jobs-table">
 		<colgroup>
 			{#if !columnsToHide.includes('id')}
-				<col width="40" />
+				<col width="60" />
 			{/if}
 			<col width="100" />
 			<col width="110" />
@@ -334,10 +335,10 @@
 							{/if}
 						</td>
 						<td>
-							{row.start_timestamp ? new Date(row.start_timestamp).toLocaleString() : '-'}
+							<TimestampCell timestamp={row.start_timestamp} />
 						</td>
 						<td>
-							{row.end_timestamp ? new Date(row.end_timestamp).toLocaleString() : '-'}
+							<TimestampCell timestamp={row.end_timestamp} />
 						</td>
 						{#if !columnsToHide.includes('project')}
 							<td>

src/lib/components/jobs/TimestampCell.svelte

@@ -0,0 +1,40 @@
+<script>
+	/** @type {string|null} */
+	export let timestamp;
+
+	let date = '';
+	let time = '';
+
+	$: {
+		if (timestamp) {
+			const dateObj = new Date(timestamp);
+			date = dateObj.toLocaleString([], {
+				day: 'numeric',
+				month: 'numeric',
+				year: 'numeric'
+			});
+			time = dateObj.toLocaleString([], {
+				hour: 'numeric',
+				minute: 'numeric',
+				second: 'numeric',
+				hour12: false
+			});
+		} else {
+			date = '';
+			time = '';
+		}
+	}
+</script>
+
+{#if date === ''}
+	-
+{:else}
+	<span class="nowrap">{date}</span>
+	<span class="nowrap">{time}</span>
+{/if}
+
+<style>
+	.nowrap {
+		display: inline-block;
+	}
+</style>