Merge pull request #233 from fractal-analytics-platform/display-task-list-with-richer-structure

Improve management of tasks within the client

Author: rkpasia

__tests__/component_utilities.test.js

@@ -0,0 +1,44 @@
+import { it, expect } from 'vitest';
+import { orderTasksByOwnerThenByNameThenByVersion } from '$lib/common/component_utilities.js';
+
+it('should order tasks by owner, then by name, then by version', () => {
+	const tasks = [
+		{ name: 'task1', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task2', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task3', owner: 'owner1', version: '0.0.2' },
+		{ name: 'task4', owner: 'owner2', version: '0.0.1' },
+		{ name: 'task5', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task6', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task7', owner: 'admin', version: '0.0.1' },
+		{ name: 'task8', owner: 'owner3', version: '0.0.2' },
+		{ name: 'task9', owner: 'owner3', version: '0.0.2' }
+	];
+
+	const sortedTasks = orderTasksByOwnerThenByNameThenByVersion(tasks);
+
+	expect(sortedTasks).toEqual([
+		{ name: 'task7', owner: 'admin', version: '0.0.1' },
+		{ name: 'task1', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task2', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task3', owner: 'owner1', version: '0.0.2' },
+		{ name: 'task4', owner: 'owner2', version: '0.0.1' },
+		{ name: 'task5', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task6', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task8', owner: 'owner3', version: '0.0.2' },
+		{ name: 'task9', owner: 'owner3', version: '0.0.2' }
+	]);
+
+	const sortedTasks2 = orderTasksByOwnerThenByNameThenByVersion(tasks, 'owner2');
+
+	expect(sortedTasks2).toEqual([
+		{ name: 'task4', owner: 'owner2', version: '0.0.1' },
+		{ name: 'task5', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task6', owner: 'owner2', version: '0.0.2' },
+		{ name: 'task7', owner: 'admin', version: '0.0.1' },
+		{ name: 'task1', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task2', owner: 'owner1', version: '0.0.1' },
+		{ name: 'task3', owner: 'owner1', version: '0.0.2' },
+		{ name: 'task8', owner: 'owner3', version: '0.0.2' },
+		{ name: 'task9', owner: 'owner3', version: '0.0.2' }
+	]);
+});

__tests__/semver.test.js

@@ -0,0 +1,57 @@
+import { it, expect } from 'vitest';
+import semver from 'semver';
+import { greatestVersionAsc } from '../src/lib/common/component_utilities';
+
+it('should be able to loosely validate versions', () => {
+	const cases = [
+		['0.10.0a0', '0.10.0-a0'],
+		['0.10.0a2', '0.10.0-a2'],
+		['0.10.0alpha0', '0.10.0-alpha0'],
+		['0.10.0alpha3', '0.10.0-alpha3'],
+		['0.10.0b4', '0.10.0-b4'],
+		['0.10.0beta5', '0.10.0-beta5'],
+		['0.10.0c0', '0.10.0-c0'],
+		['1.0.0rc4.dev7', '1.0.0-rc4.dev7']
+	];
+
+	const validationOptions = {
+		loose: true,
+		includePrerelease: true
+	};
+
+	cases.forEach(([input, expected]) => {
+		const validatedVersion = semver.valid(input, validationOptions);
+		expect(validatedVersion).toBe(expected);
+	});
+});
+
+it('should sort versions correctly', () => {
+
+	const versions = [
+		{ version: '0.10.0c0' },
+		{ version: '0.10.0b4' },
+		{ version: '0.10.0' },
+		{ version: '0.10.0alpha3' },
+		{ version: '0.10.0a2' },
+		{ version: '1.0.0' },
+		{ version: '0.10.0a0' },
+		{ version: '1.0.0rc4.dev7' },
+		{ version: '0.10.0beta5' },
+		{ version: '0.10.0alpha0' }
+	];
+
+	const sortedVersions = versions.sort(greatestVersionAsc);
+
+	expect(sortedVersions).toEqual([
+		{ version: '0.10.0a0' },
+		{ version: '0.10.0a2' },
+		{ version: '0.10.0alpha0' },
+		{ version: '0.10.0alpha3' },
+		{ version: '0.10.0b4' },
+		{ version: '0.10.0beta5' },
+		{ version: '0.10.0c0' },
+		{ version: '0.10.0' },
+		{ version: '1.0.0rc4.dev7' },
+		{ version: '1.0.0' }
+	]);
+});

package-lock.json

@@ -34,6 +34,7 @@
 	"dependencies": {
 		"@vincjo/datatables": "^1.6.0",
 		"ajv": "^8.12.0",
-		"jose": "^4.14.4"
+		"jose": "^4.14.4",
+		"slim-select": "^2.5.1"
 	}
 }

package.json

@@ -17,6 +17,7 @@
 			href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
 		/>
 		<title>Fractal Web Client</title>
+		<link rel='stylesheet' href='%sveltekit.assets%/slimselect.css'>
 		<link rel='stylesheet' href='%sveltekit.assets%/global.css'>
 	</head>
 	<body>

src/app.html

@@ -0,0 +1,77 @@
+import semver from 'semver';
+
+export function greatestVersionAsc(t1, t2) {
+	const semverValidationOptions = {
+		loose: true,
+		includePrerelease: true
+	};
+	try {
+		const t1Version = semver.valid(t1.version, semverValidationOptions);
+		const t2Version = semver.valid(t2.version, semverValidationOptions);
+		const t1VersionLt = semver.lte(t1Version, t2Version);
+		if (t1VersionLt) return -1;
+		if (!t1VersionLt) return 1;
+	} catch {
+		return 0;
+	}
+}
+
+export function greatestVersionDesc(t1, t2) {
+	const semverValidationOptions = {
+		loose: true,
+		includePrerelease: true
+	};
+	try {
+		const t1Version = semver.valid(t1.version, semverValidationOptions);
+		const t2Version = semver.valid(t2.version, semverValidationOptions);
+		const t1VersionGt = semver.gte(t1Version, t2Version);
+		if (t1VersionGt) return -1;
+		if (!t1VersionGt) return 1;
+	} catch {
+		return 0;
+	}
+}
+
+function compareTaskNameAndVersion(t1, t2) {
+	if (t1.name < t2.name) return -1;
+	if (t1.name > t2.name) return 1;
+	// Names are equal, sort by version
+	return greatestVersionAsc(t1, t2);
+}
+
+export function orderTasksByOwnerThenByNameThenByVersion(tasks, ownerName = null) {
+	// Sort tasks by owner, by name and by version
+	return tasks.sort((t1, t2) => {
+		// If ownerName is not null, filter tasks by owner
+		if (ownerName !== null) {
+			// If t1 owner is same as ownerName, t1 should go before t2
+			if (t1.owner === ownerName) {
+				if (t2.owner !== ownerName) return -1;
+				// Both owners are same, sort by name and version
+				return compareTaskNameAndVersion(t1, t2);
+			} else {
+				// t1 owner is not same as ownerName, t2 should go before t1
+				if (t2.owner === ownerName) return 1;
+			}
+		}
+		if (t1.owner === null) {
+			// If t1 owner is null, t1 should go before t2 if t2 owner is null
+			// Should check if t2 owner is null too
+			if (t2.owner === null) {
+				// Both owners are null, sort by name
+				return compareTaskNameAndVersion(t1, t2);
+			} else {
+				// t1 owner is null, t2 owner is not null, t1 should go before t2
+				return -1;
+			}
+		} else {
+			// t1 owner is not null, t2 owner is null, t2 should go before t1
+			if (t2.owner === null) return 1;
+			// Both owners are not null, sort by owner
+			if (t1.owner < t2.owner) return -1;
+			if (t1.owner > t2.owner) return 1;
+			// Owners are equal, sort by name
+			return compareTaskNameAndVersion(t1, t2);
+		}
+	});
+}