feat: setup drizzle (#594)
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
This commit is contained in:
Rotimi Best
@@ -1,22 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
|
||||
import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
|
||||
import Explore from 'carbon-icons-svelte/lib/Explore.svelte';
|
||||
import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
|
||||
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
|
||||
import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
|
||||
import type { Component } from 'svelte';
|
||||
import { page } from '$app/state';
|
||||
import BadgeHelpIcon from '@lucide/svelte/icons/badge-help';
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo';
|
||||
import MapPlusIcon from '@lucide/svelte/icons/map-plus';
|
||||
import LayoutDashboardIcon from '@lucide/svelte/icons/layout-dashboard';
|
||||
import LibraryBigIcon from '@lucide/svelte/icons/library-big';
|
||||
import UsersIcon from '@lucide/svelte/icons/users';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { NavClasses } from '$lib/utils/constants/reusableClass';
|
||||
import { profileMenu, sideBar } from '$lib/components/Org/store';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { ChevronRight } from 'carbon-icons-svelte';
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
|
||||
import ProfileMenu from '$lib/components/Org/ProfileMenu/index.svelte';
|
||||
|
||||
interface SideLinks {
|
||||
name: string;
|
||||
icon: any;
|
||||
icon: Component;
|
||||
link: string;
|
||||
show?: () => boolean;
|
||||
}
|
||||
@@ -32,41 +34,41 @@
|
||||
return pagePath.includes(itemPath);
|
||||
}
|
||||
|
||||
let sideLinks: SideLinks[] = [];
|
||||
|
||||
$: sideLinks = [
|
||||
{
|
||||
name: $t('lms_navigation.home'),
|
||||
icon: HomeIcon,
|
||||
link: '/lms'
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.my_learning'),
|
||||
icon: CourseIcon,
|
||||
link: '/lms/mylearning'
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.exercise'),
|
||||
icon: LicenseDraft,
|
||||
link: '/lms/exercises',
|
||||
show() {
|
||||
return $currentOrg?.customization?.dashboard?.exercise;
|
||||
const sideLinks: SideLinks[] = $derived.by(() =>
|
||||
[
|
||||
{
|
||||
name: $t('lms_navigation.home'),
|
||||
icon: LayoutDashboardIcon,
|
||||
link: '/lms'
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.my_learning'),
|
||||
icon: LibraryBigIcon,
|
||||
link: '/lms/mylearning'
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.exercise'),
|
||||
icon: ListTodoIcon,
|
||||
link: '/lms/exercises',
|
||||
show() {
|
||||
return $currentOrg?.customization?.dashboard?.exercise;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.community'),
|
||||
icon: UsersIcon,
|
||||
link: '/lms/community',
|
||||
show() {
|
||||
return $currentOrg?.customization?.dashboard?.community;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.explore'),
|
||||
icon: MapPlusIcon,
|
||||
link: '/lms/explore'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.community'),
|
||||
icon: CommunityIcon,
|
||||
link: '/lms/community',
|
||||
show() {
|
||||
return $currentOrg?.customization?.dashboard?.community;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: $t('lms_navigation.explore'),
|
||||
icon: Explore,
|
||||
link: '/lms/explore'
|
||||
}
|
||||
].filter((link) => (link.show ? link.show() : true));
|
||||
].filter((link) => (link.show ? link.show() : true))
|
||||
);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
$sideBar.hidden = !$sideBar.hidden;
|
||||
@@ -77,25 +79,17 @@
|
||||
<aside
|
||||
class={`${
|
||||
$sideBar.hidden
|
||||
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40 top-[48px] md:top-0'
|
||||
: 'translate-x-0 absolute md:relative z-40 top-[48px] md:top-0'
|
||||
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)]`}
|
||||
? 'absolute top-[48px] z-40 -translate-x-[100%] md:relative md:top-0 md:translate-x-0'
|
||||
: 'absolute top-[48px] z-40 translate-x-0 md:relative md:top-0'
|
||||
} h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto bg-gray-100 transition dark:bg-neutral-900`}
|
||||
>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="border-b border-gray-200 dark:border-neutral-600 pt-5 px-4">
|
||||
<div class="w-full flex flex-col items-center">
|
||||
<Avatar
|
||||
src={$profile.avatar_url}
|
||||
name={$profile.fullname}
|
||||
shape="rounded-full"
|
||||
width="w-20"
|
||||
height="h-20"
|
||||
/>
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="border-b border-gray-200 px-4 pt-5 dark:border-neutral-600">
|
||||
<div class="flex w-full flex-col items-center">
|
||||
<Avatar src={$profile.avatar_url} name={$profile.fullname} shape="rounded-full" width="w-20" height="h-20" />
|
||||
|
||||
<div class="mt-5 flex justify-center w-full">
|
||||
<p
|
||||
class="dark:text-white text-lg font-bold whitespace-nowrap truncate max-w-[80%] text-center"
|
||||
>
|
||||
<div class="mt-5 flex w-full justify-center">
|
||||
<p class="max-w-[80%] truncate whitespace-nowrap text-center text-lg font-bold dark:text-white">
|
||||
{$profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
@@ -103,53 +97,45 @@
|
||||
|
||||
<ul class="my-5">
|
||||
{#each sideLinks as item}
|
||||
<a href={item.link} class="text-black" on:click={toggleSidebar}>
|
||||
<a href={item.link} class="text-black" onclick={toggleSidebar}>
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
|
||||
$page.url.pathname,
|
||||
`${item.link}`
|
||||
)
|
||||
class="mb-2 flex items-center px-4 py-3 {NavClasses.item} {isActive(page.url.pathname, `${item.link}`)
|
||||
? NavClasses.active
|
||||
: 'dark:text-white'}"
|
||||
>
|
||||
<svelte:component this={item.icon} size={24} class="carbon-icon dark:fill-[#fff]" />
|
||||
<p class="dark:text-white ml-2">{item.name}</p>
|
||||
<item.icon />
|
||||
<p class="ml-2 dark:text-white">{item.name}</p>
|
||||
</li>
|
||||
</a>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<span class="flex-grow" />
|
||||
<ul class="my-5 pb-5 px-4">
|
||||
<a href="/lms" class="text-black" on:click={toggleSidebar}>
|
||||
<li class="flex items-center py-3 px-4 mb-2 rounded">
|
||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||
<p class="dark:text-white ml-2">{$t('lms_navigation.help')}</p>
|
||||
<span class="flex-grow"></span>
|
||||
<ul class="my-5 px-4 pb-5">
|
||||
<a href="/lms" class="text-black" onclick={toggleSidebar}>
|
||||
<li class="mb-2 flex items-center rounded px-4 py-3">
|
||||
<BadgeHelpIcon size={16} />
|
||||
<p class="ml-2 dark:text-white">{$t('lms_navigation.help')}</p>
|
||||
</li>
|
||||
</a>
|
||||
<button
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
$profileMenu.open = !$profileMenu.open;
|
||||
$sideBar.hidden = true;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="text-black no-underline cursor-pointer flex items-center justify-between mb-2 px-2.5 py-1.5 w-full {NavClasses.item}"
|
||||
class="mb-2 flex w-full cursor-pointer items-center justify-between px-2.5 py-1.5 text-black no-underline {NavClasses.item}"
|
||||
>
|
||||
<div class="flex text-start items-center justify-start space-x-1">
|
||||
<Avatar
|
||||
src={$profile.avatar_url}
|
||||
name={$profile.username}
|
||||
width="w-[1.2rem]"
|
||||
height="h-[1.2rem]"
|
||||
/>
|
||||
<p class="text-sm dark:text-white font-medium truncate max-w-full">
|
||||
<div class="flex items-center justify-start space-x-1 text-start">
|
||||
<Avatar src={$profile.avatar_url} name={$profile.username} width="w-[1.2rem]" height="h-[1.2rem]" />
|
||||
<p class="max-w-full truncate text-sm font-medium dark:text-white">
|
||||
{$profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ChevronRight />
|
||||
<ChevronRightIcon size={16} />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -11,25 +11,25 @@
|
||||
goto(`/courses/${id}/lessons?next=true`);
|
||||
};
|
||||
|
||||
$: last3Courses = $courses.length > 0 ? $courses.slice(0, 3) : [];
|
||||
let last3Courses = $derived($courses.length > 0 ? $courses.slice(0, 3) : []);
|
||||
</script>
|
||||
|
||||
<section class="h-full">
|
||||
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">
|
||||
<p class="pb-3 text-base font-semibold text-[#040F2D] dark:text-white">
|
||||
{$t('dashboard.current_lesson')}
|
||||
</p>
|
||||
<div
|
||||
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full lg:h-[40vh] p-3"
|
||||
class="flex w-full flex-col items-center gap-2 rounded border border-[#EAEAEA] p-3 lg:h-[40vh] dark:bg-neutral-800"
|
||||
>
|
||||
{#if last3Courses.length > 0}
|
||||
<div class="w-full h-full flex flex-col justify-start overflow-y-auto">
|
||||
<div class="flex h-full w-full flex-col justify-start overflow-y-auto">
|
||||
{#each last3Courses as course}
|
||||
<div class="p-5">
|
||||
<span class="flex flex-col lg:flex-row gap-3 items-start pb-5">
|
||||
<span class="flex flex-col items-start gap-3 pb-5 lg:flex-row">
|
||||
<img
|
||||
src={course.logo || '/images/classroomio-course-img-template.jpg'}
|
||||
alt="course"
|
||||
class="hidden lg:block lg:w-[60px] lg:h-[60px]"
|
||||
class="hidden lg:block lg:h-[60px] lg:w-[60px]"
|
||||
/>
|
||||
<div class="w-full">
|
||||
<p class="text-base font-semibold dark:text-white">{course.title}</p>
|
||||
@@ -44,20 +44,18 @@
|
||||
onClick={() => gotoCourse(course.id)}
|
||||
/>
|
||||
</span>
|
||||
<div class="relative bg-[#EAEAEA] w-full h-1">
|
||||
<div class="relative h-1 w-full bg-[#EAEAEA]">
|
||||
<div
|
||||
style="width: {Math.round(
|
||||
((course?.progress_rate ?? 0) / (course?.total_lessons ?? 0)) * 100
|
||||
) || 0}%"
|
||||
class={`absolute top-0 left-0 bg-primary-700 h-full`}
|
||||
/>
|
||||
style="width: {Math.round(((course?.progress_rate ?? 0) / (course?.total_lessons ?? 0)) * 100) || 0}%"
|
||||
class="bg-primary-700 absolute left-0 top-0 h-full"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center">
|
||||
<CoursesEmptyIcon />
|
||||
<CoursesEmptyIcon size={16} />
|
||||
<h3 class="text-center">{$t('dashboard.no_courses')}</h3>
|
||||
<p class="w-[75%] text-center">{$t('dashboard.start_course')}</p>
|
||||
</div>
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
import LanguagePicker from '$lib/components/Org/Settings/LanguagePicker.svelte';
|
||||
import { handleLocaleChange } from '$lib/utils/functions/translations';
|
||||
|
||||
let avatar = '';
|
||||
let loading = false;
|
||||
let hasLangChanged = false;
|
||||
let locale = '';
|
||||
let avatar = $state('');
|
||||
let loading = $state(false);
|
||||
let hasLangChanged = $state(false);
|
||||
let locale = $derived($profile.locale);
|
||||
|
||||
async function handleUpdate() {
|
||||
try {
|
||||
@@ -70,8 +70,6 @@
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: locale = $profile.locale;
|
||||
</script>
|
||||
|
||||
<Grid class="border-c mt-5 w-full rounded border-gray-200 dark:border-neutral-600">
|
||||
@@ -104,11 +102,7 @@
|
||||
className="w-full lg:w-60 mb-4"
|
||||
/>
|
||||
|
||||
<LanguagePicker
|
||||
bind:hasLangChanged
|
||||
bind:value={$profile.locale}
|
||||
className="w-full lg:w-60 mb-4"
|
||||
/>
|
||||
<LanguagePicker bind:hasLangChanged bind:value={$profile.locale} className="w-full lg:w-60 mb-4" />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row class="m-5 flex w-full items-center gap-2 lg:justify-center">
|
||||
|
||||
Reference in New Issue
Block a user