CRUD* Lecture

src/components/Course/components/CourseNav.svelte

@@ -1,5 +1,6 @@
 <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";
@@ -9,6 +10,8 @@
   import IconButton from "../../IconButton/index.svelte";
   import { getNavItemRoute, getLectureRoute, getLectureNo } from "../function";
 
+  import { lessons } from "./Lecture/store/lessons";
+
   // export let lectureId;
   export let courseId;
 
@@ -32,33 +35,7 @@
       label: "Lectures",
       to: getLectureRoute(courseId),
       hideSortIcon: false,
-      items: [
+      isLecture: true,
-        {
-          id: 1,
-          title: "Вводный урок. Soft skills",
-          to: getLectureRoute(courseId, 1),
-        },
-        {
-          id: 2,
-          title: "Введение в ReactJS",
-          to: getLectureRoute(courseId, 2),
-        },
-        {
-          id: 3,
-          title: "Компоненты",
-          to: getLectureRoute(courseId, 3),
-        },
-        {
-          id: 4,
-          title: "Состояние компонентов и пропсы",
-          to: getLectureRoute(courseId, 4),
-        },
-        {
-          id: 5,
-          title: "Жизненный цикл",
-          to: getLectureRoute(courseId, 5),
-        },
-      ],
     },
     {
       label: "People",
@@ -92,6 +69,8 @@
       }
     });
   });
+
+  $: console.log("lessons", $lessons);
 </script>
 
 <div class="root z-10 {!show && 'hide'}">
@@ -105,16 +84,24 @@
           isGroupActive={$page.path === navItem.to}
           hideSortIcon={navItem.hideSortIcon}
         >
-          {#if Array.isArray(navItem.items)}
+          {#if navItem.isLecture}
-            {#each navItem.items as item, index}
+            {#each $lessons as item, index}
               <a
                 class="item flex items-center {(item.to === $page.path ||
                   !$page.path.length > 3) &&
-                  'active'} pl-7 py-2"
+                  'active'} pl-7 py-2 {!item.isComplete &&
-                href={item.to}
+                  'cursor-not-allowed'}"
+                href={item.isComplete ? item.to : $page.path}
               >
                 <span class="course-counter"> {getLectureNo(index + 1)} </span>
                 <span>{item.title}</span>
+                {#if item.isComplete}
+                  <span class="ml-2 success">
+                    <CheckmarkFilled20 class="carbon-icon" />
+                  </span>
+                {:else}
+                  <span class="text-md ml-2">🔒</span>
+                {/if}
               </a>
             {/each}
           {/if}
@@ -146,13 +133,15 @@
     height: 90vh;
     display: flex;
     flex-direction: column;
-    width: 360px;
+    min-width: 360px;
+    max-width: 360px;
     position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
 
     &.hide {
-      width: 0px;
+      min-width: 0px;
+      max-width: 0px;
     }
   }
 

src/components/Course/components/Lecture/Home/index.svelte

@@ -1,8 +1,149 @@
 <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 "../../../../PageNav/index.svelte";
   import PageBody from "../../../../PageBody/index.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import TextField from "../../../../Form/TextField.svelte";
+  import IconButton from "../../../../IconButton/index.svelte";
+  import Select from "../../../../Form/Select.svelte";
+
+  import { lessons, lecturers, handleAddLesson } from "../store/lessons";
+
+  // export let path;
+
+  let lectureEditing;
+  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(() => {
+      lectureEditing = $lessons.length - 1;
+      if (ref) {
+        ref.scrollIntoView({ block: "end", behavior: "smooth" });
+      }
+    }, 100);
+  }
 </script>
 
-<PageNav title="Lectures" />
+<PageNav title="Lectures">
+  <div slot="widget">
+    <PrimaryButton label="Add" onClick={addLesson} />
+  </div>
+</PageNav>
 
-<PageBody>All lecture will be here</PageBody>
+<PageBody width="w-11/12 m-auto">
+  <div class="w-4/5 m-auto">
+    {#each $lessons as lecture, 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-5 -top-5 success">
+          <IconButton
+            onClick={() => (lecture.isComplete = !lecture.isComplete)}
+          >
+            {#if lecture.isComplete}
+              <CheckmarkFilled24 class="carbon-icon" />
+            {:else}
+              <span class="text-2xl">🔒</span>
+            {/if}
+          </IconButton>
+        </div>
+
+        <!-- Edit/Save -->
+        <div class="absolute top-2 right-0">
+          {#if lectureEditing === index}
+            <IconButton onClick={() => (lectureEditing = null)}>
+              <Save24 class="carbon-icon" />
+            </IconButton>
+          {:else}
+            <IconButton onClick={() => (lectureEditing = index)}>
+              <Edit24 class="carbon-icon" />
+            </IconButton>
+          {/if}
+        </div>
+
+        <div class="">
+          <h3 class="text-4xl font-bold">{index + 1}</h3>
+        </div>
+        <div class="ml-8 w-4/5">
+          {#if lectureEditing === index}
+            <TextField bind:value={lecture.title} autofocus={true} />
+          {:else}
+            <h3 class="text-3xl font-semibold m-0 flex items-center">
+              <a href={lecture.to} class="hover:underline text-black">
+                {lecture.title}
+              </a>
+            </h3>
+          {/if}
+          <div class="flex items-center mb-2">
+            <div class="flex items-center mr-2">
+              {lecture.resources.map((r) => `${r.value} ${r.label}`).join(", ")}
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-3 w-full">
+            {#if lectureEditing === index}
+              <Select
+                bind:value={lecture.lecturer.name}
+                options={$lecturers}
+                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={lecture.lecturer.avatar}
+                />
+                <p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
+              </a>
+            {/if}
+
+            <div class="flex items-center">
+              {#if lectureEditing === index}
+                <input
+                  type="date"
+                  name="lecture-date-picker"
+                  class="p-2 rounded-md w-40"
+                  value={formatDate(lecture.date)}
+                  on:input={(e) => (lecture.date = e.target.value)}
+                />
+              {:else}
+                <Time24 class="carbon-icon" />
+                <p class="text-md font-semibold ml-2">
+                  {new Date(lecture.date).toDateString()}
+                </p>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</PageBody>
+
+<style>
+  .group {
+    min-height: 170px;
+  }
+</style>

src/components/Course/components/Lecture/index.svelte

@@ -7,11 +7,12 @@
 
   export let path;
   export let tab;
+  // export let lectureId;
   export let showLectureHome;
 </script>
 
 {#if showLectureHome}
-  <Home />
+  <Home {path} />
 {:else}
   <div>
     <PageNav

src/components/Course/components/Lecture/store/lessons.js

@@ -0,0 +1,187 @@
+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()
+      }
+    ]
+  })
+}

src/components/Course/components/People.svelte

@@ -54,7 +54,8 @@
         avatarUrl={teacher.avatar}
         title={teacher.title}
         telegramLink={teacher.telegramLink}
-        mailLink={teacher.mailLink} />
+        mailLink={teacher.mailLink}
+      />
     {/each}
   </div>
 </div>
@@ -68,7 +69,8 @@
       <UserCard
         name={student.name}
         avatarUrl={student.avatar}
-        title={student.title} />
+        title={student.title}
+      />
     {/each}
   </div>
 </div>

src/components/Expandable/index.svelte

@@ -9,7 +9,7 @@
   // export let subMenuItems = [];
 
   function onClick() {
-    isExpanded = !isExpanded;
+    // isExpanded = !isExpanded;
     handleClick();
   }
 </script>

src/components/Form/Select.svelte

@@ -2,13 +2,14 @@
   export let label;
   export let value;
   export let options = [];
+  export let valueKey = "id";
 </script>
 
 <label class="block">
   {#if label} <span class="text-gray-700">{label}</span> {/if}
   <select bind:value class="form-select block w-full mt-1">
     {#each options as option}
-      <option value={option.id}>
+      <option value={option[valueKey]}>
         {option.text}
       </option>
     {/each}

src/components/Form/TextField.svelte

@@ -4,6 +4,7 @@
   export let value;
   export let onKeyDown;
   export let className = "";
+  export let autofocus = false;
 </script>
 
 <label class="block {className}">
@@ -14,5 +15,6 @@
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
+    autofocus
   />
 </label>

src/components/PageBody/index.svelte

@@ -1,9 +1,10 @@
 <script>
   // import
   //   border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
+  export let width = "max-w-3xl";
 </script>
 
-<div class="root mt-4 mx-auto max-w-3xl relative pb-5">
+<div class="mt-4 mx-auto {width} relative pb-5">
   {#if $$slots.header}
     <div
       class="head flex bg-white items-center justify-between sticky right-0 w-full py-3"
@@ -16,10 +17,6 @@
 </div>
 
 <style>
-  /* .root {
-    max-width: 700px;
-  } */
-
   .head {
     top: 61px;
     z-index: 1;

src/components/PageNav/index.svelte

@@ -6,6 +6,7 @@
   export let addButtonHref;
   export let addButtonLabel;
   export let disableSticky = false;
+
   let dynamicRootClass = "";
 
   $: dynamicRootClass =

src/components/Tailwindcss.svelte

@@ -57,11 +57,11 @@
   }
 
   [aria-current] :global(svg.carbon-icon),
-  button.active :global(svg.carbon-icon) {
+  .active :global(svg.carbon-icon) {
     fill: var(--main-primary-color);
   }
 
-  button.success :global(svg.carbon-icon) {
+  .success :global(svg.carbon-icon) {
     fill: green;
   }
 </style>

src/components/UserCard/index.svelte

@@ -11,27 +11,14 @@
   export let telegramLink;
 </script>
 
-<style>
+<figure class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4">
-  .profile {
-    width: 200px;
-  }
-
-  .profile img {
-    width: 104px;
-    height: 104px;
-  }
-  .description {
-    min-height: 70px;
-  }
-</style>
-
-<figure class="profile bg-gray-100 rounded-xl px-4 py-7 mr-4 mb-4">
   <img
     class="w-32 h-32 rounded-full mx-auto"
     src={avatarUrl}
     alt=""
     width="384"
-    height="512" />
+    height="512"
+  />
   <div class="pt-6 text-center space-y-4">
     <div class="description font-medium flex flex-col justify-around">
       <div class="text-cyan-600">{name}</div>
@@ -45,15 +32,27 @@
           data={faTelegram}
           scale="1"
           class="social-icon"
-          style="color:#4dabf7;margin:0 5px;" />
+          style="color:#4dabf7;margin:0 5px;"
+        />
       </a>
       <a href={mailLink} target="_blank">
         <Icon
           data={faEnvelope}
           scale="1"
           class="social-icon"
-          style="color:#d44c3d;margin:0 5px;" />
+          style="color:#d44c3d;margin:0 5px;"
+        />
       </a>
     </div>
   {/if}
 </figure>
+
+<style>
+  img {
+    width: 104px;
+    height: 104px;
+  }
+  .description {
+    min-height: 70px;
+  }
+</style>

src/routes/courses/[...id]/index.svelte

@@ -44,7 +44,12 @@
     {:else if courseNavItem === "hometasks"}
       <HomeTask />
     {:else if courseNavItem === "lecture"}
-      <Lecture path={$page.path} {tab} showLectureHome={!lectureId} />
+      <Lecture
+        path={$page.path}
+        {tab}
+        {lectureId}
+        showLectureHome={!lectureId}
+      />
     {:else if courseNavItem === "people"}
       <People />
     {/if}