Show confirm close alert for unsaved changes

This commit is contained in:
Zaid Abdulla committed 2020-10-25 13:37:35 -07:00
1 parent 36798cfb5f
commit c8a6eb4c72
10 files changed
+150 -66

No files matched your search

+27 -12
View File
@@ -147,8 +147,8 @@ function renderTable(confsResponse, searchString): Children {
{
title: "Edit config value",
onclick: () => {
const cb = (): Children => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -176,8 +176,13 @@ function renderTable(confsResponse, searchString): Children {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
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 => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -274,8 +279,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
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 => {
return m(
let cb: () => Children = null;
const comp = m(
uiConfigComponent,
Object.assign(
{
@@ -338,8 +348,13 @@ export const component: ClosureComponent = (): Component => {
attrs
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
`Edit ${sub.name}`
+9 -4
View File
@@ -221,8 +221,8 @@ export const component: ClosureComponent = (): Component => {
{
title: "Create new file",
onclick: () => {
const cb = (): Children => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -251,8 +251,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"
+14 -5
View File
@@ -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();
});
+9 -4
View File
@@ -285,8 +285,8 @@ export const component: ClosureComponent = (): Component => {
{
title: "Create new permission",
onclick: () => {
const cb = (): Children => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -315,8 +315,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"
+26 -15
View File
@@ -287,16 +287,8 @@ export const component: ClosureComponent = (): Component => {
"a",
{
onclick: () => {
const 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 m(
let cb: () => Children = null;
const comp = 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 => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -373,8 +379,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"
+18 -8
View File
@@ -207,8 +207,8 @@ export const component: ClosureComponent = (): Component => {
"a",
{
onclick: () => {
const cb = (): Children => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -238,8 +238,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
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 => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -285,8 +290,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"
+7
View File
@@ -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,
};
}
+1
View File
@@ -120,6 +120,7 @@ const component: ClosureComponent = (): Component => {
},
onChange: (value) => {
vnode.state["updatedYaml"] = value;
vnode.state["modified"] = true;
},
};
+21 -10
View File
@@ -237,9 +237,8 @@ export const component: ClosureComponent = (): Component => {
"a",
{
onclick: () => {
const cb = (): Children => {
const children = [
m(
let cb: () => Children = null;
const comp = 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 => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -347,8 +353,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"
+18 -8
View File
@@ -207,8 +207,8 @@ export const component: ClosureComponent = (): Component => {
"a",
{
onclick: () => {
const cb = (): Children => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -238,8 +238,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
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 => {
return m(
let cb: () => Children = null;
const comp = m(
putFormComponent,
Object.assign(
{
@@ -285,8 +290,13 @@ export const component: ClosureComponent = (): Component => {
formData
)
);
};
overlay.open(cb);
cb = () => comp;
overlay.open(
cb,
() =>
!comp.state["current"]["modified"] ||
confirm("You have unsaved changes. Close anyway?")
);
},
},
"New"