Merge pull request #82 from REAN-Foundation/symptom_image_fixes

Symptom image fixes
REAN-Foundation · Oct 15, 2024 · d7ee95c · d7ee95c
2 parents ce6a9b9 + ad8d74c
commit d7ee95c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 13 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -249,7 +249,7 @@
 									<span class="text-primary-500">Reset Code/OTP</span>
 									<input type="text" bind:value={resetCode} required class="input mb-4 mt-2" />
 									{#if errors.resetCode}
-										<span class="text-error-500">{errors.resetCode}</span>
+										<p class="text-error-500 text-xs mb-2">{errors.resetCode}</p>
 									{/if}
 								</label>
 								<!-- svelte-ignore a11y-label-has-associated-control -->
@@ -261,7 +261,7 @@
 
 									<!-- <input type="password" bind:value={newPassword} required class="input mb-4 mt-2" /> -->
 									{#if errors.newPassword}
-										<span class="text-error-500">{errors.newPassword}</span>
+										<p class="text-error-500 text-xs mb-2">{errors.newPassword}</p>
 									{/if}
 								</label>
 								<!-- svelte-ignore a11y-label-has-associated-control -->
@@ -273,7 +273,7 @@
 
 									<!-- <input type="password" bind:value={confirmPassword} required class="input mb-4" /> -->
 									{#if errors.confirmPassword}
-										<span class="text-error-500">{errors.confirmPassword}</span>
+										<p class="text-error-500 text-xs mb-2">{errors.confirmPassword}</p>
 									{/if}
 								</label>
 								<button type="submit" class="btn variant-filled-secondary mb-6 w-full">Reset Password</button>

diff --git a/src/routes/api/server/symptoms/search/+server.ts b/src/routes/api/server/symptoms/search/+server.ts
@@ -1,6 +1,7 @@
 import type { RequestEvent } from '@sveltejs/kit';
-import { page } from '$app/stores';
+// import { page } from '$app/stores';
 import { searchSymptoms } from '../../../services/reancare/symptoms';
+// import { BACKEND_API_URL } from '$env/static/private';
 
 //////////////////////////////////////////////////////////////
 
@@ -28,9 +29,19 @@ export const GET = async (event: RequestEvent) => {
 		};
 		console.log('Search parms: ', searchParams);
 		const response = await searchSymptoms(sessionId, searchParams);
-		const items = response.Data.SymptomTypes;
+		const symptoms = response.Data.SymptomTypes;
 
-		return new Response(JSON.stringify(items));
+    // for (const symptom of symptoms.Items) {
+    // 	if (symptom.ImageResourceId) {
+    // 		symptom['ImageUrl'] =
+    // 			BACKEND_API_URL +
+    // 			`/file-resources/${symptom.ImageResourceId}/download?disposition=inline`;
+    // 	} else {
+    // 		symptom['ImageUrl'] = null;
+    // 	}
+    // }
+
+		return new Response(JSON.stringify(symptoms));
 	} catch (err) {
 		console.error(`Error retriving symptom: ${err.message}`);
 		return new Response(err.message);

diff --git a/src/routes/users/[userId]/symptoms/+page.svelte b/src/routes/users/[userId]/symptoms/+page.svelte
@@ -12,6 +12,7 @@
 	import date from 'date-and-time';
 	import type { PageServerData } from './$types';
     import { invalidate } from '$app/navigation';
+    import { db } from '$lib/utils/local.db';
 
 	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
@@ -125,11 +126,18 @@
 		sortBy = columnName;
 	}
 	
-	const handleSymptomDelete = async (id) => {
+	const handleSymptomDelete = async (id,imageResourceId) => {
 		const symptomId = id;
+		console.log(`ImageUrl : ${imageResourceId}`);
+		// if (imageResourceId) {
+    //     // await db.imageCache.where({ srcUrl: imageUrl}).delete();
+		// 		await db.imageCache.where({ srcUrl: getImageUrl(imageResourceId)}).delete();
+    //     console.log(`Removed cached image for ${imageResourceId}`);
+    // }
 		await Delete({
 			sessionId: data.sessionId,
-			symptomId: symptomId
+			symptomId: symptomId,
+			// ImageUrl : imageUrl 
 		});
 		invalidate('app:symptoms');
 	};
@@ -142,9 +150,17 @@
 		});
 	}
 
-	function getImageUrl(id:string):string{
-		return data.backendUrl+`/file-resources/${id}/download?disposition=inline`
-	}
+	// function getImageUrl(id:string):string{
+	// 	return data.backendUrl+`/file-resources/${id}/download?disposition=inline`
+	// }
+
+	async function getImageUrl(id: string): Promise<string> {
+  const cachedImage = await db.imageCache.where({ srcUrl: `/file-resources/${id}/download?disposition=inline` }).first();
+  if (cachedImage) {
+    return cachedImage.srcUrl;
+  }
+  return `${data.backendUrl}/file-resources/${id}/download?disposition=inline`;
+}
 	
 </script>
 
@@ -224,12 +240,30 @@
 							<a href={viewRoute(row.id)}>{Helper.truncateText(row.Symptom, 20)}</a>
 						</td>
 						<td role="gridcell" aria-colindex={3} tabindex="0">{row.Tags.length > 0 ? row.Tags : 'Not specified'}</td>
-						<td role="gridcell" aria-colindex="{4}" tabindex="0">
+						<!-- <td role="gridcell" aria-colindex="{4}" tabindex="0">
 							{#if row.ImageResourceId === undefined || row.ImageResourceId===null}
 							Not specified
 							{:else}
 							<Image cls="flex h-8 w-8 rounded-lg" source="{getImageUrl(row.ImageResourceId)}" w="24" h="24" />
 							{/if}
+						</td> -->
+						<!-- <td role="gridcell" aria-colindex="{4}" tabindex="0">
+							{#if row.ImageUrl === undefined || row.ImageUrl===null}
+							Not specified
+							{:else}
+							<Image cls="flex h-8 w-8 rounded-lg" source="{row.ImageUrl}" w="24" h="24" />
+							{/if}
+							</td> -->
+							<td role="gridcell" aria-colindex="{4}" tabindex="0">
+								{#if row.ImageResourceId === undefined || row.ImageResourceId === null}
+									Not specified
+								{:else}
+									{#await getImageUrl(row.ImageResourceId) then imageUrl}
+										<Image cls="flex rounded-lg" source="{imageUrl}" w="24" h="24" />
+									{:catch error}
+										<p>Error loading image</p>
+									{/await}
+								{/if}
 							</td>
 						<td role="gridcell" aria-colindex={5} tabindex="0">
 							{date.format(new Date(row.CreatedAt), 'DD-MMM-YYYY')}
@@ -246,7 +280,7 @@
 								let:confirm={confirmThis}
 							>
 								<button
-									on:click|preventDefault={() => confirmThis(handleSymptomDelete, row.id)}
+									on:click|preventDefault={() => confirmThis(handleSymptomDelete, row.id, row.imageResourceId)}
 									class="btn p-2 -my-1 hover:variant-soft-error"
 								>
 									<Icon icon="material-symbols:delete-outline-rounded" class="text-lg" />