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

chore: debugging improvements 🚀 (#77)

Browse Source 
* improve layout.server

* fix date behavior

* change direction of padlock icon on lesson

* feat: implement delete confirmation on lesson

* fix: course landing page improvements
This commit is contained in:
Rotimi Best
2023-12-04 19:39:39 +03:00
committed by GitHub
parent 1b69c6106f
commit f4141b08b3
16 changed files with 179 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/ClEditor/index.svelte
-46
View File
@@ -1,46 +0,0 @@
<script>
import Editor from 'cl-editor/src/Editor.svelte';
export let html = '';
export let editor;
let colors = [
'#000000',
'#e60000',
'#ff9900',
'#ffff00',
'#008a00',
'#0066cc',
'#9933ff',
'#ffffff',
'#facccc',
'#ffebcc',
'#ffffcc',
'#cce8cc',
'#cce0f5',
'#ebd6ff',
'#bbbbbb',
'#f06666',
'#ffc266',
'#ffff66',
'#66b966',
'#66a3e0',
'#c285ff',
'#888888',
'#a10000',
'#b26b00',
'#b2b200',
'#006100',
'#0047b2',
'#6b24b2',
'#444444',
'#5c0000',
'#663d00',
'#666600',
'#003700',
'#002966',
'#3d1466'
];
</script>
<Editor bind:this={editor} {html} {colors} on:change={(evt) => (html = evt.detail)} />
apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte
+43
View File
@@ -0,0 +1,43 @@
<script lang="ts">
import Modal from '$lib/components/Modal/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
export let lessonTitle: string;
export let openDeleteModal = false;
export let deleteLesson = () => {};
async function handleDelete() {
deleteLesson();
openDeleteModal = false;
}
</script>
<Modal
onClose={() => (openDeleteModal = false)}
bind:open={openDeleteModal}
width="w-96"
modalHeading="Delete"
>
<div>
<h1 class="dark:text-white text-lg">
Are you sure you want to delete: <strong>{lessonTitle}</strong>?
</h1>
<div class="mt-5 flex items-center justify-between">
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.OUTLINED}
label="No"
onClick={() => (openDeleteModal = false)}
/>
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.OUTLINED}
label="Yes"
onClick={handleDelete}
/>
</div>
</div>
</Modal>
apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts
+11 -10
View File
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
import type { Writable, Updater } from 'svelte/store';
import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
import { snackbar } from '$lib/components/Snackbar/store';
export const uploadCourseVideoStore = writable({
isModalOpen: false
@@ -43,20 +44,20 @@ export function handleAddLesson() {
}) as Updater<any>);
}
export function handleDelete(lessonId: Lesson['id']) {
return async () => {
// Need to implement soft delete
if (lessonId) {
const { error } = await deleteLesson(lessonId);
export async function handleDelete(lessonId: Lesson['id'] | undefined) {
// Need to implement soft delete
if (lessonId) {
const { error } = await deleteLesson(lessonId);
if (error) {
return alert('Please delete all exercises first');
}
if (error) {
snackbar.error(error.message);
return console.error('Error deleting course', error);
}
lessons.update((_lessons) => _lessons.filter((lesson) => lesson.id !== lessonId));
console.log(`lessonId`, lessonId);
};
}
console.log(`lessonId`, lessonId);
}
export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) {
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/InstructorForm.svelte
+18 -13
View File
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import cloneDeep from 'lodash/cloneDeep';
import set from 'lodash/set';
import get from 'lodash/get';
@@ -7,32 +7,37 @@
import TextField from '$lib/components/Form/TextField.svelte';
import UploadImage from '$lib/components/UploadImage/index.svelte';
import { uploadAvatar } from '$lib/utils/services/courses';
import type { Course } from '$lib/utils/types';
export let course = {};
let name;
let role;
let imgUrl;
let description;
let courseNo;
let avatar;
export let course: Course;
let name: string | undefined;
let role: string | undefined;
let imgUrl: string | undefined;
let description: string | undefined;
let courseNo: string | undefined;
let avatar: string | undefined;
let hasBeenSet = false;
function setter(value, setterKey) {
function setter(value: any, setterKey: string) {
if (!value) return;
const _course = cloneDeep(course);
set(_course, setterKey, value);
course = _course;
}
async function onAvatarChange(_avatar) {
if (!_avatar) return;
async function onAvatarChange(_avatar: string | undefined) {
if (!_avatar || !course.id) return;
const logo = await uploadAvatar(course.id, _avatar);
if (!logo) return;
imgUrl = logo;
}
function setDefaults(course) {
function setDefaults(course: Course) {
if (isEmpty(course) || hasBeenSet) return;
hasBeenSet = true;
@@ -78,7 +83,7 @@
<TextArea
label="About instructor"
placeholder="A short background about the instructor"
rows="6"
rows={6}
className="mt-5"
labelClassName="font-bold"
bind:value={description}
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/RequirementForm.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import TextEditor from '$lib/components/TextEditor/index.svelte';
export let value: string;
export let value: string | undefined;
</script>
<div class="h-2/5">
apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+6 -4
View File
@@ -27,6 +27,7 @@
export let course: Course;
export let courseId: string;
export let syncCourseStore: (course: Course) => void;
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
let loading = false;
@@ -123,9 +124,9 @@
polls: undefined,
slug: course.slug
});
loading = false;
return `${window.location.origin}/course/${course.slug}`;
loading = false;
syncCourseStore(course);
}
/**
* 1. Use all you have for editing now
@@ -149,10 +150,11 @@
size={$isMobile ? 'large' : 'small'}
color="text-black"
toolTipProps={$isMobile
? {}
? undefined
: {
title: 'Toggle editor',
direction: 'right'
direction: 'right',
hotkeys: []
}}
>
{#if show}
apps/dashboard/src/lib/components/CourseLandingPage/index.svelte
+2 -2
View File
@@ -86,7 +86,7 @@
$: video = get(courseData, 'metadata.videoUrl');
$: bannerImage = get(courseData, 'logo');
$: lessons = get(courseData, 'lessons', []);
$: instructor = courseData?.metadata?.instructor || {};
$: instructor = get(courseData, 'metadata.instructor') || {};
$: initPlyr(player, video);
$: {
reviews = get(courseData, 'metadata.reviews') || [];
@@ -276,7 +276,7 @@
{/if}
{#if lesson.note}
<span class="text-sm font-light flex w-2/4"
><Notebook size={16} class="mr-1" />1 note</span
><Notebook size={16} class="mr-1" />note</span
>
{/if}
</div>
apps/dashboard/src/lib/components/Form/Date.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script>
export let label;
export let placeholder;
export let value;
export let label = '';
export let placeholder = '';
export let value = '';
export let className = '';
export let onChange = () => {}; // This is to know if element is 'dirty'
</script>
apps/dashboard/src/lib/components/TextEditor/index.svelte
+3 -3
View File
@@ -4,7 +4,7 @@
import { appStore } from '$lib/utils/store/app';
export let id = '';
export let value: string;
export let value: string | undefined = '';
export let onChange = (html: string) => {};
export let height = 300;
export let placeholder = '';
@@ -14,7 +14,7 @@
const apiKey = PUBLIC_TINYMCE_API_KEY;
let tinmycEditor: any;
let unmount = false
let unmount = false;
// editor configuration
let conf = {
@@ -73,6 +73,6 @@
<div>
{#if !unmount}
<Editor bind:value {apiKey} bind:conf />
<Editor bind:value {apiKey} bind:conf />
{/if}
</div>
apps/dashboard/src/lib/components/UploadImage/index.svelte
+8 -7
View File
@@ -1,21 +1,22 @@
<script>
<script lang="ts">
import Camera from 'carbon-icons-svelte/lib/Camera.svelte';
export let avatar = null;
export let src = null;
export let avatar: string | undefined;
export let src: string | undefined;
export let widthHeight = '';
export let shape = 'rounded-full';
export let errorMessage = null;
export let errorMessage: string | null = null;
let fileinput;
let fileinput: HTMLInputElement;
const onFileSelected = (e) => {
const onFileSelected = (e: Event<HTMLInputElement>) => {
const image = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (e) => {
avatar = image;
src = e.target.result;
// @ts-ignore
src = e.target?.result || undefined;
};
};
</script>
apps/dashboard/src/routes/+layout.server.ts
+5 -12
View File
@@ -12,29 +12,22 @@ interface LoadOutput {
orgSiteName: string;
isOrgSite: boolean;
skipAuth: boolean;
org: CurrentOrg;
org: CurrentOrg | null;
}
export const load = async ({ url, cookies }): Promise<LoadOutput> => {
// if (url.hostname === 'classroomio.com') {
// throw redirect(301, 'https://about.classroomio.com');
// }
let response: LoadOutput = {
const response: LoadOutput = {
orgSiteName: '',
isOrgSite: false,
skipAuth: false,
org: {
theme: ''
}
org: null
};
const _orgSiteName = cookies.get('_orgSiteName');
const debugPlay = cookies.get('debugPlay');
const debugMode = _orgSiteName && _orgSiteName !== 'false';
console.log('_orgSiteName', _orgSiteName);
const matches = url.host.match(/([a-z 0-9 \-]+).*classroomio[.]com/);
const matches = url.host.match(/([a-z 0-9 -]+).*classroomio[.]com/);
const subdomain = matches?.[1] ?? '';
if (!blockedSubdomain.includes(subdomain)) {
@@ -42,7 +35,7 @@ export const load = async ({ url, cookies }): Promise<LoadOutput> => {
response.isOrgSite = debugMode || answer;
response.orgSiteName = debugMode ? _orgSiteName : subdomain;
response.org = await getCurrentOrg(response.orgSiteName, true);
response.org = (await getCurrentOrg(response.orgSiteName, true)) || null;
} else if (subdomain === 'play' || debugPlay === 'true') {
response.skipAuth = true;
}
apps/dashboard/src/routes/+layout.svelte
+6 -7
View File
@@ -90,7 +90,6 @@
error,
status
} = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();
console.log('Get user', authUser);
console.log('Get profile', profileData);
if (error && !profileData && status === 406 && authUser) {
@@ -219,10 +218,7 @@
handleResize();
if (
!isSupabaseTokenInLocalStorage() &&
!isPublicRoute($page.url.pathname)
) {
if (!isSupabaseTokenInLocalStorage() && !isPublicRoute($page.url.pathname)) {
console.log('No auth token and is not a public route, redirect to login', path);
return goto('/login?redirect=/' + path);
}
@@ -408,9 +404,12 @@
}
:global(.plyr__controls) {
background: url(/logo-192.png) 99% 70% no-repeat,
background:
url(/logo-192.png) 99% 70% no-repeat,
linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) !important;
background-size: 50px auto, auto !important;
background-size:
50px auto,
auto !important;
}
:global(.cards-container) {
apps/dashboard/src/routes/courses/[id]/landingpage/+page.svelte
+8 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { dev } from '$app/environment';
import { fly } from 'svelte/transition';
import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
@@ -10,14 +11,18 @@
const { courseId } = data;
let courseData: Course;
let courseData: Course = $course;
function setCourseData(course: Course, lessons: Lesson[]) {
courseData = { ...course, lessons };
}
function syncCourseStore(_courseData: Course) {
$course = _courseData;
}
$: setCourseData($course, $lessons);
$: console.log('courseData changed', courseData);
$: dev && console.log('courseData changed', courseData);
</script>
<div
@@ -25,7 +30,7 @@
in:fly={{ y: 500, duration: 500 }}
out:fly={{ y: 500, duration: 500 }}
>
<Editor {courseId} bind:course={courseData} />
<Editor {courseId} bind:course={courseData} {syncCourseStore} />
<div class="rightBar">
<CourseLandingPage bind:courseData editMode={true} />
</div>
apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+32 -16
View File
@@ -1,5 +1,4 @@
<script>
import { onMount } from 'svelte';
<script lang="ts">
import { page } from '$app/stores';
import { dndzone } from 'svelte-dnd-action';
import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
@@ -20,6 +19,7 @@
import { updateLesson } from '$lib/utils/services/courses';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { profile } from '$lib/utils/store/user';
import type { Lesson } from '$lib/utils/types';
import {
lessons,
handleSaveLesson,
@@ -31,16 +31,20 @@
import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
import DateField from '$lib/components/Form/Date.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
export let data;
let lessonEditing;
let lessonEditing: string | undefined;
let lessonToDelete: Lesson | undefined;
let isStudent = true;
let openModal = false;
let openDeleteModal = false;
const flipDurationMs = 300;
function formatDate(date) {
function formatDate(date: string | undefined) {
if (!date) return '';
const d = new Date(date);
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
@@ -54,16 +58,16 @@
openModal = true;
}
function handleDndConsider(e) {
function handleDndConsider(e: any) {
$lessons = e.detail.items;
}
function handleDndFinalize(e) {
function handleDndFinalize(e: any) {
const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
$lessons = e.detail.items;
// Only update the lesson order that changed
e.detail.items.forEach((item, index) => {
e.detail.items.forEach((item: { id: string }, index: number) => {
const order = index + 1;
if (order !== prevLessonsByOrder[item.id]) {
@@ -75,7 +79,7 @@
});
}
function getLessonOrder(id) {
function getLessonOrder(id: string) {
const index = $lessons.findIndex((lesson) => lesson.id === id);
if (index < 9) {
@@ -96,6 +100,12 @@
<AddLessonModal {isStudent} bind:openModal />
<DeleteLessonConfirmation
bind:openDeleteModal
lessonTitle={lessonToDelete?.title || ''}
deleteLesson={() => handleDelete(lessonToDelete?.id)}
/>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Lessons">
<div slot="widget">
@@ -136,7 +146,7 @@
<div class="w-4/5">
{#if lessonEditing === lesson.id}
<TextField bind:value={lesson.title} autofocus={true} className="max-w-lg" />
<TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
{:else}
<h3 class="dark:text-white text-xl m-0 flex items-center">
<a
@@ -196,7 +206,7 @@
<div class="flex mb-2">
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="dark:text-white text-sm ml-2">
{new Date(lesson.lesson_at).toDateString()}
{new Date(lesson.lesson_at || '').toDateString()}
</p>
</div>
{/if}
@@ -206,7 +216,7 @@
{#if lessonEditing === lesson.id}
<TextField
bind:value={lesson.call_url}
autofocus={true}
autoFocus={true}
className="w-[179px]"
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
@@ -234,10 +244,11 @@
handleSaveLesson(lesson, $course.id);
}}
toolTipProps={isStudent
? {}
? undefined
: {
title: `Click to ${lesson.is_unlocked ? 'lock' : 'unlock'}`,
direction: 'right'
direction: 'left',
hotkeys: []
}}
>
{#if lesson.is_unlocked}
@@ -253,7 +264,7 @@
{#if lessonEditing === lesson.id}
<IconButton
onClick={() => {
lessonEditing = null;
lessonEditing = undefined;
handleSaveLesson(lesson, $course.id);
}}
>
@@ -272,7 +283,12 @@
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="hidden md:block">
<IconButton onClick={handleDelete(lesson.id)}>
<IconButton
onClick={() => {
lessonToDelete = lesson;
openDeleteModal = true;
}}
>
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
@@ -293,7 +309,7 @@
text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
on:click={() => {
if (lessonEditing === lesson.id) {
lessonEditing = null;
lessonEditing = undefined;
handleSaveLesson(lesson, $course.id);
} else {
lessonEditing = lesson.id;
supabase/data.sql
+32 -32
View File
File diff suppressed because one or more lines are too long
supabase/migrations/20231115082347_remote_schema.sql
+1 -1
View File
@@ -230,7 +230,7 @@ CREATE TABLE IF NOT EXISTS "public"."course" (
"is_template" boolean DEFAULT true,
"logo" "text" DEFAULT ''::"text" NOT NULL,
"slug" character varying,
"metadata" "jsonb" DEFAULT '{"gols": "", "description": "", "requirements": ""}'::"jsonb" NOT NULL,
"metadata" "jsonb" DEFAULT '{"goals": "", "description": "", "requirements": ""}'::"jsonb" NOT NULL,
"cost" bigint DEFAULT '0'::bigint,
"currency" character varying DEFAULT 'NGN'::character varying NOT NULL,
"banner_image" "text",