ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move lesson comments under lesson note

Browse Source
This commit is contained in:
Rotimi Best
2025-01-04 05:55:14 +01:00
parent 5f367a9540
commit 32ba251b77
44 changed files with 760 additions and 682 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Apps/components/Comments/index.svelte
-241
View File
@@ -1,241 +0,0 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import { getSupabase } from '$lib/utils/functions/supabase';
import type {
RealtimeChannel,
RealtimePostgresChangesPayload,
PostgrestSingleResponse
} from '@supabase/supabase-js';
import type { LessonCommentInsertPayload, GroupPerson, LessonComment } from '$lib/utils/types';
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
import { group } from '$lib/components/Course/store';
import { profile } from '$lib/utils/store/user';
import { calDateDiff } from '$lib/utils/functions/date';
import { t } from '$lib/utils/functions/translations';
export let handleClose = () => {};
const supabase = getSupabase();
let comment = '';
let bodyRef: HTMLDivElement;
let lessonCommentChannel: RealtimeChannel;
let comments: LessonComment[] = [];
let groupmember: GroupPerson | undefined;
let isSaving: boolean = false;
let isFetched = false;
interface FetchComments {
comment: string;
created_at: string;
groupmember: {
id: string;
profile: {
avatar_url: string;
fullname: string;
};
};
}
async function handleSend() {
console.log('groupmember', groupmember);
if (!comment || !groupmember) {
return;
}
comments = [
...comments,
{
comment: comment,
name: $t('course.navItem.lessons.comments.you'),
avatar: $profile.avatar_url,
commentAt: new Date()
}
];
$lesson.totalComments = comments.length;
scrollToBottom();
isSaving = true;
supabase
.from('lesson_comment')
.insert({
lesson_id: $lesson.id,
groupmember_id: groupmember.id,
comment
})
.then(() => {
isSaving = false;
comment = '';
});
}
function handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Enter') {
handleSend();
}
}
function scrollToBottom() {
setTimeout(() => {
bodyRef.scrollTo({
top: bodyRef.scrollHeight
});
}, 100);
}
async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
const insertedComment = payload.new as LessonCommentInsertPayload;
if (groupmember && groupmember.id === insertedComment.groupmember_id) {
console.log('is my comment');
return;
}
const {
data,
error
}: PostgrestSingleResponse<{
id: string;
profile: {
fullname: string;
avatar_url: string;
};
}> = await supabase
.from('groupmember')
.select('id, profile:profile_id(fullname, avatar_url)')
.eq('id', insertedComment.groupmember_id)
.single();
console.log('data', data);
console.log('error', error);
if (error || !data) {
return;
}
comments = [
...comments,
{
comment: insertedComment.comment,
name: data.profile.fullname,
avatar: data.profile.avatar_url,
commentAt: insertedComment.created_at
}
];
$lesson.totalComments = comments.length;
scrollToBottom();
}
async function fetchComments(people: GroupPerson[], lessonId?: string | null) {
groupmember = people.find((person) => person.profile_id === $profile.id);
if (!groupmember || !lessonId) return;
const { data, error } = await supabase
.from('lesson_comment')
.select(
`
groupmember_id,
created_at,
comment,
groupmember:groupmember_id(
id,
profile:profile_id(fullname, avatar_url)
)
`
)
.match({
lesson_id: lessonId
})
.returns<FetchComments[]>();
if (error || !data) {
console.error('error');
return;
}
console.log('fetch comments', data);
comments = data.map((lessonComment) => {
return {
comment: lessonComment.comment,
avatar: lessonComment.groupmember.profile.avatar_url,
commentAt: lessonComment.created_at,
name:
lessonComment.groupmember.id === groupmember?.id
? $t('course.navItem.lessons.comments.you')
: lessonComment.groupmember.profile.fullname
};
});
isFetched = true;
scrollToBottom();
}
onMount(async () => {
lessonCommentChannel = supabase
.channel('any')
.on(
'postgres_changes',
{ event: '*', schema: 'public', table: 'lesson_comment' },
handleInsert
)
.subscribe();
});
onDestroy(() => {
supabase.removeChannel(lessonCommentChannel);
});
$: !isFetched && fetchComments($group.people, $lesson.id);
</script>
<PageNav title={$t('course.navItem.lessons.comments.title')} overidableStyle="padding: 0 10px">
<div slot="widget">
<CloseButton onClick={handleClose} />
</div>
</PageNav>
<div bind:this={bodyRef} class="overflow-y-auto h-[87%] pb-10 px-2 md:min-w-[350px] w-full">
{#each comments as comment}
<div class="pb-2 mt-2">
<div class="flex items-start">
<img
alt="Placeholder"
class="block rounded-full"
width="24"
height="20"
src={comment.avatar}
/>
<div class="ml-2">
<p class="dark:text-white text-sm font-bold">{comment.name}</p>
<p class="dark:text-white text-xs font-normal text-gray-800">
{calDateDiff(comment.commentAt)}
</p>
</div>
</div>
<article class="prose prose-sm sm:prose ml-8 max-w-[300px] dark:text-white">
{comment.comment}
</article>
</div>
{/each}
</div>
<div class="footer">
<TextField
placeholder={$t('course.navItem.lessons.comments.placeholder')}
bind:value={comment}
onKeyDown={handleKeyDown}
isDisabled={isSaving}
/>
</div>
<style>
.footer {
position: absolute;
bottom: 0px;
width: 100%;
}
</style>
apps/dashboard/src/lib/components/Apps/components/Notes/index.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import PageNav from '$lib/components/PageNav/index.svelte';
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
import { PageNav } from '$lib/components/Page';
export let handleClose;
</script>
apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
import { course, group } from '$lib/components/Course/store';
import PageNav from '$lib/components/PageNav/index.svelte';
import { PageNav } from '$lib/components/Page';
import { snackbar } from '$lib/components/Snackbar/store';
import { getSupabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
apps/dashboard/src/lib/components/Apps/components/QandA/index.svelte
+5 -5
View File
@@ -1,9 +1,9 @@
<script>
import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
import Vote from '$lib/components/Vote/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import { PageNav } from '$lib/components/Page';
import Vote from '$lib/components/Vote/index.svelte';
import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
export let handleClose;
let bodyRef;
@@ -95,10 +95,10 @@
<div bind:this={bodyRef} class="body">
{#each questions as question}
<div class="flex items-start ml-2 mb-2 mt-2">
<div class="mb-2 ml-2 mt-2 flex items-start">
<Vote bind:value={question.vote} />
<div class="ml-2 flex-grow">
<p class="dark:text-white text-sm font-bold">{question.name}</p>
<p class="text-sm font-bold dark:text-white">{question.name}</p>
<article class="prose prose-sm sm:prose">
{question.question}
</article>
apps/dashboard/src/lib/components/Apps/index.svelte
+11 -39
View File
@@ -1,24 +1,21 @@
<script lang="ts">
import IconButton from '$lib/components/IconButton/index.svelte';
import { globalStore } from '$lib/utils/store/app';
import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
import { apps } from './store';
import { globalStore } from '$lib/utils/store/app';
import { browser } from '$app/environment';
import Chip from '$lib/components/Chip/index.svelte';
import QandA from './components/QandA/index.svelte';
import Comments from './components/Comments/index.svelte';
import { course } from '$lib/components/Course/store';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import Notes from './components/Notes/index.svelte';
import Poll from './components/Poll/index.svelte';
import QandA from './components/QandA/index.svelte';
import APPS_CONSTANTS from './constants';
import { browser } from '$app/environment';
import { course } from '$lib/components/Course/store';
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
import { currentOrg } from '$lib/utils/store/org';
import { t } from '$lib/utils/functions/translations';
let appBarRef: HTMLDivElement;
let appContentRef: HTMLDivElement;
@@ -70,7 +67,7 @@
bind:this={appBarRef}
>
<div class="apps">
<div class="lg:hidden mb-2">
<div class="mb-2 lg:hidden">
<IconButton
buttonClassName="lg:hidden"
toolTipProps={{ title: 'Settings', hotkeys: [] }}
@@ -80,29 +77,6 @@
</IconButton>
</div>
<div class="mb-2 relative {getAppClass(APPS_CONSTANTS.APPS.COMMENTS, $apps.selectedApp)}">
<IconButton
toolTipProps={{
title: `${
$globalStore.isOrgSite && !$currentOrg.customization.apps.comments
? $t('course.navItem.lessons.disabled')
: $t('course.navItem.lessons.comments.title')
}`,
hotkeys: ['Ctrl/Command', '1']
}}
value={APPS_CONSTANTS.APPS.COMMENTS}
onClick={handleAppClick}
buttonClassName="relative"
disabled={$globalStore.isOrgSite && !$currentOrg.customization.apps.comments}
>
<Chip
value={$lesson.totalComments}
className="absolute -top-1 right-0 bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-white"
/>
<SendAlt size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
<div class="mb-2 {getAppClass(APPS_CONSTANTS.APPS.POLL, $apps.selectedApp)}">
<IconButton
toolTipProps={{
@@ -149,15 +123,13 @@
{#if !!$apps.selectedApp}
<div
class="app max-w-[350px] transition ease-in-out delay-150 duration-100"
class="app max-w-[350px] transition delay-150 duration-100 ease-in-out"
bind:this={appContentRef}
>
{#key $apps.selectedApp}
<div class="h-full w-full" transition:fade={{ duration: 200 }}>
{#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
<QandA {handleClose} />
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.COMMENTS}
<Comments {handleClose} />
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
<Poll {handleClose} />
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
apps/dashboard/src/lib/components/Course/components/Attendance/index.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import PageNav from '$lib/components/PageNav/index.svelte';
import { PageNav } from '$lib/components/Page';
</script>
<PageNav title="Attendance" />
apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte
+1 -1
View File
@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import IconButton from '$lib/components/IconButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import { PageBody } from '$lib/components/Page';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte
+14 -14
View File
@@ -1,24 +1,24 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import Box from '$lib/components/Box/index.svelte';
import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
import { Moon } from 'svelte-loading-spinners';
import Backdrop from '$lib/components/Backdrop/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Exercise from '../Exercise/index.svelte';
import { supabase } from '$lib/utils/functions/supabase';
import { createExercise, createExerciseFromTemplate } from '$lib/utils/services/courses';
import { QUESTION_TYPES } from '$lib/components/Question/constants';
import { lesson } from '../store/lessons';
import { questionnaire, isQuestionnaireFetching } from '../store/exercise';
import Box from '$lib/components/Box/index.svelte';
import NewExerciseModal from '$lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte';
import type { ExerciseTemplate } from '$lib/utils/types';
import { PageBody } from '$lib/components/Page';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { QUESTION_TYPES } from '$lib/components/Question/constants';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { formatDate } from '$lib/utils/functions/routes/dashboard';
import { supabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import { createExercise, createExerciseFromTemplate } from '$lib/utils/services/courses';
import { globalStore } from '$lib/utils/store/app';
import type { ExerciseTemplate } from '$lib/utils/types';
import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
import { onMount } from 'svelte';
import { Moon } from 'svelte-loading-spinners';
import Exercise from '../Exercise/index.svelte';
import { isQuestionnaireFetching, questionnaire } from '../store/exercise';
import { lesson } from '../store/lessons';
export let path = '';
export let exerciseId = '';
apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte
+367
View File
@@ -0,0 +1,367 @@
<script lang="ts">
import Avatar from '$lib/components/Avatar/index.svelte';
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
import { group } from '$lib/components/Course/store';
import TextArea from '$lib/components/Form/TextArea.svelte';
import DeleteModal from '$lib/components/Modal/DeleteModal.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { calDateDiff } from '$lib/utils/functions/date';
import { getSupabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, LessonComment, LessonCommentInsertPayload } from '$lib/utils/types';
import type {
PostgrestSingleResponse,
RealtimeChannel,
RealtimePostgresChangesPayload
} from '@supabase/supabase-js';
import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
import { onDestroy, onMount } from 'svelte';
const supabase = getSupabase();
const PAGE_SIZE = 20;
export let lessonId = '';
let comment = '';
let lessonCommentChannel: RealtimeChannel;
let comments: LessonComment[] = [];
let groupmember: GroupPerson | undefined;
let isSaving: boolean = false;
let isFetching = false;
let openDeleteModal = false;
let deleteCommentId: number | null = null;
let editCommentId: number | null = null;
interface FetchComments {
id: number;
comment: string;
created_at: string;
groupmember: {
id: string;
profile: {
avatar_url: string;
fullname: string;
};
};
}
async function handleSend() {
if (!comment || !groupmember) {
return;
}
isSaving = true;
comments = [
{
id: 0,
comment: comment,
name: $t('course.navItem.lessons.comments.you'),
avatar: $profile.avatar_url,
commentAt: new Date(),
groupmember_id: groupmember.id
},
...comments
];
pagination.count = comments.length;
supabase
.from('lesson_comment')
.insert({
lesson_id: $lesson.id,
groupmember_id: groupmember.id,
comment
})
.select('id')
.single()
.then(({ data, error }) => {
isSaving = false;
if (error) {
console.error('Error adding comment:', error);
return;
}
comments = comments.map((comment) =>
comment.id === 0 ? { ...comment, id: data.id } : comment
);
isSaving = false;
comment = '';
});
}
async function handleUpdate(commentItem: LessonComment) {
if (!editCommentId || !commentItem.comment) {
return;
}
const { error } = await supabase
.from('lesson_comment')
.update({ comment: commentItem.comment })
.eq('id', editCommentId);
if (error) {
console.error('handleUpdate', error);
snackbar.error($t('snackbar.something'));
} else {
snackbar.success($t('snackbar.success_update'));
}
editCommentId = null;
pagination.count = comments.length;
}
async function handleDeleteComment() {
if (!deleteCommentId) {
return;
}
const { error } = await supabase.from('lesson_comment').delete().eq('id', deleteCommentId);
if (error) {
console.error('error', error);
snackbar.error($t('snackbar.something'));
} else {
snackbar.success($t('snackbar.success_delete'));
}
comments = comments.filter((comment) => comment.id !== deleteCommentId);
pagination.count = comments.length;
deleteCommentId = null;
}
async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
const insertedComment = payload.new as LessonCommentInsertPayload;
if (groupmember && groupmember.id === insertedComment.groupmember_id) {
return;
}
const {
data,
error
}: PostgrestSingleResponse<{
id: string;
profile: {
fullname: string;
avatar_url: string;
};
}> = await supabase
.from('groupmember')
.select('id, profile:profile_id(fullname, avatar_url)')
.eq('id', insertedComment.groupmember_id)
.single();
if (error || !data) {
console.error('handleInsert', error);
return;
}
comments = [
{
id: insertedComment.id,
comment: insertedComment.comment,
name: data.profile.fullname,
avatar: data.profile.avatar_url,
commentAt: insertedComment.created_at,
groupmember_id: insertedComment.groupmember_id
},
...comments
];
pagination.count = comments.length;
}
let pagination = {
hasMore: true,
count: 0,
page: 0
};
async function fetchComments(people: GroupPerson[]) {
if (!pagination.hasMore) return;
groupmember = people.find((person) => person.profile_id === $profile.id);
if (!groupmember || !lessonId) return;
isFetching = true;
const from = pagination.page * PAGE_SIZE;
const to = from + PAGE_SIZE - 1;
const { data, error, count } = await supabase
.from('lesson_comment')
.select(
`
groupmember_id,
created_at,
id,
comment,
groupmember:groupmember_id(
id,profile:profile_id(fullname, avatar_url)
)
`,
{ count: 'exact' }
)
.match({
lesson_id: lessonId
})
.order('created_at', { ascending: false })
.range(from, to)
.returns<FetchComments[]>();
if (error || !data) {
console.error('error');
return;
}
const newComments = data.map((lessonComment) => {
return {
id: lessonComment.id,
comment: lessonComment.comment,
avatar: lessonComment.groupmember.profile.avatar_url,
commentAt: lessonComment.created_at,
groupmember_id: lessonComment.groupmember.id,
name:
lessonComment.groupmember.id === groupmember?.id
? $t('course.navItem.lessons.comments.you')
: lessonComment.groupmember.profile.fullname
};
});
comments = pagination.page === 0 ? newComments : [...comments, ...newComments];
pagination.hasMore = count ? from + data.length < count : false;
pagination.count = count ?? 0;
pagination.page++;
isFetching = false;
}
onMount(async () => {
fetchComments($group.people);
lessonCommentChannel = supabase
.channel('any')
.on(
'postgres_changes',
{ event: 'INSERT', schema: 'public', table: 'lesson_comment' },
handleInsert
)
.subscribe();
});
onDestroy(() => {
supabase.removeChannel(lessonCommentChannel);
});
</script>
<DeleteModal bind:open={openDeleteModal} onDelete={handleDeleteComment} />
<div class="mx-auto mt-10 max-w-[65ch]">
<!-- <hr class="my-5" /> -->
<div class="mb-5">
<p class="text-xl font-bold capitalize">
{$t('course.navItem.lessons.comments.title')} ({pagination.count})
</p>
</div>
<div>
<div class="flex h-full items-start gap-3">
<Avatar
src={$profile.avatar_url}
name={$profile.fullname}
width="w-8"
height="h-8"
className="mt-2"
/>
<div class="h-full w-full">
<TextArea
label={$t('course.navItem.lessons.comments.text_area_title')}
placeholder={$t('course.navItem.lessons.comments.placeholder')}
bind:value={comment}
/>
</div>
</div>
<div class="mt-2 flex flex-row-reverse">
<PrimaryButton
label={$t('course.navItem.lessons.comments.comment_btn')}
onClick={handleSend}
isDisabled={!comment}
isLoading={isSaving}
/>
</div>
</div>
<div class="my-10">
{#each comments as commentItem}
<div class="mt-2 flex items-start gap-3 pb-2">
<Avatar src={commentItem.avatar} name={commentItem.name} width="w-8" height="h-8" />
<div class="w-full rounded-md border px-4 pb-4 pt-2 dark:border-neutral-700">
<div class="flex items-center justify-between gap-2">
<p class="text-md font-bold dark:text-white">
{commentItem.name}
<span
class="ml-1 text-xs font-normal text-gray-800 dark:text-white"
title={commentItem.commentAt.toLocaleString()}
>
{calDateDiff(commentItem.commentAt)}
</span>
</p>
{#if groupmember?.id === commentItem.groupmember_id}
<OverflowMenu flipped>
<OverflowMenuItem text="Edit" on:click={() => (editCommentId = commentItem.id)} />
<OverflowMenuItem
danger
text="Delete"
on:click={() => {
deleteCommentId = commentItem.id;
openDeleteModal = true;
}}
/>
</OverflowMenu>
{/if}
</div>
{#if editCommentId === commentItem.id}
<TextArea
placeholder={$t('course.navItem.lessons.comments.placeholder')}
bind:value={commentItem.comment}
/>
<div class="mt-2 flex flex-row-reverse items-center gap-2">
<PrimaryButton
variant={VARIANTS.OUTLINED}
label={$t('course.navItem.lessons.comments.cancel_btn')}
onClick={() => (editCommentId = null)}
/>
<PrimaryButton
label={$t('course.navItem.lessons.comments.comment_btn')}
onClick={() => handleUpdate(commentItem)}
isDisabled={!commentItem.comment}
isLoading={isSaving}
/>
</div>
{:else}
<article class="prose sm:prose-sm max-w-[300px] dark:text-white">
{commentItem.comment}
</article>
{/if}
</div>
</div>
{/each}
</div>
{#if pagination.hasMore}
<div class="mt-2 flex items-center justify-center">
<PrimaryButton
label={$t('course.navItem.lessons.comments.load_more_btn')}
variant={VARIANTS.OUTLINED}
onClick={() => fetchComments($group.people)}
isLoading={isFetching}
/>
</div>
{/if}
</div>
apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.js → apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.ts
+12 -4
View File
@@ -1,6 +1,14 @@
import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
import type { Tabs } from '$lib/utils/types';
import { Notebook, PresentationFile, Video } from 'carbon-icons-svelte';
export let tabs = [
interface MaterialTab {
label: string;
icon: any;
value: number;
badgeValue?: number;
}
export let tabs: MaterialTab[] = [
{
label: 'course.navItem.lessons.materials.tabs.note.title',
icon: Notebook,
@@ -21,9 +29,9 @@ export let tabs = [
}
];
export function orderedTabs(tabs, settingTabs) {
export function orderedTabs(tabs: MaterialTab[], settingTabs?: Tabs[]) {
if (!Array.isArray(settingTabs)) return tabs;
const reorderedTabs = [];
const reorderedTabs: MaterialTab[] = [];
const tabMap = new Map(tabs.map((tab) => [tab.value, tab]));
apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
+47 -42
View File
@@ -1,47 +1,48 @@
<script lang="ts">
import isEmpty from 'lodash/isEmpty';
import { fade } from 'svelte/transition';
import { useCompletion } from 'ai/svelte';
import MODES from '$lib/utils/constants/mode';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import { formatYoutubeVideo } from '$lib/utils/functions/formatYoutubeVideo';
import Modal from '$lib/components/Modal/index.svelte';
import { Popover } from 'carbon-components-svelte';
import AlignBoxTopLeftIcon from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
import ListIcon from 'carbon-icons-svelte/lib/List.svelte';
import IbmWatsonKnowledgeStudioIcon from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeStudio.svelte';
import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
import Tabs from '$lib/components/Tabs/index.svelte';
import TabContent from '$lib/components/TabContent/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import TextField from '$lib/components/Form/TextField.svelte';
import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
import {
lesson,
lessons,
lessonByTranslation,
deleteLessonVideo,
handleUpdateLessonMaterials,
isLessonDirty,
uploadCourseVideoStore,
deleteLessonVideo
lesson,
lessonByTranslation,
lessons,
uploadCourseVideoStore
} from '$lib/components/Course/components/Lesson/store/lessons';
import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
import { course } from '$lib/components/Course/store';
import TextField from '$lib/components/Form/TextField.svelte';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import Modal from '$lib/components/Modal/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import TabContent from '$lib/components/TabContent/index.svelte';
import Tabs from '$lib/components/Tabs/index.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import * as CONSTANTS from './constants';
import { orderedTabs } from './constants';
import MODES from '$lib/utils/constants/mode';
import { formatYoutubeVideo } from '$lib/utils/functions/formatYoutubeVideo';
import { supabase } from '$lib/utils/functions/supabase';
import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
import { lessonFallbackNote, t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import type { LessonPage, LOCALE } from '$lib/utils/types';
import { useCompletion } from 'ai/svelte';
import { Popover } from 'carbon-components-svelte';
import AlignBoxTopLeftIcon from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
import IbmWatsonKnowledgeStudioIcon from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeStudio.svelte';
import ListIcon from 'carbon-icons-svelte/lib/List.svelte';
import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import isEmpty from 'lodash/isEmpty';
import { fade } from 'svelte/transition';
import Comments from './components/Comments.svelte';
import ComponentNote from './components/ComponentNote.svelte';
import ComponentSlide from './components/ComponentSlide.svelte';
import ComponentVideo from './components/ComponentVideo.svelte';
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
import type { LessonPage } from '$lib/utils/types';
import { snackbar } from '$lib/components/Snackbar/store';
import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
import { t, lessonFallbackNote } from '$lib/utils/functions/translations';
import { supabase } from '$lib/utils/functions/supabase';
import type { LOCALE } from '$lib/utils/types';
import * as CONSTANTS from './constants';
import { orderedTabs } from './constants';
import Loader from './Loader.svelte';
export let mode = MODES.view;
@@ -279,7 +280,6 @@
const componentNames = tabs
.map((tab) => {
// @ts-ignore
const component = componentMap[tab.value];
return component || null;
})
@@ -320,7 +320,7 @@
<HtmlRender className="m-auto text-center">
<svelte:fragment slot="content">
<h1 class="text-2xl md:text-4xl mt-0 capitalize">
<h1 class="mt-0 text-2xl capitalize md:text-4xl">
{lessonTitle}
</h1>
</svelte:fragment>
@@ -335,7 +335,7 @@
value={getValue('course.navItem.lessons.materials.tabs.note.title')}
index={currentTab}
>
<div class="flex gap-1 justify-end">
<div class="flex justify-end gap-1">
<div bind:this={aiButtonRef} class="flex flex-row-reverse">
<PrimaryButton
className="flex items-center relative"
@@ -376,7 +376,7 @@
</div>
</div>
<div class="h-[60vh] mt-5">
<div class="mt-5 h-[60vh]">
<TextEditor
id={lessonId}
bind:editorWindowRef
@@ -418,7 +418,7 @@
className="mb-2"
/>
{#if $lesson.materials.videos.length}
<div class="flex flex-col items-start w-full h-full">
<div class="flex h-full w-full flex-col items-start">
{#each $lesson.materials.videos as video, index}
{#if mode === MODES.edit}
<div class="ml-auto">
@@ -431,7 +431,7 @@
</IconButton>
</div>
{/if}
<div class="w-full h-full flex flex-col gap-2 overflow-hidden">
<div class="flex h-full w-full flex-col gap-2 overflow-hidden">
{#key video.link}
<div class="mb-5">
{#if video.type === 'youtube'}
@@ -484,21 +484,26 @@
</Tabs>
{:else if !isMaterialsEmpty($lesson.materials, $lessonByTranslation[lessonId])}
{#key lessonId}
<div class="w-full mb-20" in:fade={{ delay: 500 }} out:fade>
<div class="mb-20 w-full" in:fade={{ delay: 500 }} out:fade>
{#each componentsToRender as Component}
<svelte:component this={Component} {lessonId} />
{/each}
{#if $currentOrg.customization.apps.comments}
<hr class="my-5" />
<Comments {lessonId} />
{/if}
</div>
{/key}
{:else}
<Box className="text-center">
<img src="/no-video.svg" alt="Video not found" />
<h3 class="text-xl font-normal dark:text-white py-2">
<h3 class="py-2 text-xl font-normal dark:text-white">
{$t('course.navItem.lessons.materials.body_heading')}
</h3>
{#if !isStudent}
<p class="text-sm text-center font-normal py-2">
<p class="py-2 text-center text-sm font-normal">
{$t('course.navItem.lessons.materials.body_content')}
<strong>{$t('course.navItem.lessons.materials.get_started')}</strong>
{$t('course.navItem.lessons.materials.button')}.
apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
<article
style:max-width={disableMaxWidth ? 'unset' : undefined}
{id}
class="preview prose prose-sm sm:prose {className} dark:text-white"
class="preview prose sm:prose-sm {className} dark:text-white"
>
{#if $$slots.content}
<slot name="content" />
apps/dashboard/src/lib/components/Modal/DeleteModal.svelte
+3 -3
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import Modal from './index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { t } from '$lib/utils/functions/translations';
import Modal from './index.svelte';
export let open = false;
export let onDelete = () => {};
@@ -22,7 +22,7 @@
modalHeading={$t('delete_modal.label')}
>
<div>
<p class="dark:text-white text-xl text-center">
<p class="text-center text-xl dark:text-white">
{$t('delete_modal.content')}
</p>
apps/dashboard/src/lib/components/Org/Community/index.svelte
+17 -18
View File
@@ -1,19 +1,18 @@
<script lang="ts">
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import { courses } from '$lib/components/Courses/store';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import Vote from '$lib/components/Vote/index.svelte';
import { calDateDiff } from '$lib/utils/functions/date';
import { supabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import { fetchCourses } from '$lib/utils/services/courses';
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import { Dropdown, Search } from 'carbon-components-svelte';
import AddCommentIcon from 'carbon-icons-svelte/lib/AddComment.svelte';
import CommunityLoader from './Loader.svelte';
import Vote from '$lib/components/Vote/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import Space from '$lib/components/Space/index.svelte';
import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
import { supabase } from '$lib/utils/functions/supabase';
import { calDateDiff } from '$lib/utils/functions/date';
import { fetchCourses } from '$lib/utils/services/courses';
import { profile } from '$lib/utils/store/user';
import { Search, Dropdown } from 'carbon-components-svelte';
import { t } from '$lib/utils/functions/translations';
import { courses } from '$lib/components/Courses/store';
export let isLMS = false;
@@ -97,7 +96,7 @@
class=" bg-gray-100 dark:bg-neutral-800"
/>
<Dropdown
class="w-[25%] h-full"
class="h-full w-[25%]"
size="xl"
label={$t('community.ask.select_course')}
items={[
@@ -108,7 +107,7 @@
/>
</div>
<div
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
class="border-c m-auto my-4 flex flex-wrap items-center justify-center rounded bg-gray-100 dark:bg-neutral-800 lg:justify-start"
>
{#if isLoading}
<CommunityLoader />
@@ -117,9 +116,9 @@
<CommunityLoader />
{:else}
{#each filteredDiscussions as discussion}
<div class="w-full flex border-bottom-c p-3">
<div class="border-bottom-c flex w-full p-3">
<Vote value={discussion.votes} />
<div class="text-sm flex flex-col gap-y-0.5">
<div class="flex flex-col gap-y-0.5 text-sm">
<h4 class="mt-0">
<a
class="text-black dark:text-white"
@@ -132,12 +131,12 @@
{discussion.author} asked {discussion.createdAt}
</span>
<a class="m-0" href="/courses/{discussion.courseId}">
<span class="text-xs text-primary-200 dark:text-black text-primary-700 p-0">
<span class="text-primary-200 text-primary-700 p-0 text-xs dark:text-black">
#{discussion.courseTitle}
</span>
</a>
</div>
<Space />
<div class="flex-grow" />
<div class="flex items-center">
<AddCommentIcon size={20} />
<span class="ml-1">{discussion.comments}</span>
apps/dashboard/src/lib/components/PageBody/index.svelte → apps/dashboard/src/lib/components/Page/Body.svelte
+2 -4
View File
@@ -1,6 +1,4 @@
<script>
// import
// border border-gray-300 rounded-md p-3 bg-primary-200 bg-opacity-25
export let width = 'max-w-4xl w-full lg:w-11/12';
export let padding = 'pb-5 px-4';
export let className = '';
@@ -14,12 +12,12 @@
<div
class="overflow-y-auto {isPageNavHidden
? 'h-[calc(100vh-65px)] lg:h-[calc(100vh-127px)]'
: 'h-[calc(100vh-127px)]'} mt-4 mx-auto {width} {className} relative {padding}"
: 'h-[calc(100vh-127px)]'} mx-auto mt-4 {width} {className} relative {padding}"
on:click={onClick}
>
{#if $$slots.header}
<div
class="head dark:bg-neutral-800 flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
class="head sticky right-0 flex w-full items-center justify-between px-3 dark:bg-neutral-800 {headerClassName}"
>
<slot name="header" />
</div>
apps/dashboard/src/lib/components/PageNav/index.svelte → apps/dashboard/src/lib/components/Page/Nav.svelte
+11 -17
View File
@@ -1,14 +1,11 @@
<script>
import NewButton from '../PrimaryContainedButton/index.svelte';
import TextField from '../Form/TextField.svelte';
import Chip from '../Chip/index.svelte';
import { t } from '$lib/utils/functions/translations';
import Chip from '../Chip/index.svelte';
import TextField from '../Form/TextField.svelte';
export let title = '';
export let overidableStyle = '';
export let navItems = [];
export let addButtonHref = '';
export let addButtonLabel = '';
export let disableSticky = false;
export let isTitleEditable = false;
export let onEditComplete = () => {};
@@ -23,21 +20,21 @@
<div
class="{hideOnMobile &&
'hideOnMobile'} header dark:bg-black dark:border-neutral-600 border-b border-gray-200 bg-white {!disableSticky &&
'hideOnMobile'} header border-b border-gray-200 bg-white dark:border-neutral-600 dark:bg-black {!disableSticky &&
'sticky'} {dynamicRootClass}"
style={overidableStyle}
>
<div
class="{hideOnMobile
? 'hidden lg:flex'
: ''} {paddingClass} max-w-4xl m-auto flex items-center justify-between min-h-[61px]"
: ''} {paddingClass} m-auto flex min-h-[61px] max-w-4xl items-center justify-between"
>
{#if !!title}
{#if isTitleEditable}
{#if !enterEditTitleMode}
<button class="w-full" on:click={() => (enterEditTitleMode = true)}>
<h4
class="editable-title hover:bg-gray-100 dark:bg-black px-3 rounded-md overflow-ellipsis"
class="editable-title overflow-ellipsis rounded-md px-3 hover:bg-gray-100 dark:bg-black"
>
{title}
</h4>
@@ -56,12 +53,12 @@
/>
{/if}
{:else}
<div class="flex items-center w-full" {title}>
<div class="flex w-full items-center" {title}>
<slot name="image" />
<h4
class="{$$slots.image
? 'ml-2'
: ''} dark:text-white whitespace-nowrap truncate text-lg font-semibold"
: ''} truncate whitespace-nowrap text-lg font-semibold dark:text-white"
>
{title}
</h4>
@@ -69,12 +66,12 @@
{/if}
{/if}
{#if Array.isArray(navItems) && navItems.length}
<div class="flex justify-evenly items-center">
<div class="flex items-center justify-evenly">
{#each navItems as item}
<a
class="mr-5 pb-2 text-sm font-bold flex items-center relative {item.isActive
class="relative mr-5 flex items-center pb-2 text-sm font-bold {item.isActive
? 'text-primary-700'
: 'dark:text-white text-black'} hover:no-underline"
: 'text-black dark:text-white'} hover:no-underline"
href={item.href}
>
{item.label}
@@ -83,15 +80,12 @@
<Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
{/if}
<span
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {item.isActive
class="bg-primary-700 absolute bottom-0 left-0 h-1 transition-all duration-500 ease-in-out {item.isActive
? 'w-full'
: 'w-0'}"
/>
</a>
{/each}
{#if addButtonHref}
<NewButton href={addButtonHref} label={addButtonLabel} />
{/if}
</div>
{/if}
<slot name="widget" />
apps/dashboard/src/lib/components/NotFound/NotFound.svelte → apps/dashboard/src/lib/components/Page/NotFound.svelte
+5 -5
View File
@@ -1,7 +1,7 @@
<script>
import { goto } from '$app/navigation';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
export let isOrg = false;
@@ -14,17 +14,17 @@
}
</script>
<div class="root flex items-center justify-center flex-col w-screen">
<div class="root flex w-screen flex-col items-center justify-center">
<img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
<div class="flex flex-col items-center justify-center dark:text-white gap-3 w-4/5 lg:w-2/5">
<p class="text-4xl dark:text-white font-semibold mb-5">
<div class="flex w-4/5 flex-col items-center justify-center gap-3 dark:text-white lg:w-2/5">
<p class="mb-5 text-4xl font-semibold dark:text-white">
{#if isOrg}
Organization doesn't exist!
{:else}
Page not found
{/if}
</p>
<p class=" text-gray-700 text-lg text-center dark:text-white mb-5">
<p class=" mb-5 text-center text-lg text-gray-700 dark:text-white">
The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
</p>
<PrimaryButton
apps/dashboard/src/lib/components/Unauthorized/index.svelte → apps/dashboard/src/lib/components/Page/Unauthorized.svelte
+4 -4
View File
@@ -1,15 +1,15 @@
<script>
import { goto } from '$app/navigation';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
</script>
<div
class="root flex flex-col gap-2 items-center justify-center w-screen h-[calc(100vh-48px)] text-center bg-[#F3F5F9] dark:bg-black text-black dark:text-white"
class="root flex h-[calc(100vh-48px)] w-screen flex-col items-center justify-center gap-2 bg-[#F3F5F9] text-center text-black dark:bg-black dark:text-white"
>
<img src="./unauthorized.svg" alt="unauthorized" class="w-[220px]" />
<p class=" text-black dark:text-white text-4xl md:text-5xl font-bold">Page not found</p>
<p class=" text-[#656565] dark:text-white text-base font-[400] mb-2 mt-1">
<p class=" text-4xl font-bold text-black dark:text-white md:text-5xl">Page not found</p>
<p class=" mb-2 mt-1 text-base font-[400] text-[#656565] dark:text-white">
The page you are trying to access does not exist
</p>
apps/dashboard/src/lib/components/Page/index.ts
+5
View File
@@ -0,0 +1,5 @@
export { default as PageBody } from './Body.svelte';
export { default as PageNav } from './Nav.svelte';
export { default as PageNotFound } from './NotFound.svelte';
export { default as PageRestricted } from './Restricted.svelte';
export { default as PageUnauthorized } from './Unauthorized.svelte';
apps/dashboard/src/lib/components/PrimaryContainedButton/index.svelte
-36
View File
@@ -1,36 +0,0 @@
<script>
export let href = '';
export let label = '';
export let handleClick = () => {};
</script>
<a
class="root bg-primary-700 hover:bg-primary-900 text-white font-bold rounded inline-flex items-center float-right"
{href}
on:click={handleClick}
>
<!-- <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" /> -->
{label}
</a>
<style lang="scss">
.root {
height: fit-content;
border-radius: 5px;
padding: 4px 20px;
&:hover {
cursor: pointer;
}
}
@media only screen and (max-width: 1002px) {
a {
padding: 10px 15px;
}
a :global(svg.carbon-icon) {
margin-right: 0;
}
}
</style>
apps/dashboard/src/lib/components/QuestionnaireBuilder/index.svelte
-1
View File
@@ -1 +0,0 @@
<div />
apps/dashboard/src/lib/components/RootPage/RootPage.svelte
View File
apps/dashboard/src/lib/components/Space/index.svelte
-9
View File
@@ -1,9 +0,0 @@
<style>
.actions {
flex-grow: 1;
}
</style>
<div class="actions"></div>
apps/dashboard/src/lib/components/Tabs/index.svelte
+9 -9
View File
@@ -5,28 +5,28 @@
export let tabs: {
icon?: any;
label: string;
value: string;
value: string | number;
badgeValue?: number;
}[] = [];
export let currentTab: string | number;
export let onChange = (v: string | number) => () => {};
</script>
<div class="w-full flex flex-col">
<div class="flex items-center border-b w-full overflow-x-auto mb-2">
<div class="flex w-full flex-col">
<div class="mb-2 flex w-full items-center overflow-x-auto border-b">
{#each tabs as tab}
{#if !tab.icon && !tab.badgeValue}
<button
class="relative {currentTab === tab.value
? 'text-primary-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-4 text-center py-3 px-2"
: 'dark:bg-gray-500 dark:text-white'} mr-4 w-fit px-2 py-3 text-center font-semibold focus:outline-none dark:bg-transparent"
on:click={onChange(tab.value)}
>
<div class="flex items-center justify-center w-full text-center">
<div class="flex w-full items-center justify-center text-center">
{$t(tab.label)}
</div>
<span
class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
class="bg-primary-700 absolute bottom-0 left-0 h-[2px] transition-all duration-500 ease-in-out {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
@@ -36,10 +36,10 @@
<button
class="relative {currentTab === tab.value
? 'text-primary-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-8 px-2"
: 'dark:bg-gray-500 dark:text-white'} mr-8 w-24 px-2 py-3 text-left font-semibold focus:outline-none dark:bg-transparent"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-5 md:grid-cols-4 gap-5 md:gap-3 items-center">
<div class="grid grid-cols-5 items-center gap-5 md:grid-cols-4 md:gap-3">
{#if tab.icon}
<svelte:component this={tab.icon} />
{/if}
@@ -54,7 +54,7 @@
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
class="bg-primary-700 absolute bottom-0 left-0 h-[2px] transition-all duration-500 ease-in-out {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
apps/dashboard/src/lib/utils/translations/de.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Erfolgreich gelöscht",
"try_again": "Fehler – Bitte versuchen Sie es später noch einmal"
}
},
"success_delete": "Erfolgreich gelöscht"
},
"exercises": {
"heading": "Übungen",
@@ -574,7 +575,11 @@
"comments": {
"title": "Kommentare",
"you": "Du",
"placeholder": "Sag etwas"
"placeholder": "Sag etwas",
"text_area_title": "Hinterlassen Sie einen Kommentar",
"comment_btn": "Kommentar",
"load_more_btn": "Mehr laden",
"cancel_btn": "Stornieren"
},
"exercises": {
"heading": "Alle Übungen",
apps/dashboard/src/lib/utils/translations/en.json
+6 -1
View File
@@ -797,7 +797,11 @@
"comments": {
"title": "Comments",
"you": "You",
"placeholder": "Say something"
"text_area_title": "Leave a comment",
"placeholder": "What do you think about this lesson?",
"comment_btn": "Comment",
"cancel_btn": "Cancel",
"load_more_btn": "Load more"
},
"polls": {
@@ -1267,6 +1271,7 @@
"snackbar": {
"success": "Success",
"success_update": "Updated successfully",
"success_delete": "Deleted successfully",
"something": "Something went wrong - Please try later",
"update": "Update",
apps/dashboard/src/lib/utils/translations/es.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Borrado exitosamente",
"try_again": "Error: inténtelo de nuevo más tarde"
}
},
"success_delete": "Eliminado exitosamente"
},
"exercises": {
"heading": "Ejercicios",
@@ -574,7 +575,11 @@
"comments": {
"title": "Comentarios",
"you": "Tú",
"placeholder": "Di algo"
"placeholder": "Di algo",
"text_area_title": "Deja un comentario",
"comment_btn": "Comentario",
"load_more_btn": "Cargar más",
"cancel_btn": "Cancelar"
},
"exercises": {
"heading": "Todos los ejercicios",
apps/dashboard/src/lib/utils/translations/fr.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Supprimé avec succès",
"try_again": "Erreur - Veuillez réessayer plus tard"
}
},
"success_delete": "Supprimé avec succès"
},
"exercises": {
"heading": "Des exercices",
@@ -574,7 +575,11 @@
"comments": {
"title": "commentaires",
"you": "Toi",
"placeholder": "Dire quelque chose"
"placeholder": "Dire quelque chose",
"text_area_title": "Laisser un commentaire",
"comment_btn": "Commentaire",
"load_more_btn": "Charger plus",
"cancel_btn": "Annuler"
},
"exercises": {
"heading": "Tous les exercices",
apps/dashboard/src/lib/utils/translations/hi.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "सफलतापूर्वक मिटाया गया",
"try_again": "त्रुटि - कृपया बाद में पुनः प्रयास करें"
}
},
"success_delete": "सफलतापूर्वक मिटाया गया"
},
"exercises": {
"heading": "अभ्यास",
@@ -574,7 +575,11 @@
"comments": {
"title": "टिप्पणियाँ",
"you": "आप",
"placeholder": "कुछ कहो"
"placeholder": "कुछ कहो",
"text_area_title": "एक टिप्पणी छोड़ें",
"comment_btn": "टिप्पणी",
"load_more_btn": "और लोड करें",
"cancel_btn": "रद्द करना"
},
"exercises": {
"heading": "सभी व्यायाम",
apps/dashboard/src/lib/utils/translations/pt.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Apagado com sucesso",
"try_again": "Erro - Tente novamente mais tarde"
}
},
"success_delete": "Excluído com sucesso"
},
"exercises": {
"heading": "Exercícios",
@@ -574,7 +575,11 @@
"comments": {
"title": "Comentários",
"you": "Você",
"placeholder": "Dizer algo"
"placeholder": "Dizer algo",
"text_area_title": "Deixe um comentário",
"comment_btn": "Comentário",
"load_more_btn": "Carregar mais",
"cancel_btn": "Cancelar"
},
"exercises": {
"heading": "Todos os exercícios",
apps/dashboard/src/lib/utils/translations/ru.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Удален успешно",
"try_again": "Ошибка. Повторите попытку позже."
}
},
"success_delete": "Удален успешно"
},
"exercises": {
"heading": "Упражнения",
@@ -574,7 +575,11 @@
"comments": {
"title": "Комментарии",
"you": "Ты",
"placeholder": "Скажите что-то"
"placeholder": "Скажите что-то",
"text_area_title": "Оставить комментарий",
"comment_btn": "Комментарий",
"load_more_btn": "Загрузить больше",
"cancel_btn": "Отмена"
},
"exercises": {
"heading": "Все упражнения",
apps/dashboard/src/lib/utils/translations/vi.json
+7 -2
View File
@@ -160,7 +160,8 @@
"generic": {
"success_delete": "Đã xoá thành công",
"try_again": "Lỗi - Vui lòng thử lại sau"
}
},
"success_delete": "Đã xóa thành công"
},
"exercises": {
"heading": "Bài tập",
@@ -574,7 +575,11 @@
"comments": {
"title": "Bình luận",
"you": "Bạn",
"placeholder": "Nói gì đó đi"
"placeholder": "Nói gì đó đi",
"text_area_title": "Để lại một bình luận",
"comment_btn": "Bình luận",
"load_more_btn": "Tải thêm",
"cancel_btn": "Hủy bỏ"
},
"exercises": {
"heading": "Tất cả các bài tập",
apps/dashboard/src/lib/utils/types/index.ts
+3 -1
View File
@@ -117,10 +117,12 @@ export interface LessonCommentInsertPayload {
comment: string;
}
export interface LessonComment {
id: number;
name: string;
avatar: string;
comment: string;
commentAt: string | Date;
groupmember_id: string;
}
// Generated from https://supabase-schema.vercel.app/
@@ -417,7 +419,7 @@ export interface Review {
description: string;
}
interface Tabs {
export interface Tabs {
id: number;
name: string;
}
apps/dashboard/src/routes/+layout.svelte
+2 -2
View File
@@ -10,7 +10,7 @@
import LMSNavigation from '$lib/components/Navigation/lms.svelte';
import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
import Restricted from '$lib/components/Page/Restricted.svelte';
import { PageRestricted } from '$lib/components/Page';
import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
import Snackbar from '$lib/components/Snackbar/index.svelte';
import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
@@ -129,7 +129,7 @@
<Snackbar />
{#if data.org?.is_restricted || $currentOrg.is_restricted}
<Restricted />
<PageRestricted />
{:else if data.skipAuth}
<PlayQuiz />
{:else if data.isOrgSite && !path}
apps/dashboard/src/routes/404/+page.svelte
+2 -2
View File
@@ -1,10 +1,10 @@
<script>
import { page } from '$app/stores';
import NotFound from '$lib/components/NotFound/NotFound.svelte';
import { PageNotFound } from '$lib/components/Page';
$: query = new URLSearchParams($page.url.search);
$: isOrg = query.get('type') === 'org';
</script>
<NotFound {isOrg} />
<PageNotFound {isOrg} />
apps/dashboard/src/routes/courses/[id]/+page.svelte
+24 -26
View File
@@ -1,39 +1,37 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import { group } from '$lib/components/Course/store';
import { profile } from '$lib/utils/store/user';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { isNewFeedModal } from '$lib/components/Course/components/NewsFeed/store';
import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
import Box from '$lib/components/Box/index.svelte';
import NewFeedModal from '$lib/components/Course/components/NewsFeed/NewFeedModal.svelte';
import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
import { isNewFeedModal, newsFeed } from '$lib/components/Course/components/NewsFeed/store';
import { group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { supabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import {
createComment,
deleteNewsFeedComment,
deleteNewsFeed,
deleteNewsFeedComment,
fetchNewsFeedReaction,
fetchNewsFeeds,
handleEditFeed,
toggleFeedIsPinned,
fetchNewsFeedReaction
toggleFeedIsPinned
} from '$lib/utils/services/newsfeed';
import { newsFeed } from '$lib/components/Course/components/NewsFeed/store';
import Box from '$lib/components/Box/index.svelte';
import { supabase } from '$lib/utils/functions/supabase';
import { snackbar } from '$lib/components/Snackbar/store';
import type { Feed } from '$lib/utils/types/feed';
import {
NOTIFICATION_NAME,
triggerSendEmail
} from '$lib/utils/services/notification/notification';
import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import type { Feed } from '$lib/utils/types/feed';
import type { CurrentOrg } from '$lib/utils/types/org';
import { goto } from '$app/navigation';
import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
export let data;
@@ -280,10 +278,10 @@
</div>
{:else if !$newsFeed.length}
<Box>
<div class="flex justify-between flex-col items-center w-[90%] md:w-96">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
<h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.news_feed.body_header')}</h2>
<p class="text-sm text-center text-slate-500">
<div class="flex w-[90%] flex-col items-center justify-between md:w-96">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
<h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.news_feed.body_header')}</h2>
<p class="text-center text-sm text-slate-500">
{$t('course.navItem.news_feed.body_content')}
</p>
</div>
@@ -291,7 +289,7 @@
{:else}
{#each $newsFeed as feed}
{#if feed.isPinned}
<div class="flex items-center gap-2 mb-3">
<div class="mb-3 flex items-center gap-2">
<PinFilled size={16} />
<p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
+26 -27
View File
@@ -1,31 +1,30 @@
<script lang="ts">
import { browser } from '$app/environment';
import Box from '$lib/components/Box/index.svelte';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { getLectureNo } from '$lib/components/Course/function.js';
import { course, group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { snackbar } from '$lib/components/Snackbar/store';
import { ROLE } from '$lib/utils/constants/roles';
import { t } from '$lib/utils/functions/translations';
import { takeAttendance } from '$lib/utils/services/attendance';
import { globalStore } from '$lib/utils/store/app';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import {
Search,
Checkbox,
Pagination,
Search,
StructuredList,
StructuredListBody,
StructuredListCell,
StructuredListHead,
StructuredListRow,
Pagination
StructuredListRow
} from 'carbon-components-svelte';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import { course, group } from '$lib/components/Course/store';
import { getLectureNo } from '$lib/components/Course/function.js';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import { takeAttendance } from '$lib/utils/services/attendance';
import { snackbar } from '$lib/components/Snackbar/store';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import { browser } from '$app/environment';
import { globalStore } from '$lib/utils/store/app';
import { t } from '$lib/utils/functions/translations';
export let data;
@@ -140,12 +139,12 @@
<CourseContainer bind:courseId={data.courseId}>
<PageNav title={$t('course.navItem.attendance.title')} />
<PageBody width="w-full max-w-6xl md:w-11/12">
<section class="flex items-center mx-2 lg:mx-9 my-5">
<section class="mx-2 my-5 flex items-center lg:mx-9">
<div
class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
class="flex w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center"
>
<div class="flex">
<p class="flex items-center mr-5">
<p class="mr-5 flex items-center">
<Checkbox checked disabled />
{$t('course.navItem.attendance.present')}
</p>
@@ -164,8 +163,8 @@
</div>
</section>
<section class="my-5 mx-2 lg:mx-9">
<StructuredList class="m-0 relative">
<section class="mx-2 my-5 lg:mx-9">
<StructuredList class="relative m-0">
<!-- Moved the lesson headers outside the students loop -->
<StructuredListHead class="bg-primary-100">
<StructuredListRow head class="mx-7">
@@ -186,8 +185,8 @@
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
<div class="w-1/4 flex items-center">
<p class="dark:text-white font-semibold">
<div class="flex w-1/4 items-center">
<p class="font-semibold dark:text-white">
{student.profile.fullname}
</p>
</div>
@@ -213,7 +212,7 @@
{#if students.length === 0}
<Box className="h-[300px] w-full">
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500 dark:text-white text-center">
<h3 class="text-center text-3xl text-gray-500 dark:text-white">
{$t('course.navItem.attendance.no_student')}
</h3>
</Box>
apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
+3 -4
View File
@@ -1,9 +1,8 @@
<script lang="ts">
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
// import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
// import Reports from '$lib/components/Course/components/Ceritficate/Reports.svelte';
apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+25 -26
View File
@@ -1,29 +1,28 @@
<script lang="ts">
import { page } from '$app/stores';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
lessons,
handleDelete,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import PageBody from '$lib/components/PageBody/index.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
import { course } from '$lib/components/Course/store';
import type { Lesson } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { goto } from '$app/navigation';
import { COURSE_VERSION } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user';
import { page } from '$app/stores';
import Box from '$lib/components/Box/index.svelte';
import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import LessonList from '$lib/components/Course/components/Lesson/LessonList.svelte';
import LessonSectionList from '$lib/components/Course/components/Lesson/LessonSectionList.svelte';
import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
import {
handleDelete,
lessons,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { t } from '$lib/utils/functions/translations';
import { profile } from '$lib/utils/store/user';
import type { Lesson } from '$lib/utils/types';
import { COURSE_VERSION } from '$lib/utils/types';
export let data;
@@ -135,7 +134,7 @@
</Box>
{:else if lessonsLength > 0}
{#if reorder}
<p class="text-gray-400 text-center dark:text-white italic text-xs">
<p class="text-center text-xs italic text-gray-400 dark:text-white">
{$t('course.navItem.lessons.drag')}
</p>
{/if}
@@ -147,10 +146,10 @@
{/if}
{:else}
<Box className="w-full lg:w-11/12 lg:px-4 m-auto">
<div class="flex justify-between flex-col items-center">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
<h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.lessons.body_header')}</h2>
<p class="text-sm text-center text-slate-500">
<div class="flex flex-col items-center justify-between">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
<h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.lessons.body_header')}</h2>
<p class="text-center text-sm text-slate-500">
{$t('course.navItem.lessons.body_content')}
</p>
</div>
apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+34 -49
View File
@@ -1,53 +1,50 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { env } from '$env/dynamic/public';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
checkExercisesComplete,
fetchLesson,
updateLessonCompletion,
checkExercisesComplete
updateLessonCompletion
} from '$lib/utils/services/courses';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
import { globalStore } from '$lib/utils/store/app';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import { Dropdown } from 'carbon-components-svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
import MODES from '$lib/utils/constants/mode';
import { group, course } from '$lib/components/Course/store';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { browser } from '$app/environment';
import { apps } from '$lib/components/Apps/store';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import IconButton from '$lib/components/IconButton/index.svelte';
import { getGroupMemberId } from '$lib/components/Course/function';
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
import {
lesson,
lessons,
lessonByTranslation,
lessons,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import { browser } from '$app/environment';
import { currentOrg } from '$lib/utils/store/org';
import { getGroupMemberId } from '$lib/components/Course/function';
import { course, group } from '$lib/components/Course/store';
import IconButton from '$lib/components/IconButton/index.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { COURSE_VERSION, type LessonCompletion, type Lesson } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
import { t } from '$lib/utils/functions/translations';
import MODES from '$lib/utils/constants/mode';
import { LANGUAGES } from '$lib/utils/constants/translation';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import { COURSE_VERSION, type Lesson, type LessonCompletion } from '$lib/utils/types';
import { Dropdown } from 'carbon-components-svelte';
import { ChevronLeft, ChevronRight, Edit, Save } from 'carbon-icons-svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
export let data;
@@ -73,7 +70,7 @@
async function fetchReqData(lessonId = '', isMaterialsTabActive: boolean) {
const timeout = setTimeout(() => {
$lesson.isFetching = true;
}, 1000);
}, 500);
let lessonData;
if (isMaterialsTabActive) {
const lesson = await fetchLesson(lessonId);
@@ -84,9 +81,9 @@
console.log({ lessonData });
const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
const totalComments = lessonData?.totalComments?.[0] && lessonData.totalComments[0].count;
setLesson(lessonData, totalExercises || 0, totalComments || 0);
const totalExercises = lessonData?.totalExercises?.[0]?.count || 0;
const totalComments = lessonData?.totalComments?.[0]?.count || 0;
setLesson(lessonData, totalExercises, totalComments);
$lesson.isFetching = false;
}
@@ -321,7 +318,7 @@
$: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: if (data.courseId && browser) {
$: if (data.courseId && $profile.id && browser) {
mode = MODES.view;
fetchReqData(data.lessonId, data.isMaterialsTabActive);
}
@@ -414,10 +411,6 @@
{:else if !!data.lessonId}
<PageBody
bind:isPageNavHidden={$globalStore.isStudent}
onClick={() => {
$apps.open = false;
$apps.dropdown = false;
}}
width="lg:w-full xl:w-11/12"
className="overflow-x-hidden"
>
@@ -465,14 +458,6 @@
<CourseIcon />
</button>
{/if}
<button
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4 disabled:cursor-not-allowed disabled:opacity-10"
on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
disabled={$globalStore.isStudent && !$currentOrg.customization.apps.comments}
>
<SendAlt size={24} class="carbon-icon" />
<span class="ml-1">{$lesson.totalComments}</span>
</button>
<button
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
on:click={() => markLessonComplete(data.lessonId)}
apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
+30 -32
View File
@@ -1,31 +1,29 @@
<script lang="ts">
import { goto } from '$app/navigation';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
import Papa from 'papaparse';
import { OverflowMenu, OverflowMenuItem, Loading } from 'carbon-components-svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import { ROLE } from '$lib/utils/constants/roles';
import { group } from '$lib/components/Course/store';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { fetchExercisesByMarks } from '$lib/utils/services/courses';
import { getLectureNo } from '$lib/components/Course/function.js';
import { fetchMarks } from '$lib/utils/services/marks';
import { profile } from '$lib/utils/store/user';
import { browser } from '$app/environment';
import { course } from '$lib/components/Course/store';
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { getLectureNo } from '$lib/components/Course/function.js';
import { course, group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { globalStore } from '$lib/utils/store/app';
import { ROLE } from '$lib/utils/constants/roles';
import { t } from '$lib/utils/functions/translations';
import { fetchExercisesByMarks } from '$lib/utils/services/courses';
import { fetchMarks } from '$lib/utils/services/marks';
import { globalStore } from '$lib/utils/store/app';
import { currentOrg } from '$lib/utils/store/org';
import type { CurrentOrg } from '$lib/utils/types/org';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson } from '$lib/utils/types';
import type { CurrentOrg } from '$lib/utils/types/org';
import { Loading, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import Papa from 'papaparse';
export let data;
@@ -240,19 +238,19 @@
</PageNav>
<PageBody width="w-full max-w-6xl md:w-11/12">
<div id="tableContainer" class="table rounded-md border border-gray-300 w-full">
<div id="tableContainer" class="table w-full rounded-md border border-gray-300">
<div class="flex items-center {borderBottomGrey}">
<div class="box flex items-center p-3">
<p class="dark:text-white w-40">{$t('course.navItem.marks.student')}</p>
<p class="w-40 dark:text-white">{$t('course.navItem.marks.student')}</p>
</div>
{#each $lessons as lesson, index}
{#if lessonMapping[lesson.id]}
<div class="box flex flex-col items-center {borderleftGrey}">
<p class="dark:text-white col lesson-number" title={lesson.title}>
<p class="col lesson-number dark:text-white" title={lesson.title}>
{getLectureNo(index + 1)}
</p>
<div
class="flex h-full items-center border-r-0 border-t border-b-0 border-l-0 border-gray-300"
class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300"
>
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
<p
@@ -268,20 +266,20 @@
{/if}
{/each}
<div class="box flex items-center {borderleftGrey}">
<p class="dark:text-white w-20 text-center">{$t('course.navItem.marks.total')}</p>
<p class="w-20 text-center dark:text-white">{$t('course.navItem.marks.total')}</p>
</div>
</div>
{#each students as student}
<div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
<div class="w-40 flex items-center">
<div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
<div class="flex w-40 items-center">
<img
alt="Student avatar"
src={student.profile.avatar_url}
class="w-8 h-8 rounded-full mr-2"
class="mr-2 h-8 w-8 rounded-full"
/>
<div class="text-sm">
<p class="dark:text-white font-semibold">
<p class="font-semibold dark:text-white">
{student.profile.fullname}
</p>
<p class="dark:text-white">
@@ -293,7 +291,7 @@
{#if lessonMapping[lesson.id]}
<div class="flex items-center">
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
<p class="dark:text-white col">
<p class="col dark:text-white">
{studentMarksByExerciseId[student.id]
? studentMarksByExerciseId[student.id][exerciseId] || '-'
: '-'}
@@ -303,9 +301,9 @@
{/if}
{/each}
<div class="w-20 flex items-center">
<div class="flex w-20 items-center">
<div class="text-sm">
<p class="dark:text-white col">
<p class="col dark:text-white">
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
</p>
</div>
apps/dashboard/src/routes/courses/[id]/people/+layout.svelte
+1 -2
View File
@@ -3,8 +3,7 @@
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { t } from '$lib/utils/functions/translations';
apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
+2 -3
View File
@@ -1,8 +1,7 @@
<script>
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Settings from '$lib/components/Course/components/Settings/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { t } from '$lib/utils/functions/translations';
export let data;
apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
+36 -37
View File
@@ -1,38 +1,37 @@
<script lang="ts">
import { flip } from 'svelte/animate';
import { dndzone } from 'svelte-dnd-action';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { SkeletonPlaceholder } from 'carbon-components-svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
import Chip from '$lib/components/Chip/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { course } from '$lib/components/Course/store';
import {
fetchSubmissions,
updateSubmission,
updateQuestionAnswer,
deleteSubmission
} from '$lib/utils/services/submissions';
import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
import { formatAnswers } from '$lib/components/Course/function.js';
import { course } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
import formatDate from '$lib/utils/functions/formatDate';
import {
triggerSendEmail,
NOTIFICATION_NAME
} from '$lib/utils/services/notification/notification';
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
import { browser } from '$app/environment';
import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
import { t } from '$lib/utils/functions/translations';
import {
NOTIFICATION_NAME,
triggerSendEmail
} from '$lib/utils/services/notification/notification';
import {
deleteSubmission,
fetchSubmissions,
updateQuestionAnswer,
updateSubmission
} from '$lib/utils/services/submissions';
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
import type {
SubmissionIdData,
SubmissionItem,
SubmissionSection
} from '$lib/utils/types/submission';
import { SkeletonPlaceholder } from 'carbon-components-svelte';
import { dndzone } from 'svelte-dnd-action';
import { flip } from 'svelte/animate';
export let data;
const { courseId } = data;
@@ -373,23 +372,23 @@
<PageNav title={$t('course.navItem.submissions.title')} />
<PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
<div class="flex items-center w-full">
<div class="flex w-full items-center">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-600 p-3 h-80 mr-3 overflow-hidden"
class="section mr-3 h-80 overflow-hidden rounded-md border border-gray-50 bg-gray-100 p-3 dark:border-neutral-600 dark:bg-black"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
<div class="mb-2 flex items-center">
<Chip value={items.length} className="bg-set dark:bg-neutral-800" />
<p class="dark:text-white ml-2 font-bold">{title}</p>
<p class="ml-2 font-bold dark:text-white">{title}</p>
</div>
{#if fetching}
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
{:else}
<div
class="content pr-2 overflow-y-auto mb-3"
class="content mb-3 overflow-y-auto pr-2"
use:dndzone={{
items,
flipDurationMs,
@@ -402,19 +401,19 @@
<div
class="{item.isEarly
? 'border-none'
: 'border border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3"
: 'border border-red-700'} mx-0 my-2 w-full rounded-md bg-white px-3 py-3 dark:bg-neutral-800"
animate:flip={{ duration: flipDurationMs }}
>
<a
class="flex w-full items-center cursor-pointer text-black mb-2"
class="mb-2 flex w-full cursor-pointer items-center text-black"
href={`${$page.url.pathname}?submissionId=${item.id}`}
>
<img
alt="Student avatar"
class="block rounded-full h-6 w-6"
class="block h-6 w-6 rounded-full"
src={item.student.avatar_url}
/>
<p class="dark:text-white ml-2 text-sm">
<p class="ml-2 text-sm dark:text-white">
{item.student.username}
</p>
</a>
@@ -425,15 +424,15 @@
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
class="my-2 flex items-center text-black no-underline hover:underline"
href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
.id}/exercises/{item.exercise.id}"
>
<p class="dark:text-white text-grey text-sm">
<p class="text-grey text-sm dark:text-white">
#{item.lesson.title}
</p>
</a>
<p class="dark:text-white text-gray-500 text-xs">
<p class="text-xs text-gray-500 dark:text-white">
{item.submittedAt}
</p>
<!-- <div class="badge rounded-md px-2 bg-green-500 text-white">