fix row editor toggle

lilith · Feb 13, 2024 · 7a9e98e · 7a9e98e
1 parent 6db1f19
commit 7a9e98e
Show file tree

Hide file tree

Showing 5 changed files with 861 additions and 473 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"prisma": "^4.15.0",
-		"svelte": "^3.59.1",
+		"svelte": "^4.2.10",
 		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.5.2",

diff --git a/src/lib/components/Calendar/ScheduleTable.svelte b/src/lib/components/Calendar/ScheduleTable.svelte
@@ -28,19 +28,29 @@
 		3. dark blue - opened
 		4. light blue - unopened and available
 	*/
-	const rowColors = [...Array(21).keys()].map((_, i) =>
-		getRowColor({
-			i,
-			numRows: rows.length,
-			isAvailable: isAvailableOnRow(rows[i]),
-			isRowExpanded: openedRows.has(i)
-		})
-	);
+	let rowColors: string[] = [];
 
 	$: rowLabels = rows.map((row) => {
 		if (row.availRange === AvailabilityStatus.BUSY) return 'Busy';
 		return '';
 	});
+
+	$: {
+		if (!rows.length) break $;
+
+		rowColors = [...Array(21).keys()].map((_, i) =>
+			getRowColor({
+				i,
+				numRows: rows.length,
+				isAvailable: isAvailableOnRow(rows[i]),
+				isRowExpanded: openedRows.has(i)
+			})
+		);
+	}
+
+	const handleEditorOpen = (i: number) => {
+		openedRows = showEditor({ i, openedRows });
+	};
 </script>
 
 <table id="schedule">
@@ -49,24 +59,24 @@
 			<td
 				class:blue={openedRows.has(i)}
 				class="day"
-				on:click={() => showEditor({ i, openedRows })}
-				on:keyup={() => showEditor({ i, openedRows })}
+				on:click={() => handleEditorOpen(i)}
+				on:keyup={() => handleEditorOpen(i)}
 			>
 				{row.englishDay}
 			</td>
 			<td
 				class:blue={openedRows.has(i)}
 				class="date"
-				on:click={() => showEditor({ i, openedRows })}
-				on:keyup={() => showEditor({ i, openedRows })}
+				on:click={() => handleEditorOpen(i)}
+				on:keyup={() => handleEditorOpen(i)}
 			>
 				{row.monthDay}
 			</td>
 			<td
 				colspan="2"
 				class="time"
-				on:click={() => showEditor({ i, openedRows })}
-				on:keyup={() => showEditor({ i, openedRows })}
+				on:click={() => handleEditorOpen(i)}
+				on:keyup={() => handleEditorOpen(i)}
 			>
 				{#if !row.availRange}
 					<p>Unspecified (<span class="edit">edit</span>)</p>
@@ -194,7 +204,7 @@
 											timeZone,
 											rowIndsWithTimeErrs
 										});
-										closeEditor({ i, openedRows });
+										openedRows = closeEditor({ i, openedRows });
 									} catch {}
 								}}
 								disabled={rowIndsWithTimeErrs.has(i)}
@@ -207,7 +217,7 @@
 							<Button
 								onClick={(e) => {
 									e?.preventDefault();
-									closeEditor({ i, openedRows });
+									openedRows = closeEditor({ i, openedRows });
 								}}
 								content={'Cancel'}
 								bgColor={'rgba(255, 233, 184, 0.78)'}
@@ -294,7 +304,7 @@
 	.blue {
 		background: #a0e3ff;
 	}
-	
+
 	#preview-notif-subtitle {
 		font-size: large;
 		text-align: left;
@@ -338,4 +348,4 @@
 	.tooltiptext {
 		left: 0;
 	}
-</style>
+</style>
diff --git a/src/lib/logics/Calendar/ScheduleTable/logic.ts b/src/lib/logics/Calendar/ScheduleTable/logic.ts
@@ -8,6 +8,7 @@ import { DateTime } from 'luxon';
 import { dateTo12Hour } from '$lib/date';
 import { writeReq } from '$lib/utils';
 import type { AvailRangeParts } from '../Wrapper/types';
+import { UNAVAILABLE } from '../_shared/constants';
 
 export const getRowColor = ({
 	i,
@@ -20,6 +21,7 @@ export const getRowColor = ({
 	isAvailable: boolean;
 	isRowExpanded: boolean;
 }) => {
+	console.log({ i, numRows, isAvailable, isRowExpanded });
 	if (i >= numRows) return i % 2 ? LIGHT_GRAY : WHITE;
 	if (isAvailable && !isRowExpanded) {
 		return LIGHT_BLUE;
@@ -28,7 +30,7 @@ export const getRowColor = ({
 };
 
 export const isAvailableOnRow = (row: Row) =>
-	!!row.availRange && row.availRange !== AvailabilityStatus.BUSY;
+	!!row.availRange && !UNAVAILABLE.includes(row.availRange);
 
 export const updateRowColors = ({
 	rowColors,
@@ -386,13 +388,13 @@ export const toggleEmoticon = ({
 
 export const showEditor = ({ i, openedRows }: { i: number; openedRows: Set<number> }) => {
 	openedRows.add(i);
-	openedRows = new Set(openedRows);
 	tick().then(() => {
 		document.getElementById(`editor-${i}`)?.focus();
 	});
+	return openedRows
 };
 
 export const closeEditor = ({ i, openedRows }: { i: number; openedRows: Set<number> }) => {
 	openedRows.delete(i);
-	openedRows = new Set(openedRows);
+	return openedRows
 };
diff --git a/src/lib/logics/Calendar/Wrapper/logic.ts b/src/lib/logics/Calendar/Wrapper/logic.ts
@@ -23,12 +23,10 @@ const extractAvailRange = ({
 };
 
 const initRow = ({
-	dbDates,
-	monthDay,
+	dbDate,
 	timeZone
 }: {
-	dbDates: AvailabilityDates;
-	monthDay: string;
+	dbDate: AvailabilityDate | undefined;
 	timeZone: string;
 }) => {
 	const row: Pick<
@@ -44,18 +42,18 @@ const initRow = ({
 		emoticons: new Set()
 	};
 
-	if (!dbDates?.[monthDay]) return row;
+	if (!dbDate) return row;
 
 	// user had previously set this day in the db -- load it in
 	row.availRange = extractAvailRange({
-		dbDate: dbDates[monthDay],
+		dbDate,
 		timeZone
 	});
 	if (UNAVAILABLE.includes(row.availRange)) return row;
 
-	row.notes = dbDates[monthDay].notes ?? '';
+	row.notes = dbDate.notes ?? '';
 
-	for (const emoji of dbDates[monthDay].emoticons?.split(',') ?? []) {
+	for (const emoji of dbDate.emoticons?.split(',') ?? []) {
 		row.emoticons.add(emoji);
 	}
 
@@ -71,7 +69,7 @@ const initRow = ({
 /*
   init rows with next 21 days, including today
 */
-const initRows = (dbVals: { dbDates: AvailabilityDates; timeZone: string }) => {
+const initRows = ({dbDates, timeZone}: { dbDates: AvailabilityDates; timeZone: string }) => {
 	const now = new Date();
 	return [...Array(21).keys()].map((x) => {
 		const date = new Date(new Date().setDate(now.getDate() + x));
@@ -81,10 +79,7 @@ const initRows = (dbVals: { dbDates: AvailabilityDates; timeZone: string }) => {
 		return {
 			englishDay,
 			monthDay,
-			...initRow({
-				...dbVals,
-				monthDay
-			})
+			...initRow({dbDate: dbDates?.[monthDay], timeZone})
 		};
 	});
 };