Show confirm close alert for unsaved changes
This commit is contained in:
1 parent
36798cfb5f
commit
c8a6eb4c72
10 files changed
+150
-66
No files matched your search
+27
-12
@@ -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
@@ -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
@@ -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();
|
||||
});
|
||||
@@ -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
@@ -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
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -120,6 +120,7 @@ const component: ClosureComponent = (): Component => {
|
||||
},
|
||||
onChange: (value) => {
|
||||
vnode.state["updatedYaml"] = value;
|
||||
vnode.state["modified"] = true;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
+21
-10
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in new issue
Block a user