Lock buttons when something is happening in lecture import, Closes #8

src/misc/Calendar.tsx

@@ -7,7 +7,9 @@ export interface ICalEvent {
     duration?: number;
     location?: string;
     description?: string;
-    foreign_id?: number;
+    id_in_videoag_system?: number;
+    id_in_foreign_system?: number;
+    locally_unique_id: string;
 }
 
 export function parseICal(fileContent: string): ICalEvent[] {

src/pages/internal/import.tsx

@@ -19,18 +19,20 @@ function TerminBody({
 }) {
     const api = useBackendContext();
     const reloadFunc = useReloadBoundary();
+    const [lockedIds, setLockedIds] = useState<string[] | undefined>([]); // undefined has the special meaning that everything is locked
 
     const existingEvents: ICalEvent[] = (course.lectures ?? []).map((l) => {
         const obj: ICalEvent = {
             location: l.location,
             duration: l.duration,
             startDate: DateTime.fromISO(l.time),
-            foreign_id: l.id,
+            id_in_videoag_system: l.id,
+            locally_unique_id: "videoag_" + l.id,
         };
         return obj;
     });
 
-    const eventEquals = (a: ICalEvent, b: ICalEvent) => {
+    const eventsSimilar = (a: ICalEvent, b: ICalEvent) => {
         return (
             a.location === b.location &&
             a.duration === b.duration &&
@@ -39,12 +41,12 @@ function TerminBody({
     };
 
     const removeDuplicates = (event: ICalEvent, index: number, self: ICalEvent[]) => {
-        return index === self.findIndex((e) => eventEquals(e, event));
+        return index === self.findIndex((e) => eventsSimilar(e, event));
     };
     const notContainedIn = (other: ICalEvent[]) => {
         return (event: ICalEvent) => {
             return !other.some((oth) => {
-                return eventEquals(event, oth);
+                return eventsSimilar(event, oth);
             });
         };
     };
@@ -67,6 +69,13 @@ function TerminBody({
         .filter(removeDuplicates).length;
 
     const importEvent = (event: ICalEvent) => {
+        setLockedIds((old) => {
+            if (old === undefined) {
+                return old;
+            } else {
+                return old.concat(event.locally_unique_id);
+            }
+        });
         api.getNewOMConfiguration("lecture")
             .then((res: GetNewConfigurationResponse) => {
                 const defaultValues: any = {};
@@ -97,10 +106,20 @@ function TerminBody({
             .catch((e) => {
                 showError(e, "Unable to create lecture");
             })
-            .then(reloadFunc);
+            .then(reloadFunc)
+            .finally(() => {
+                setLockedIds((old) => {
+                    if (old === undefined) {
+                        return old;
+                    } else {
+                        return old.filter((id) => id !== event.locally_unique_id);
+                    }
+                });
+            });
     };
 
     const importAllEvents = () => {
+        setLockedIds(undefined);
         api.getNewOMConfiguration("lecture")
             .then((res: GetNewConfigurationResponse) => {
                 const defaultValues: any = {};
@@ -135,37 +154,59 @@ function TerminBody({
             .catch((e) => {
                 showError(e, "Unable to create lectures");
             })
-            .then(reloadFunc);
+            .then(reloadFunc)
+            .finally(() => {
+                setLockedIds([]);
+            });
     };
 
     const removeEvent = (event: ICalEvent) => {
         if (!confirm("Really delete?")) return;
-        if (event.foreign_id === undefined) {
+        if (event.id_in_videoag_system === undefined) {
             showErrorToast("Event not found");
             return;
         }
-
-        api.deleteOMObject("lecture", event.foreign_id)
+        setLockedIds((old) => {
+            if (old === undefined) {
+                return old;
+            } else {
+                return old.concat(event.locally_unique_id);
+            }
+        });
+        api.deleteOMObject("lecture", event.id_in_videoag_system)
             .catch((e) => {
                 showError(e, "Unable to delete lecture");
             })
-            .then(reloadFunc);
+            .then(reloadFunc)
+            .finally(() => {
+                setLockedIds((old) => {
+                    if (old === undefined) {
+                        return old;
+                    } else {
+                        return old.filter((id) => id !== event.locally_unique_id);
+                    }
+                });
+            });
     };
 
     const removeAllEvents = () => {
         if (!confirm("Really delete all?")) return;
+        setLockedIds(undefined);
         const promises = existingEvents.flatMap((event) => {
-            if (event.foreign_id === undefined) {
+            if (event.id_in_videoag_system === undefined) {
                 return [];
             }
 
-            return [api.deleteOMObject("lecture", event.foreign_id)];
+            return [api.deleteOMObject("lecture", event.id_in_videoag_system)];
         });
         Promise.allSettled(promises)
             .catch((e) => {
                 showError(e, "Unable to delete lectures");
             })
-            .then(reloadFunc);
+            .then(reloadFunc)
+            .finally(() => {
+                setLockedIds([]);
+            });
     };
 
     return (
@@ -187,11 +228,19 @@ function TerminBody({
                 </tbody>
             </table>
 
+            {lockedIds === undefined || lockedIds.length > 0 ? (
+                <div className="spinner-border mb-2" role="status" />
+            ) : null}
+
             <div className="card mb-2">
                 <div className="card-header d-flex align-items-center">
                     <span className="flex-grow-1">Im Import, nicht bei uns</span>
 
-                    <button className="btn btn-primary" onClick={importAllEvents}>
+                    <button
+                        className="btn btn-primary"
+                        onClick={importAllEvents}
+                        disabled={lockedIds === undefined || lockedIds.length > 0}
+                    >
                         Alle anlegen
                     </button>
                 </div>
@@ -219,6 +268,10 @@ function TerminBody({
                                         <button
                                             className="btn btn-primary"
                                             onClick={() => importEvent(event)}
+                                            disabled={
+                                                lockedIds === undefined ||
+                                                lockedIds.includes(event.locally_unique_id)
+                                            }
                                         >
                                             Anlegen
                                         </button>
@@ -233,7 +286,11 @@ function TerminBody({
                 <div className="card-header d-flex align-items-center">
                     <span className="flex-grow-1">Bei uns, nicht im Import</span>
 
-                    <button className="btn btn-primary" onClick={removeAllEvents}>
+                    <button
+                        className="btn btn-primary"
+                        onClick={removeAllEvents}
+                        disabled={lockedIds === undefined || lockedIds.length > 0}
+                    >
                         Alle entfernen
                     </button>
                 </div>
@@ -261,6 +318,10 @@ function TerminBody({
                                         <button
                                             className="btn btn-primary"
                                             onClick={() => removeEvent(event)}
+                                            disabled={
+                                                lockedIds === undefined ||
+                                                lockedIds.includes(event.locally_unique_id)
+                                            }
                                         >
                                             Entfernen
                                         </button>
@@ -350,8 +411,9 @@ function RWTHOnlineImportImpl() {
                 imported_courses.current.push(courseIdNr!);
                 const parsed = parseICal(ical);
                 // add id to events
-                parsed.forEach((event) => {
-                    event.foreign_id = courseIdNr;
+                parsed.forEach((event, idx) => {
+                    event.id_in_foreign_system = courseIdNr;
+                    event.locally_unique_id = "rwthonline_" + courseIdNr + "_" + idx;
                 });
                 // append
                 imported_events.current = imported_events.current.concat(parsed);
@@ -369,7 +431,7 @@ function RWTHOnlineImportImpl() {
 
         imported_courses.current = imported_courses.current.filter((id) => id !== courseId);
         imported_events.current = imported_events.current.filter(
-            (event) => event.foreign_id !== courseId,
+            (event) => event.id_in_foreign_system !== courseId,
         );
         doReRender((r) => r + 1);
     };