feat: 🚀 😃 convert repo into a monorepo 🚀 😃 (#51)
* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
This commit is contained in:
Rotimi Best
@@ -0,0 +1,115 @@
|
||||
<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 Settings from 'carbon-icons-svelte/lib/Settings.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 Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { NavClasses } from '$lib/utils/constants/reusableClass';
|
||||
import { sideBar } from '$lib/components/Org/store';
|
||||
|
||||
function isActive(pagePath: string, itemPath: string) {
|
||||
const pageLinkItems = pagePath.split('/');
|
||||
const itemLinkItems = itemPath.split('/');
|
||||
|
||||
if (itemLinkItems.length !== pageLinkItems.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return pagePath.includes(itemPath);
|
||||
}
|
||||
let sideLinks = [
|
||||
{
|
||||
name: 'Home',
|
||||
icon: HomeIcon,
|
||||
link: '/lms'
|
||||
},
|
||||
{
|
||||
name: 'My Learning',
|
||||
icon: CourseIcon,
|
||||
link: '/lms/mylearning'
|
||||
},
|
||||
{
|
||||
name: 'Exercise',
|
||||
icon: LicenseDraft,
|
||||
link: '/lms/exercises'
|
||||
},
|
||||
{
|
||||
name: 'Community',
|
||||
icon: CommunityIcon,
|
||||
link: '/lms/community'
|
||||
}
|
||||
];
|
||||
const toggleSidebar = () => {
|
||||
$sideBar.hidden = !$sideBar.hidden;
|
||||
};
|
||||
</script>
|
||||
|
||||
<aside
|
||||
class={`${
|
||||
$sideBar.hidden
|
||||
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
|
||||
: 'translate-x-0 absolute md:relative z-40'
|
||||
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)]`}
|
||||
>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="border-b border-gray-200 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="mt-5">
|
||||
<p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
|
||||
{$profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="my-5">
|
||||
{#each sideLinks as item (item.name)}
|
||||
<a href={item.link} class="text-black" on:click={toggleSidebar}>
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 {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>
|
||||
</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">Help</p>
|
||||
</li>
|
||||
</a>
|
||||
<a href="/lms/settings" class="text-black" on:click={toggleSidebar}>
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
|
||||
$page.url.pathname,
|
||||
`/lms/settings`
|
||||
) && NavClasses.active}"
|
||||
>
|
||||
<Settings size={20} class="carbon-icon dark:text-white" />
|
||||
<p class="dark:text-white ml-2">Settings</p>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { goto } from '$app/navigation';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
|
||||
import { coursesInProgress } from '$lib/components/Courses/store';
|
||||
|
||||
const gotoCourse = (id: string | undefined) => {
|
||||
if (!id) return;
|
||||
goto(`/courses/${id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="h-full">
|
||||
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</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"
|
||||
>
|
||||
{#if $coursesInProgress.length > 0}
|
||||
<div class="w-full h-full flex flex-col justify-start overflow-y-auto">
|
||||
{#each $coursesInProgress as course}
|
||||
<div class="p-5">
|
||||
<span class="flex flex-col lg:flex-row gap-3 items-start pb-5">
|
||||
<img
|
||||
src={course.logo || '/images/classroomio-course-img-template.jpg'}
|
||||
alt="course"
|
||||
class="hidden lg:block lg:w-[60px] lg:h-[60px]"
|
||||
/>
|
||||
<div class="w-full">
|
||||
<p class="text-base font-semibold dark:text-white">{course.title}</p>
|
||||
<p class="line-clamp-2 text-xs font-normal text-[#656565] dark:text-white">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
<PrimaryButton
|
||||
label="Continue"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
className="rounded-none text-[#0233BD]"
|
||||
onClick={() => gotoCourse(course.id)}
|
||||
/>
|
||||
</span>
|
||||
<div class="relative bg-[#EAEAEA] w-full h-1">
|
||||
<div
|
||||
style="width:{course.progress_rate}%"
|
||||
class={`absolute top-0 left-0 bg-primary-700 h-full`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center">
|
||||
<CoursesEmptyIcon />
|
||||
<h3 class="text-center">No courses in progress yet</h3>
|
||||
<p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script>
|
||||
import { Grid, Row, Column } from 'carbon-components-svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import UploadImage from '$lib/components/UploadImage/index.svelte';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
|
||||
import generateUUID from '$lib/utils/functions/generateUUID';
|
||||
|
||||
let avatar = '';
|
||||
let loading = false;
|
||||
|
||||
async function handleUpdate() {
|
||||
try {
|
||||
loading = true;
|
||||
|
||||
const updates = {
|
||||
fullname: $profile.fullname,
|
||||
username: $profile.username
|
||||
};
|
||||
|
||||
if (avatar) {
|
||||
const filename = `user/${generateUUID()}.webp`;
|
||||
|
||||
const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
|
||||
cacheControl: '3600',
|
||||
upsert: false
|
||||
});
|
||||
if (data) {
|
||||
const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
|
||||
|
||||
updates.avatar_url = response.publicUrl;
|
||||
$profile.avatar_url = response.publicUrl;
|
||||
}
|
||||
avatar = undefined;
|
||||
}
|
||||
|
||||
let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
|
||||
|
||||
profile.update((_profile) => ({
|
||||
..._profile,
|
||||
...updates
|
||||
}));
|
||||
snackbar.success();
|
||||
|
||||
if (error) throw error;
|
||||
} catch (error) {
|
||||
let message = error.message;
|
||||
if (message.includes('profile_username_key')) {
|
||||
message = 'username already exists';
|
||||
}
|
||||
|
||||
snackbar.error(`Update failed: ${message}`);
|
||||
loading = false;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Grid class="border-c rounded border-gray-200 w-full mt-5">
|
||||
<Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
|
||||
<Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
|
||||
<p class="dark:text-white font-bold">Profile Picture</p>
|
||||
</Column>
|
||||
<Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
|
||||
<UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
|
||||
<Column sm={4} md={4} lg={4}>
|
||||
<p class="dark:text-white font-bold">Personal Information</p>
|
||||
</Column>
|
||||
<Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
|
||||
<TextField label="Full Name" bind:value={$profile.fullname} className="w-full lg:w-60 mb-4" />
|
||||
<TextField label="Username" bind:value={$profile.username} className="w-full lg:w-60 mb-4" />
|
||||
<TextField label="Email" bind:value={$profile.email} className="w-full lg:w-60 mb-4" />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
|
||||
<PrimaryButton
|
||||
label="Update Profile"
|
||||
className="mr-5"
|
||||
isLoading={loading}
|
||||
isDisabled={loading}
|
||||
onClick={handleUpdate}
|
||||
/>
|
||||
<LogoutButton />
|
||||
</Row>
|
||||
</Grid>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { InlineCalendar, Datepicker } from 'svelte-calendar';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import { formatDate } from '$lib/utils/functions/routes/dashboard';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
|
||||
let store;
|
||||
|
||||
const theme = {
|
||||
calendar: {
|
||||
width: '250px',
|
||||
height: '200px',
|
||||
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
|
||||
colors: {
|
||||
background: {
|
||||
highlight: '#0F62FE'
|
||||
}
|
||||
},
|
||||
font: {
|
||||
regular: '0.7em',
|
||||
large: '0.9em'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="w-full h-full mt-2">
|
||||
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
|
||||
|
||||
<div
|
||||
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 rounded w-full h-fit lg:h-[40vh] p-3 overflow-y-auto"
|
||||
>
|
||||
<div class="w-full h-fit hidden xl:flex items-center justify-center">
|
||||
<InlineCalendar bind:store {theme} />
|
||||
</div>
|
||||
{#if $isMobile}
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
>
|
||||
{formatDate($store?.selected)}
|
||||
</button>
|
||||
</Datepicker>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="xl:hidden dark:text-white font-bold m-5">
|
||||
{formatDate($store?.selected)}
|
||||
</p>
|
||||
{/if}
|
||||
{#if formatDate($store?.selected) == 'Today'}
|
||||
<span class="flex flex-col md:flex-row items-baseline justify-center gap-10 mt-5">
|
||||
<p class="text-xs font-normal text-[#656565] dark:text-white">2:30pm</p>
|
||||
<div class="flex flex-col items-start gap-4">
|
||||
<span>
|
||||
<p class="text-lg font-semibold text-[#262626] dark:text-white">
|
||||
The essence of design collaboration
|
||||
</p>
|
||||
<a href="#" class="text-sm font-normal text-primary-700 dark:text-white"
|
||||
>Figma Introduction</a
|
||||
>
|
||||
</span>
|
||||
<PrimaryButton label="Join Call" variant={VARIANTS.OUTLINED} className="" />
|
||||
</div>
|
||||
</span>
|
||||
{:else}
|
||||
<p>No Lesson on this day</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user