Dataset Creation / Edit / Data Structure: Accessibility Improvements #2271

Author: geofranzi

Console/BExIS.Web.Shell/Areas/DCM/BExIS.Modules.Dcm.UI.Svelte/src/lib/components/datadescription/Generate.svelte

@@ -2,15 +2,15 @@
 	import { goTo } from '../../../services/BaseCaller';
 	import { MultiSelect, Spinner } from '@bexis2/bexis2-core-ui';
 	import type { listItemType } from '@bexis2/bexis2-core-ui';
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount, createEventDispatcher} from 'svelte';
 
 	import { availableStructues, setStructure } from '$services/DataDescriptionCaller';
 	import { getHookStart } from '$services/HookCaller';
 
 	import type { DataDescriptionModel } from '$models/DataDescription';
 
 	import { latestFileUploadDate, latestDataDescriptionDate } from '../../../routes/edit/stores';
-
+	
 	const dispatch = createEventDispatcher();
 
 	function goToGenerate(file, id) {
@@ -38,6 +38,9 @@
 	let structures = [];
 	$: structures;
 
+	let selected;
+	$: selected;
+
 	onMount(async () => {
 		reload();
 		setList(model.readableFiles, structures);
@@ -63,41 +66,69 @@
 	}
 
 	// after select a value from the dropdown
-	// it will go to the generator or selet a exiting structure
+	// it will go to the generator or select a exiting structure
 	async function change(e) {
 		let item = e.detail;
 		//console.log("select item",item)
 
-		if (item.group === 'options') {
+		if (item.group === 'other options') {
 			//console.log("go to create a datastructure")
 			goToCreate();
-		} else if (item.group === 'file') {
+		} else if (item.group === 'create new based on file') {
+			if (item.text === 'upload first a file to create a new data structure based on it') {
+				// do nothing
+				// trigger clear selection
+				selected = null;
+				return;
+			}
 			loading = true;
 			goToGenerate(e.detail.text, model.id);
-		} else if (item.group === 'structure') {
+		} else if (item.group === 'data structures') {
 			console.log('select a structure', id, item.id);
 			loading = true;
 			await setStructure(model.id, item.id);
 			dispatch('selected');
 		}
 	}
 
-	// list is a comibnation of options, already existing datastructures and files
+	// list is a combination of options, already existing data structures and files
 	function setList(files, structureList) {
 		list = [];
 
-		if (model.isRestricted == false) {
-			// if user is not restricted by selection of the structures, then add option to vcreate a new one
-			list.push({ id: 0, text: 'create new', group: 'options' });
-		}
-
 		if (files && model.isRestricted == false) {
 			// if user is not restricted by selection of the structures, then add option to create from file
-			files.forEach((i) => list.push({ id: i.name, text: i.name, group: 'file' }));
+			if (files.length > 0){
+				files.forEach((i) => list.push({
+					id: i.name, text: i.name, group: 'create new based on file',
+					description: ''
+				}));
+			}
+			else{
+				// if no files are available, we can not create from file
+				list.push({
+					id: 0, text: 'upload first a file to create a new data structure based on it', group: 'create new based on file',
+					description: ''
+				});
+			}
+		}
+	
+		if (model.isRestricted == false) {
+			// if user is not restricted by selection of the structures, then add option to vcreate a new one
+			// get max id to avoid id conflict
+			let maxId = 0;
+			list.forEach((i) => {
+				if (i.id > maxId) maxId = i.id;
+			});
+			list.push({
+				id: maxId + 1, text: 'create a new data structure manually', group: 'other options',
+				description: '',
+			});
 		}
 
 		if (structureList) {
 			//structureList!== null && structureList != undefined)
+			// change group from structure to existing structure
+			structureList.forEach((s) => (s.group = 'data structures'));
 			list = [...list, ...structureList];
 		}
 	}
@@ -107,7 +138,8 @@
 	<div class="flex">
 		<MultiSelect
 			id="SelectDataStructure"
-			title="Generate based on an uploaded file, select an existing one, or create a new"
+			title="Create new (uploaded file or manually) or select an existing data structure"
+			placeholder="Select data structure option"
 			itemId="id"
 			itemLabel="text"
 			itemGroup="group"
@@ -117,6 +149,8 @@
 			complexTarget={true}
 			isMulti={false}
 			{loading}
+			bind:target={selected}
+	
 		/>
 	</div>
 {/if}

Console/BExIS.Web.Shell/Areas/DCM/BExIS.Modules.Dcm.UI.Svelte/src/lib/components/datadescription/ShowHeader.svelte

@@ -3,7 +3,7 @@
 	import type { fileInfoType } from '@bexis2/bexis2-core-ui';
 
 	import Fa from 'svelte-fa';
-	import { faTrash, faEdit, faDownload } from '@fortawesome/free-solid-svg-icons';
+	import { faTrash, faPencil, faDownload } from '@fortawesome/free-solid-svg-icons';
 
 	import { removeStructure } from '$services/DataDescriptionCaller';
 	import { latestDataDescriptionDate } from '../../../routes/edit/stores';
@@ -28,8 +28,8 @@
 
 	const modal: ModalSettings = {
 		type: 'confirm',
-		title: 'Copy',
-		body: 'Are you sure you wish to remove the structure?',
+		title: 'Remove Data Structure',
+		body: 'Are you sure you want to remove this data structure?',
 		// TRUE if confirm pressed, FALSE if cancel pressed
 		response: (r: boolean) => {
 			if (r === true) {
@@ -87,20 +87,20 @@
 	</div>
 	<div>
 		<div class="flex gap-2 text-end flex-auto">
-			<button title="download" class="chip variant-filled-secondary" on:click={downloadFn}
-				><Fa icon={faDownload} /></button
+			<button title="Download data structure template as excel file" class="chip variant-filled-secondary" on:click={downloadFn}
+				><Fa icon={faDownload} /><span class="pl-1">Download</span></button
 			>
 			{#if enableEdit}
-				<button title="edit" class="chip variant-filled-secondary" on:click={goToEditFn}
-					><Fa icon={faEdit} /></button
+				<button title="Edit data structure" class="chip variant-filled-secondary" on:click={goToEditFn}
+					><Fa icon={faPencil} /><span class="pl-1">Edit</span></button
 				>
 			{/if}
 
 			{#if hasData === false}
 				<button
-					title="remove"
+					title="Remove data structure"
 					class="chip variant-filled-error"
-					on:click={() => modalStore.trigger(modal)}><Fa icon={faTrash} /></button
+					on:click={() => modalStore.trigger(modal)}><Fa icon={faTrash} /><span class="pl-1">Remove</span></button
 				>
 			{/if}
 		</div>

Console/BExIS.Web.Shell/Areas/DCM/BExIS.Modules.Dcm.UI.Svelte/src/lib/components/fileupload/FileOverviewItem.svelte

@@ -76,7 +76,7 @@
 			{#if loading}
 				<Spinner textCss="text-surface-500" />
 			{:else}
-				<button class="btn" on:click={(e) => handleRemoveFile(e)}><Fa icon={faIcon} /></button>
+				<button  title="Remove file" class="btn" on:click={(e) => handleRemoveFile(e)}><Fa icon={faIcon} /></button>
 			{/if}
 		</div>
 	</div>

Console/BExIS.Web.Shell/Areas/DCM/BExIS.Modules.Dcm.UI.Svelte/src/lib/hooks/Metadata.svelte

@@ -61,12 +61,12 @@
 
 <div class="flex-col space-y-1">
 	<div class="flex gap-3 justify-left">
-		<button class="chip variant-filled-secondary flex-none" on:click={editFn}
-			><Fa icon={faPen} /></button
+		<button class="btn btn-sm variant-filled-secondary flex-none" on:click={editFn}
+			><Fa icon={faPen} /><span class="pl-1">Edit</span></button
 		>
 	</div>
 </div>
 {#if open}
 	<MetadataDrawer {id} url={model.externalMetadataFormUrl} on:close={() => (open = false)}
 	></MetadataDrawer>
-{/if}
+{/if}

Console/BExIS.Web.Shell/Areas/DCM/BExIS.Modules.Dcm.UI.Svelte/src/routes/create/Form.svelte

@@ -159,14 +159,14 @@
 						{/if}
 					</div>
 					<button
-						title="cancel"
+						title="Cancel creating a new dataset"
 						type="button"
 						class="btn variant-filled-warning"
-						on:click={onCancel}><Fa icon={faXmark} /></button
+						on:click={onCancel}><Fa icon={faXmark} /><span class="pl-1">Cancel</span></button
 					>
 
-					<button title="create" type="submit" class="btn variant-filled-primary" {disabled}
-						><Fa icon={faAdd} /></button
+					<button title="Create a new dataset and continue editing" type="submit" class="btn variant-filled-primary" {disabled}
+						><Fa icon={faAdd} /><span class="pl-1">Create and Continue</span></button
 					>
 				</div>
 			</form>

Console/BExIS.Web.Shell/Areas/RPM/BExIS.Modules.Rpm.UI.Svelte/src/lib/components/datastructure/structure/EditStructure.svelte

@@ -126,7 +126,7 @@
 					on:mouseover={() => helpStore.show('check')}
 					on:focus={() => helpStore.show('check')}
 					on:click={onCheckPKHandler}
-					on:keypress={onCheckPKHandler}><Fa icon={faBinoculars} /></button
+					on:keypress={onCheckPKHandler}><Fa icon={faBinoculars} /><span class="pl-1">Check Primary Key</span></button
 				>
 			{/if}
 			<button
@@ -137,7 +137,7 @@
 				disabled={!areVariablesValid ||
 					!areAttributesValid ||
 					!((enforcePrimaryKey && isPKSet) || !enforcePrimaryKey) ||
-					(pksHasChanged && !pksValid)}><Fa icon={faSave} /></button
+					(pksHasChanged && !pksValid)}><Fa icon={faSave} /><span class="pl-1">Save</span></button
 			>
 		</div>
 	</div>

Console/BExIS.Web.Shell/Areas/RPM/BExIS.Modules.Rpm.UI.Svelte/src/lib/components/datastructure/structure/variable/Header.svelte

@@ -57,7 +57,7 @@
 
 		<div class="flex-none flex-col text-right w-1/4">
 			<div class="flex gap-2 pb-2 justify-end">
-				<div>Mark as part of primary key</div>
+				<div>{isKey ? 'Part of primary key' : 'Not part of primary key'}</div>
 				<SlideToggle
 					size="sm"
 					name="isKey"
@@ -68,11 +68,11 @@
 				></SlideToggle>
 			</div>
 			<div class="flex gap-2 pb-2 justify-end">
-				<div>Value can be optional</div>
+				<div>{isOptional ? 'Value is optional' : 'Value is required'}</div>
 				<SlideToggle
 					size="sm"
 					name="isOptional"
-					title={isOptional ? 'Value can be optional' : 'Value is required'}
+					title={isOptional ? 'Value is optional' : 'Value is required'}
 					active="bg-primary-500"
 					bind:checked={isOptional}
 					disabled={blockDataRelevant}

Console/BExIS.Web.Shell/Areas/RPM/BExIS.Modules.Rpm.UI.Svelte/src/lib/components/datastructure/structure/variable/Variable.svelte

@@ -374,7 +374,7 @@ import { faTable } from '@fortawesome/free-solid-svg-icons';
 
 								<div slot="template">
 									<div class="flex w-full gap-1 py-1">
-										<div class="grow">Template (data is copy and changeable!)</div>
+										<div class="grow">Template (data is copied and changeable!)</div>
 										{#each suggestedTemplates.slice(0, 3) as t}
 											<button
 												title="Click to select"