Restructure app for scale and easy access of routeId
This commit is contained in:
Ibitoye Rotimi Best
@@ -0,0 +1,55 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [lessonId, exerciseRouteName, exerciseId] = params.id;
|
||||
return { lessonId, exerciseRouteName, exerciseId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { stores } from '@sapper/app';
|
||||
import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
|
||||
|
||||
import PageNav from '../../../../../components/PageNav/index.svelte';
|
||||
import PageBody from '../../../../../components/PageBody/index.svelte';
|
||||
import Readme from '../../../../../components/Course/components/Lesson/Readme/index.svelte';
|
||||
import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
|
||||
|
||||
export let lessonId;
|
||||
export let exerciseRouteName;
|
||||
export let exerciseId;
|
||||
|
||||
let path;
|
||||
|
||||
const { page } = stores();
|
||||
|
||||
function getCourseId() {
|
||||
return $page.path.match(/\w+\/(\d)\//)[1];
|
||||
}
|
||||
|
||||
$: path = $page.path.replace(/\/exercises[\/ 0-9]*/, '');
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" courseId={getCourseId()}>
|
||||
<PageNav
|
||||
navItems={[
|
||||
{
|
||||
label: 'README.md',
|
||||
isActive: !exerciseRouteName,
|
||||
href: path,
|
||||
},
|
||||
{
|
||||
label: 'Exercises',
|
||||
isActive: !!exerciseRouteName,
|
||||
href: `${path}/exercises`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<PageBody>
|
||||
{#if !!exerciseRouteName}
|
||||
<Exercises {exerciseId} path={`${path}/exercises`} />
|
||||
{:else}
|
||||
<Readme {lessonId} />
|
||||
{/if}
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Time24 from 'carbon-icons-svelte/lib/Time24';
|
||||
import Edit24 from 'carbon-icons-svelte/lib/Edit24';
|
||||
import Save24 from 'carbon-icons-svelte/lib/Save24';
|
||||
import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
|
||||
import PageNav from '../../../../components/PageNav/index.svelte';
|
||||
import PageBody from '../../../../components/PageBody/index.svelte';
|
||||
import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
|
||||
import TextField from '../../../../components/Form/TextField.svelte';
|
||||
import IconButton from '../../../../components/IconButton/index.svelte';
|
||||
import Select from '../../../../components/Form/Select.svelte';
|
||||
import CourseContainer from '../../../../components/CourseContainer/index.svelte';
|
||||
import {
|
||||
lessons,
|
||||
tutors,
|
||||
handleAddLesson,
|
||||
} from '../../../../components/Course/components/Lesson/store/lessons';
|
||||
|
||||
export let courseId;
|
||||
|
||||
let lessonEditing;
|
||||
let ref;
|
||||
|
||||
function formatDate(date) {
|
||||
const d = new Date(date);
|
||||
|
||||
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
|
||||
const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
|
||||
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
|
||||
|
||||
return `${ye}-${mo}-${da}`;
|
||||
}
|
||||
|
||||
function addLesson() {
|
||||
handleAddLesson();
|
||||
setTimeout(() => {
|
||||
lessonEditing = $lessons.length - 1;
|
||||
if (ref) {
|
||||
ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Lessons">
|
||||
<div slot="widget">
|
||||
<PrimaryButton label="Add" onClick={addLesson} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<PageBody width="w-11/12 m-auto">
|
||||
<div class="w-4/5 m-auto">
|
||||
{#each $lessons as lesson, index}
|
||||
<div
|
||||
bind:this={ref}
|
||||
class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
|
||||
>
|
||||
<!-- Complete or Not complete icon -->
|
||||
<div class="absolute -left-6 -top-6 success">
|
||||
<IconButton
|
||||
onClick={() => (lesson.isComplete = !lesson.isComplete)}
|
||||
>
|
||||
{#if lesson.isComplete}
|
||||
<CheckmarkFilled24 class="carbon-icon" />
|
||||
{:else}
|
||||
<span class="text-2xl">🔒</span>
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<!-- Edit/Save -->
|
||||
<div class="absolute top-2 right-0">
|
||||
{#if lessonEditing === index}
|
||||
<IconButton onClick={() => (lessonEditing = null)}>
|
||||
<Save24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
{:else}
|
||||
<IconButton onClick={() => (lessonEditing = index)}>
|
||||
<Edit24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<h3 class="text-3xl font-bold">{index + 1}.</h3>
|
||||
</div>
|
||||
<div class="ml-8 w-4/5">
|
||||
{#if lessonEditing === index}
|
||||
<TextField bind:value={lesson.title} autofocus={true} />
|
||||
{:else}
|
||||
<h3 class="text-3xl font-semibold m-0 flex items-center">
|
||||
<a href={lesson.to} class="hover:underline text-black">
|
||||
{lesson.title}
|
||||
</a>
|
||||
</h3>
|
||||
{/if}
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex items-center mr-2">
|
||||
{lesson.resources
|
||||
.map((r) => `${r.value} ${r.label}`)
|
||||
.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-3 w-full">
|
||||
{#if lessonEditing === index}
|
||||
<Select
|
||||
bind:value={lesson.tutor.name}
|
||||
options={$tutors}
|
||||
valueKey="text"
|
||||
/>
|
||||
{:else}
|
||||
<a
|
||||
href="courses/1/people"
|
||||
class="flex items-center hover:underline text-black"
|
||||
>
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={lesson.tutor.avatar}
|
||||
/>
|
||||
<p class="ml-2 text-sm font-bold">{lesson.tutor.name}</p>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center">
|
||||
{#if lessonEditing === index}
|
||||
<input
|
||||
type="date"
|
||||
name="lesson-date-picker"
|
||||
class="p-2 rounded-md w-40"
|
||||
value={formatDate(lesson.date)}
|
||||
on:input={(e) => (lesson.date = e.target.value)}
|
||||
/>
|
||||
{:else}
|
||||
<Time24 class="carbon-icon" />
|
||||
<p class="text-md font-semibold ml-2">
|
||||
{new Date(lesson.date).toDateString()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
min-height: 170px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user