Icon changes (#8)

* Added the user icon * Added the notification type * Dashboard changes * Fixed enrollment task issue * Fixed issue of course search nad pagination * Fixed name issue * Fixed symptoms tag issue * Fixed issue of symptoms images
REAN-Foundation · Oct 13, 2023 · 61c4186 · 61c4186
1 parent 58a0458
commit 61c4186
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 85 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -19,6 +19,7 @@ body {
 
 	input[type='date'] {
 		color: #dfe7fd;
+		position: relative;
 	}
 
 	input[type='date']:focus,

diff --git a/src/lib/components/courses.view/courses.view.svelte b/src/lib/components/courses.view/courses.view.svelte
@@ -2,17 +2,13 @@
 	import CollapsibleSection from '$lib/components/courses.view/collapsible.section.svelte';
 	import Confirm from '$lib/components/modal/confirmModal.svelte';
 	import Icon from '@iconify/svelte';
-	import { Paginator, type PaginationSettings } from '@skeletonlabs/skeleton';
 	import { createEventDispatcher } from 'svelte';
 
 	/////////////////////////////////////////////////////////////////////////////////////////////////
 
 	export let userId = undefined;
 	export let courses = [];
-	export let itemsPerPage;
-	export let toatalCourseCount;
-	let items = 10;
-
+	$:courses
 	courses = courses.map((item, index) => ({ ...item, index: index + 1 }));
 	let addModuleRoute = (courseId) => `/users/${userId}/courses/${courseId}/modules/create`;
 	let addContentRoute = (courseId, moduleId) =>
@@ -28,23 +24,6 @@
 	let viewContentRoute = (courseId, moduleId, contentId) =>
 		`/users/${userId}/courses/${courseId}/modules/${moduleId}/contents/${contentId}/edit`;
 
-	let paginationSettings = {
-		page: 0,
-		limit: 10,
-		size: toatalCourseCount,
-		amounts: [10, 20, 30, 50]
-	} satisfies PaginationSettings;
-
-	function onPageChange(e: CustomEvent): void {
-		let pageIndex = e.detail;
-		itemsPerPage = items * (pageIndex + 1);
-	}
-
-	function onAmountChange(e: CustomEvent): void {
-		itemsPerPage = e.detail;
-		items = itemsPerPage;
-	}
-
 	const dispatch = createEventDispatcher();
 
 	const handleContentDelete = async (id) => dispatch('onContentDeleteClick', { contentId: id });
@@ -54,6 +33,7 @@
 
 	const handlelModuleDelete = async (moduleId, contents) =>
 		dispatch('onModuleDeleteClick', { moduleId: moduleId, contents: contents });
+
 </script>
 
 <div
@@ -158,7 +138,7 @@
 	</section>
 </div>
 
-<div class="w-full variant-soft-secondary rounded-lg p-2">
+<!-- <div class="w-full variant-soft-secondary rounded-lg p-2">
 	<Paginator
 		bind:settings={paginationSettings}
 		on:page={onPageChange}
@@ -168,4 +148,4 @@
 		controlVariant = 'rounded-full text-primary-500 '
 		controlSeparator = 'fill-primary-400'
 		/>
-</div>
+</div> -->
diff --git a/src/lib/components/navbar/navbar.svelte b/src/lib/components/navbar/navbar.svelte
@@ -57,6 +57,7 @@
 						<input type="text" class="input pl-10" placeholder="Search" />
 						<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
 							<Icon icon="material-symbols:search-rounded" class="text-lg text-primary-300" />
+
 						</div>
 					</div>
 				</div>
@@ -73,7 +74,8 @@
 					class="btn p-1 rounded hover:bg-white/10 text-white mr-6"
 					on:click={drawerRightOpen}
 				>
-					<Icon icon="material-symbols:person-outline-rounded" class="text-3xl" />
+					<!-- <Icon icon="material-symbols:person-outline-rounded" class="text-3xl" /> -->
+					<img class="w-8 ml-2 text-lg invert dark:filter-none" src="/user.png" alt="" />
 				</button>
 			</svelte:fragment>
 		</AppBar>

diff --git a/src/lib/components/navbar/sidebar.svelte b/src/lib/components/navbar/sidebar.svelte
@@ -16,11 +16,11 @@
 					title: 'RHG App',
 					link: `/users/${userId}/home`
 				},
-				{
-					icon: '/rean-logo-white.png',
-					title: 'RHG Bot',
-					link: `/users/${userId}/bot-stats`
-				}
+				// {
+				// 	icon: '/rean-logo-white.png',
+				// 	title: 'RHG Bot',
+				// 	link: `/users/${userId}/bot-stats`
+				// }
 			]
 		},
 		{
@@ -164,7 +164,7 @@
 			]
 		},
 		{
-			title: 'Gamifiation',
+			title: 'Gamification',
 			icon: 'simple-icons:gamedeveloper',
 			childNav: [
 				{

diff --git a/src/lib/components/users-stats/charts/platform-based-chart.svelte b/src/lib/components/users-stats/charts/platform-based-chart.svelte
@@ -28,7 +28,7 @@
 						fill: false
 					},
 					{
-						label: 'IOS users',
+						label: 'iOS users',
 						data: iOSUsersData,
 						borderColor: 'purple',
 						fill: false

diff --git a/src/routes/users/[userId]/careplan/careplans/+page.svelte b/src/routes/users/[userId]/careplan/careplans/+page.svelte
@@ -153,7 +153,7 @@
 				<th data-sort="Code">Code</th>
 				<th>
 					<button on:click={() => sortTable('CategoryId')}>
-						Type {isSortingCategoryId ? (sortOrder === 'ascending' ? '▲' : '▼') : ''}
+						Category {isSortingCategoryId ? (sortOrder === 'ascending' ? '▲' : '▼') : ''}
 					</button>
 				</th>
 				<th />

diff --git a/src/routes/users/[userId]/careplan/enrollments/[enrollmentId]/tasks/+page.server.ts b/src/routes/users/[userId]/careplan/enrollments/[enrollmentId]/tasks/+page.server.ts
@@ -21,7 +21,8 @@ export const load: PageServerLoad = async (event: RequestEvent) => {
 		const participantId = enrollment.ParticipantId;
 		const careplanId = enrollment.CareplanId;
 		const searchParams ={
-			careplanId :careplanId
+			careplanId :careplanId,
+			participantId: participantId
 		}
 		const enrollmentTask_ = await searchEnrollmentTask(sessionId, searchParams);
 		const participantResponse_ = await searchParticipantActivities(sessionId, participantId);

diff --git a/src/routes/users/[userId]/courses/+page.svelte b/src/routes/users/[userId]/courses/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	// import { createDataTableStore, dataTableHandler } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 	import BreadCrumbs from '$lib/components/breadcrumbs/breadcrums.svelte';
 	import type { PageServerData } from './$types';
 	import CourseView from '$lib/components/courses.view/courses.view.svelte';
 	import { showMessage } from '$lib/utils/message.utils';
 	import { browser } from '$app/environment';
+	import { Paginator, type PaginationSettings } from '@skeletonlabs/skeleton';
 
 	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
@@ -34,13 +34,8 @@
 	let sortOrder = 'ascending';
 	let itemsPerPage = 10;
 	let pageIndex = 0;
-
-	// const searchParams = async (name: string, durationInDays: string) => {
-	// 	await searchCourse({
-	// 		name: name,
-	// 		durationInDays: durationInDays
-	// 	});
-	// };
+	let items = 10;
+	
 	$: if (browser)
 	searchCourse({
 		name: name,
@@ -67,11 +62,30 @@
 			headers: { 'content-type': 'application/json' }
 		});
 		const response = await res.json();
-
 		courses = response.map((item, index) => ({ ...item, index: index + 1 }));
+	}
+
+	let paginationSettings = {
+		page: 0,
+		limit: 10,
+		size: toatalCourseCount,
+		amounts: [10, 20, 30, 50]
+	} satisfies PaginationSettings;
 
+	function onPageChange(e: CustomEvent): void {
+		let pageIndex = e.detail;
+		itemsPerPage = items * (pageIndex + 1);
 	}
 
+	function onAmountChange(e: CustomEvent): void {
+		itemsPerPage = e.detail;
+		items = itemsPerPage;
+	}
+
+	$: retrivedCourses = courses.slice(
+		paginationSettings.page * paginationSettings.limit,
+		paginationSettings.page * paginationSettings.limit + paginationSettings.limit
+	);
 	const handleCourseDelete = async (id, modules) => {
 		const courseId = id;
 		console.log('courseId', courseId);
@@ -144,18 +158,34 @@
 <BreadCrumbs crumbs={breadCrumbs} />
 
 <div class="flex flex-wrap gap-2 mt-1">
-	<a href={createRoute} class="btn variant-filled-secondary ml-auto">Add New</a>
+	<input
+		type="text"
+		name="name"
+		placeholder="Search by name"
+		bind:value={name}
+		class="input w-auto grow"
+	/>
+	<a href={createRoute} class="btn variant-filled-secondary">Add New</a>
 </div>
 
 <CourseView
-	{courses}
+  courses={retrivedCourses}
 	{userId}
-	itemsPerPage= {itemsPerPage}
-	toatalCourseCount= {toatalCourseCount}
-	on:searchCourse={async () => await searchCourse({name, durationInDays, itemsPerPage, pageIndex, sortOrder, sortBy })}
 	on:onContentDeleteClick={async (e) => await handleContentDelete(e.detail.contentId)}
 	on:onModuleDeleteClick={async (e) =>
 		await handleModuleDelete(e.detail.moduleId, e.detail.contents)}
 	on:onCourseDeleteClick={async (e) =>
 		await handleCourseDelete(e.detail.courseId, e.detail.modules)}
 />
+
+<div class="w-full variant-soft-secondary rounded-lg p-2">
+	<Paginator
+		bind:settings={paginationSettings}
+		on:page={onPageChange}
+		on:amount={onAmountChange}
+		buttonClasses=" text-primary-500"
+		regionControl = 'bg-surface-100 rounded-lg btn-group text-primary-500 border border-primary-200'
+		controlVariant = 'rounded-full text-primary-500 '
+		controlSeparator = 'fill-primary-400'
+		/>
+</div>
diff --git a/src/routes/users/[userId]/gamification/schemas/+page.svelte b/src/routes/users/[userId]/gamification/schemas/+page.svelte
@@ -21,7 +21,7 @@
 	const viewRoute = (id) => `/users/${userId}/gamification/schemas/${id}/view`;
 	const schemaRoute = `/users/${userId}/gamification/schemas`;
 
-	const breadCrumbs = [{ name: 'schemas', path: schemaRoute }];
+	const breadCrumbs = [{ name: 'Schemas', path: schemaRoute }];
 
 	let name = undefined;
 	let sortBy = 'Name';

diff --git a/src/routes/users/[userId]/home/+page.server.ts b/src/routes/users/[userId]/home/+page.server.ts
@@ -19,7 +19,13 @@ export const load: PageServerLoad = async (event: RequestEvent) => {
 		const _appDownloadsData = await getAppDownloadsData(sessionId);
 		const _years = await getYears(sessionId);
 		const overallUsersData = _overallUsersData.Data.UsersCountStats;
-		const deviceDetailWiseUsers = _deviceDetailWiseUsers.Data.DeviceDetailWiseUsers;
+		const deviceDetailWiseUsers_ = _deviceDetailWiseUsers.Data.DeviceDetailWiseUsers;
+		const deviceDetailWiseUsers = deviceDetailWiseUsers_.map(item => {
+			if (item.OSType === 'aaa') {
+				return { OSType: 'Missing device detail', count: item.count };
+			}
+			return item;
+		});
 		// const enrollmentUsers = _enrollmentUsers.Data.EnrollmentUsers;
 
 		let years = _years.Data.Years;
@@ -64,8 +70,8 @@ export const load: PageServerLoad = async (event: RequestEvent) => {
 			if (deviceDetail.OSType === 'iOS'){
 				iOSUsersArray.push(deviceDetail.count)
 			}
-			else if (deviceDetail.OSType === 'android'){
-				iOSUsersArray.push(deviceDetail.count)
+			else if (deviceDetail.OSType === 'Android'){
+				androidUsersArray.push(deviceDetail.count)
 			}
 		}
 

diff --git a/src/routes/users/[userId]/home/+page.svelte b/src/routes/users/[userId]/home/+page.svelte
@@ -35,8 +35,8 @@
 		// downloads,
 		totalUsers.Count,
 		nonDeletedUsers.Count,
-		activeUsers.Count,
-		enrolledUsersData.Count
+		enrolledUsersData.Count,
+		activeUsers.Count,	
 	];
 	
 </script>
@@ -178,25 +178,25 @@
 				<div class="text-sm font-normal text-primary-500 dark:text-primary-100">{downloads}</div>
 			</div> -->
 			<div class="flex gap-4 w-full py-1">
-				<div class="h-3 w-3 mt-1 border bg-primary-500" />
+				<div class="h-3 w-3 mt-1 border bg-primary-700" />
 				<div class="text-sm w-2/3 font-normal text-primary-500 dark:text-primary-100">Onboarded Users</div>
 				<div class="text-sm w-1/3 font-normal text-primary-500 dark:text-primary-100">{totalUsers.Count}</div>
 			</div>
 			<div class="flex gap-4 w-full py-1">
-				<div class="h-3 w-3 mt-1 border bg-secondary-500" />
+				<div class="h-3 w-3 mt-1 border bg-primary-500" />
 				<div class="text-sm w-2/3 font-normal text-primary-500 dark:text-primary-100">Not Deleted Users</div>
 				<div class="text-sm w-1/3 font-normal text-primary-500 dark:text-primary-100">{nonDeletedUsers.Count}</div>
 			</div>
+			<div class="flex gap-4 py-1 w-full">
+				<div class="h-3 w-3 mt-1 border bg-secondary-500" />
+				<div class="text-sm w-2/3 font-normal text-primary-500 dark:text-primary-100">Enrolled Users</div>
+				<div class="text-sm w-1/3 font-normal text-primary-500 dark:text-primary-100">{enrolledUsersData.Count}</div>
+			</div>
 			<div class="flex gap-4 w-full py-1">
 				<div class="h-3 w-3 mt-1 border bg-tertiary-500" />
 				<div class="text-sm w-2/3 font-normal text-primary-500 dark:text-primary-100">Users With Active Session</div>
 				<div class="text-sm w-1/3 font-normal text-primary-500 dark:text-primary-100">{activeUsers.Count}</div>
 			</div>
-			<div class="flex gap-4 py-1 w-full">
-				<div class="h-3 w-3 mt-1 border bg-primary-700" />
-				<div class="text-sm w-2/3 font-normal text-primary-500 dark:text-primary-100">Enrolled Users</div>
-				<div class="text-sm w-1/3 font-normal text-primary-500 dark:text-primary-100">{enrolledUsersData.Count}</div>
-			</div>
 		</div>
 	</div>
 	<div

diff --git a/src/routes/users/[userId]/notifications/[id]/edit/+page.svelte b/src/routes/users/[userId]/notifications/[id]/edit/+page.svelte
@@ -150,9 +150,14 @@
 						placeholder="select type here..."
 					>
 						<option>General</option>
-						<option>Auto</option>
-						<option>Dark mode</option>
-						<option>Light mode</option>
+						<option value="Email">Email</option>
+						<option value="SMS">SMS</option>
+						<option value="WebPush">Web Push</option>
+						<option value="MobilePush">Mobile Push</option>
+						<option value="Webhook">Webhook</option>
+						<option value="WhatsApp">Whats App</option>
+						<option value="Telegram">Telegram</option>
+						<option value="Slack">Slack</option>
 					</select>
 				</td>
 			</tr>

diff --git a/src/routes/users/[userId]/notifications/create/+page.svelte b/src/routes/users/[userId]/notifications/create/+page.svelte
@@ -107,9 +107,14 @@
 				<td>
 					<select class="select w-full" name="type" placeholder="select type here...">
 						<option selected>General</option>
-						<option>Auto</option>
-						<option>Dark mode</option>
-						<option>Light mode</option>
+						<option value="Email">Email</option>
+						<option value="SMS">SMS</option>
+						<option value="WebPush">Web Push</option>
+						<option value="MobilePush">Mobile Push</option>
+						<option value="Webhook">Webhook</option>
+						<option value="WhatsApp">Whats App</option>
+						<option value="Telegram">Telegram</option>
+						<option value="Slack">Slack</option>
 					</select>
 				</td>
 			</tr>

diff --git a/src/routes/users/[userId]/symptoms/+page.server.ts b/src/routes/users/[userId]/symptoms/+page.server.ts
@@ -18,20 +18,21 @@ export const load: PageServerLoad = async (event: RequestEvent) => {
 		const symptomsCount = response.Data.SymptomTypes.TotalCount;
 		const symptoms = response.Data.SymptomTypes.Items;
 
-		for (const symptom of symptoms) {
-			if (symptom.ImageResourceId) {
-				symptom['ImageUrl'] =
-					BACKEND_API_URL +
-					`/file-resources/${symptom.ImageResourceId}/download?disposition=inline`;
-			} else {
-				symptom['ImageUrl'] = null;
-			}
-		}
+		// for (const symptom of symptoms) {
+		// 	if (symptom.ImageResourceId) {
+		// 		symptom['ImageUrl'] =
+		// 			BACKEND_API_URL +
+		// 			`/file-resources/${symptom.ImageResourceId}/download?disposition=inline`;
+		// 	} else {
+		// 		symptom['ImageUrl'] = null;
+		// 	}
+		// }
 		return {
 			symptomsCount,
 			symptoms,
 			sessionId,
-			message: response.Message
+			message: response.Message,
+			backendUrl:BACKEND_API_URL
 		};
 	} catch (error) {
 		console.error(`Error retriving symptom: ${error.message}`);