Show confirm close alert for unsaved changes

ui/config-page.ts

@@ -147,8 +147,8 @@ function renderTable(confsResponse, searchString): Children {
       {
         title: "Edit config value",
         onclick: () => {
-          const cb = (): Children => {
+          let cb: () => Children = null;
-            return m(
+          const comp = m(
             putFormComponent,
             Object.assign(
               {
@@ -176,8 +176,13 @@ function renderTable(confsResponse, searchString): Children {
               formData
             )
           );
-          };
+          cb = () => comp;
-          overlay.open(cb);
+          overlay.open(
+            cb,
+            () =>
+              !comp.state["current"]["modified"] ||
+              confirm("You have unsaved changes. Close anyway?")
+          );
         },
       },
       getIcon("edit")
@@ -244,8 +249,8 @@ export const component: ClosureComponent = (): Component => {
           {
             title: "Create new config",
             onclick: () => {
-              const cb = (): Children => {
+              let cb: () => Children = null;
-                return m(
+              const comp = m(
                 putFormComponent,
                 Object.assign(
                   {
@@ -274,8 +279,13 @@ export const component: ClosureComponent = (): Component => {
                   formData
                 )
               );
-              };
+              cb = () => comp;
-              overlay.open(cb);
+              overlay.open(
+                cb,
+                () =>
+                  !comp.state["current"]["modified"] ||
+                  confirm("You have unsaved changes. Close anyway?")
+              );
             },
           },
           "New config"
@@ -307,8 +317,8 @@ export const component: ClosureComponent = (): Component => {
               "button",
               {
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     uiConfigComponent,
                     Object.assign(
                       {
@@ -338,8 +348,13 @@ export const component: ClosureComponent = (): Component => {
                       attrs
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               `Edit ${sub.name}`

ui/files-page.ts

@@ -221,8 +221,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new file",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -251,8 +251,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"

ui/overlay.ts

@@ -20,16 +20,24 @@
 import m, { Children } from "mithril";
 
 type OverlayCallback = () => Children;
+type CloseCallback = () => boolean;
 
 let overlayCallback: OverlayCallback = null;
+let closeCallback: CloseCallback = null;
 
-export function open(callback: OverlayCallback): void {
+export function open(
+  callback: OverlayCallback,
+  closeCb: CloseCallback = null
+): void {
   overlayCallback = callback;
+  closeCallback = closeCb;
 }
 
-export function close(callback: OverlayCallback): boolean {
+export function close(callback: OverlayCallback, force = true): boolean {
   if (callback === overlayCallback) {
+    if (!force && closeCallback && !closeCallback()) return false;
     overlayCallback = null;
+    closeCallback = null;
     return true;
   }
 
@@ -43,7 +51,7 @@ export function render(): Children {
       {
         tabindex: 0,
         onclick: () => {
-          close(overlayCallback);
+          close(overlayCallback, false);
         },
         style: "opacity: 0",
         oncreate: (vnode) => {
@@ -75,9 +83,10 @@ export function render(): Children {
 }
 
 document.addEventListener("keydown", (e) => {
-  if (overlayCallback && e.keyCode === 27 && close(overlayCallback)) m.redraw();
+  if (overlayCallback && e.keyCode === 27 && close(overlayCallback, false))
+    m.redraw();
 });
 
 window.addEventListener("popstate", () => {
-  if (close(overlayCallback)) m.redraw();
+  if (close(overlayCallback, false)) m.redraw();
 });

ui/permissions-page.ts

@@ -285,8 +285,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new permission",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -315,8 +315,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"

ui/presets-page.ts

@@ -287,16 +287,8 @@ export const component: ClosureComponent = (): Component => {
             "a",
             {
               onclick: () => {
-                const cb = (): Children => {
+                let cb: () => Children = null;
-                  if (!preset.provision) {
+                const comp = m(
-                    return m(
-                      "div",
-                      { style: "margin:20px" },
-                      "This UI only supports presets with a single 'provision' configuraiton. If this preset was originally created from the old UI (genieacs-gui), you must edit it there."
-                    );
-                  }
-
-                  return m(
                   putFormComponent,
                   Object.assign(
                     {
@@ -326,8 +318,22 @@ export const component: ClosureComponent = (): Component => {
                     formData
                   )
                 );
+                cb = (): Children => {
+                  if (!preset.provision) {
+                    return m(
+                      "div",
+                      { style: "margin:20px" },
+                      "This UI only supports presets with a single 'provision' configuraiton. If this preset was originally created from the old UI (genieacs-gui), you must edit it there."
+                    );
+                  }
+                  return comp;
                 };
-                overlay.open(cb);
+                overlay.open(
+                  cb,
+                  () =>
+                    !comp.state["current"]["modified"] ||
+                    confirm("You have unsaved changes. Close anyway?")
+                );
               },
             },
             "Show"
@@ -343,8 +349,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new preset",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -373,8 +379,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"

ui/provisions-page.ts

@@ -207,8 +207,8 @@ export const component: ClosureComponent = (): Component => {
             "a",
             {
               onclick: () => {
-                const cb = (): Children => {
+                let cb: () => Children = null;
-                  return m(
+                const comp = m(
                   putFormComponent,
                   Object.assign(
                     {
@@ -238,8 +238,13 @@ export const component: ClosureComponent = (): Component => {
                     formData
                   )
                 );
-                };
+                cb = () => comp;
-                overlay.open(cb);
+                overlay.open(
+                  cb,
+                  () =>
+                    !comp.state["current"]["modified"] ||
+                    confirm("You have unsaved changes. Close anyway?")
+                );
               },
             },
             "Show"
@@ -255,8 +260,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new provision",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -285,8 +290,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"

ui/put-form-component.ts

@@ -56,6 +56,7 @@ function createField(current, attr, focus): Children {
           : null,
         onchange: (e) => {
           current.object[attr.id] = e.target.value;
+          current.modified = true;
           e.redraw = false;
         },
       },
@@ -80,6 +81,7 @@ function createField(current, attr, focus): Children {
           if (e.target.checked) currentSelected.add(op);
           else currentSelected.delete(op);
           current.object[attr.id] = Array.from(currentSelected);
+          current.modified = true;
           e.redraw = false;
         },
       };
@@ -98,6 +100,7 @@ function createField(current, attr, focus): Children {
       },
       onChange: (value) => {
         current.object[attr.id] = value;
+        current.modified = true;
       },
     };
     return m(codeEditorComponent, attrs);
@@ -112,6 +115,7 @@ function createField(current, attr, focus): Children {
         : null,
       onchange: (e) => {
         current.object[attr.id] = e.target.files;
+        current.modified = true;
         e.redraw = false;
       },
     });
@@ -132,6 +136,7 @@ function createField(current, attr, focus): Children {
         : null,
       oninput: (e) => {
         current.object[attr.id] = e.target.value;
+        current.modified = true;
         e.redraw = false;
       },
       onkeypress: (e) => {
@@ -158,6 +163,7 @@ function createField(current, attr, focus): Children {
       : null,
     oninput: (e) => {
       current.object[attr.id] = e.target.value;
+      current.modified = true;
       e.redraw = false;
     },
   });
@@ -174,6 +180,7 @@ const component: ClosureComponent = (): Component => {
         vnode.state["current"] = {
           isNew: !base["_id"],
           object: Object.assign({}, base),
+          modified: false,
         };
       }
 

ui/ui-config-component.ts

@@ -120,6 +120,7 @@ const component: ClosureComponent = (): Component => {
         },
         onChange: (value) => {
           vnode.state["updatedYaml"] = value;
+          vnode.state["modified"] = true;
         },
       };
 

ui/users-page.ts

@@ -237,9 +237,8 @@ export const component: ClosureComponent = (): Component => {
             "a",
             {
               onclick: () => {
-                const cb = (): Children => {
+                let cb: () => Children = null;
-                  const children = [
+                const comp = m(
-                    m(
                   putFormComponent,
                   Object.assign(
                     {
@@ -274,9 +273,10 @@ export const component: ClosureComponent = (): Component => {
                       attributes: attributes,
                     }
                   )
-                    ),
+                );
-                  ];
 
+                cb = () => {
+                  const children: Children = [comp];
                   if (canWrite) {
                     children.push(m("hr"));
                     const _attrs = {
@@ -292,7 +292,13 @@ export const component: ClosureComponent = (): Component => {
 
                   return children;
                 };
-                overlay.open(cb);
+
+                overlay.open(
+                  cb,
+                  () =>
+                    !comp.state["current"]["modified"] ||
+                    confirm("You have unsaved changes. Close anyway?")
+                );
               },
             },
             "Show"
@@ -317,8 +323,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new user",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -347,8 +353,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"

ui/virtual-parameters-page.ts

@@ -207,8 +207,8 @@ export const component: ClosureComponent = (): Component => {
             "a",
             {
               onclick: () => {
-                const cb = (): Children => {
+                let cb: () => Children = null;
-                  return m(
+                const comp = m(
                   putFormComponent,
                   Object.assign(
                     {
@@ -238,8 +238,13 @@ export const component: ClosureComponent = (): Component => {
                     formData
                   )
                 );
-                };
+                cb = () => comp;
-                overlay.open(cb);
+                overlay.open(
+                  cb,
+                  () =>
+                    !comp.state["current"]["modified"] ||
+                    confirm("You have unsaved changes. Close anyway?")
+                );
               },
             },
             "Show"
@@ -255,8 +260,8 @@ export const component: ClosureComponent = (): Component => {
               {
                 title: "Create new virtual parameter",
                 onclick: () => {
-                  const cb = (): Children => {
+                  let cb: () => Children = null;
-                    return m(
+                  const comp = m(
                     putFormComponent,
                     Object.assign(
                       {
@@ -285,8 +290,13 @@ export const component: ClosureComponent = (): Component => {
                       formData
                     )
                   );
-                  };
+                  cb = () => comp;
-                  overlay.open(cb);
+                  overlay.open(
+                    cb,
+                    () =>
+                      !comp.state["current"]["modified"] ||
+                      confirm("You have unsaved changes. Close anyway?")
+                  );
                 },
               },
               "New"