Tag Management: UX Improvements #2198

Author: geofranzi

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/+page.svelte

@@ -16,8 +16,8 @@
 </script>
 
 <Page
-	title="Tag Overview"
-	note="Manage and view tags of the dataset."
+	title="Release Tag Management"
+	note="Manage and view release tags of the dataset."
 	contentLayoutType={pageContentLayoutType.center}
 	{links}
 >

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/TagInfoEdit.svelte

@@ -8,23 +8,29 @@
 	} from '@bexis2/bexis2-core-ui';
 	import { add, get, save, updateSearch } from './services';
 
-	import { tagInfoModelStore, withMinorStore } from './stores.js';
+	import { tagInfoModelStore, withMinorStore, originalTagInfoModelStore } from './stores.js';
 	import TablePublish from './table/tablePublish.svelte';
 	import TableShow from './table/tableShow.svelte';
 	import TableNr from './table/tableNr.svelte';
 	import TableText from './table/tableText.svelte';
+	import TableTextType from './table/tableTextType.svelte';
+	import TableTextAuthor from './table/tableTextAuthor.svelte';
 	import TableOptions from './table/tableOptions.svelte';
 	import TableDate from './table/tableDate.svelte';
+	import TableVersionNumber from './table/tableVersionNumber.svelte';
 	import { type TagInfoEditModel, TagType } from './types';
 	import TableReleaseNote from './table/tableReleaseNote.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { Tab } from '@skeletonlabs/skeleton';
+	import TableDateCreate from './table/tableDateCreate.svelte';
 
 	let container;
 	let id: number = 0;
 	let withMinor: boolean = false;
 	let rows: number = 3;
 
 	let promise: Promise<TagInfoEditModel[]>;
+	let originalRows: TagInfoEditModel[] = [];
 
 	const dispatch = createEventDispatcher();
 
@@ -36,6 +42,9 @@
 		promise = get(id);
 		const tagInfos = await promise;
 		rows = tagInfos.length;
+		// deep copy
+		originalRows = JSON.parse(JSON.stringify(tagInfos));
+		originalTagInfoModelStore.update(() => originalRows);
 		tagInfoModelStore.set(tagInfos);
 		withMinorStore.set(withMinor);
 
@@ -75,14 +84,16 @@
 
 			notificationStore.showNotification({
 				notificationType: notificationType.success,
-				message: 'Tag is saved.'
+				message: 'Release tag changes are saved.'
 			});
-
+			originalTagInfoModelStore.update((arr) =>
+				arr.map((x) => (x.versionId === tagInfo.versionId ? { ...x, ...tagInfo } : x))
+			);
 			dispatch('reload');
 		} else {
 			notificationStore.showNotification({
 				notificationType: notificationType.error,
-				message: 'Tag is not saved.'
+				message: 'Release tag changes are not saved.'
 			});
 		}
 	}
@@ -113,7 +124,7 @@
 		<TablePlaceholder cols={7} {rows} />
 	</div>
 {:then model}
-	<h2 class="h2">Tag Management</h2>
+	<h2 class="h2">Release Tag Management</h2>
 	<div class="table table-compact w-full">
 		<Table
 			on:action={tableActions}
@@ -135,16 +146,20 @@
 						fixedWidth: 10,
 						header: 'Internal version',
 						disableFiltering: true,
-						disableSorting: true
+						disableSorting: true,
+						instructions: {
+							renderComponent: TableVersionNumber
+						}
 					},
 					tagNr: {
 						fixedWidth: 80,
-						header: 'Tag',
+						header: 'Release Tag',
 						disableFiltering: true,
 						disableSorting: true,
 						instructions: {
 							renderComponent: TableNr
-						}
+						},
+						label: 'Tag'
 					},
 					releaseNote: {
 						header: 'Release Note',
@@ -166,23 +181,29 @@
 					systemDescription: {
 						header: 'System Description',
 						disableFiltering: true,
-						disableSorting: true
+						disableSorting: true,
+						instructions: {
+							renderComponent: TableTextType
+						}
 					},
 					systemAuthor: {
-						header: 'System Author',
+						header: 'Author',
 						disableFiltering: true,
-						disableSorting: true
+						disableSorting: true,
+						instructions: {
+							renderComponent: TableTextAuthor
+						}
 					},
 					systemDate: {
-						header: 'System Date',
+						header: 'Creation Date',
 						instructions: {
-							renderComponent: TableDate
+							renderComponent: TableDateCreate
 						},
 						disableFiltering: true,
 						disableSorting: true
 					},
 					show: {
-						header: 'Show history',
+						header: 'Show Note',
 						fixedWidth: 10,
 						instructions: {
 							renderComponent: TableShow

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/stores.ts

@@ -2,4 +2,5 @@ import type { TagInfoEditModel } from './types';
 import { writable } from 'svelte/store';
 
 export const tagInfoModelStore = writable<TagInfoEditModel[]>([]);
+export const originalTagInfoModelStore = writable<TagInfoEditModel[]>([]);
 export const withMinorStore = writable<boolean>();

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableDate.svelte

@@ -16,6 +16,8 @@
 	}
 </script>
 
-{#if !emtpy}
-	{new Date(value).toLocaleString('de-DE')}
-{/if}
+<span title="Date of creation of the release tag">
+	{#if !emtpy}
+		{new Date(value).toLocaleString('de-DE')}
+	{/if}
+</span>

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableDateCreate.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { TagInfoModel } from '../types';
+
+	export let value: string;
+	export let row: TagInfoModel;
+	let emtpy: boolean = true;
+
+	emtpy = isEmpty(value);
+
+	function isEmpty(value: string): boolean {
+		if (value === null || value === undefined || value === '' || value === '0001-01-01T00:00:00') {
+			return true;
+		}
+
+		return false;
+	}
+</script>
+
+<span title="Creation date of this version">
+	{#if !emtpy}
+		{new Date(value).toLocaleString('de-DE')}
+	{/if}
+</span>

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableNr.svelte

@@ -4,7 +4,9 @@
 </script>
 
 <div>
-	{#if value > 0}
-		{value.toFixed(1)}
-	{/if}
+	<span title="Release Tag">
+		{#if value > 0}
+			{value.toFixed(1)}
+		{/if}
+	</span>
 </div>

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableOptions.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import Fa from 'svelte-fa';
 	import { faSave } from '@fortawesome/free-solid-svg-icons';
-	import { withMinorStore } from '../stores';
-	import { get } from 'svelte/store';
+	import { withMinorStore, tagInfoModelStore, originalTagInfoModelStore } from '../stores';
 	import type { TagInfoEditModel } from '../types';
 
 	export let row: TagInfoEditModel;
 	export let dispatchFn;
 
 	let noTag: boolean = hasNoTag();
-	let withMinor = get(withMinorStore);
+	// use auto-subscription so changes to the store re-run reactive statements
+	let withMinor: boolean;
+
+	$: withMinor = $withMinorStore;
 
 	function hasNoTag() {
 		return row.tagId == 0;
@@ -36,25 +38,47 @@
 			type: 'MAJOR'
 		}
 	];
+
+	// Check if there are changes compared to the original rows
+	$: hasChanges = (() => {
+		const originalRows = $originalTagInfoModelStore;
+		const currentRow = $tagInfoModelStore.find((x) => x.versionId == row.versionId);
+		console.log('🚀 ~ hasChanges ~ currentRow:', currentRow);
+		if (!currentRow) return false;
+
+		const originalRow = originalRows.find((x) => x.versionId == row.versionId);
+		if (!originalRow) return true; // New row
+
+		return (
+			currentRow.releaseNote !== originalRow.releaseNote ||
+			currentRow.publish !== originalRow.publish ||
+			currentRow.show !== originalRow.show
+		);
+	})();
 </script>
 
 <div class="flex gap-2 w-min p-2">
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={() => eventDispatchFn('SAVE')}
-	>
-		<Fa icon={faSave} />
-	</button>
+	{#if hasChanges}
+		<button
+			class="btn btn-sm variant-filled-primary"
+			title="Save changes"
+			on:click|preventDefault={() => eventDispatchFn('SAVE')}
+		>
+			<Fa icon={faSave} />
+		</button>
+	{/if}
 
 	{#if noTag}
 		{#if withMinor}
 			<button
 				class="btn btn-sm variant-filled-primary"
+				title="Create new minor version"
 				on:click|preventDefault={() => eventDispatchFn('MINOR')}>minor</button
 			>
 		{/if}
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Create new major version"
 			on:click|preventDefault={() => eventDispatchFn('MAJOR')}>major</button
 		>
 	{/if}

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tablePublish.svelte

@@ -2,17 +2,30 @@
 	import { SlideToggle } from '@skeletonlabs/skeleton';
 	import { tagInfoModelStore } from '../stores';
 	import type { TagInfoEditModel } from '../types';
-	import { get } from 'svelte/store';
 
 	export let value: boolean;
 	export let row: any;
 	let currentRow: TagInfoEditModel;
 
-	$: currentRow = get(tagInfoModelStore).find((x) => x.versionId == row.original.versionId);
+	$: currentRow = $tagInfoModelStore.find((x) => x.versionId == row.original.versionId);
+
+	function togglePublish(versionId: number, value: boolean) {
+		tagInfoModelStore.update((arr) =>
+			arr.map((x) => (x.versionId === versionId ? { ...x, publish: !!value } : x))
+		);
+	}
 </script>
 
 <div class="flex h-full items-center justify-center">
-	{#if currentRow.tagId > 0}
-		<SlideToggle name={currentRow.versionId} class="" bind:checked={currentRow.publish} size="sm" />
-	{/if}
+	<div title="Make this release tag visible; Click save to apply">
+		{#if currentRow.tagId > 0}
+			<SlideToggle
+				name={currentRow.versionId}
+				class=""
+				checked={currentRow.publish}
+				size="sm"
+				on:change={(e) => togglePublish(currentRow.versionId, !!(e.detail ?? e.target?.checked))}
+			/>
+		{/if}
+	</div>
 </div>

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableReleaseNote.svelte

@@ -1,11 +1,33 @@
 <script lang="ts">
 	import { TextArea } from '@bexis2/bexis2-core-ui';
+	import { tagInfoModelStore } from '../stores';
 
 	export let value: string;
 	export let row: any;
 	export let dispatchFn;
 
 	let currentRow = row.original;
+
+	// tagInfoModelStore.update((arr) =>
+	// 	arr.map((x) => (x.versionId === currentRow.versionId ? { ...x, releaseNote: value } : x))
+	// );
+
+	// update the tagModelStore when the value changes
+	$: if (currentRow.releaseNote !== value) {
+		tagInfoModelStore.update((arr) =>
+			arr.map((x) => (x.versionId === currentRow.versionId ? { ...x, releaseNote: value } : x))
+		);
+	}
 </script>
 
-<TextArea bind:value={currentRow.releaseNote}></TextArea>
+<span title="Release Note; Click save to apply">
+	<TextArea
+		bind:value={currentRow.releaseNote}
+		on:input={() =>
+			tagInfoModelStore.update((arr) =>
+				arr.map((x) =>
+					x.versionId === currentRow.versionId ? { ...x, releaseNote: currentRow.releaseNote } : x
+				)
+			)}
+	></TextArea>
+</span>

Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/taginfo/table/tableShow.svelte

@@ -2,24 +2,36 @@
 	import { SlideToggle } from '@skeletonlabs/skeleton';
 	import { tagInfoModelStore } from '../stores';
 	import type { TagInfoEditModel } from '../types';
-	import { get } from 'svelte/store';
 
 	export let value: boolean;
 	export let row: any;
 
 	let currentRow: TagInfoEditModel;
 
-	$: currentRow = get(tagInfoModelStore).find((x) => x.versionId == row.original.versionId);
+	$: currentRow =
+		$tagInfoModelStore.find((x) => x.versionId == row.original.versionId) ??
+		({
+			versionId: row.original.versionId,
+			tagId: 0,
+			show: false
+		} as TagInfoEditModel);
+
+	function toggleShow(versionId: number, value: boolean) {
+		tagInfoModelStore.update((arr) =>
+			arr.map((x) => (x.versionId === versionId ? { ...x, show: !!value } : x))
+		);
+	}
 </script>
 
 <div class="flex h-full items-center justify-center">
-	<div>
+	<div title="Show the release note of this version; Click save to apply">
 		{#if currentRow && currentRow.tagId > 0}
 			<SlideToggle
 				name={'' + currentRow.versionId}
 				class=""
-				bind:checked={currentRow.show}
+				checked={currentRow.show}
 				size="sm"
+				on:change={(e) => toggleShow(currentRow.versionId, !!(e.detail ?? e.target?.checked))}
 			/>
 		{/if}
 	</div>