Implement a cell change in the timetable

Dlurak · Aug 25, 2024 · ce3318a · ce3318a
1 parent 2d32c44
commit ce3318a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/lib/components/input/Text.svelte b/src/lib/components/input/Text.svelte
@@ -19,6 +19,8 @@
 
 	export let minimal = false;
 
+	export let element: HTMLInputElement | undefined = undefined;
+
 	const id = randomStr(16);
 	const dispatch = createEventDispatcher<{
 		input: string;
@@ -37,7 +39,7 @@
 				{disabled}
 				type="text"
 				class="w-full bg-transparent focus:outline-none disabled:cursor-not-allowed"
-				list={id}
+				list={options.length > 0 ? id : null}
 				placeholder={$placeholder}
 				on:input={({ currentTarget }) => {
 					dispatch('input', currentTarget.value);
@@ -48,6 +50,7 @@
 				on:focus
 				on:blur
 				bind:value
+				bind:this={element}
 			/>
 
 			<slot name="postInput" />
@@ -71,8 +74,10 @@
 	</div>
 </Frame>
 
-<datalist {id}>
-	{#each options as option}
-		<option value={option} />
-	{/each}
-</datalist>
+{#if options.length > 0}
+	<datalist {id}>
+		{#each options as option}
+			<option value={option} />
+		{/each}
+	</datalist>
+{/if}
diff --git a/src/routes/settings/timetable/+page.svelte b/src/routes/settings/timetable/+page.svelte
@@ -22,6 +22,7 @@
 	import { WEEKDAYS } from '$lib/components/settings/timetable/weekdays';
 	import BoolSetting from '$lib/components/settings/BoolSetting.svelte';
 	import { settingsHeader } from '$lib/stores';
+	import { asyncRequestAnimationFrame } from '$lib/utils/dom';
 
 	const timetable = svocal('settings.timetable');
 	const weekStartsOn = svocal('settings.weekStartsOn');
@@ -36,6 +37,8 @@
 	const currentWeekday = WEEKDAYS[new Date().getDay()];
 
 	settingsHeader.set(i('settings.timetable.title'));
+
+	let elements: Record<string, HTMLInputElement | undefined> = {};
 </script>
 
 <MetaData title={i('settings.timetable.title')} />
@@ -117,14 +120,20 @@
 										on:input={({ detail }) => {
 											$timetable[day][lessonIndex] = detail;
 										}}
-										on:enter={() => {
+										on:enter={async () => {
 											const isOnlyNull = getLastLessons($timetable).every((x) => x === null);
 											const hasLessons = countMaxLessons($timetable) > 0;
+											if (!(isOnlyNull && hasLessons)) {
+												timetable.update(addRow);
+												await asyncRequestAnimationFrame();
+											}
 
-											if (!(isOnlyNull && hasLessons)) timetable.update(addRow);
+											const nextEle = elements[`${lessonIndex + 1}-${ind}`];
+											if (!nextEle) return;
 
-											// TODO: Focus the TextInput one below
+											nextEle.focus();
 										}}
+										bind:element={elements[`${lessonIndex}-${ind}`]}
 									/>
 								</td>
 							{/if}