feat: move lesson comments under lesson note
This commit is contained in:
Rotimi Best
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import { PageNav } from '$lib/components/Page';
|
||||
</script>
|
||||
|
||||
<PageNav title="Attendance" />
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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 = '';
|
||||
|
||||
+367
@@ -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>
|
||||
+12
-4
@@ -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]));
|
||||
|
||||
@@ -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')}.
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
+2
-4
@@ -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>
|
||||
+11
-17
@@ -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" />
|
||||
+5
-5
@@ -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
|
||||
+4
-4
@@ -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>
|
||||
|
||||
@@ -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';
|
||||
@@ -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>
|
||||
@@ -1 +0,0 @@
|
||||
<div />
|
||||
@@ -1,9 +0,0 @@
|
||||
|
||||
<style>
|
||||
.actions {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="actions"></div>
|
||||
|
||||
@@ -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'}"
|
||||
|
||||
Reference in New Issue
Block a user