Restructure app for scale and easy access of routeId

This commit is contained in:
Ibitoye Rotimi Best
2021-07-12 05:55:57 +03:00
parent 4124a1fc02
commit 7e7bd28889
36 changed files with 707 additions and 620 deletions
@@ -1,66 +0,0 @@
<script>
import { Modal } from "carbon-components-svelte";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
import PageBody from "../../../../PageBody/index.svelte";
import TextField from "../../../../Form/TextField.svelte";
export let path;
let exercises = [
{
id: 1,
title: "Practice Exercise",
link: `${path}&exerciseId=1`,
},
{
id: 2,
title: "Home task",
link: `${path}&exerciseId=2`,
},
];
let exerciseEditing;
let open = false;
let newExercise = {
id: 1,
title: "",
link: "",
};
function handleAddExercise() {
open = true;
}
</script>
<Modal
size="sm"
bind:open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>
<PageBody width="w-11/12 m-auto">
<slot:fragment slot="header">
<PrimaryButton className="mr-2" label="Add" onClick={handleAddExercise} />
</slot:fragment>
<div class="flex flex-wrap">
{#each exercises as exercise, index}
<a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
{#if exerciseEditing === index}
<TextField bind:value={exercise.title} autofocus={true} />
{:else}
<h3 class="text-xl">{exercise.title}</h3>
{/if}
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
</a>
{/each}
</div>
</PageBody>
@@ -1,13 +0,0 @@
<script>
import List from "./List.svelte";
import Exercise from "./Exercise.svelte";
export let exerciseId;
export let path;
</script>
{#if exerciseId}
<Exercise {exerciseId} />
{:else}
<List {path} />
{/if}
@@ -1,187 +0,0 @@
import { writable } from "svelte/store";
export const lessons = writable([
{
title: "Вступительное слово. Софт скилы",
to: "/courses/1/lecture/1",
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: "lesson",
value: 1,
},
{
label: "quiz",
value: 1,
},
{
label: "home task",
value: 2,
},
],
date: new Date(),
isComplete: true,
},
{
title: "Введение в ReactJS",
to: "/courses/1/lecture/2",
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: "lesson",
value: 1,
},
{
label: "quiz",
value: 1,
},
{
label: "home task",
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: "Компоненты",
to: "/courses/1/lecture/3",
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: "lesson",
value: 1,
},
{
label: "quiz",
value: 1,
},
{
label: "home task",
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: "Состояние компонентов и пропсы",
to: "/courses/1/lecture/4",
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: "lesson",
value: 1,
},
{
label: "quiz",
value: 1,
},
{
label: "home task",
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: "Жизненный цикл",
to: "/courses/1/lecture/5",
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: "lesson",
value: 1,
},
{
label: "quiz",
value: 1,
},
{
label: "home task",
value: 2,
},
],
date: new Date(),
isComplete: false,
},
]);
export const lecturers = writable([
{
id: 1,
text: "Sergey Semko",
},
{
id: 3,
text: "Jonathan Nelson",
},
{
id: 4,
text: "Sasha Pokidin",
},
{
id: 5,
text: "Natasha Rudenko",
},
{
id: 6,
text: "Yulia Marushko",
},
]);
export function handleAddLesson() {
const resources = [
{
label: "lesson",
value: 0,
},
{
label: "quiz",
value: 0,
},
{
label: "home task",
value: 0,
},
];
lessons.update(_lessons => {
return [
..._lessons,
{
title: 'Untitled lesson',
to: "/courses/1/lecture/" + (_lessons.length + 1),
resources,
lecturer: {
userId: 1,
avatar: "https://picsum.photos/32/32/?random",
name: "",
},
date: new Date()
}
]
})
}
@@ -1,13 +1,13 @@
<script>
import { handleAddQuestion } from "./store/index";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
import PageBody from "../../../../PageBody/index.svelte";
import ViewMode from "./ViewMode.svelte";
import EditMode from "./EditMode.svelte";
import MODES from "../../../../../utils/constants/mode.js";
import { VARIANTS } from "../../../../PrimaryButton/constants";
import { handleAddQuestion } from './store/index';
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
import PageBody from '../../../../PageBody/index.svelte';
import ViewMode from './ViewMode.svelte';
import EditMode from './EditMode.svelte';
import MODES from '../../../../../utils/constants/mode.js';
import { VARIANTS } from '../../../../PrimaryButton/constants';
export let exerciseId;
// export let exerciseId;
let mode = MODES.view;
let preview = false;
@@ -24,13 +24,13 @@
<PrimaryButton
className="mr-2"
variant={VARIANTS.OUTLINED}
label={mode === MODES.edit ? "Save" : "Edit"}
label={mode === MODES.edit ? 'Save' : 'Edit'}
onClick={handleMode}
/>
{#if mode === MODES.edit || preview}
<PrimaryButton
variant={VARIANTS.OUTLINED}
label={preview ? "Edit" : "Preview"}
label={preview ? 'Edit' : 'Preview'}
onClick={() => (preview = !preview)}
/>
{/if}
@@ -0,0 +1,92 @@
<script>
import { Modal } from 'carbon-components-svelte';
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
import PageBody from '../../../../PageBody/index.svelte';
import TextField from '../../../../Form/TextField.svelte';
import Exercise from '../Exercise/index.svelte';
export let path;
export let exerciseId;
let exercises = [
{
id: 1,
title: 'Practice Exercise',
link: `${path}/1`,
},
{
id: 2,
title: 'Home task',
link: `${path}/2`,
},
];
let open = false;
let newExercise = {
id: 1,
title: '',
link: '',
};
function handleAddExercise() {
exercises = [
...exercises,
{
...newExercise,
link: `${path}/${exercises.length + 1}`,
},
];
handleCancelAddExercise();
}
function handleCancelAddExercise() {
open = false;
newExercise = {
id: exercises.length + 1,
title: '',
link: '',
};
}
</script>
{#if exerciseId}
<Exercise {exerciseId} />
{:else}
<Modal
size="xs"
bind:open
modalHeading="Create an Exercise"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--primary={handleAddExercise}
on:click:button--secondary={handleCancelAddExercise}
on:open
on:close
on:submit
>
<TextField
bind:value={newExercise.title}
autofocus={true}
placeholder="Exercise name"
/>
</Modal>
<PageBody width="w-11/12 m-auto">
<slot:fragment slot="header">
<PrimaryButton
className="mr-2"
label="Add"
onClick={() => (open = !open)}
/>
</slot:fragment>
<div class="flex flex-wrap">
{#each exercises as exercise, index}
<a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
<h3 class="text-xl">{exercise.title}</h3>
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
</a>
{/each}
</div>
</PageBody>
{/if}
@@ -1,7 +1,7 @@
<script>
import PageNav from "../../../PageNav/index.svelte";
import Exercises from "./Exercises/index.svelte";
import Readme from "./Readme/index.svelte";
import PageNav from '../../../PageNav/index.svelte';
import Exercises from './Exercises/index.svelte';
import Readme from './Readme/index.svelte';
export let path;
export let tab;
@@ -12,22 +12,22 @@
<PageNav
navItems={[
{
label: "README.md",
isActive: tab === "lectures",
href: `${path}?tab=lectures`,
label: 'README.md',
isActive: tab === 'lessons',
href: `${path}?tab=lessons`,
},
{
label: "Exercises",
isActive: tab === "exercises",
label: 'Exercises',
isActive: tab === 'exercises',
href: `${path}?tab=exercises`,
},
]}
/>
<div class="course relative">
{#if tab === "lectures"}
{#if tab === 'lessons'}
<Readme />
{:else if tab === "exercises"}
{:else if tab === 'exercises'}
<Exercises {exerciseId} path={`${path}?tab=exercises`} />
{/if}
</div>
@@ -0,0 +1,186 @@
import { writable } from 'svelte/store';
export const lessons = writable([
{
title: 'Вступительное слово. Софт скилы',
to: '/courses/1/lessons/1',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: true,
},
{
title: 'Введение в ReactJS',
to: '/courses/1/lessons/2',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Компоненты',
to: '/courses/1/lessons/3',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Состояние компонентов и пропсы',
to: '/courses/1/lessons/4',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Жизненный цикл',
to: '/courses/1/lessons/5',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
]);
export const tutors = writable([
{
id: 1,
text: 'Sergey Semko',
},
{
id: 3,
text: 'Jonathan Nelson',
},
{
id: 4,
text: 'Sasha Pokidin',
},
{
id: 5,
text: 'Natasha Rudenko',
},
{
id: 6,
text: 'Yulia Marushko',
},
]);
export function handleAddLesson() {
const resources = [
{
label: 'lesson',
value: 0,
},
{
label: 'quiz',
value: 0,
},
{
label: 'home task',
value: 0,
},
];
lessons.update((_lessons) => {
return [
..._lessons,
{
title: 'Untitled lesson',
to: '/courses/1/lessons/' + (_lessons.length + 1),
resources,
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: '',
},
date: new Date(),
},
];
});
}
@@ -1,22 +1,22 @@
<script>
import { onMount } from "svelte";
import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
import hotkeys from "hotkeys-js";
import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
import { stores, goto } from "@sapper/app";
import Expandable from "../../../Expandable/index.svelte";
import PageNav from "../../../PageNav/index.svelte";
import IconButton from "../../../IconButton/index.svelte";
import { onMount } from 'svelte';
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
import hotkeys from 'hotkeys-js';
import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
import { stores, goto } from '@sapper/app';
import Expandable from '../../../Expandable/index.svelte';
import PageNav from '../../../PageNav/index.svelte';
import IconButton from '../../../IconButton/index.svelte';
import {
getNavItemRoute,
getLectureRoute,
getLessonsRoute,
getLectureNo,
} from "../../function";
} from '../../function';
import { lessons } from "../Lecture/store/lessons";
import { lessons } from '../Lesson/store/lessons';
// export let lectureId;
// export let lessonId;
export let courseId;
let show = true;
@@ -31,43 +31,43 @@
const navItems = [
{
label: "Overview",
label: 'Overview',
to: getNavItemRoute(courseId),
hideSortIcon: true,
},
{
label: "Lectures",
to: getLectureRoute(courseId),
label: 'Lessons',
to: getLessonsRoute(courseId),
hideSortIcon: false,
isLecture: true,
},
{
label: "Exercises",
to: getNavItemRoute(courseId, "exercises"),
label: 'All Exercises',
to: getNavItemRoute(courseId, 'allexercises'),
hideSortIcon: true,
},
{
label: "Scoreboard",
to: getNavItemRoute(courseId, "scoreboard"),
label: 'Scoreboard',
to: getNavItemRoute(courseId, 'scoreboard'),
hideSortIcon: true,
},
{
label: "People",
to: getNavItemRoute(courseId, "people"),
label: 'People',
to: getNavItemRoute(courseId, 'people'),
hideSortIcon: true,
},
{
label: "Timetable",
to: getNavItemRoute(courseId, "timetable"),
label: 'Timetable',
to: getNavItemRoute(courseId, 'timetable'),
hideSortIcon: true,
},
];
onMount(() => {
hotkeys("b", function (event, handler) {
hotkeys('b', function (event, handler) {
event.preventDefault();
switch (handler.key) {
case "b":
case 'b':
show = !show;
break;
}
@@ -116,9 +116,9 @@
value="toggle"
onClick={() => (show = !show)}
toolTipProps={{
title: "Toggle sidebar",
hotkeys: ["B"],
direction: "right",
title: 'Toggle sidebar',
hotkeys: ['B'],
direction: 'right',
}}
>
{#if show}
+6 -6
View File
@@ -1,6 +1,6 @@
const ROUTES = {
COURSES: "courses",
LECTURES: "lecture",
COURSES: 'courses',
LESSONS: 'lessons',
};
export function getNavItemRoute(courseId, routeId) {
@@ -13,14 +13,14 @@ export function getNavItemRoute(courseId, routeId) {
return `${path}/${routeId}`;
}
export function getLectureRoute(courseId, lectureId) {
const path = getNavItemRoute(courseId, ROUTES.LECTURES);
export function getLessonsRoute(courseId, lessonId) {
const path = getNavItemRoute(courseId, ROUTES.LESSONS);
if (!lectureId) {
if (!lessonId) {
return path;
}
return `${path}/${lectureId}`;
return `${path}/${lessonId}`;
}
export function getLectureNo(index) {