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

feat: course types - self paced and live class (#309)

Browse Source 
* working on the course type

* trying to mark it persist

* almost done here

* fixed sendig emtpy options bug

* created migration file

* created migration file

* made updates based on PR review

* merge

* update course type card

* add redirect logic with classroomio.com/new

* make new course modal only open/close with url

* feat: page active state (#315)

* finished the active link state

* updated the active link state based on review

* simplify code

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

* add type to course card

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Em_Dev
2024-05-21 00:14:47 +01:00
committed by GitHub
co-authored by Rotimi Best
parent b9bb568f98
commit 49d8539be9
41 changed files with 894 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+69 -42
View File
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
@@ -7,9 +7,11 @@
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
import { page } from '$app/stores';
let showsubNav = false;
let showNav = false;
let activeLink = '';
function handleShow() {
showsubNav = !showsubNav;
@@ -23,7 +25,7 @@
{
key: 'coursemanagement',
title: 'Course Management',
subtitle: 'Simple course management tools '
subtitle: 'Simple course management tools'
},
{
key: 'ai',
@@ -41,6 +43,10 @@
subtitle: 'Seamlessly collaborate with your students'
}
];
$: activeLink = $page.url.pathname;
$: activeHash = $page.url.hash;
$: isSuperpowersActive = superpowers.some((sp) => activeHash.includes(sp.key));
</script>
<div
@@ -62,20 +68,25 @@
<nav class="w-[40%] hidden md:hidden lg:block">
<ul class="flex items-center justify-between w-full gap-2">
<!-- -->
<li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
<button class="flex items-center" on:click={() => (showNav = !showNav)}
>Our Superpowers <ChevronDown class="ml-2" /></button
<button
class="flex items-center hover:bg-gray-100 px-4 py-2 rounded-md"
on:click={() => (showNav = !showNav)}
class:active={isSuperpowersActive}
>
Our Superpowers <ChevronDown class="ml-2" />
</button>
{#if showNav}
<div
class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
>
{#each superpowers as superpower}
<a
class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4"
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 p-5 mb-4"
href="/#{superpower.key}"
on:click={() => (showNav = !showNav)}
on:click={() => {
showNav = !showNav;
}}
>
{#if superpower.key === 'coursemanagement'}
<CourseIcon />
@@ -99,31 +110,33 @@
</div>
{/if}
</li>
<!-- More Features -->
<!-- <a href="/#morefeatures">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
</a> -->
<!-- Pricing -->
<a href="/pricing">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
<a
href="/pricing"
class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/pricing')}
>
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li>
</a>
<!-- Docs -->
<a href="/docs" target="_blank">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li>
<a
href="/docs"
target="_blank"
class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/docs')}
>
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Docs</li>
</a>
<!-- Blog -->
<a href="/blog">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li>
<a
href="/blog"
class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/blog')}
>
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Blog</li>
</a>
</ul>
</nav>
<div class="justify-between items-center flex-row hidden md:hidden lg:flex">
<!-- <button
class="bg-blue-700 text-white text-sm font-medium px-4 py-1.5 rounded-md mr-5"
>
Sign Up
</button> -->
<a href="/discord" target="_blank">
<img
loading="lazy"
@@ -155,7 +168,6 @@
on:click={handleShowNav}><TextAlignJustify size={24} /></button
>
<!-- burger menu -->
{#if showNav}
<div
in:fly={{ x: 20, duration: 700 }}
@@ -173,20 +185,25 @@
/>
<button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
</div>
<nav class="">
<nav>
<ul class="flex items-center flex-col lg:flex-row justify-between w-full">
<!-- -->
<li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
<button
class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg"
on:click={handleShow}
class:active={isSuperpowersActive}
>
Our Superpowers <ChevronDown />
</button>
{#if showsubNav}
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
{#each superpowers as superpower}
<a href="/#{superpower.key}" on:click={handleShowNav}>
<a
href="/#{superpower.key}"
on:click={() => {
handleShowNav();
}}
>
<p
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
>
@@ -197,36 +214,43 @@
</div>
{/if}
</li>
<!-- Pricing -->
<a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
on:click={handleShowNav}
on:click={() => {
handleShowNav();
}}
href="/pricing"
class:active={activeLink.startsWith('/pricing')}
>
<li>Pricing</li>
</a>
<!-- Docs -->
<a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
on:click={() => {
handleShowNav();
}}
class:active={activeLink.startsWith('/docs')}
href="/docs"
target="_blank"
>
<li>Docs</li>
</a>
<!-- Blog -->
<a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
on:click={() => {
handleShowNav();
}}
class:active={activeLink.startsWith('/blog')}
href="/blog"
>
<li>Blog</li>
</a>
<!-- More Features -->
<a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
on:click={() => {
handleShowNav();
}}
class:active={activeHash.includes('morefeatures')}
href="/#morefeatures"
>
<li>More features</li>
@@ -234,10 +258,6 @@
</ul>
</nav>
<div class="flex items-start flex-col gap-y-2 mt-5 border-t-[1px] pt-5">
<!-- <button
class="text-black font-semibold rounded-md mr-10 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
>Sign Up</button
> -->
<a
href="/discord"
target="_blank"
@@ -274,3 +294,10 @@
</div>
{/if}
</div>
<style>
.active {
background-color: #f3f4f6;
border-radius: 6px;
}
</style>
apps/classroomio-com/src/routes/new/+page.server.ts
+8
View File
@@ -0,0 +1,8 @@
import { dev } from '$app/environment';
import { redirect } from '@sveltejs/kit';
export const load = async () => {
const url = dev ? 'http://localhost:5173' : 'https://app.classroomio.com';
throw redirect(307, `${url}/org/*/courses?create=true`);
};
apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte
+2 -4
View File
@@ -112,11 +112,9 @@
disabled={$isFreePlan}
>
<span slot="labelA" style={$globalStore.isDark ? 'color: white' : 'color: #161616'}
>{$t('course.navItem.certificates.locked')}</span
>
<span slot="labelB" style="color: green"
>{$t('course.navItem.certificates.unlocked')}</span
>{$t('generic.locked')}</span
>
<span slot="labelB" style="color: green">{$t('generic.unlocked')}</span>
</Toggle>
</div>
</section>
apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
-140
View File
@@ -1,140 +0,0 @@
<script>
import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import Select from '$lib/components/Form/Select.svelte';
import {
lessons,
handleSaveLesson
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course, group } from '$lib/components/Course/store';
import TextChip from '$lib/components/Chip/Text.svelte';
import Modal from '$lib/components/Modal/index.svelte';
import { goto } from '$app/navigation';
import { handleAddLessonWidget } from '../Navigation/store';
import { t } from '$lib/utils/functions/translations';
export let isStudent = false;
let errors = {
title: ''
};
let lesson = {
id: null,
title: '',
profile: undefined,
call_url: undefined,
lesson_at: new Date(),
is_unlocked: false
};
function getLessonOrder(id = '', fallbackIndex) {
const index = fallbackIndex || $lessons.findIndex((lesson) => lesson.id === id);
if (index < 9) {
return '0' + (index + 1);
} else {
return index + 1;
}
}
const handleSave = async () => {
if (lesson.title.trim() === '') {
errors.title = 'title cannot be empty';
return;
}
const savedLesson = await handleSaveLesson(lesson, $course.id);
if (Array.isArray(savedLesson) && savedLesson[0]) {
const newLesson = savedLesson[0];
lesson.id = newLesson.id;
$lessons = [...$lessons, lesson];
goto('/courses/' + $course.id + '/lessons/' + lesson.id);
}
$handleAddLessonWidget.open = false;
};
</script>
<Modal
onClose={() => ($handleAddLessonWidget.open = false)}
bind:open={$handleAddLessonWidget.open}
width="w-[80%] md:w-[65%]"
containerClass="overflow-hidden"
modalHeading={$t('course.navItem.lessons.add_lesson.modal_heading')}
>
<div
class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 dark:border-neutral-600 py-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap items-center dark:bg-neutral-800"
>
<div class="mr-5">
<TextChip
value={getLessonOrder('', $lessons.length)}
size="sm"
shape="rounded-full"
className="bg-primary-200 text-primary-600 text-xs"
/>
</div>
<div class="w-full md:w-4/5">
<div class="flex flex-row gap-1 md:gap-2">
<TextField
label={$t('course.navItem.lessons.add_lesson.lesson_title')}
bind:value={lesson.title}
autofocus={true}
className="flex-1 min-w-lg max-w-lg"
isRequired={true}
errorMessage={errors.title}
/>
<IconButton
disabled={isStudent}
toolTipProps={isStudent
? {}
: {
title: `${$t('course.navItem.lessons.add_lesson.click_to')} ${
lesson.is_unlocked
? $t('course.navItem.lessons.add_lesson.lock')
: $t('course.navItem.lessons.add_lesson.unlock')
}`,
direction: 'right'
}}
>
<button
on:click={() => {
lesson.is_unlocked = !lesson.is_unlocked;
handleSaveLesson(lesson, $course.id);
}}
class="p-1"
>
{#if lesson.is_unlocked}
<UnlockedIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<LockedIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</button>
</IconButton>
</div>
<div class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-2 w-4/5">
<div class="lg:mb-0">
<Select
bind:value={lesson.profile}
options={$group.tutors}
labelKey="fullname"
className="sm:my-1 w-[100%]"
/>
</div>
<div class="flex items-center lg:mb-0">
<input
type="date"
name="lesson-date-picker"
class="p-2 my-2 rounded-md sm:w-[179px] dark:bg-neutral-800 dark:text-white"
/>
</div>
<div class="flex items-center mb-3 lg:mb-0">
<TextField className="w-[179px]" placeholder="https://meet.google.com/mga-dsjs-fmb" />
</div>
</div>
</div>
</div>
<PrimaryButton label={$t('course.navItem.lessons.add_lesson.save')} onClick={handleSave} />
</Modal>
apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
+4 -4
View File
@@ -19,18 +19,18 @@
onClose={() => ($deleteConfirmation.open = false)}
bind:open={$deleteConfirmation.open}
width="w-96"
modalHeading={$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation')}
modalHeading={$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.title')}
>
<div>
<h1 class="dark:text-white text-lg">
{$t('course.navItem.lessons.exercises.all_exercises.sure')}
{$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.sure')}
</h1>
<div class="mt-5 flex items-center justify-between">
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.OUTLINED}
label={$t('course.navItem.lessons.exercises.all_exercises.no')}
label={$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.no')}
onClick={() => {
$deleteConfirmation.open = false;
onCancel();
@@ -39,7 +39,7 @@
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.CONTAINED}
label={$t('course.navItem.lessons.exercises.all_exercises.yes')}
label={$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.yes')}
onClick={() => {
onDelete();
$deleteConfirmation.open = false;
apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/GradingLoader.svelte
+13
View File
@@ -0,0 +1,13 @@
<script>
import { SkeletonText } from 'carbon-components-svelte';
</script>
<div class="space-y-6">
<SkeletonText width="100%" heading />
<div class="space-y-3">
<SkeletonText width="100%" heading />
<SkeletonText width="100%" heading />
<SkeletonText width="100%" heading />
<SkeletonText width="100%" heading />
</div>
</div>
apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
+115 -13
View File
@@ -17,7 +17,11 @@
import { getPropsForQuestion, filterOutDeleted } from './functions';
import { formatAnswers, getGroupMemberId } from '$lib/components/Course/function';
import { submitExercise } from '$lib/utils/services/courses';
import { fetchSubmission } from '$lib/utils/services/submissions';
import {
fetchSubmission,
updateQuestionAnswer,
updateSubmission
} from '$lib/utils/services/submissions';
import { profile } from '$lib/utils/store/user';
import { currentOrg } from '$lib/utils/store/org';
import {
@@ -26,8 +30,9 @@
} from '$lib/utils/services/notification/notification';
import { lesson } from '../store/lessons';
import { browser } from '$app/environment';
import { CloseFilled } from 'carbon-icons-svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import { useCompletion } from 'ai/svelte';
import { COURSE_TYPE } from '$lib/utils/types';
import GradingLoader from './GradingLoader.svelte';
export let preview: boolean = false;
export let exerciseId = '';
@@ -40,6 +45,9 @@
let isLoadingAutoSavedData = false;
let alreadyCheckedAutoSavedData = false;
let gradedComment = true;
let isLoading = false;
let submissionResponse;
let submissionId;
function handleStart() {
$questionnaireMetaData.currentQuestionIndex += 1;
@@ -80,7 +88,89 @@
});
};
function onSubmit(id, value, moveToNextQuestion = false) {
const { input, handleSubmit, completion } = useCompletion({
api: '/api/completion/gradingprompt',
onFinish: async () => {
try {
const responseData = $completion.replace('```json', '').replace('```', '');
let aiResponses = [];
try {
// Parse the modified response data as JSON
aiResponses = JSON.parse(responseData);
} catch (error) {
console.error('Error parsing AI response', error);
}
$questionnaire.questions.forEach((question) => {
const { id, points, question_type_id } = question;
let questionAnswer = submissionResponse?.res?.data.find(
(answer) => answer.question_id === id
);
console.log('this is the question answer', questionAnswer);
if (question_type_id !== QUESTION_TYPE.TEXTAREA) {
const answer = $questionnaireMetaData.answers[question.name];
let score = points / answer.length;
$questionnaireMetaData.grades = {
...$questionnaireMetaData.grades,
[id]: score
};
updateQuestionAnswer({ point: score }, { id: questionAnswer?.id });
} else if (aiResponses.length) {
const graded = aiResponses.find((res) => res.id === id);
$questionnaireMetaData.grades = {
...$questionnaireMetaData.grades,
[id]: graded.score
};
updateQuestionAnswer({ point: graded.score }, { id: questionAnswer?.id });
}
});
$questionnaireMetaData.finalTotalGrade = Object.values(
$questionnaireMetaData.grades
).reduce((acc, answer): number => {
return acc + answer;
}, 0);
updateSubmission({
id: submissionId,
status_id: STATUS.GRADED,
total: $questionnaireMetaData.finalTotalGrade
});
$questionnaireMetaData.status = STATUS.GRADED;
console.log('grade', $questionnaireMetaData.finalTotalGrade);
} catch (error) {
console.error('Error', error);
} finally {
isLoading = false;
}
}
});
function automaticGrading(answers, questions) {
const paragraphAiInput = questions
.filter((q) => q.question_type_id === QUESTION_TYPE.TEXTAREA)
.map((q) => {
const answer = answers?.answers[q.name]; // { open_answer: '' }
return {
id: q.id,
question: q.title,
answer: answer,
point: q.points
};
});
$input = JSON.stringify(paragraphAiInput);
handleSubmit({ preventDefault: () => {} });
}
async function onSubmit(id, value, moveToNextQuestion = false) {
if ($course.type === COURSE_TYPE.SELF_PACED) {
isLoading = true;
}
const { answers } = $questionnaireMetaData;
const { questions } = $questionnaire;
const prevAnswer = answers[id] || [];
@@ -114,14 +204,24 @@
$questionnaireMetaData.status = 1;
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
$questionnaireMetaData.grades = {};
($questionnaireMetaData.comment = ''),
submitExercise(
$questionnaireMetaData.answers,
questions,
exerciseId,
$course.id,
getGroupMemberId($group.people, $profile.id)
);
$questionnaireMetaData.comment = '';
let response = await submitExercise(
$questionnaireMetaData.answers,
questions,
exerciseId,
$course.id,
getGroupMemberId($group.people, $profile.id)
);
if (response) {
submissionResponse = response;
submissionId = submissionResponse.submission[0]?.id;
}
if ($course.type === COURSE_TYPE.SELF_PACED) {
automaticGrading($questionnaireMetaData, $questionnaire.questions);
}
notifyEducator();
}
}
@@ -291,7 +391,9 @@
</div>
</RoleBasedSecurity>
{:else if $questionnaireMetaData.isFinished}
{#if !isLoadingAutoSavedData}
{#if isLoading}
<GradingLoader />
{:else if !isLoading && !isLoadingAutoSavedData}
<div class="flex items-center justify-between">
<div class="flex flex-col lg:flex-row items-start lg:items-center lg:space-x-4 w-full">
<h2 class="text-xl font-normal">{$questionnaire.title}</h2>
apps/dashboard/src/lib/components/Course/components/Lesson/NewLessonModal.svelte
+101
View File
@@ -0,0 +1,101 @@
<script lang="ts">
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import Select from '$lib/components/Form/Select.svelte';
import {
lessons,
handleSaveLesson
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course, group } from '$lib/components/Course/store';
import Modal from '$lib/components/Modal/index.svelte';
import { goto } from '$app/navigation';
import { handleAddLessonWidget } from '../Navigation/store';
import { t } from '$lib/utils/functions/translations';
import { COURSE_TYPE } from '$lib/utils/types';
import type { Lesson } from '$lib/utils/types';
let errors = {
title: ''
};
let lesson: Lesson = {
id: '',
course_id: $course.id || '',
title: '',
profile: undefined,
call_url: undefined,
lesson_at: new Date().toDateString(),
is_unlocked: true,
lesson_completion: []
};
const handleSave = async () => {
if (!lesson.title.trim()) {
errors.title = 'title cannot be empty';
return;
}
const savedLesson = await handleSaveLesson(lesson, $course.id);
if (Array.isArray(savedLesson) && savedLesson[0]) {
const newLesson = savedLesson[0];
lesson.id = newLesson.id;
$lessons = [...$lessons, lesson];
goto('/courses/' + $course.id + '/lessons/' + lesson.id);
}
$handleAddLessonWidget.open = false;
};
</script>
<Modal
onClose={() => ($handleAddLessonWidget.open = false)}
bind:open={$handleAddLessonWidget.open}
width="w-[80%] md:w-[65%]"
maxWidth="max-w-2xl"
containerClass="overflow-hidden"
modalHeading={$t('course.navItem.lessons.add_lesson.modal_heading')}
>
<div
class="relative m-auto py-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap items-center dark:bg-neutral-800"
>
<div class="w-full">
<TextField
label={$t('course.navItem.lessons.add_lesson.lesson_title')}
bind:value={lesson.title}
autoFocus={true}
className="flex-1 min-w-lg max-w-lg"
isRequired={true}
errorMessage={errors.title}
/>
{#if $course.type == COURSE_TYPE.LIVE_CLASS}
<div
class="flex items-start justify-evenly gap-1 flex-col lg:flex-row lg:items-center mt-2 w-4/5"
>
<div class="lg:mb-0">
<Select
bind:value={lesson.profile}
options={$group.tutors}
labelKey="fullname"
className="sm:my-1 w-[100%]"
/>
</div>
<div class="flex items-center lg:mb-0">
<input
type="date"
name="lesson-date-picker"
class="p-2 my-2 rounded-md sm:w-[179px] dark:bg-neutral-800 dark:text-white"
/>
</div>
<div class="flex items-center mb-3 lg:mb-0">
<TextField className="w-[179px]" placeholder="https://meet.google.com/mga-dsjs-fmb" />
</div>
</div>
{/if}
</div>
</div>
<div class="flex flex-row-reverse">
<PrimaryButton label={$t('course.navItem.lessons.add_lesson.save')} onClick={handleSave} />
</div>
</Modal>
apps/dashboard/src/lib/components/Course/components/Lesson/store/exercise.js
+11
View File
@@ -39,6 +39,17 @@ export function validateQuestionnaire(questions) {
}
const qErrors = errors[question.id] || {};
if (question.question_type.id !== QUESTION_TYPE.TEXTAREA) {
const hasEmptyOptionLabel = question.options
.filter((option) => !option.deleted_at)
.some((option) => option.label.trim() === '');
if (hasEmptyOptionLabel) {
qErrors.option = 'Please enter a label for all options';
errors[question.id] = { ...qErrors };
}
}
const hasAnswer = question.options
.filter((o) => !o.deleted_at)
.some((option) => option.is_correct);
apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts
+1 -1
View File
@@ -87,7 +87,7 @@ export async function handleSaveLesson(lesson: Lesson, course_id: Course['id'])
let newLessonData: any[] | null = null;
if (typeof lesson.id === 'string') {
if (!!lesson.id) {
// No need to get the result of update cause we have all in local state
await updateLesson(newLesson, lesson.id);
} else {
apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte
+26 -12
View File
@@ -17,6 +17,7 @@
import { getIsLessonComplete } from '../Lesson/functions';
import { currentOrg, isFreePlan } from '$lib/utils/store/org';
import { t } from '$lib/utils/functions/translations';
import { COURSE_TYPE } from '$lib/utils/types';
export let path: string;
export let isStudent: boolean = false;
@@ -158,7 +159,12 @@
label: $t('course.navItems.nav_attendance'),
to: getNavItemRoute($course.id, 'attendance'),
isPaidFeature: false,
hideSortIcon: true
hideSortIcon: true,
show() {
if ($course.type !== COURSE_TYPE.LIVE_CLASS) return false;
return true;
}
},
{
label: $t('course.navItems.nav_submissions'),
@@ -166,7 +172,11 @@
hideSortIcon: true,
isPaidFeature: false,
show() {
return !isStudent;
if (isStudent) return false;
if ($course.type !== COURSE_TYPE.LIVE_CLASS) return false;
return true;
}
},
{
@@ -175,16 +185,11 @@
isPaidFeature: false,
hideSortIcon: true,
show() {
return isStudent ? $currentOrg.customization.course.grading : true;
}
},
{
label: $t('course.navItems.nav_people'),
to: getNavItemRoute($course.id, 'people'),
isPaidFeature: false,
hideSortIcon: true,
show() {
return !isStudent;
if ($course.type == COURSE_TYPE.LIVE_CLASS) {
return isStudent ? $currentOrg.customization.course.grading : true;
}
return false;
}
},
{
@@ -209,6 +214,15 @@
return !isStudent;
}
},
{
label: $t('course.navItems.nav_people'),
to: getNavItemRoute($course.id, 'people'),
isPaidFeature: false,
hideSortIcon: true,
show() {
return !isStudent;
}
},
{
label: $t('course.navItems.nav_settings'),
to: getNavItemRoute($course.id, 'settings'),
apps/dashboard/src/lib/components/Course/components/Settings/index.svelte
+33 -1
View File
@@ -1,6 +1,14 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { CodeSnippet, Grid, Row, Column, Toggle } from 'carbon-components-svelte';
import {
CodeSnippet,
Grid,
Row,
Column,
Toggle,
RadioButtonGroup,
RadioButton
} from 'carbon-components-svelte';
import { Restart } from 'carbon-icons-svelte';
import { PUBLIC_SERVER_URL } from '$env/static/public';
@@ -26,6 +34,7 @@
import IconButton from '$lib/components/IconButton/index.svelte';
import generateSlug from '$lib/utils/functions/generateSlug';
import { t } from '$lib/utils/functions/translations';
import { COURSE_TYPE } from '$lib/utils/types';
let isSaving = false;
let isLoading = false;
@@ -124,6 +133,7 @@
const {
course_title,
course_description,
type,
logo,
tabs,
grading,
@@ -134,6 +144,7 @@
await updateCourse($course.id, avatar, {
title: course_title,
description: course_description,
type: type,
logo: logo,
is_published,
metadata: {
@@ -148,6 +159,7 @@
$course.title = course_title;
$course.description = course_description;
$course.type = type;
$course.logo = logo;
$course.is_published = is_published;
$course.metadata = {
@@ -169,6 +181,7 @@
if (course && Object.keys(course).length && $settings.course_title !== course.title) {
$settings = {
course_title: course.title,
type: course.type,
course_description: course.description,
logo: course.logo || '',
tabs: course.metadata.lessonTabsOrder || $settings.tabs,
@@ -317,6 +330,25 @@
</Column>
</Row>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={8} md={8} lg={8}>
<SectionTitle>{$t('course.navItem.settings.type')}</SectionTitle>
<p>{$t('course.navItem.settings.course_type_desc')}</p>
</Column>
<Column sm={8} md={8} lg={8}>
<RadioButtonGroup hideLegend bind:selected={$settings.type}>
<RadioButton
labelText={$t('course.navItem.settings.live_class')}
value={COURSE_TYPE.LIVE_CLASS}
/>
<RadioButton
labelText={$t('course.navItem.settings.self_paced')}
value={COURSE_TYPE.SELF_PACED}
/>
</RadioButtonGroup>
</Column>
</Row>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={8} md={8} lg={8}>
<SectionTitle>{$t('course.navItem.settings.allow')}</SectionTitle>
apps/dashboard/src/lib/components/Course/components/Settings/store.js
+2
View File
@@ -1,3 +1,4 @@
import { COURSE_TYPE } from '$lib/utils/types';
import { writable } from 'svelte/store';
export const settings = writable({
@@ -5,6 +6,7 @@ export const settings = writable({
course_title: '',
course_description: '',
grading: false,
type: COURSE_TYPE.LIVE_CLASS,
allow_new_students: false,
tabs: [
{ id: 1, name: 'course.navItem.lessons.materials.tabs.note.title' },
apps/dashboard/src/lib/components/Course/store.ts
+2
View File
@@ -3,11 +3,13 @@ import type { Writable } from 'svelte/store';
import { lessons } from './components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import type { Course, GroupPerson } from '$lib/utils/types';
import { COURSE_TYPE } from '$lib/utils/types';
export const defaultCourse: Course = {
id: '',
title: '',
description: '',
type: COURSE_TYPE.LIVE_CLASS,
cost: 0,
currency: '',
status: 'ACTIVE',
apps/dashboard/src/lib/components/CourseContainer/index.svelte
+1
View File
@@ -29,6 +29,7 @@
const { data: _data } = await fetchCourse(courseId);
if (_data) {
$course.type = _data.type;
setCourse(_data);
}
apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
+45 -2
View File
@@ -14,6 +14,11 @@
import Share from 'carbon-icons-svelte/lib/Share.svelte';
import UserFollow from 'carbon-icons-svelte/lib/UserFollow.svelte';
import { t } from '$lib/utils/functions/translations';
import { COURSE_TYPE } from '$lib/utils/types';
import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
import GrowthIcon from 'carbon-icons-svelte/lib/Growth.svelte';
import CourseIcon from 'carbon-icons-svelte/lib/Course.svelte';
import UserProfileIcon from 'carbon-icons-svelte/lib/UserProfile.svelte';
export let bannerImage: string | undefined;
export let id = '';
@@ -28,6 +33,7 @@
export let isOnLandingPage = false;
export let isLMS = false;
export let progressRate = 45;
export let type: COURSE_TYPE;
let target: any;
@@ -58,6 +64,34 @@
? `/course/${slug}`
: `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
}
const COURSE_TAG: Record<
string,
{
style: string;
label: string;
icon: any;
iconStyle?: string;
}
> = {
[COURSE_TYPE.LIVE_CLASS]: {
style: '',
label: $t('course.navItem.settings.live_class'),
icon: RadioButtonChecked,
iconStyle: 'text-red-700'
},
[COURSE_TYPE.SELF_PACED]: {
style: '',
label: $t('course.navItem.settings.self_paced'),
icon: UserProfileIcon,
iconStyle: 'text-primary-700'
},
SPECIALIZATION: {
style: '',
label: $t('specialization.course_tag'),
icon: GrowthIcon
}
};
</script>
{#if !isLMS && !isOnLandingPage}
@@ -96,17 +130,26 @@
class="text-black border border-gray dark:border-neutral-600 rounded w-full max-w-[320px] relative hover:scale-95 transition-all ease-in-out"
>
<div class="p-4">
<div class=" mb-5">
<div class="relative mb-5">
<ImageLoader
src={bannerImage}
alt="Course Logo"
class="h-[200px] w-full rounded dark:border dark:border-neutral-600"
class="h-[200px] w-full rounded dark:border dark:border-neutral-600 relative"
>
<svelte:fragment slot="loading">
<SkeletonPlaceholder style="width: 100%; height: 200px;" />
</svelte:fragment>
<svelte:fragment slot="error">{$t('courses.course_card.error_message')}</svelte:fragment>
</ImageLoader>
{#if type}
{@const tag = COURSE_TAG[type]}
<span
class="absolute bottom-2 left-2 z-10 text-xs capitalize bg-primary-50 rounded-sm p-1 flex items-center gap-1 font-mono"
>
<svelte:component this={tag.icon} size={16} class={tag.iconStyle} />
{tag.label}
</span>
{/if}
</div>
<h3 class="text-xl dark:text-white title">{title}</h3>
apps/dashboard/src/lib/components/Courses/components/List/index.svelte
+2
View File
@@ -12,6 +12,7 @@
export let id = '';
export let title = '';
export let type = '';
export let description = '';
export let isPublished = false;
export let totalLessons = 0;
@@ -48,6 +49,7 @@
<p class="line-clamp-2">{description}</p>
</StructuredListCell>
{#if !$isMobile}
<StructuredListCell>{type}</StructuredListCell>
<StructuredListCell>{totalLessons}</StructuredListCell>
<StructuredListCell>{totalStudents}</StructuredListCell>
<StructuredListCell>
apps/dashboard/src/lib/components/Courses/components/NewCourseModal/index.svelte
+125 -38
View File
@@ -1,6 +1,10 @@
<script>
<script lang="ts">
import { page } from '$app/stores';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import Modal from '$lib/components/Modal/index.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import TextArea from '$lib/components/Form/TextArea.svelte';
import { courses, createCourseModal } from '$lib/components/Courses/store';
@@ -13,20 +17,41 @@
import { goto } from '$app/navigation';
import { capturePosthogEvent } from '$lib/utils/services/posthog';
import { t } from '$lib/utils/functions/translations';
import { COURSE_TYPE } from '$lib/utils/types';
import ComingSoon from '$lib/components/ComingSoon/index.svelte';
let isLoading = false;
let errors = {
title: '',
description: ''
};
let step = 0;
let userPrompt = '';
const options = [
{
title: 'Live Class',
subtitle:
'This course type is ideal for bootcamps where lessons are time based and you need attendance and grading',
type: COURSE_TYPE.LIVE_CLASS,
isDisabled: false
},
{
title: 'Self Paced',
subtitle:
'This course type is ideal for courses where students can take lessons on their own pace without a teacher',
type: COURSE_TYPE.SELF_PACED,
isDisabled: false
}
];
let type = options[0].type;
function onClose() {
goto($page.url.pathname);
createCourseModal.update(() => ({
open: false,
title: '',
description: '',
type: '',
emails: '',
tutors: '',
students: ''
@@ -53,15 +78,13 @@
const { id: group_id } = newGroup[0];
// Set userPrompt to the description
userPrompt = description;
// 2. Create course with group_id
const { data: newCourse } = await supabase
.from('course')
.insert({
title,
description,
type: type,
group_id
})
.select();
@@ -109,6 +132,8 @@
onClose();
isLoading = false;
}
$: open = new URLSearchParams($page.url.search).get('create') === 'true';
</script>
<svelte:head>
@@ -117,41 +142,103 @@
<Modal
{onClose}
bind:open={$createCourseModal.open}
width="w-4/5 md:w-2/5"
bind:open
width="w-4/5 md:w-2/5 md:min-w-[600px]"
modalHeading={$t('courses.new_course_modal.heading')}
>
<form on:submit|preventDefault={createCourse}>
<TextField
label={$t('courses.new_course_modal.course_name')}
bind:value={$createCourseModal.title}
placeholder={$t('courses.new_course_modal.course_name_placeholder')}
className="mb-4"
isRequired={true}
errorMessage={errors.title}
autoComplete={false}
/>
{#if step === 0}
<div>
<h2 class="text-xl font-medium my-5">
{$t('courses.new_course_modal.type_selector_title')}
</h2>
<TextArea
label={$t('courses.new_course_modal.short_description')}
bind:value={$createCourseModal.description}
rows={4}
placeholder={$t('courses.new_course_modal.short_description_placeholder')}
className="mb-4"
isRequired={true}
errorMessage={errors.description}
isAIEnabled={true}
initAIPrompt="Write a 30 word description for a course titled: {$createCourseModal.title}"
/>
<div class="flex flex-col md:flex-row gap-2 justify-between items-center my-8">
{#each options as option}
<button
class="w-11/12 md:w-[261px] md:h-[240px] p-5 rounded-md dark:bg-neutral-700 border-2 {option.type ===
type
? 'border-primary-400'
: `border-gray-200 dark:border-neutral-600 ${
!option.isDisabled && 'hover:scale-95'
}`} flex flex-col {option.isDisabled &&
'cursor-not-allowed opacity-60'} transition-all ease-in-out"
type="button"
on:click={!option.isDisabled ? () => (type = option.type) : undefined}
>
<div class="w-full flex flex-row-reverse h-[70%]">
{#if option.type === type}
<CheckmarkFilledIcon
size={16}
class="carbon-icon text-primary-600 dark:text-primary-200"
/>
{:else if !option.isDisabled}
<CheckmarkOutlineIcon size={16} class="carbon-icon" />
{/if}
</div>
<div class="mt-5 flex items-center">
<PrimaryButton
className="px-6 py-3"
label={$t('courses.new_course_modal.button')}
type="submit"
isDisabled={isLoading}
{isLoading}
/>
<div>
<p class="font-bold text-start flex items-center">
<span class="mr-2 text-sm">{option.title}</span>
{#if option.isDisabled}
<ComingSoon />
{/if}
</p>
<p class="text-xs font-light text-start">{option.subtitle}</p>
</div>
</button>
{/each}
</div>
<div class="mt-8 flex items-center flex-row-reverse">
<PrimaryButton
className="px-6 py-3"
label={$t('courses.new_course_modal.next')}
onClick={() => (step = 1)}
isDisabled={!type}
/>
</div>
</div>
</form>
{:else}
<form on:submit|preventDefault={createCourse}>
<div class="flex items-end space-x-2 mb-4">
<TextField
label={$t('courses.new_course_modal.course_name')}
bind:value={$createCourseModal.title}
placeholder={$t('courses.new_course_modal.course_name_placeholder')}
className="w-full "
isRequired={true}
errorMessage={errors.title}
autoComplete={false}
/>
</div>
<TextArea
label={$t('courses.new_course_modal.short_description')}
bind:value={$createCourseModal.description}
rows={4}
placeholder={$t('courses.new_course_modal.short_description_placeholder')}
className="mb-4"
isRequired={true}
errorMessage={errors.description}
isAIEnabled={true}
initAIPrompt="Write a 30 word description for a course titled: {$createCourseModal.title}"
/>
<div class="mt-5 flex items-center justify-between">
<PrimaryButton
className="px-6 py-3"
label={$t('courses.new_course_modal.back')}
variant={VARIANTS.OUTLINED}
onClick={() => (step = 0)}
/>
<PrimaryButton
className="px-6 py-3"
label={$t('courses.new_course_modal.button')}
type="submit"
isDisabled={isLoading}
{isLoading}
/>
</div>
</form>
{/if}
</Modal>
apps/dashboard/src/lib/components/Courses/index.svelte
+5
View File
@@ -48,6 +48,9 @@
<StructuredListCell head>
{$t('courses.course_card.list_view.description')}
</StructuredListCell>
<StructuredListCell head>
{$t('courses.course_card.list_view.type')}
</StructuredListCell>
<StructuredListCell head>
{$t('courses.course_card.list_view.lessons')}
</StructuredListCell>
@@ -65,6 +68,7 @@
<List
id={courseData.id}
title={courseData.title}
type={$t(`course.navItem.settings.${courseData.type.toLowerCase()}`)}
description={courseData.description}
isPublished={courseData.is_published}
totalLessons={courseData.total_lessons}
@@ -84,6 +88,7 @@
description={courseData.description}
isPublished={courseData.is_published}
cost={courseData.cost}
type={courseData.type}
currency={courseData.currency}
totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students}
apps/dashboard/src/lib/components/Courses/store.ts
+7 -2
View File
@@ -2,9 +2,14 @@ import { writable, derived } from 'svelte/store';
import type { Course } from '$lib/utils/types';
export const courses = writable<Course[]>([]);
export const view = writable('grid');
export const coursesInProgress = derived(courses, ($courses) =>
$courses.length > 0 ? $courses.slice(0, 3) : []
$courses.length > 0
? $courses.filter((course) => {
return course.total_lessons !== course.progress_rate;
})
: []
);
export const coursesComplete = derived(courses, ($courses) =>
$courses.length > 0
@@ -22,8 +27,8 @@ export const courseMetaDeta = writable<{
});
export const createCourseModal = writable({
open: false,
title: '',
type: '',
description: '',
emails: '',
tutors: '',
apps/dashboard/src/lib/components/LMS/components/Learning.svelte
+5 -3
View File
@@ -3,13 +3,15 @@
import { goto } from '$app/navigation';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import { coursesInProgress } from '$lib/components/Courses/store';
import { courses } from '$lib/components/Courses/store';
import { t } from '$lib/utils/functions/translations';
const gotoCourse = (id: string | undefined) => {
if (!id) return;
goto(`/courses/${id}/lessons?next=true`);
};
$: last3Courses = $courses.length > 0 ? $courses.slice(0, 3) : [];
</script>
<section class="h-full">
@@ -19,9 +21,9 @@
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full lg:h-[40vh] p-3"
>
{#if $coursesInProgress.length > 0}
{#if last3Courses.length > 0}
<div class="w-full h-full flex flex-col justify-start overflow-y-auto">
{#each $coursesInProgress as course}
{#each last3Courses as course}
<div class="p-5">
<span class="flex flex-col lg:flex-row gap-3 items-start pb-5">
<img
apps/dashboard/src/lib/components/Org/LandingPage/index.svelte
+1 -1
View File
@@ -309,8 +309,8 @@
slug={courseData.slug}
bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
title={courseData.title}
type={courseData.type}
description={courseData.description}
role_id={courseData.role_id}
isPublished={courseData.is_published}
cost={courseData.cost}
currency={courseData.currency}
apps/dashboard/src/lib/components/Tabs/index.svelte
+2 -3
View File
@@ -2,13 +2,12 @@
import TextChip from '$lib/components/Chip/Text.svelte';
import { t } from '$lib/utils/functions/translations';
interface Tab {
export let tabs: {
icon?: any;
label: string;
value: string;
badgeValue?: number;
}
export let tabs: Tab[] = [];
}[] = [];
export let currentTab: string | number;
export let onChange = (v: string | number) => () => {};
</script>
apps/dashboard/src/lib/utils/services/courses/index.ts
+7 -1
View File
@@ -30,6 +30,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
`
id,
title,
type,
description,
overview,
logo,
@@ -61,6 +62,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
const { data, error } = response;
console.log(`error`, error);
console.log(`data`, data);
if (!data || error) {
console.log(`data`, data);
console.log(`fetchCourse => error`, error);
@@ -410,7 +412,11 @@ export async function submitExercise(
}
const res = await supabase.from('question_answer').insert(questionAnswers).select();
console.log(`res`, res);
console.log(`res`, res, 'submission', submission);
return {
submission,
res
};
}
export async function deleteExercise(questions: Array<{ id: string }>, exerciseId: Exercise['id']) {
apps/dashboard/src/lib/utils/translations/de.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Unveröffentlicht",
"delete": "Kurs löschen",
"delete_text": "Löschen Sie diesen Kurs. Diese Aktion kann nicht rückgängig gemacht werden",
"save": "Änderungen speichern"
"save": "Änderungen speichern",
"type": "Kurstyp",
"course_type_desc": "Aktualisieren Sie den Kurstyp für ein persönlicheres Erlebnis",
"live_class": "Live-Klasse",
"self_paced": "Eigenständig"
},
"landing_page": {
"start_course": "Kurs starten",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Ihr Kursname",
"short_description": "kurze Beschreibung",
"short_description_placeholder": "Eine kleine Beschreibung zu diesem Kurs",
"button": "Beenden"
"button": "Beenden",
"type": "Kurstyp",
"type_selector_title": "Welche Art von Kurs suchen Sie?",
"back": "Zurück",
"next": "Nächste"
},
"course_card": {
"empty_title": "Keine Kurse erstellt",
@@ -779,7 +787,8 @@
"description": "Beschreibung",
"lessons": "Unterricht",
"students": "Studenten",
"published": "Veröffentlicht"
"published": "Veröffentlicht",
"type": "Typ"
},
"context_menu": {
"clone": "Klon",
@@ -1212,5 +1221,12 @@
"resend_in": "Bestätigung erneut senden",
"seconds": "Sekunden",
"snackbar_error": "Fehler beim Senden des Codes"
},
"generic": {
"locked": "Gesperrt",
"unlocked": "Entsperrt"
},
"specialization": {
"course_tag": "Spezialisierung"
}
}
apps/dashboard/src/lib/utils/translations/en.json
+23 -5
View File
@@ -227,7 +227,7 @@
"get_started": "Get Started",
"personal_profile": {
"title": "Upload a profile picture and update username",
"desc": "Personalize and a human touch making interactions more personal and memorable",
"desc": "Personalize and add a human touch making interactions more personal and memorable",
"button_label": "Update Profile"
},
"organization_profile": {
@@ -433,16 +433,21 @@
"description": "Description",
"lessons": "Lessons",
"students": "Students",
"published": "Published"
"published": "Published",
"type": "Type"
}
},
"new_course_modal": {
"heading": "Create a Course",
"course_name": "Course name",
"type": "Course type",
"course_name_placeholder": "Your course name",
"short_description": "Short Description",
"short_description_placeholder": "A little description about this course",
"button": "Finish"
"type_selector_title": "What type of course are you looking at?",
"button": "Finish",
"back": "Back",
"next": "Next"
}
},
@@ -653,7 +658,7 @@
"yes": "Yes, delete"
},
"edit_mode": {
"delete_modal": "Delete Modal",
"delete_modal": "Delete Exercise",
"sure": "Are you sure you want to delete this exercise?",
"no": "No, cancel",
"yes": "Yes, delete",
@@ -978,13 +983,17 @@
"available": "Make the Lesson available for Download in pdf for registered students",
"course_download": "Course Downlaod",
"course_avail": "Make the Course available for Download for registered students",
"download": "Downlaod",
"download": "Download",
"allow": "Allow New Students",
"access": "Allow new students to access this course",
"publish": "Publish Course",
"determines": "This determines if your course displays on your landing page",
"published": "Published",
"unpublished": "Unpublished",
"type": "Course type",
"course_type_desc": "Update the course type for a more personalized experience",
"live_class": "Live class",
"self_paced": "Self paced",
"delete": "Delete Course",
"delete_text": "Delete this course,this action cannot be undone",
"save": "Save Changes"
@@ -1247,8 +1256,17 @@
}
},
"specialization": {
"course_tag": "Specialization"
},
"content": {
"heading": "Internationalization in SvelteKit",
"toggle_label": "Select Preferred Language"
},
"generic": {
"locked": "Locked",
"unlocked": "Unlocked"
}
}
apps/dashboard/src/lib/utils/translations/es.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Inédito",
"delete": "Eliminar curso",
"delete_text": "Eliminar este curso, esta acción no se puede deshacer",
"save": "Guardar cambios"
"save": "Guardar cambios",
"type": "Tipo de curso",
"course_type_desc": "Actualiza el tipo de curso para una experiencia más personalizada",
"live_class": "clase en vivo",
"self_paced": "Ritmo propio"
},
"landing_page": {
"start_course": "Iniciar curso",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Nombre de tu curso",
"short_description": "Breve descripción",
"short_description_placeholder": "Una pequeña descripción sobre este curso.",
"button": "Finalizar"
"button": "Finalizar",
"type": "Tipo de curso",
"type_selector_title": "¿Qué tipo de curso estás mirando?",
"back": "Atrás",
"next": "Próximo"
},
"course_card": {
"empty_title": "No hay cursos creados",
@@ -779,7 +787,8 @@
"description": "Descripción",
"lessons": "Lecciones",
"students": "Estudiantes",
"published": "Publicado"
"published": "Publicado",
"type": "Tipo"
},
"context_menu": {
"clone": "Clon",
@@ -1212,5 +1221,12 @@
"resend_in": "Reenviar verificación en",
"seconds": "segundos",
"snackbar_error": "error al enviar código"
},
"generic": {
"locked": "bloqueado",
"unlocked": "desbloqueado"
},
"specialization": {
"course_tag": "Especialización"
}
}
apps/dashboard/src/lib/utils/translations/fr.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Inédit",
"delete": "Supprimer un cours",
"delete_text": "Supprimer ce cours, cette action est irréversible",
"save": "Sauvegarder les modifications"
"save": "Sauvegarder les modifications",
"type": "Type de cours",
"course_type_desc": "Mettez à jour le type de cours pour une expérience plus personnalisée",
"live_class": "Cours en direct",
"self_paced": "À votre rythme"
},
"landing_page": {
"start_course": "Commencer le cours",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Le nom de votre cours",
"short_description": "brève description",
"short_description_placeholder": "Une petite description de ce cours",
"button": "Finition"
"button": "Finition",
"type": "Type de cours",
"type_selector_title": "Quel type de cours envisagez-vous ?",
"back": "Dos",
"next": "Suivant"
},
"course_card": {
"empty_title": "Aucun cours créé",
@@ -779,7 +787,8 @@
"description": "Description",
"lessons": "Cours",
"students": "Étudiants",
"published": "Publié"
"published": "Publié",
"type": "Taper"
},
"context_menu": {
"clone": "Cloner",
@@ -1212,5 +1221,12 @@
"resend_in": "Renvoyer la vérification dans",
"seconds": "secondes",
"snackbar_error": "erreur lors de l'envoi du code"
},
"generic": {
"locked": "Fermé à clé",
"unlocked": "Débloqué"
},
"specialization": {
"course_tag": "Spécialisation"
}
}
apps/dashboard/src/lib/utils/translations/hi.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "अप्रकाशित",
"delete": "पाठ्यक्रम हटाएँ",
"delete_text": "इस कोर्स को हटा दें, इस कार्रवाई को पूर्ववत नहीं किया जा सकता",
"save": "परिवर्तनों को सुरक्षित करें"
"save": "परिवर्तनों को सुरक्षित करें",
"type": "कोर्स का प्रकार",
"course_type_desc": "अधिक वैयक्तिकृत अनुभव के लिए पाठ्यक्रम प्रकार को अपडेट करें",
"live_class": "लाइव क्लास",
"self_paced": "स्वयं गति"
},
"landing_page": {
"start_course": "कोर्स प्रारंभ करें",
@@ -763,7 +767,11 @@
"course_name_placeholder": "आपके पाठ्यक्रम का नाम",
"short_description": "संक्षिप्त वर्णन",
"short_description_placeholder": "इस कोर्स के बारे में थोड़ा विवरण",
"button": "खत्म करना"
"button": "खत्म करना",
"type": "कोर्स का प्रकार",
"type_selector_title": "आप किस प्रकार का कोर्स देख रहे हैं?",
"back": "पीछे",
"next": "अगला"
},
"course_card": {
"empty_title": "कोई पाठ्यक्रम नहीं बनाया गया",
@@ -779,7 +787,8 @@
"description": "विवरण",
"lessons": "पाठ",
"students": "छात्र",
"published": "प्रकाशित"
"published": "प्रकाशित",
"type": "प्रकार"
},
"context_menu": {
"clone": "क्लोन",
@@ -1212,5 +1221,12 @@
"resend_in": "सत्यापन पुनः भेजें",
"seconds": "सेकंड",
"snackbar_error": "कोड भेजते समय त्रुटि"
},
"generic": {
"locked": "बंद",
"unlocked": "अनलॉक किया"
},
"specialization": {
"course_tag": "विशेषज्ञता"
}
}
apps/dashboard/src/lib/utils/translations/pt.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Não publicado",
"delete": "Excluir curso",
"delete_text": "Exclua este curso, esta ação não pode ser desfeita",
"save": "Salvar alterações"
"save": "Salvar alterações",
"type": "Tipo de curso",
"course_type_desc": "Atualize o tipo de curso para uma experiência mais personalizada",
"live_class": "Aula ao vivo",
"self_paced": "Individualizado"
},
"landing_page": {
"start_course": "Iniciar curso",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Nome do seu curso",
"short_description": "Pequena descrição",
"short_description_placeholder": "Uma pequena descrição sobre este curso",
"button": "Terminar"
"button": "Terminar",
"type": "Tipo de curso",
"type_selector_title": "Que tipo de curso você está procurando?",
"back": "Voltar",
"next": "Próximo"
},
"course_card": {
"empty_title": "Nenhum curso criado",
@@ -779,7 +787,8 @@
"description": "Descrição",
"lessons": "Lições",
"students": "Alunos",
"published": "Publicados"
"published": "Publicados",
"type": "Tipo"
},
"context_menu": {
"clone": "Clone",
@@ -1212,5 +1221,12 @@
"resend_in": "Reenviar verificação em",
"seconds": "segundos",
"snackbar_error": "erro ao enviar código"
},
"generic": {
"locked": "Bloqueado",
"unlocked": "Desbloqueado"
},
"specialization": {
"course_tag": "Especialização"
}
}
apps/dashboard/src/lib/utils/translations/ru.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Неопубликовано",
"delete": "Удалить курс",
"delete_text": "Удалите этот курс, это действие нельзя отменить.",
"save": "Сохранить изменения"
"save": "Сохранить изменения",
"type": "Тип курса",
"course_type_desc": "Обновите тип курса для более персонализированного опыта.",
"live_class": "Живой урок",
"self_paced": "Самостоятельный темп"
},
"landing_page": {
"start_course": "Начать курс",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Название вашего курса",
"short_description": "Краткое описание",
"short_description_placeholder": "Небольшое описание этого курса",
"button": "Заканчивать"
"button": "Заканчивать",
"type": "Тип курса",
"type_selector_title": "Какой тип курса вы рассматриваете?",
"back": "Назад",
"next": "Следующий"
},
"course_card": {
"empty_title": "Курсы не созданы",
@@ -779,7 +787,8 @@
"description": "Описание",
"lessons": "Уроки",
"students": "Студенты",
"published": "Опубликовано"
"published": "Опубликовано",
"type": "Тип"
},
"context_menu": {
"clone": "Клонировать",
@@ -1212,5 +1221,12 @@
"resend_in": "Повторно отправить подтверждение в",
"seconds": "секунды",
"snackbar_error": "ошибка при отправке кода"
},
"generic": {
"locked": "Заблокировано",
"unlocked": "Разблокировано"
},
"specialization": {
"course_tag": "Специализация"
}
}
apps/dashboard/src/lib/utils/translations/vi.json
+19 -3
View File
@@ -263,7 +263,11 @@
"unpublished": "Chưa được xuất bản",
"delete": "Xóa khóa học",
"delete_text": "Xóa khóa học này, hành động này không thể hoàn tác",
"save": "Lưu thay đổi"
"save": "Lưu thay đổi",
"type": "Loại khóa học",
"course_type_desc": "Cập nhật loại khóa học để có trải nghiệm cá nhân hóa hơn",
"live_class": "Lớp học trực tiếp",
"self_paced": "Tự nhịp độ"
},
"landing_page": {
"start_course": "Bắt đầu khóa học",
@@ -763,7 +767,11 @@
"course_name_placeholder": "Tên khóa học của bạn",
"short_description": "Mô tả ngắn",
"short_description_placeholder": "Một chút mô tả về khóa học này",
"button": "Hoàn thành"
"button": "Hoàn thành",
"type": "Loại khóa học",
"type_selector_title": "Bạn đang xem loại khóa học nào?",
"back": "Mặt sau",
"next": "Kế tiếp"
},
"course_card": {
"empty_title": "Không có khóa học nào được tạo",
@@ -779,7 +787,8 @@
"description": "Sự miêu tả",
"lessons": "Những bài học",
"students": "Sinh viên",
"published": "Được phát hành"
"published": "Được phát hành",
"type": "Kiểu"
},
"context_menu": {
"clone": "Dòng vô tính",
@@ -1212,5 +1221,12 @@
"resend_in": "Gửi lại xác minh trong",
"seconds": "giây",
"snackbar_error": "lỗi khi gửi mã"
},
"generic": {
"locked": "Đã khóa",
"unlocked": "Đã mở khóa"
},
"specialization": {
"course_tag": "Chuyên môn"
}
}
apps/dashboard/src/lib/utils/types/index.ts
+5
View File
@@ -181,9 +181,14 @@ export interface Waitinglist {
created_at?: string;
}
export enum COURSE_TYPE {
SELF_PACED = 'SELF_PACED',
LIVE_CLASS = 'LIVE_CLASS'
}
export interface Course {
title?: any; // type unknown;
description: string; // type unknown;
type: COURSE_TYPE;
overview?: any; // type unknown;
id?: string /* primary key */;
created_at: string;
apps/dashboard/src/routes/courses/[id]/+page.svelte
+2 -2
View File
@@ -225,10 +225,10 @@
}
function getPageRoles(org: CurrentOrg) {
const roles = [1, 2];
const roles: number[] = [1, 2];
if (org.customization.course.newsfeed) {
roles.push(3);
roles.concat([3]);
}
return roles;
apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+74 -71
View File
@@ -14,7 +14,7 @@
} from '$lib/components/Course/components/Lesson/store/lessons';
import PageBody from '$lib/components/PageBody/index.svelte';
import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Navigation/store';
import { Video, Calendar } from 'carbon-icons-svelte';
@@ -28,6 +28,7 @@
import type { Course, Lesson } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations.js';
import { goto } from '$app/navigation';
import { COURSE_TYPE } from '$lib/utils/types';
export let data;
@@ -126,7 +127,7 @@
</script>
{#if $handleAddLessonWidget}
<AddLessonModal {isStudent} />
<NewLessonModal {isStudent} />
{/if}
<DeleteLessonConfirmation
@@ -217,84 +218,86 @@
{/if}
<!-- Lesson Educator -->
<div
class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
>
<div class="lg:mb-0">
{#if lessonEditing === lesson.id}
<Select
bind:value={lesson.profile}
options={$group.tutors}
labelKey="fullname"
className="sm:my-1 w-[100%]"
/>
{:else if !lesson.profile}
<p class="dark:text-white ml-2 text-sm mb-3">
{$t('course.navItem.lessons.no_tutor')}
</p>
{:else}
<a href="." class="mb-2 flex items-center hover:underline">
<Avatar
className="w-6 h-6"
src={lesson.profile.avatar_url}
name="Avatar placeholder"
{#if $course.type === COURSE_TYPE.LIVE_CLASS}
<div
class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
>
<div class="lg:mb-0">
{#if lessonEditing === lesson.id}
<Select
bind:value={lesson.profile}
options={$group.tutors}
labelKey="fullname"
className="sm:my-1 w-[100%]"
/>
<p class="ml-2 text-sm dark:text-white">
{lesson.profile.fullname}
{:else if !lesson.profile}
<p class="dark:text-white ml-2 text-sm mb-3">
{$t('course.navItem.lessons.no_tutor')}
</p>
</a>
{/if}
</div>
<!-- Lesson Date -->
<div class="flex items-center lg:mb-0">
{#if lessonEditing === lesson.id}
<DateField
value={formatDate(lesson.lesson_at)}
className="p-2 my-2 rounded-md sm:w-[179px] dark:bg-neutral-800 dark:text-white"
onChange={(e) => (lesson.lesson_at = e.target.value)}
/>
{:else}
<div class="mb-2 flex">
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="ml-2 text-sm dark:text-white">
{new Date(lesson.lesson_at || '').toDateString()}
</p>
</div>
{/if}
</div>
<!-- Lesson Call url -->
<div class="mb-3 flex items-center lg:mb-0">
{#if lessonEditing === lesson.id}
<TextField
bind:value={lesson.call_url}
autoFocus={true}
className="w-[179px]"
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
{:else}
<div class="flex">
<Video size={20} class="carbon-icon ml-0.5 text-gray-400 dark:text-white" />
<a
class="text-primary-600 ml-2 text-sm"
href={lesson.call_url || '#'}
target="_blank"
>
{lesson.call_url
? $t('course.navItem.lessons.join_lesson')
: $t('course.navItem.lessons.no_link')}
{:else}
<a href="." class="mb-2 flex items-center hover:underline">
<Avatar
className="w-6 h-6"
src={lesson.profile.avatar_url}
name="Avatar placeholder"
/>
<p class="ml-2 text-sm dark:text-white">
{lesson.profile.fullname}
</p>
</a>
</div>
{/if}
{/if}
</div>
<!-- Lesson Date -->
<div class="flex items-center lg:mb-0">
{#if lessonEditing === lesson.id}
<DateField
value={formatDate(lesson.lesson_at)}
className="p-2 my-2 rounded-md sm:w-[179px] dark:bg-neutral-800 dark:text-white"
onChange={(e) => (lesson.lesson_at = e.target.value)}
/>
{:else}
<div class="mb-2 flex">
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="ml-2 text-sm dark:text-white">
{new Date(lesson.lesson_at || '').toDateString()}
</p>
</div>
{/if}
</div>
<!-- Lesson Call url -->
<div class="mb-3 flex items-center lg:mb-0">
{#if lessonEditing === lesson.id}
<TextField
bind:value={lesson.call_url}
autoFocus={true}
className="w-[179px]"
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
{:else}
<div class="flex">
<Video size={20} class="carbon-icon ml-0.5 text-gray-400 dark:text-white" />
<a
class="text-primary-600 ml-2 text-sm"
href={lesson.call_url || '#'}
target="_blank"
>
{lesson.call_url
? $t('course.navItem.lessons.join_lesson')
: $t('course.navItem.lessons.no_link')}
</a>
</div>
{/if}
</div>
</div>
</div>
{/if}
</div>
<!-- 3 dot edit -->
<div class="flex flex-row">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<OverflowMenu size="xl" class="absolute right-0 top-0">
<OverflowMenu size="xl" class={`absolute right-0 top-0`}>
<OverflowMenuItem
disabled={isStudent}
text={lesson.is_unlocked
apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
+1
View File
@@ -83,6 +83,7 @@
}
});
}
// TODO WRITE A REDIRECT FUNCTION FOR THIS THIS PAGE
function getPageRoles(org: CurrentOrg) {
const roles = [1, 2];
apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
+1 -1
View File
@@ -245,7 +245,7 @@
const questionAnswer = questionAnswers.find(
(answer: { question_id: string }) => answer.question_id == questionId
);
console.log('this is the question answer in the admin side', questionAnswer);
const point = questionAnswerByPoint[questionId];
totalPoints += parseInt(point, 10);
apps/dashboard/src/routes/lms/mylearning/+page.svelte
+20 -14
View File
@@ -6,24 +6,18 @@
import { fetchCourses } from '$lib/components/Courses/api';
import { profile } from '$lib/utils/store/user';
import { currentOrg } from '$lib/utils/store/org';
import { courses, courseMetaDeta, coursesComplete } from '$lib/components/Courses/store';
import {
courses,
courseMetaDeta,
coursesComplete,
coursesInProgress
} from '$lib/components/Courses/store';
import { browser } from '$app/environment';
import { t } from '$lib/utils/functions/translations';
const tabs = [
{
label: $t('my_learning.progress'),
value: 1
},
{
label: $t('my_learning.complete'),
value: 2
}
];
let currentTab = tabs[0].value;
let hasFetched = false;
function onChange(tab: 0) {
function onChange(tab) {
return () => (currentTab = tab);
}
@@ -51,6 +45,18 @@
$: if (browser && $profile.id && $currentOrg.id) {
getCourses($profile.id, $currentOrg.id);
}
$: tabs = [
{
label: `${$t('my_learning.progress')} (${$coursesInProgress.length})`,
value: '1'
},
{
label: `${$t('my_learning.complete')} (${$coursesComplete.length})`,
value: '2'
}
];
$: currentTab = tabs[0].value;
</script>
<section class="max-w-6xl mx-auto">
@@ -63,7 +69,7 @@
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<Courses
courses={$courses}
courses={$coursesInProgress}
emptyTitle={$t('my_learning.not_in_progress')}
emptyDescription={$t('my_learning.any_progress')}
/>
apps/dashboard/src/routes/org/[slug]/+layout.svelte
+2 -1
View File
@@ -11,7 +11,8 @@
export let data;
$: if ($currentOrg.id && data.orgName === '*') {
goto(`/org/${$currentOrg.siteName}`);
const newUrl = $page.url.pathname.replace('*', $currentOrg.siteName);
goto(newUrl + $page.url.search);
}
</script>
apps/dashboard/src/routes/org/[slug]/courses/+page.svelte
+9 -11
View File
@@ -1,13 +1,12 @@
<script lang="ts">
import { Search, Dropdown } from 'carbon-components-svelte';
import { page } from '$app/stores';
import { profile } from '$lib/utils/store/user';
import { fetchCourses } from '$lib/components/Courses/api';
import Courses from '$lib/components/Courses/index.svelte';
import NewCourseModal from '$lib/components/Courses/components/NewCourseModal/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
import { currentOrg } from '$lib/utils/store/org';
import { courses, courseMetaDeta } from '$lib/components/Courses/store';
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
import { Add } from 'carbon-icons-svelte';
import { isMobile } from '$lib/utils/store/useMobile';
import { isOrgAdmin } from '$lib/utils/store/org';
@@ -19,6 +18,7 @@
import Grid from 'carbon-icons-svelte/lib/Grid.svelte';
import List from 'carbon-icons-svelte/lib/List.svelte';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
export let data;
@@ -28,12 +28,6 @@
let filteredCourses: Course[];
let hasFetched = false;
const urlParams = new URLSearchParams($page.url.search);
if (urlParams.get('create') === 'true') {
$createCourseModal.open = true;
}
async function getCourses(userId: string | undefined, orgId: string) {
if (cantFetch && typeof cantFetch === 'boolean' && orgId && !hasFetched) {
// only show is loading when fetching for the first time
@@ -86,6 +80,10 @@
localStorage.setItem('courseView', preference);
};
const openNewCourseModal = () => {
goto($currentOrgPath + '/courses?create=true');
};
onMount(() => {
const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;
@@ -107,7 +105,7 @@
<div class="flex items-center justify-between mb-5">
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">{$t('courses.heading')}</h1>
{#if $isMobile}
<PrimaryButton isDisabled={!$isOrgAdmin} onClick={() => ($createCourseModal.open = true)}>
<PrimaryButton isDisabled={!$isOrgAdmin} onClick={openNewCourseModal}>
<Add size={24} />
</PrimaryButton>
{:else}
@@ -115,7 +113,7 @@
label={$t('courses.heading_button')}
variant={VARIANTS.CONTAINED_DARK}
isDisabled={!$isOrgAdmin}
onClick={() => ($createCourseModal.open = true)}
onClick={openNewCourseModal}
/>
{/if}
</div>
supabase/migrations/20240516153823_course_type.sql
+37
View File
@@ -0,0 +1,37 @@
create type "public"."COURSE_TYPE" as enum ('SELF_PACED', 'LIVE_CLASS');
alter table "public"."course" add column "type" "COURSE_TYPE" default 'LIVE_CLASS'::"COURSE_TYPE";
drop function if exists "public"."get_courses"(org_id_arg uuid, profile_id_arg uuid);
create
or replace function public.get_courses (org_id_arg uuid, profile_id_arg uuid) returns table (
id uuid,
org_id uuid,
title character varying,
slug character varying,
description character varying,
logo text,
banner_image text,
cost bigint,
currency character varying,
is_published boolean,
profile_id uuid,
role_id bigint,
total_lessons bigint,
total_students bigint,
progress_rate bigint,
type "COURSE_TYPE"
) language plpgsql as $function$
BEGIN
Return query
select course.id, organization.id AS org_id, course.title, course.slug, course.description, course.logo, course.banner_image, course.cost, course.currency, course.is_published, groupmember.profile_id, groupmember.role_id, (select COUNT(*) from lesson as l where l.course_id = course.id) AS total_lessons, (select COUNT(*) from groupmember as gm where gm.group_id = course.group_id AND gm.role_id = 3) as total_students, (select COUNT(*) from lesson_completion as lc join lesson as l on l.id = lc.lesson_id where l.course_id = course.id and lc.is_complete = true and lc.profile_id = profile_id_arg) AS progress_rate, course.type as type
from course
join "group" on "group".id = course.group_id
join groupmember on groupmember.group_id = course.group_id
join organization on organization.id = "group".organization_id
where course.status = 'ACTIVE' AND organization.id = org_id_arg
-- GROUP BY course.id, groupmember.profile_id
ORDER BY course.created_at DESC;
END;
$function$;