From f11c393e5ca8bfd9ff95aa6befacce81f2af3ae3 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 19:03:49 +0200
Subject: [PATCH] :)

---
 web/assets/init-admin.js                      |  9 +++++--
 .../course/manage/edit-video-sections.gohtml  |  7 +++---
 web/ts/api/admin-lecture-list.ts              |  9 ++++++-
 web/ts/data-store/admin-lecture-list.ts       |  2 +-
 web/ts/edit-course.ts                         | 25 +++++++++++--------
 5 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 6628576c0..518f41ffd 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -181,6 +181,10 @@ document.addEventListener("alpine:init", () => {
         const [changeSetExpression, fieldName = null] = expression.split(".");
         const changeSet = evaluate(changeSetExpression);
 
+        if (!changeSet) {
+            return;
+        }
+
         const onChangeSetUpdateHandler = (data) => {
             const value = fieldName != null ? data[fieldName] : data;
             if (modifiers.includes("text")) {
@@ -217,10 +221,11 @@ document.addEventListener("alpine:init", () => {
     *      x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())">
     * </div>
     */
-    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluateLater, cleanup }) => {
+    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluate, evaluateLater, cleanup }) => {
         const onUpdate = evaluateLater(expression);
 
         const onChangeSetUpdateHandler = (e) => {
+            console.log(el, "trigger");
             const isDirty = e.detail.changeSet.isDirty();
 
             if (modifiers.includes("clean") && isDirty) {
@@ -234,7 +239,7 @@ document.addEventListener("alpine:init", () => {
         el.addEventListener(nativeEventName, onChangeSetUpdateHandler);
 
         if (modifiers.includes("init")) {
-            onUpdate();
+            evaluate(expression);
         }
 
         cleanup(() => {
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index a1d8047b3..461e1aaa0 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -74,7 +74,7 @@
         <template x-if="lectureData.videoSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-for="section in lectureData.videoSections" :key="sectionKey(section)">
+                    <template x-for="section in lectureData.videoSections" :key="getSectionKey(section)">
                         <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded"
                              x-change-set-listen="sectionEditChangeSet"
                              x-on-change-set-update.clean="updateSection(sectionEditChangeSet.get())"
@@ -83,14 +83,15 @@
                                 <div class="p-1 flex items-center justify-start">
                                     <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 ml-1 rounded"
                                          x-change-set-listen="sectionEditChangeSet"
-                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"></div>
+                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"
+                                    ></div>
                                     <div x-change-set-listen.text="sectionEditChangeSet.description" class="text-xs font-semibold text-3 ml-2 flex-grow"></div>
                                     <div class="flex items-center py-1 pl-2 border-l dark:border-gray-600">
                                         <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
                                             <i class="fa fa-edit"></i>
                                         </button>
                                         <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
-                                                @click="deleteSection(section.id)">
+                                                @click="deleteSection(section)">
                                             <i class="fa fa-trash"></i>
                                         </button>
                                     </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 185d59ec2..f1df533f6 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -89,7 +89,7 @@ export type VideoSection = {
     startSeconds: number;
 
     //Pseudo Fields
-    key: string;
+    key?: string;
 };
 
 export type VideoSectionDelta = {
@@ -106,6 +106,13 @@ export function videoSectionHasChanged(a: VideoSection, b: VideoSection) {
     );
 }
 
+export function videoSectionGenKey(section: VideoSection): string {
+    if (section.id != null) {
+        return `sid_${section.id}`;
+    }
+    return `sts_${(new Date()).getTime()}`;
+}
+
 export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]) : VideoSectionDelta {
     const sectionsToAdd = [];
     const sectionsToUpdate = [];
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index e1b8b8618..ef346ae42 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -32,7 +32,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         return result.map((s) => {
             s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
 
-            s.videoSections = s.videoSections ?? [];
+            s.videoSections = (s.videoSections ?? []).sort(videoSectionSort);
 
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 790dc38ed..6dcca49a4 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -215,29 +215,34 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             return videoSectionFriendlyTimestamp(section);
         },
 
-        sectionKey(section: VideoSection): string {
-            if (section.id != null) {
-                return `sid_${section.id}`;
-            }
-            return `sts_${videoSectionTimestamp(section)}`;
+        getSectionKey(section: VideoSection): string {
+            return section.id ? `sid_${section.id}` : section.key;
+        },
+
+        genPseudoSectionKey(): string {
+            return `sts_${(new Date()).getTime()}`;
         },
 
         addSection(section: VideoSection) {
-            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
+            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, {
+                ...section,
+                key: this.genPseudoSectionKey(),
+            }].sort(videoSectionSort));
         },
 
         updateSection(section: VideoSection) {
-            const sectionKey = this.sectionKey(section);
+            const sectionKey = this.getSectionKey(section);
             this.changeSet.patch("videoSections", [
-                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.sectionKey(s)),
+                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
                 section
             ].sort(videoSectionSort));
         },
 
-        deleteSection(id: number) {
+        deleteSection(section) {
+            const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
-                this.lectureData.videoSections.filter((s) => s.id !== id),
+                this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
             );
         },