nested :)

TUM-Dev · Sep 15, 2023 · a50db12 · a50db12
1 parent 7e63051
commit a50db12
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -75,10 +75,7 @@
             <div class="">
                 <div class="grid gap-2">
                     <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())"
-                        >
+                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded">
                             <template x-if="!editMode">
                                 <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"
@@ -98,29 +95,32 @@
                                 </div>
                             </template>
                             <template x-if="editMode">
-                                <form @submit.prevent="sectionEditChangeSet.commit(); editMode = false;"
+                                <form @submit.prevent="sectionEditChangeSet.commit(); updateSection(sectionEditChangeSet.get()); editMode = false;"
                                       @reset.prevent="sectionEditChangeSet.reset(); editMode = false;"
+                                      x-data="{ isValid: false }"
+                                      x-change-set-listen="sectionEditChangeSet"
+                                      x-on-change-set-update="isValid = sectionEditChangeSet.isDirty() && isValidVideoSection(sectionEditChangeSet.get())"
                                       class="flex flex-grow items-center p-2">
                                     <div class="text-sm mr-2">
                                         <label for="video-section-timestamp"
                                                class="block text-5">Timestamp</label>
                                         <div class="flex mt-3">
                                             <input id="startHours"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startHours"
                                                    type="number" min="0" max="23" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startMinutes"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startMinutes"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startSeconds"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startSeconds"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
@@ -144,7 +144,8 @@
                                         </button>
                                         <button type="submit"
                                                 title="Update"
-                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600">
+                                                :disabled="!isValid"
+                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600 disabled:opacity-50">
                                             <i class="fa fa-check text-white"></i>
                                         </button>
                                     </div>

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
@@ -231,6 +231,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         addSection(section: VideoSection) {
+            console.log("PATCH A");
             this.changeSet.patch(
                 "videoSections",
                 [
@@ -244,6 +245,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         updateSection(section: VideoSection) {
+            console.log("PATCH B");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
@@ -254,14 +256,21 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         deleteSection(section) {
+            console.log("PATCH C");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
-                this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
+                [...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s))],
             );
         },
 
         isValidVideoSection(section: VideoSection): boolean {
+            const sectionKey = this.getSectionKey(section);
+            const hasValidTime = !this.lectureData.videoSections.some(
+                (s) =>  videoSectionTimestamp(s) == videoSectionTimestamp(section) &&
+                    sectionKey != this.getSectionKey(s)
+            );
+
             return (
                 section.description !== "" &&
                 section.startHours !== null &&
@@ -270,7 +279,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 section.startMinutes < 60 &&
                 section.startSeconds !== null &&
                 section.startSeconds < 60 &&
-                !this.lectureData.videoSections.some((s) => videoSectionTimestamp(s) == videoSectionTimestamp(section))
+                hasValidTime
             );
         },