From fdadc7bccfd4c68eac50b88905a4ad86f4704e31 Mon Sep 17 00:00:00 2001 From: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com> Date: Tue, 23 Dec 2025 11:25:38 +0100 Subject: [PATCH] feat: include image cropper (#617) * fix: include image cropper * clean styles * ui improvements * bug bot feedbacks * fix: update image upload format to PNG for consistency with cropping output --------- Co-authored-by: Rotimi Best --- .../components/Lesson/LessonList.svelte | 2 +- .../Lesson/LessonSectionList.svelte | 2 +- .../components/NewsFeed/NewsFeedLoader.svelte | 3 +- .../features/community/pages/community.svelte | 17 +- .../lib/features/course/pages/newsfeed.svelte | 6 +- .../src/lib/features/ui/upload-image.svelte | 177 +++++++-------- .../src/lib/utils/translations/en.json | 3 +- .../src/routes/lms/settings/+page.svelte | 2 +- .../routes/org/[slug]/settings/+page.svelte | 2 +- .../ui/src/base/sidebar/sidebar-inset.svelte | 2 +- packages/ui/src/custom/empty/empty.svelte | 4 +- .../image-cropper-upload-trigger.svelte | 19 +- .../custom/image-cropper/image-cropper.svelte | 72 ++++--- .../image-cropper/image-cropper.svelte.ts | 204 ++++++++++-------- packages/ui/src/custom/image-cropper/types.ts | 35 ++- packages/ui/src/output.css | 2 +- 16 files changed, 293 insertions(+), 259 deletions(-) diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/LessonList.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/LessonList.svelte index aeb9dd58..d51eeafb 100644 --- a/apps/dashboard/src/lib/components/Course/components/Lesson/LessonList.svelte +++ b/apps/dashboard/src/lib/components/Course/components/Lesson/LessonList.svelte @@ -79,7 +79,7 @@
-
+
-
diff --git a/apps/dashboard/src/lib/features/community/pages/community.svelte b/apps/dashboard/src/lib/features/community/pages/community.svelte index 87c57c8e..4fe1c646 100644 --- a/apps/dashboard/src/lib/features/community/pages/community.svelte +++ b/apps/dashboard/src/lib/features/community/pages/community.svelte @@ -8,15 +8,14 @@ import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more'; import MessageCirclePlusIcon from '@lucide/svelte/icons/message-circle-plus'; + import { Vote } from '$features/ui'; import { profile } from '$lib/utils/store/user'; import { t } from '$lib/utils/functions/translations'; - import { communityApi } from '../api/community.svelte'; import { calDateDiff } from '$lib/utils/functions/date'; import { currentOrg, currentOrgPath } from '$lib/utils/store/org'; - import { AskCommunityButton } from '../components'; - import { CommunityListLoader } from '../components'; - import { Vote } from '$features/ui'; + import { CommunityListLoader, AskCommunityButton } from '../components'; + import { communityApi } from '../api/community.svelte'; import type { CommunityQuestionData } from '../utils/types'; interface Props { @@ -32,9 +31,7 @@ if (!orgId || !profileId) return; untrack(async () => { - // Fetch courses - API class handles this await communityApi.fetchCoursesForOrg(profileId, orgId); - // Call API - API class handles loading, errors, navigation await communityApi.fetchCommunityQuestions({ orgId, isLMS }); }); } @@ -46,8 +43,8 @@ let filteredQuestions = $derived( communityApi.questions.filter( (question: CommunityQuestionData[number]) => - question.title.toLowerCase().includes(searchValue.toLowerCase()) && - (!selectedId || question.courseId === selectedId) + question?.title?.toLowerCase?.()?.includes(searchValue.toLowerCase()) && + (!selectedId || question?.courseId === selectedId) ) ); @@ -90,11 +87,11 @@ {question.title} - {question.authorFullname} asked {calDateDiff(question.createdAt)} + {question?.authorFullname} asked {calDateDiff(question?.createdAt)} e.stopPropagation()}> - #{question.courseTitle} + #{question?.courseTitle} diff --git a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte index 1b3ddae4..67290028 100644 --- a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte +++ b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte @@ -250,7 +250,7 @@ /> {#if isLoading} -
+
@@ -260,8 +260,7 @@ title={$t('course.navItem.news_feed.body_header')} description={$t('course.navItem.news_feed.body_content')} icon={BookIcon} - class="h-full" - > + /> {:else} {#each $newsFeed as feed} {#if feed.isPinned} @@ -286,4 +285,3 @@ {/each} {/if} - diff --git a/apps/dashboard/src/lib/features/ui/upload-image.svelte b/apps/dashboard/src/lib/features/ui/upload-image.svelte index 4be40752..6869309a 100644 --- a/apps/dashboard/src/lib/features/ui/upload-image.svelte +++ b/apps/dashboard/src/lib/features/ui/upload-image.svelte @@ -1,6 +1,8 @@ -
-
- -
- -
- -

- {$t('settings.profile.profile_picture.file_size')} - {maxFileSizeInMb}MB
- {$t('settings.profile.profile_picture.accepted')}: jpeg, jpg, png, webp -

- {#if errorMessage} -

{errorMessage}

- {/if} -
- - + onFileSelected(e)} - bind:this={fileinput} - /> + disabled={isDisabled || isUploading} + > + +
+ + {#snippet child({ src: imageSrc })} +
+ +
+ +
+
+ {/snippet} +
+
+ +
+ {#if isUploading} + + {:else} + + {/if} + {$t('settings.profile.profile_picture.upload_image')} +
+
+
+

+ {$t('settings.profile.profile_picture.file_size')} + {maxFileSizeInMb}MB
+ {$t('settings.profile.profile_picture.accepted')}: jpeg, jpg, png, webp +

+ {#if errorMessage} +

{errorMessage}

+ {/if} +
+ + + + + + + + +
- - diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json index 6a8a9758..0e8a03b8 100644 --- a/apps/dashboard/src/lib/utils/translations/en.json +++ b/apps/dashboard/src/lib/utils/translations/en.json @@ -123,12 +123,13 @@ "email_change_verification_note": "A verification email has been sent to your current email address. The new email will not be in effect until you accept the verification email.", "email_change_verification_sent": "A verification email has been sent to your new email address. Please check your inbox to verify your new email address." }, + "heading": "Profile", "update_profile": "Update Profile", "logout": "Log out" }, "organization": { "organization_profile": { - "heading": "Organization Profile", + "heading": "Organization", "organization_name": "Organization Name", "upload_image": "Upload Image", "update_organization": "Update Organization", diff --git a/apps/dashboard/src/routes/lms/settings/+page.svelte b/apps/dashboard/src/routes/lms/settings/+page.svelte index 18883cb1..f463ca33 100644 --- a/apps/dashboard/src/routes/lms/settings/+page.svelte +++ b/apps/dashboard/src/routes/lms/settings/+page.svelte @@ -24,7 +24,7 @@ - {$t('settings.heading')} + {$t('settings.profile.heading')}