Reusable index table component
This commit is contained in:
Shweelan Samson authored and 
Zaid Abdulla committed
1 parent
ba8aa8cffc
commit
53032c83f1
9 files changed
+1060
-1755
No files matched your search
+65
-175
@@ -1,12 +1,13 @@
|
|||||||
import { ClosureComponent, Component, Children } from "mithril";
|
import { ClosureComponent, Component, Children } from "mithril";
|
||||||
import { m } from "./components";
|
import { m } from "./components";
|
||||||
import config from "./config";
|
import config from "./config";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import filterComponent from "./filter-component";
|
import filterComponent from "./filter-component";
|
||||||
import * as store from "./store";
|
import * as store from "./store";
|
||||||
import * as taskQueue from "./task-queue";
|
import * as taskQueue from "./task-queue";
|
||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import { evaluate, extractParams } from "../lib/common/expression";
|
|
||||||
import { parse, stringify } from "../lib/common/expression-parser";
|
import { parse, stringify } from "../lib/common/expression-parser";
|
||||||
|
import { evaluate, extractParams } from "../lib/common/expression";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import * as expressionParser from "../lib/common/expression-parser";
|
import * as expressionParser from "../lib/common/expression-parser";
|
||||||
@@ -53,147 +54,6 @@ export function init(args): Promise<{}> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
|
||||||
devicesResponse,
|
|
||||||
parameters,
|
|
||||||
total,
|
|
||||||
selected,
|
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
): Children {
|
|
||||||
const devices = devicesResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: devices.length && selected.size === devices.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const d of devices) {
|
|
||||||
if (e.target.checked) selected.add(d["DeviceID.ID"].value[0]);
|
|
||||||
else selected.delete(d["DeviceID.ID"].value[0]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
disabled: !total
|
|
||||||
});
|
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
|
||||||
for (const param of parameters) {
|
|
||||||
const label = param.label;
|
|
||||||
let _param;
|
|
||||||
if (!param.unsortable && (_param = memoizedGetSortable(param.parameter))) {
|
|
||||||
let direction = 1;
|
|
||||||
|
|
||||||
let symbol = "\u2981";
|
|
||||||
if (sort[_param] > 0) symbol = "\u2bc6";
|
|
||||||
else if (sort[_param] < 0) symbol = "\u2bc5";
|
|
||||||
|
|
||||||
const sortable = m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
onclick: () => {
|
|
||||||
if (sort[_param] > 0) direction *= -1;
|
|
||||||
return onSortChange(JSON.stringify({ [_param]: direction }));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
} else {
|
|
||||||
labels.push(m("th", label));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const device of devices) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(device["DeviceID.ID"].value[0]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(device["DeviceID.ID"].value[0]);
|
|
||||||
else selected.delete(device["DeviceID.ID"].value[0]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(device["DeviceID.ID"].value[0]))
|
|
||||||
selected.add(device["DeviceID.ID"].value[0]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
m("td", checkbox),
|
|
||||||
parameters.map(p => {
|
|
||||||
const comp = m.context(
|
|
||||||
{ device: device, parameter: p.parameter },
|
|
||||||
p.type || "parameter",
|
|
||||||
p
|
|
||||||
);
|
|
||||||
return m("td", comp);
|
|
||||||
}),
|
|
||||||
m(
|
|
||||||
"td.table-row-links",
|
|
||||||
m(
|
|
||||||
"a",
|
|
||||||
{
|
|
||||||
href: `#!/devices/${encodeURIComponent(
|
|
||||||
device["DeviceID.ID"].value[0]
|
|
||||||
)}`
|
|
||||||
},
|
|
||||||
"Show"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length) {
|
|
||||||
rows.push(
|
|
||||||
m("tr.empty", m("td", { colspan: parameters.length + 1 }, "No devices"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${devices.length}/${total}`);
|
|
||||||
else footerElements.push(`${devices.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more devices",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: devices.length >= total || !devicesResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
return m("table.table.highlight", [
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderActions(selected): Children {
|
function renderActions(selected): Children {
|
||||||
const buttons = [];
|
const buttons = [];
|
||||||
|
|
||||||
@@ -332,13 +192,14 @@ function renderActions(selected): Children {
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
return m(".actions-bar", buttons);
|
return buttons;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
export const component: ClosureComponent = (): Component => {
|
||||||
return {
|
return {
|
||||||
view: vnode => {
|
view: vnode => {
|
||||||
document.title = "Devices - GenieACS";
|
document.title = "Devices - GenieACS";
|
||||||
|
const attributes = vnode.attrs["indexParameters"];
|
||||||
|
|
||||||
function showMore(): void {
|
function showMore(): void {
|
||||||
vnode.state["showCount"] =
|
vnode.state["showCount"] =
|
||||||
@@ -352,15 +213,34 @@ export const component: ClosureComponent = (): Component => {
|
|||||||
m.route.set("/devices", ops);
|
m.route.set("/devices", ops);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set("/devices", ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
const sort = vnode.attrs["sort"]
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
: {};
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
if (attr.unsortable) continue;
|
||||||
|
const param = memoizedGetSortable(attr.parameter);
|
||||||
|
if (param) sortAttributes[i] = sort[param] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortChange(sortedAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortedAttrs)) {
|
||||||
|
const param = memoizedGetSortable(attributes[index].parameter);
|
||||||
|
if (param) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[param];
|
||||||
|
_sort[param] = direction;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
let filter = vnode.attrs["filter"]
|
let filter = vnode.attrs["filter"]
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
: true;
|
: true;
|
||||||
@@ -372,39 +252,49 @@ export const component: ClosureComponent = (): Component => {
|
|||||||
});
|
});
|
||||||
const count = store.count("devices", filter);
|
const count = store.count("devices", filter);
|
||||||
|
|
||||||
const selected = new Set();
|
const downloadUrl = getDownloadUrl(filter, attributes);
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const d of devs.value) {
|
|
||||||
if (vnode.state["selected"].has(d["DeviceID.ID"].value[0]))
|
|
||||||
selected.add(d["DeviceID.ID"].value[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(
|
const valueCallback = (attr, device): Children => {
|
||||||
filter,
|
return m.context(
|
||||||
vnode.attrs["indexParameters"]
|
{ device: device, parameter: attr.parameter },
|
||||||
|
attr.type || "parameter",
|
||||||
|
attr
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const attrs = {};
|
const attrs = {};
|
||||||
attrs["resource"] = "devices";
|
attrs["attributes"] = attributes;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
attrs["data"] = devs.value;
|
||||||
attrs["onChange"] = onFilterChanged;
|
attrs["total"] = count.value;
|
||||||
|
attrs["showMoreCallback"] = showMore;
|
||||||
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
|
attrs["onSortChange"] = onSortChange;
|
||||||
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
|
attrs["valueCallback"] = valueCallback;
|
||||||
|
attrs["recordActionsCallback"] = (device): Children => {
|
||||||
|
return m(
|
||||||
|
"a",
|
||||||
|
{
|
||||||
|
href: `#!/devices/${encodeURIComponent(
|
||||||
|
device["DeviceID.ID"].value[0]
|
||||||
|
)}`
|
||||||
|
},
|
||||||
|
"Show"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (window.authorizer.hasAccess("devices", 3))
|
||||||
|
attrs["actionsCallback"] = renderActions;
|
||||||
|
|
||||||
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "devices";
|
||||||
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing devices"),
|
m("h1", "Listing devices"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
devs,
|
|
||||||
vnode.attrs["indexParameters"],
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
),
|
|
||||||
renderActions(selected)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+92
-192
@@ -1,6 +1,7 @@
|
|||||||
import { ClosureComponent, Component, Children } from "mithril";
|
import { ClosureComponent, Component, Children } from "mithril";
|
||||||
import { m } from "./components";
|
import { m } from "./components";
|
||||||
import config from "./config";
|
import config from "./config";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import filterComponent from "./filter-component";
|
import filterComponent from "./filter-component";
|
||||||
import * as store from "./store";
|
import * as store from "./store";
|
||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
@@ -19,7 +20,7 @@ const attributes = [
|
|||||||
{ id: "channel", label: "Channel" },
|
{ id: "channel", label: "Channel" },
|
||||||
{ id: "code", label: "Code" },
|
{ id: "code", label: "Code" },
|
||||||
{ id: "message", label: "Message" },
|
{ id: "message", label: "Message" },
|
||||||
{ id: "detail", label: "Detail", unsortable: true },
|
{ id: "detail", label: "Detail" },
|
||||||
{ id: "retries", label: "Retries" },
|
{ id: "retries", label: "Retries" },
|
||||||
{ id: "timestamp", label: "Timestamp" }
|
{ id: "timestamp", label: "Timestamp" }
|
||||||
];
|
];
|
||||||
@@ -63,171 +64,6 @@ export function init(args): Promise<{}> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
|
||||||
faultsResponse,
|
|
||||||
total,
|
|
||||||
selected,
|
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
): Children {
|
|
||||||
const faults = faultsResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: faults.length && selected.size === faults.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const f of faults) {
|
|
||||||
if (e.target.checked) selected.add(f["_id"]);
|
|
||||||
else selected.delete(f["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
disabled: !total
|
|
||||||
});
|
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
if (attr.unsortable) {
|
|
||||||
labels.push(m("th", label));
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Offset direction by 1 since sort["_id"] = -1
|
|
||||||
let direction = 2;
|
|
||||||
|
|
||||||
let symbol = "\u2981";
|
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
|
||||||
|
|
||||||
const sortable = m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
onclick: () => {
|
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const f of faults) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(f["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(f["_id"]);
|
|
||||||
else selected.delete(f["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const deviceHref = `#!/devices/${encodeURIComponent(f["device"])}`;
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
if (attr.id === "device")
|
|
||||||
tds.push(m("td", m("a", { href: deviceHref }, f[attr.id])));
|
|
||||||
else if (attr.id === "timestamp")
|
|
||||||
tds.push(m("td", new Date(f[attr.id]).toLocaleString()));
|
|
||||||
else if (attr.id === "detail")
|
|
||||||
tds.push(m("td", m("long-text", { text: yaml.stringify(f[attr.id]) })));
|
|
||||||
else tds.push(m("td", f[attr.id]));
|
|
||||||
}
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(f["_id"])) selected.add(f["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length)
|
|
||||||
rows.push(m("tr.empty", m("td", { colspan: 7 }, "No faults")));
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${faults.length}/${total}`);
|
|
||||||
else footerElements.push(`${faults.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more faults",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: faults.length >= total || !faultsResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected faults",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id => store.deleteResource("faults", id))
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push("success", `${res.length} faults deleted`);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
|
||||||
buttons
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
export const component: ClosureComponent = (): Component => {
|
||||||
return {
|
return {
|
||||||
view: vnode => {
|
view: vnode => {
|
||||||
@@ -245,15 +81,29 @@ export const component: ClosureComponent = (): Component => {
|
|||||||
m.route.set("/faults", ops);
|
m.route.set("/faults", ops);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set("/faults", ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
const sort = vnode.attrs["sort"]
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
: {};
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
if (attr.id !== "detail") sortAttributes[i] = sort[attr.id] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
let filter = vnode.attrs["filter"]
|
let filter = vnode.attrs["filter"]
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
: true;
|
: true;
|
||||||
@@ -265,32 +115,82 @@ export const component: ClosureComponent = (): Component => {
|
|||||||
});
|
});
|
||||||
const count = store.count("faults", filter);
|
const count = store.count("faults", filter);
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const f of faults.value)
|
|
||||||
if (vnode.state["selected"].has(f["_id"])) selected.add(f["_id"]);
|
|
||||||
}
|
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
|
const valueCallback = (attr, fault): Children => {
|
||||||
|
if (attr.id === "device") {
|
||||||
|
const deviceHref = `#!/devices/${encodeURIComponent(
|
||||||
|
fault["device"]
|
||||||
|
)}`;
|
||||||
|
|
||||||
|
return m("a", { href: deviceHref }, fault["device"]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (attr.id === "detail")
|
||||||
|
return m("long-text", { text: yaml.stringify(fault["detail"]) });
|
||||||
|
|
||||||
|
if (attr.id === "timestamp")
|
||||||
|
return new Date(fault["timestamp"]).toLocaleString();
|
||||||
|
|
||||||
|
return fault[attr.id];
|
||||||
|
};
|
||||||
|
|
||||||
const attrs = {};
|
const attrs = {};
|
||||||
attrs["resource"] = "faults";
|
attrs["attributes"] = attributes;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
attrs["data"] = faults.value;
|
||||||
attrs["onChange"] = onFilterChanged;
|
attrs["valueCallback"] = valueCallback;
|
||||||
|
attrs["total"] = count.value;
|
||||||
|
attrs["showMoreCallback"] = showMore;
|
||||||
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
|
attrs["onSortChange"] = onSortChange;
|
||||||
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
|
|
||||||
|
if (window.authorizer.hasAccess("faults", 3)) {
|
||||||
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return m(
|
||||||
|
"button.primary",
|
||||||
|
{
|
||||||
|
disabled: selected.size === 0,
|
||||||
|
title: "Delete selected faults",
|
||||||
|
onclick: e => {
|
||||||
|
e.redraw = false;
|
||||||
|
e.target.disabled = true;
|
||||||
|
|
||||||
|
if (!confirm(`Deleting ${selected.size} faults. Are you sure?`))
|
||||||
|
return;
|
||||||
|
|
||||||
|
Promise.all(
|
||||||
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("faults", id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.then(res => {
|
||||||
|
notifications.push(
|
||||||
|
"success",
|
||||||
|
`${res.length} faults deleted`
|
||||||
|
);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "faults";
|
||||||
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing faults"),
|
m("h1", "Listing faults"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
faults,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+96
-209
@@ -6,6 +6,7 @@ import * as store from "./store";
|
|||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import * as overlay from "./overlay";
|
import * as overlay from "./overlay";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -129,150 +130,70 @@ export function init(args): Promise<{}> {
|
|||||||
return Promise.resolve({ filter, sort });
|
return Promise.resolve({ filter, sort });
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
filesResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Files - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const files = filesResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: files.length && selected.size === files.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const file of files) {
|
|
||||||
if (e.target.checked) selected.add(file["_id"]);
|
|
||||||
else selected.delete(file["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++)
|
||||||
|
sortAttributes[i] = sort[attributes[i].id] || 0;
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const files = store.fetch("files", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const count = store.count("files", filter);
|
||||||
for (const attr of attributes) {
|
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
let direction = 1;
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
let symbol = "\u2981";
|
const attrs = {};
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
attrs["attributes"] = attributes;
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
attrs["data"] = files.value;
|
||||||
|
attrs["total"] = count.value;
|
||||||
const sortable = m(
|
attrs["showMoreCallback"] = showMore;
|
||||||
"button",
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
{
|
attrs["onSortChange"] = onSortChange;
|
||||||
onclick: () => {
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const file of files) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(file["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(file["_id"]);
|
|
||||||
else selected.delete(file["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
if (attr.id === "script")
|
|
||||||
tds.push(m("td", { title: file[attr.id] }, file[attr.id]));
|
|
||||||
else tds.push(m("td", file[attr.id]));
|
|
||||||
}
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(file["_id"])) selected.add(file["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length)
|
|
||||||
rows.push(m("tr.empty", m("td", { colspan: labels.length }, "No files")));
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${files.length}/${total}`);
|
|
||||||
else footerElements.push(`${files.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more files",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: files.length >= total || !filesResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected files",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id => store.deleteResource("files", id))
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push("success", `${res.length} files deleted`);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("files", 3)) {
|
if (window.authorizer.hasAccess("files", 3)) {
|
||||||
buttons.push(
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -313,87 +234,53 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
];
|
"button.primary",
|
||||||
}
|
{
|
||||||
|
title: "Delete selected files",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(`Deleting ${selected.size} files. Are you sure?`)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
e.redraw = false;
|
||||||
return {
|
e.target.disabled = true;
|
||||||
view: vnode => {
|
Promise.all(
|
||||||
document.title = "Files - GenieACS";
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("files", id)
|
||||||
function showMore(): void {
|
)
|
||||||
vnode.state["showCount"] =
|
)
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
.then(res => {
|
||||||
m.redraw();
|
notifications.push(
|
||||||
}
|
"success",
|
||||||
|
`${res.length} files deleted`
|
||||||
function onFilterChanged(filter): void {
|
);
|
||||||
const ops = { filter };
|
store.fulfill(0, Date.now());
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
})
|
||||||
m.route.set(m.route.get(), ops);
|
.catch(err => {
|
||||||
}
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const files = store.fetch("files", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = store.count("files", filter);
|
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const file of files.value) {
|
|
||||||
if (vnode.state["selected"].has(file["_id"]))
|
|
||||||
selected.add(file["_id"]);
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
|
];
|
||||||
|
};
|
||||||
}
|
}
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "files";
|
||||||
const attrs = {};
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
attrs["resource"] = "files";
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing files"),
|
m("h1", "Listing files"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
files,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,226 @@
|
|||||||
|
import { ClosureComponent, Component, Children } from "mithril";
|
||||||
|
import { m } from "./components";
|
||||||
|
|
||||||
|
interface Attribute {
|
||||||
|
id?: string;
|
||||||
|
label: string;
|
||||||
|
type?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTable(
|
||||||
|
attributes: Attribute[],
|
||||||
|
data: Record<string, any>[],
|
||||||
|
total: number,
|
||||||
|
showMoreCallback: () => void,
|
||||||
|
selected: Set<string>,
|
||||||
|
sortAttributes: Record<string, any>,
|
||||||
|
onSortChange: (obj: Record<string, number>) => void,
|
||||||
|
downloadUrl?: string,
|
||||||
|
valueCallback?: (attr: Attribute, record: Record<string, any>) => Children,
|
||||||
|
actionsCallback?: Children | ((selected: Set<string>) => Children),
|
||||||
|
recordActionsCallback?: Children | ((record: Record<string, any>) => Children)
|
||||||
|
): Children {
|
||||||
|
const records = data || [];
|
||||||
|
const selectAll = m("input", {
|
||||||
|
type: "checkbox",
|
||||||
|
checked: records.length && selected.size === records.length,
|
||||||
|
onchange: e => {
|
||||||
|
for (const record of records) {
|
||||||
|
const id = record["_id"] || record["DeviceID.ID"].value[0];
|
||||||
|
if (e.target.checked) selected.add(id);
|
||||||
|
else selected.delete(id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled: !total
|
||||||
|
});
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
const labels = [m("th", selectAll)];
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
const label = attr.label;
|
||||||
|
if (!sortAttributes.hasOwnProperty(i)) {
|
||||||
|
labels.push(m("th", label));
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let direction = 1;
|
||||||
|
|
||||||
|
let symbol = "\u2981";
|
||||||
|
if (sortAttributes[i] > 0) symbol = "\u2bc6";
|
||||||
|
else if (sortAttributes[i] < 0) symbol = "\u2bc5";
|
||||||
|
|
||||||
|
const sortable = m(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
onclick: () => {
|
||||||
|
if (sortAttributes[i] > 0) direction *= -1;
|
||||||
|
return onSortChange({ [i]: direction });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
symbol
|
||||||
|
);
|
||||||
|
|
||||||
|
labels.push(m("th", [label, sortable]));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
const rows = [];
|
||||||
|
for (const record of records) {
|
||||||
|
const id = record["_id"] || record["DeviceID.ID"].value[0];
|
||||||
|
const checkbox = m("input", {
|
||||||
|
type: "checkbox",
|
||||||
|
checked: selected.has(id),
|
||||||
|
onchange: e => {
|
||||||
|
if (e.target.checked) selected.add(id);
|
||||||
|
else selected.delete(id);
|
||||||
|
},
|
||||||
|
onclick: e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.redraw = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tds = [m("td", checkbox)];
|
||||||
|
for (const attr of attributes) {
|
||||||
|
const attrs = {};
|
||||||
|
let valueComponent;
|
||||||
|
|
||||||
|
if (typeof valueCallback === "function") {
|
||||||
|
valueComponent = valueCallback(attr, record);
|
||||||
|
} else if (attr.type === "code") {
|
||||||
|
const firstLines = record[attr.id].split("\n", 11);
|
||||||
|
if (firstLines.length > 10) firstLines[10] = ["\ufe19"];
|
||||||
|
if (attrs["title"] == null) attrs["title"] = firstLines.join("\n");
|
||||||
|
valueComponent = firstLines[0] || "";
|
||||||
|
} else {
|
||||||
|
valueComponent = record[attr.id];
|
||||||
|
}
|
||||||
|
// TODO automatically add long text component on long values
|
||||||
|
|
||||||
|
tds.push(m("td", attrs, valueComponent));
|
||||||
|
}
|
||||||
|
|
||||||
|
let recordButtons: Children = [];
|
||||||
|
if (typeof recordActionsCallback === "function") {
|
||||||
|
recordButtons = recordActionsCallback(record);
|
||||||
|
if (!Array.isArray(recordButtons)) recordButtons = [recordButtons];
|
||||||
|
} else if (Array.isArray(recordActionsCallback)) {
|
||||||
|
recordButtons = recordActionsCallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const button of recordButtons)
|
||||||
|
tds.push(m("td.table-row-links", button));
|
||||||
|
|
||||||
|
rows.push(
|
||||||
|
m(
|
||||||
|
"tr",
|
||||||
|
{
|
||||||
|
onclick: e => {
|
||||||
|
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
||||||
|
e.redraw = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selected.delete(id)) selected.add(id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tds
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!rows.length)
|
||||||
|
rows.push(m("tr.empty", m("td", { colspan: labels.length }, "No records")));
|
||||||
|
|
||||||
|
// Table footer
|
||||||
|
const footerElements = [];
|
||||||
|
if (total != null) footerElements.push(`${records.length}/${total}`);
|
||||||
|
else footerElements.push(`${records.length}`);
|
||||||
|
|
||||||
|
footerElements.push(
|
||||||
|
m(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
title: "Show more records",
|
||||||
|
onclick: showMoreCallback,
|
||||||
|
disabled: !data.length || records.length >= total
|
||||||
|
},
|
||||||
|
"More"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (downloadUrl) {
|
||||||
|
footerElements.push(
|
||||||
|
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tfoot = m(
|
||||||
|
"tfoot",
|
||||||
|
m("tr", m("td", { colspan: labels.length }, footerElements))
|
||||||
|
);
|
||||||
|
|
||||||
|
// Actions bar
|
||||||
|
let buttons: Children = [];
|
||||||
|
if (typeof actionsCallback === "function") {
|
||||||
|
buttons = actionsCallback(selected);
|
||||||
|
if (!Array.isArray(buttons)) buttons = [buttons];
|
||||||
|
} else if (Array.isArray(actionsCallback)) {
|
||||||
|
buttons = actionsCallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
const children = [
|
||||||
|
m(
|
||||||
|
"table.table.highlight",
|
||||||
|
m("thead", m("tr", labels)),
|
||||||
|
m("tbody", rows),
|
||||||
|
tfoot
|
||||||
|
)
|
||||||
|
];
|
||||||
|
|
||||||
|
if (buttons.length) children.push(m("div.actions-bar", buttons));
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
const component: ClosureComponent = (): Component => {
|
||||||
|
let selected = new Set();
|
||||||
|
|
||||||
|
return {
|
||||||
|
view: vnode => {
|
||||||
|
const attributes = vnode.attrs["attributes"];
|
||||||
|
const data = vnode.attrs["data"];
|
||||||
|
const valueCallback = vnode.attrs["valueCallback"];
|
||||||
|
const total = vnode.attrs["total"];
|
||||||
|
const showMoreCallback = vnode.attrs["showMoreCallback"];
|
||||||
|
const sortAttributes = vnode.attrs["sortAttributes"];
|
||||||
|
const onSortChange = vnode.attrs["onSortChange"];
|
||||||
|
const downloadUrl = vnode.attrs["downloadUrl"];
|
||||||
|
const actionsCallback = vnode.attrs["actionsCallback"];
|
||||||
|
const recordActionsCallback = vnode.attrs["recordActionsCallback"];
|
||||||
|
|
||||||
|
const _selected = new Set();
|
||||||
|
for (const record of data) {
|
||||||
|
const id = record["_id"] || record["DeviceID.ID"].value[0];
|
||||||
|
if (selected.has(id)) _selected.add(id);
|
||||||
|
}
|
||||||
|
selected = _selected;
|
||||||
|
|
||||||
|
return renderTable(
|
||||||
|
attributes,
|
||||||
|
data,
|
||||||
|
total,
|
||||||
|
showMoreCallback,
|
||||||
|
selected,
|
||||||
|
sortAttributes,
|
||||||
|
onSortChange,
|
||||||
|
downloadUrl,
|
||||||
|
valueCallback,
|
||||||
|
actionsCallback,
|
||||||
|
recordActionsCallback
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default component;
|
||||||
+122
-234
@@ -7,6 +7,7 @@ import * as store from "./store";
|
|||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import * as overlay from "./overlay";
|
import * as overlay from "./overlay";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -35,14 +36,14 @@ const attributes = [
|
|||||||
"virtualParameters"
|
"virtualParameters"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ id: "filter", label: "Filter", unsortable: true },
|
{ id: "filter", label: "Filter" },
|
||||||
{
|
{
|
||||||
id: "access",
|
id: "access",
|
||||||
label: "Access",
|
label: "Access",
|
||||||
type: "combo",
|
type: "combo",
|
||||||
options: ["1: count", "2: read", "3: write"]
|
options: ["1: count", "2: read", "3: write"]
|
||||||
},
|
},
|
||||||
{ id: "validate", label: "Validate", unsortable: true }
|
{ id: "validate", label: "Validate" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const unpackSmartQuery = memoize(query => {
|
const unpackSmartQuery = memoize(query => {
|
||||||
@@ -155,191 +156,110 @@ export function init(args): Promise<{}> {
|
|||||||
return Promise.resolve({ filter, sort });
|
return Promise.resolve({ filter, sort });
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
permissionsResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Permissions - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const permissions = permissionsResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: permissions.length && selected.size === permissions.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const permission of permissions) {
|
|
||||||
if (e.target.checked) selected.add(permission["_id"]);
|
|
||||||
else selected.delete(permission["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
if (!(attr.id === "filter" || attr.id === "validate"))
|
||||||
|
sortAttributes[i] = sort[attr.id] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const permissions = store.fetch("permissions", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const count = store.count("permissions", filter);
|
||||||
for (const attr of attributes) {
|
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
if (attr.unsortable) {
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
labels.push(m("th", label));
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
let direction = 1;
|
const valueCallback = (attr, permission): Children => {
|
||||||
|
|
||||||
let symbol = "\u2981";
|
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
|
||||||
|
|
||||||
const sortable = m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
onclick: () => {
|
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const permission of permissions) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(permission["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(permission["_id"]);
|
|
||||||
else selected.delete(permission["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
let val = permission[attr.id];
|
|
||||||
if (attr.id === "access") {
|
if (attr.id === "access") {
|
||||||
if (val === 1) val = "1: count";
|
const val = permission["access"];
|
||||||
else if (val === 2) val = "2: read";
|
if (val === 1) return "1: count";
|
||||||
else if (val === 3) val = "3: write";
|
else if (val === 2) return "2: read";
|
||||||
}
|
else if (val === 3) return "3: write";
|
||||||
tds.push(m("td", val));
|
return val;
|
||||||
}
|
}
|
||||||
|
|
||||||
tds.push(
|
return permission[attr.id];
|
||||||
m(
|
};
|
||||||
"td.table-row-links",
|
|
||||||
|
const attrs = {};
|
||||||
|
attrs["attributes"] = attributes;
|
||||||
|
attrs["data"] = permissions.value;
|
||||||
|
attrs["total"] = count.value;
|
||||||
|
attrs["valueCallback"] = valueCallback;
|
||||||
|
attrs["showMoreCallback"] = showMore;
|
||||||
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
|
attrs["onSortChange"] = onSortChange;
|
||||||
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
|
|
||||||
|
if (window.authorizer.hasAccess("permissions", 3)) {
|
||||||
|
attrs["recordActionsCallback"] = permission => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button",
|
"button",
|
||||||
{
|
{
|
||||||
title: "Delete permission",
|
title: "Delete permission",
|
||||||
onclick: () => {
|
onclick: () => {
|
||||||
if (
|
if (
|
||||||
!confirm(`Deleting ${permission._id} permission. Are you sure?`)
|
!confirm(
|
||||||
|
`Deleting ${permission._id} permission. Are you sure?`
|
||||||
|
)
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
putActionHandler("delete", permission).catch(err => {
|
putActionHandler("delete", permission).catch(err => {
|
||||||
throw err;
|
notifications.push("error", err.message);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"✕"
|
"✕"
|
||||||
)
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(permission["_id"]))
|
|
||||||
selected.add(permission["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length) {
|
|
||||||
rows.push(
|
|
||||||
m("tr.empty", m("td", { colspan: labels.length }, "No permissions"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${permissions.length}/${total}`);
|
|
||||||
else footerElements.push(`${permissions.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more permissions",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: permissions.length >= total || !permissionsResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected permissions",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id =>
|
|
||||||
store.deleteResource("permissions", id)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push(
|
|
||||||
"success",
|
|
||||||
`${res.length} permissions deleted`
|
|
||||||
);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
|
};
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("permissions", 3)) {
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
buttons.push(
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -380,87 +300,55 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
];
|
"button.primary",
|
||||||
}
|
{
|
||||||
|
title: "Delete selected permissions",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(
|
||||||
|
`Deleting ${selected.size} permissions. Are you sure?`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
e.redraw = false;
|
||||||
return {
|
e.target.disabled = true;
|
||||||
view: vnode => {
|
Promise.all(
|
||||||
document.title = "Permissions - GenieACS";
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("permissions", id)
|
||||||
function showMore(): void {
|
)
|
||||||
vnode.state["showCount"] =
|
)
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
.then(res => {
|
||||||
m.redraw();
|
notifications.push(
|
||||||
}
|
"success",
|
||||||
|
`${res.length} permissions deleted`
|
||||||
function onFilterChanged(filter): void {
|
);
|
||||||
const ops = { filter };
|
store.fulfill(0, Date.now());
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
})
|
||||||
m.route.set(m.route.get(), ops);
|
.catch(err => {
|
||||||
}
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const permissions = store.fetch("permissions", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = store.count("permissions", filter);
|
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const permission of permissions.value) {
|
|
||||||
if (vnode.state["selected"].has(permission["_id"]))
|
|
||||||
selected.add(permission["_id"]);
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
|
];
|
||||||
|
};
|
||||||
}
|
}
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "permissions";
|
||||||
const attrs = {};
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
attrs["resource"] = "permissions";
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing permissions"),
|
m("h1", "Listing permissions"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
permissions,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+140
-249
@@ -6,6 +6,7 @@ import * as overlay from "./overlay";
|
|||||||
import * as store from "./store";
|
import * as store from "./store";
|
||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -20,10 +21,10 @@ const attributes = [
|
|||||||
{ id: "channel", label: "Channel" },
|
{ id: "channel", label: "Channel" },
|
||||||
{ id: "weight", label: "Weight" },
|
{ id: "weight", label: "Weight" },
|
||||||
{ id: "schedule", label: "Schedule" },
|
{ id: "schedule", label: "Schedule" },
|
||||||
{ id: "events", label: "Events", unsortable: true },
|
{ id: "events", label: "Events" },
|
||||||
{ id: "precondition", label: "Precondition", unsortable: true },
|
{ id: "precondition", label: "Precondition" },
|
||||||
{ id: "provision", label: "Provision", type: "combo", unsortable: true },
|
{ id: "provision", label: "Provision", type: "combo" },
|
||||||
{ id: "provisionArgs", label: "Arguments", unsortable: true }
|
{ id: "provisionArgs", label: "Arguments" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const unpackSmartQuery = memoize(query => {
|
const unpackSmartQuery = memoize(query => {
|
||||||
@@ -122,73 +123,90 @@ export function init(args): Promise<{}> {
|
|||||||
return Promise.resolve({ filter, sort });
|
return Promise.resolve({ filter, sort });
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
presetsResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Presets - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const presets = presetsResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: presets.length && selected.size === presets.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const preset of presets) {
|
|
||||||
if (e.target.checked) selected.add(preset["_id"]);
|
|
||||||
else selected.delete(preset["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
if (
|
||||||
|
!(
|
||||||
|
attr.id === "events" ||
|
||||||
|
attr.id === "precondition" ||
|
||||||
|
attr.id === "provision" ||
|
||||||
|
attr.id === "provisionArgs"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
sortAttributes[i] = sort[attr.id] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const presets = store.fetch("presets", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
|
});
|
||||||
|
const count = store.count("presets", filter);
|
||||||
|
|
||||||
|
const provisions = store.fetch("provisions", true);
|
||||||
|
if (provisions.fulfilled) {
|
||||||
|
const provisionAttr = attributes.find(attr => {
|
||||||
|
return attr.id === "provision";
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const provisionIds = new Set([
|
||||||
|
"refresh",
|
||||||
|
"value",
|
||||||
|
"tag",
|
||||||
|
"reboot",
|
||||||
|
"reset",
|
||||||
|
"download",
|
||||||
|
"instances"
|
||||||
|
]);
|
||||||
|
|
||||||
for (const attr of attributes) {
|
for (const p of provisions.value) provisionIds.add(p["_id"]);
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
if (attr.unsortable) {
|
provisionAttr["options"] = Array.from(provisionIds);
|
||||||
labels.push(m("th", label));
|
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let direction = 1;
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
let symbol = "\u2981";
|
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
|
||||||
|
|
||||||
const sortable = m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
onclick: () => {
|
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const preset of presets) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(preset["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(preset["_id"]);
|
|
||||||
else selected.delete(preset["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const valueCallback = (attr, preset): {} => {
|
||||||
|
if (attr.id !== "precondition") return preset[attr.id];
|
||||||
let devicesUrl = "/#!/devices";
|
let devicesUrl = "/#!/devices";
|
||||||
if (preset["precondition"].length) {
|
if (preset["precondition"].length) {
|
||||||
devicesUrl += `?${m.buildQueryString({
|
devicesUrl += `?${m.buildQueryString({
|
||||||
@@ -196,24 +214,24 @@ function renderTable(
|
|||||||
})}`;
|
})}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
return m(
|
||||||
for (const attr of attributes) {
|
"a",
|
||||||
if (attr.id === "precondition") {
|
{ href: devicesUrl, title: preset["precondition"] },
|
||||||
tds.push(
|
preset["precondition"]
|
||||||
m(
|
|
||||||
"td",
|
|
||||||
{ title: preset[attr.id] },
|
|
||||||
m("a", { href: devicesUrl }, preset[attr.id])
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
} else {
|
};
|
||||||
tds.push(m("td", preset[attr.id]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tds.push(
|
const attrs = {};
|
||||||
m(
|
attrs["attributes"] = attributes;
|
||||||
"td.table-row-links",
|
attrs["data"] = presets.value;
|
||||||
|
attrs["total"] = count.value;
|
||||||
|
attrs["showMoreCallback"] = showMore;
|
||||||
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
|
attrs["onSortChange"] = onSortChange;
|
||||||
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
|
attrs["valueCallback"] = valueCallback;
|
||||||
|
attrs["recordActionsCallback"] = preset => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
@@ -255,85 +273,12 @@ function renderTable(
|
|||||||
},
|
},
|
||||||
"Show"
|
"Show"
|
||||||
)
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(preset["_id"])) selected.add(preset["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length)
|
|
||||||
rows.push(m("tr.empty", m("td", { colspan: labels.length }, "No presets")));
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${presets.length}/${total}`);
|
|
||||||
else footerElements.push(`${presets.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more presets",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: presets.length >= total || !presetsResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected presets",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id => store.deleteResource("presets", id))
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push("success", `${res.length} presets deleted`);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
|
};
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("presets", 3)) {
|
if (window.authorizer.hasAccess("presets", 3)) {
|
||||||
buttons.push(
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -374,107 +319,53 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
|
"button.primary",
|
||||||
|
{
|
||||||
|
title: "Delete selected presets",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(`Deleting ${selected.size} presets. Are you sure?`)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
|
e.redraw = false;
|
||||||
|
e.target.disabled = true;
|
||||||
|
Promise.all(
|
||||||
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("presets", id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.then(res => {
|
||||||
|
notifications.push(
|
||||||
|
"success",
|
||||||
|
`${res.length} presets deleted`
|
||||||
|
);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
];
|
];
|
||||||
}
|
};
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
|
||||||
return {
|
|
||||||
view: vnode => {
|
|
||||||
document.title = "Presets - GenieACS";
|
|
||||||
|
|
||||||
function showMore(): void {
|
|
||||||
vnode.state["showCount"] =
|
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
|
||||||
m.redraw();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onFilterChanged(filter): void {
|
const filterAttrs = {};
|
||||||
const ops = { filter };
|
filterAttrs["resource"] = "presets";
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
m.route.set(m.route.get(), ops);
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
}
|
|
||||||
|
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const presets = store.fetch("presets", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
|
||||||
const count = store.count("presets", filter);
|
|
||||||
|
|
||||||
const provisions = store.fetch("provisions", true);
|
|
||||||
if (provisions.fulfilled) {
|
|
||||||
const provisionAttr = attributes.find(attr => {
|
|
||||||
return attr.id === "provision";
|
|
||||||
});
|
|
||||||
|
|
||||||
const provisionIds = new Set([
|
|
||||||
"refresh",
|
|
||||||
"value",
|
|
||||||
"tag",
|
|
||||||
"reboot",
|
|
||||||
"reset",
|
|
||||||
"download",
|
|
||||||
"instances"
|
|
||||||
]);
|
|
||||||
|
|
||||||
for (const p of provisions.value) provisionIds.add(p["_id"]);
|
|
||||||
|
|
||||||
provisionAttr["options"] = Array.from(provisionIds);
|
|
||||||
}
|
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const preset of presets.value) {
|
|
||||||
if (vnode.state["selected"].has(preset["_id"]))
|
|
||||||
selected.add(preset["_id"]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
|
||||||
|
|
||||||
const attrs = {};
|
|
||||||
attrs["resource"] = "presets";
|
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing presets"),
|
m("h1", "Listing presets"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
presets,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+101
-226
@@ -6,6 +6,7 @@ import * as store from "./store";
|
|||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import * as overlay from "./overlay";
|
import * as overlay from "./overlay";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -119,83 +120,68 @@ export function init(args): Promise<{}> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
provisionsResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Provisions - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const provisions = provisionsResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: provisions.length && selected.size === provisions.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const provision of provisions) {
|
|
||||||
if (e.target.checked) selected.add(provision["_id"]);
|
|
||||||
else selected.delete(provision["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++)
|
||||||
|
sortAttributes[i] = sort[attributes[i].id] || 0;
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const provisions = store.fetch("provisions", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const count = store.count("provisions", filter);
|
||||||
for (const attr of attributes) {
|
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
let direction = 1;
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
let symbol = "\u2981";
|
const attrs = {};
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
attrs["attributes"] = attributes;
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
attrs["data"] = provisions.value;
|
||||||
|
attrs["total"] = count.value;
|
||||||
const sortable = m(
|
attrs["showMoreCallback"] = showMore;
|
||||||
"button",
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
{
|
attrs["onSortChange"] = onSortChange;
|
||||||
onclick: () => {
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
attrs["recordActionsCallback"] = provision => {
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
return [
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const provision of provisions) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(provision["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(provision["_id"]);
|
|
||||||
else selected.delete(provision["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
if (attr.id === "script") {
|
|
||||||
const firstLines = provision[attr.id].split("\n", 11);
|
|
||||||
if (firstLines.length > 10) firstLines[10] = ["\ufe19"];
|
|
||||||
tds.push(
|
|
||||||
m("td", { title: firstLines.join("\n") }, firstLines[0] || "")
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
tds.push(m("td", provision[attr.id]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tds.push(
|
|
||||||
m(
|
|
||||||
"td.table-row-links",
|
|
||||||
m(
|
m(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
@@ -237,91 +223,12 @@ function renderTable(
|
|||||||
},
|
},
|
||||||
"Show"
|
"Show"
|
||||||
)
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(provision["_id"]))
|
|
||||||
selected.add(provision["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length) {
|
|
||||||
rows.push(
|
|
||||||
m("tr.empty", m("td", { colspan: labels.length }, "No provisions"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${provisions.length}/${total}`);
|
|
||||||
else footerElements.push(`${provisions.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more provisions",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: provisions.length >= total || !provisionsResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected provisions",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id =>
|
|
||||||
store.deleteResource("provisions", id)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push("success", `${res.length} provisions deleted`);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
|
};
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("provisions", 3)) {
|
if (window.authorizer.hasAccess("provisions", 3)) {
|
||||||
buttons.push(
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -362,87 +269,55 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
];
|
"button.primary",
|
||||||
}
|
{
|
||||||
|
title: "Delete selected provisions",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(
|
||||||
|
`Deleting ${selected.size} provisions. Are you sure?`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
e.redraw = false;
|
||||||
return {
|
e.target.disabled = true;
|
||||||
view: vnode => {
|
Promise.all(
|
||||||
document.title = "Provisions - GenieACS";
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("provisions", id)
|
||||||
function showMore(): void {
|
)
|
||||||
vnode.state["showCount"] =
|
)
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
.then(res => {
|
||||||
m.redraw();
|
notifications.push(
|
||||||
}
|
"success",
|
||||||
|
`${res.length} provisions deleted`
|
||||||
function onFilterChanged(filter): void {
|
);
|
||||||
const ops = { filter };
|
store.fulfill(0, Date.now());
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
})
|
||||||
m.route.set(m.route.get(), ops);
|
.catch(err => {
|
||||||
}
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const provisions = store.fetch("provisions", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = store.count("provisions", filter);
|
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const provision of provisions.value) {
|
|
||||||
if (vnode.state["selected"].has(provision["_id"]))
|
|
||||||
selected.add(provision["_id"]);
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
|
];
|
||||||
|
};
|
||||||
}
|
}
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "provisions";
|
||||||
const attrs = {};
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
attrs["resource"] = "provisions";
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing provisions"),
|
m("h1", "Listing provisions"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
provisions,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+115
-234
@@ -7,6 +7,7 @@ import * as store from "./store";
|
|||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import * as overlay from "./overlay";
|
import * as overlay from "./overlay";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -21,13 +22,7 @@ const memoizedJsonParse = memoize(JSON.parse);
|
|||||||
|
|
||||||
const attributes = [
|
const attributes = [
|
||||||
{ id: "_id", label: "Username" },
|
{ id: "_id", label: "Username" },
|
||||||
{
|
{ id: "roles", label: "Roles", type: "multi", options: [] }
|
||||||
id: "roles",
|
|
||||||
label: "Roles",
|
|
||||||
type: "multi",
|
|
||||||
options: [],
|
|
||||||
unsortable: true
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const unpackSmartQuery = memoize(query => {
|
const unpackSmartQuery = memoize(query => {
|
||||||
@@ -144,80 +139,82 @@ export function init(args): Promise<{}> {
|
|||||||
return Promise.resolve({ filter, sort });
|
return Promise.resolve({ filter, sort });
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
usersResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Users - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const users = usersResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: users.length && selected.size === users.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const user of users) {
|
|
||||||
if (e.target.checked) selected.add(user["_id"]);
|
|
||||||
else selected.delete(user["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++) {
|
||||||
|
const attr = attributes[i];
|
||||||
|
if (attr.id !== "roles")
|
||||||
|
sortAttributes[i] = sort[attributes[i].id] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const users = store.fetch("users", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const count = store.count("users", filter);
|
||||||
|
|
||||||
|
// Getting the roles
|
||||||
|
const permissions = store.fetch("permissions", true);
|
||||||
|
if (permissions.fulfilled) {
|
||||||
for (const attr of attributes) {
|
for (const attr of attributes) {
|
||||||
const label = attr.label;
|
if (attr.id === "roles")
|
||||||
|
attr.options = [...new Set(permissions.value.map(p => p.role))];
|
||||||
if (attr.unsortable) {
|
}
|
||||||
labels.push(m("th", label));
|
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let direction = 1;
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
let symbol = "\u2981";
|
const canWrite = window.authorizer.hasAccess("users", 3);
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
|
||||||
|
|
||||||
const sortable = m(
|
const attrs = {};
|
||||||
"button",
|
attrs["attributes"] = attributes;
|
||||||
{
|
attrs["data"] = users.value;
|
||||||
onclick: () => {
|
attrs["total"] = count.value;
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
attrs["showMoreCallback"] = showMore;
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
}
|
attrs["onSortChange"] = onSortChange;
|
||||||
},
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
symbol
|
attrs["recordActionsCallback"] = user => {
|
||||||
);
|
return [
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const canChangePasswords = window.authorizer.hasAccess("users", 3);
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const user of users) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(user["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(user["_id"]);
|
|
||||||
else selected.delete(user["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) tds.push(m("td", user[attr.id]));
|
|
||||||
|
|
||||||
tds.push(
|
|
||||||
m(
|
|
||||||
"td.table-row-links",
|
|
||||||
m(
|
m(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
@@ -262,9 +259,9 @@ function renderTable(
|
|||||||
)
|
)
|
||||||
];
|
];
|
||||||
|
|
||||||
if (canChangePasswords) {
|
if (canWrite) {
|
||||||
children.push(m("hr"));
|
children.push(m("hr"));
|
||||||
const attrs = {
|
const _attrs = {
|
||||||
noAuth: true,
|
noAuth: true,
|
||||||
username: user._id,
|
username: user._id,
|
||||||
onPasswordChange: () => {
|
onPasswordChange: () => {
|
||||||
@@ -272,7 +269,7 @@ function renderTable(
|
|||||||
m.redraw();
|
m.redraw();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
children.push(m(changePasswordComponent, attrs));
|
children.push(m(changePasswordComponent, _attrs));
|
||||||
}
|
}
|
||||||
|
|
||||||
return children;
|
return children;
|
||||||
@@ -282,84 +279,10 @@ function renderTable(
|
|||||||
},
|
},
|
||||||
"Show"
|
"Show"
|
||||||
)
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(user["_id"])) selected.add(user["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length)
|
|
||||||
rows.push(m("tr.empty", m("td", { colspan: labels.length }, "No users")));
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null) footerElements.push(`${users.length}/${total}`);
|
|
||||||
else footerElements.push(`${users.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more users",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled: users.length >= total || !usersResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected users",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id => store.deleteResource("users", id))
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push("success", `${res.length} users deleted`);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
|
};
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("users", 3)) {
|
if (canWrite) {
|
||||||
const formData = {
|
const formData = {
|
||||||
resource: "users",
|
resource: "users",
|
||||||
attributes: [
|
attributes: [
|
||||||
@@ -369,7 +292,8 @@ function renderTable(
|
|||||||
attributes[1]
|
attributes[1]
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
buttons.push(
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -410,96 +334,53 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
];
|
"button.primary",
|
||||||
}
|
{
|
||||||
|
title: "Delete selected users",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(`Deleting ${selected.size} users. Are you sure?`)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
e.redraw = false;
|
||||||
return {
|
e.target.disabled = true;
|
||||||
view: vnode => {
|
Promise.all(
|
||||||
document.title = "Users - GenieACS";
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("users", id)
|
||||||
function showMore(): void {
|
)
|
||||||
vnode.state["showCount"] =
|
)
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
.then(res => {
|
||||||
m.redraw();
|
notifications.push(
|
||||||
}
|
"success",
|
||||||
|
`${res.length} users deleted`
|
||||||
function onFilterChanged(filter): void {
|
);
|
||||||
const ops = { filter };
|
store.fulfill(0, Date.now());
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
})
|
||||||
m.route.set(m.route.get(), ops);
|
.catch(err => {
|
||||||
}
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const users = store.fetch("users", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = store.count("users", filter);
|
|
||||||
|
|
||||||
// Getting the roles
|
|
||||||
const permissions = store.fetch("permissions", true);
|
|
||||||
if (permissions.fulfilled) {
|
|
||||||
for (const attr of attributes) {
|
|
||||||
if (attr.id === "roles")
|
|
||||||
attr.options = [...new Set(permissions.value.map(p => p.role))];
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
|
];
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const selected = new Set();
|
const filterAttrs = {};
|
||||||
if (vnode.state["selected"]) {
|
filterAttrs["resource"] = "users";
|
||||||
for (const user of users.value) {
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
if (vnode.state["selected"].has(user["_id"]))
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
selected.add(user["_id"]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
|
||||||
|
|
||||||
const attrs = {};
|
|
||||||
attrs["resource"] = "users";
|
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing users"),
|
m("h1", "Listing users"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
users,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
+103
-236
@@ -6,6 +6,7 @@ import * as store from "./store";
|
|||||||
import * as notifications from "./notifications";
|
import * as notifications from "./notifications";
|
||||||
import memoize from "../lib/common/memoize";
|
import memoize from "../lib/common/memoize";
|
||||||
import putFormComponent from "./put-form-component";
|
import putFormComponent from "./put-form-component";
|
||||||
|
import indexTableComponent from "./index-table-component";
|
||||||
import * as overlay from "./overlay";
|
import * as overlay from "./overlay";
|
||||||
import * as smartQuery from "./smart-query";
|
import * as smartQuery from "./smart-query";
|
||||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||||
@@ -119,84 +120,68 @@ export function init(args): Promise<{}> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(
|
export const component: ClosureComponent = (): Component => {
|
||||||
virtualParametersResponse,
|
return {
|
||||||
total,
|
view: vnode => {
|
||||||
selected,
|
document.title = "Virtual Parameters - GenieACS";
|
||||||
showMoreCallback,
|
|
||||||
downloadUrl,
|
function showMore(): void {
|
||||||
sort,
|
vnode.state["showCount"] =
|
||||||
onSortChange
|
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||||
): Children {
|
m.redraw();
|
||||||
const virtualParameters = virtualParametersResponse.value;
|
|
||||||
const selectAll = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked:
|
|
||||||
virtualParameters.length && selected.size === virtualParameters.length,
|
|
||||||
onchange: e => {
|
|
||||||
for (const virtualParameter of virtualParameters) {
|
|
||||||
if (e.target.checked) selected.add(virtualParameter["_id"]);
|
|
||||||
else selected.delete(virtualParameter["_id"]);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
disabled: !total
|
function onFilterChanged(filter): void {
|
||||||
|
const ops = { filter };
|
||||||
|
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sort = vnode.attrs["sort"]
|
||||||
|
? memoizedJsonParse(vnode.attrs["sort"])
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const sortAttributes = {};
|
||||||
|
for (let i = 0; i < attributes.length; i++)
|
||||||
|
sortAttributes[i] = sort[attributes[i].id] || 0;
|
||||||
|
|
||||||
|
function onSortChange(sortAttrs): void {
|
||||||
|
const _sort = Object.assign({}, sort);
|
||||||
|
for (const [index, direction] of Object.entries(sortAttrs)) {
|
||||||
|
// Changing the priority of columns
|
||||||
|
delete _sort[attributes[index].id];
|
||||||
|
_sort[attributes[index].id] = direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ops = { sort: JSON.stringify(_sort) };
|
||||||
|
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
||||||
|
m.route.set(m.route.get(), ops);
|
||||||
|
}
|
||||||
|
|
||||||
|
let filter = vnode.attrs["filter"]
|
||||||
|
? memoizedParse(vnode.attrs["filter"])
|
||||||
|
: true;
|
||||||
|
filter = unpackSmartQuery(filter);
|
||||||
|
|
||||||
|
const virtualParameters = store.fetch("virtualParameters", filter, {
|
||||||
|
limit: vnode.state["showCount"] || PAGE_SIZE,
|
||||||
|
sort: sort
|
||||||
});
|
});
|
||||||
|
|
||||||
const labels = [m("th", selectAll)];
|
const count = store.count("virtualParameters", filter);
|
||||||
for (const attr of attributes) {
|
|
||||||
const label = attr.label;
|
|
||||||
|
|
||||||
let direction = 1;
|
const downloadUrl = getDownloadUrl(filter);
|
||||||
|
|
||||||
let symbol = "\u2981";
|
const attrs = {};
|
||||||
if (sort[attr.id] > 0) symbol = "\u2bc6";
|
attrs["attributes"] = attributes;
|
||||||
else if (sort[attr.id] < 0) symbol = "\u2bc5";
|
attrs["data"] = virtualParameters.value;
|
||||||
|
attrs["total"] = count.value;
|
||||||
const sortable = m(
|
attrs["showMoreCallback"] = showMore;
|
||||||
"button",
|
attrs["sortAttributes"] = sortAttributes;
|
||||||
{
|
attrs["onSortChange"] = onSortChange;
|
||||||
onclick: () => {
|
attrs["downloadUrl"] = downloadUrl;
|
||||||
if (sort[attr.id] > 0) direction *= -1;
|
attrs["recordActionsCallback"] = virtualParameter => {
|
||||||
return onSortChange(JSON.stringify({ [attr.id]: direction }));
|
return [
|
||||||
}
|
|
||||||
},
|
|
||||||
symbol
|
|
||||||
);
|
|
||||||
|
|
||||||
labels.push(m("th", [label, sortable]));
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = [];
|
|
||||||
for (const virtualParameter of virtualParameters) {
|
|
||||||
const checkbox = m("input", {
|
|
||||||
type: "checkbox",
|
|
||||||
checked: selected.has(virtualParameter["_id"]),
|
|
||||||
onchange: e => {
|
|
||||||
if (e.target.checked) selected.add(virtualParameter["_id"]);
|
|
||||||
else selected.delete(virtualParameter["_id"]);
|
|
||||||
},
|
|
||||||
onclick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.redraw = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const tds = [m("td", checkbox)];
|
|
||||||
for (const attr of attributes) {
|
|
||||||
if (attr.id === "script") {
|
|
||||||
const firstLines = virtualParameter[attr.id].split("\n", 11);
|
|
||||||
if (firstLines.length > 10) firstLines[10] = ["\ufe19"];
|
|
||||||
tds.push(
|
|
||||||
m("td", { title: firstLines.join("\n") }, firstLines[0] || "")
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
tds.push(m("td", virtualParameter[attr.id]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tds.push(
|
|
||||||
m(
|
|
||||||
"td.table-row-links",
|
|
||||||
m(
|
m(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
@@ -238,100 +223,12 @@ function renderTable(
|
|||||||
},
|
},
|
||||||
"Show"
|
"Show"
|
||||||
)
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr",
|
|
||||||
{
|
|
||||||
onclick: e => {
|
|
||||||
if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
|
|
||||||
e.redraw = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!selected.delete(virtualParameter["_id"]))
|
|
||||||
selected.add(virtualParameter["_id"]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tds
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rows.length) {
|
|
||||||
rows.push(
|
|
||||||
m(
|
|
||||||
"tr.empty",
|
|
||||||
m("td", { colspan: labels.length }, "No virtual parameters")
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const footerElements = [];
|
|
||||||
if (total != null)
|
|
||||||
footerElements.push(`${virtualParameters.length}/${total}`);
|
|
||||||
else footerElements.push(`${virtualParameters.length}`);
|
|
||||||
|
|
||||||
footerElements.push(
|
|
||||||
m(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
title: "Show more virtual parameters",
|
|
||||||
onclick: showMoreCallback,
|
|
||||||
disabled:
|
|
||||||
virtualParameters.length >= total ||
|
|
||||||
!virtualParametersResponse.fulfilled
|
|
||||||
},
|
|
||||||
"More"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (downloadUrl) {
|
|
||||||
footerElements.push(
|
|
||||||
m("a.download-csv", { href: downloadUrl, download: "" }, "Download")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tfoot = m(
|
|
||||||
"tfoot",
|
|
||||||
m("tr", m("td", { colspan: labels.length }, footerElements))
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttons = [
|
|
||||||
m(
|
|
||||||
"button.primary",
|
|
||||||
{
|
|
||||||
title: "Delete selected virtual parameters",
|
|
||||||
disabled: !selected.size,
|
|
||||||
onclick: e => {
|
|
||||||
e.redraw = false;
|
|
||||||
e.target.disabled = true;
|
|
||||||
Promise.all(
|
|
||||||
Array.from(selected).map(id =>
|
|
||||||
store.deleteResource("virtualParameters", id)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.then(res => {
|
|
||||||
notifications.push(
|
|
||||||
"success",
|
|
||||||
`${res.length} virtual parameters deleted`
|
|
||||||
);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
notifications.push("error", err.message);
|
|
||||||
store.fulfill(0, Date.now());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"Delete"
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
|
};
|
||||||
|
|
||||||
if (window.authorizer.hasAccess("virtualParameters", 3)) {
|
if (window.authorizer.hasAccess("virtualParameters", 3)) {
|
||||||
buttons.push(
|
attrs["actionsCallback"] = (selected): Children => {
|
||||||
|
return [
|
||||||
m(
|
m(
|
||||||
"button.primary",
|
"button.primary",
|
||||||
{
|
{
|
||||||
@@ -372,87 +269,57 @@ function renderTable(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"New"
|
"New"
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
m(
|
|
||||||
"table.table.highlight",
|
|
||||||
m("thead", m("tr", labels)),
|
|
||||||
m("tbody", rows),
|
|
||||||
tfoot
|
|
||||||
),
|
),
|
||||||
m("div.actions-bar", buttons)
|
m(
|
||||||
];
|
"button.primary",
|
||||||
}
|
{
|
||||||
|
title: "Delete selected virtual parameters",
|
||||||
|
disabled: !selected.size,
|
||||||
|
onclick: e => {
|
||||||
|
if (
|
||||||
|
!confirm(
|
||||||
|
`Deleting ${
|
||||||
|
selected.size
|
||||||
|
} virtual parameters. Are you sure?`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
export const component: ClosureComponent = (): Component => {
|
e.redraw = false;
|
||||||
return {
|
e.target.disabled = true;
|
||||||
view: vnode => {
|
Promise.all(
|
||||||
document.title = "Virtual Parameters - GenieACS";
|
Array.from(selected).map(id =>
|
||||||
|
store.deleteResource("virtualParameters", id)
|
||||||
function showMore(): void {
|
)
|
||||||
vnode.state["showCount"] =
|
)
|
||||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
.then(res => {
|
||||||
m.redraw();
|
notifications.push(
|
||||||
}
|
"success",
|
||||||
|
`${res.length} virtual parameters deleted`
|
||||||
function onFilterChanged(filter): void {
|
);
|
||||||
const ops = { filter };
|
store.fulfill(0, Date.now());
|
||||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
})
|
||||||
m.route.set(m.route.get(), ops);
|
.catch(err => {
|
||||||
}
|
notifications.push("error", err.message);
|
||||||
|
store.fulfill(0, Date.now());
|
||||||
function onSortChange(sort): void {
|
|
||||||
const ops = { sort };
|
|
||||||
if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
|
|
||||||
m.route.set(m.route.get(), ops);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sort = vnode.attrs["sort"]
|
|
||||||
? memoizedJsonParse(vnode.attrs["sort"])
|
|
||||||
: {};
|
|
||||||
let filter = vnode.attrs["filter"]
|
|
||||||
? memoizedParse(vnode.attrs["filter"])
|
|
||||||
: true;
|
|
||||||
filter = unpackSmartQuery(filter);
|
|
||||||
|
|
||||||
const virtualParameters = store.fetch("virtualParameters", filter, {
|
|
||||||
limit: vnode.state["showCount"] || PAGE_SIZE,
|
|
||||||
sort: sort
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const count = store.count("virtualParameters", filter);
|
|
||||||
|
|
||||||
const selected = new Set();
|
|
||||||
if (vnode.state["selected"]) {
|
|
||||||
for (const virtualParameter of virtualParameters.value) {
|
|
||||||
if (vnode.state["selected"].has(virtualParameter["_id"]))
|
|
||||||
selected.add(virtualParameter["_id"]);
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"Delete"
|
||||||
|
)
|
||||||
|
];
|
||||||
|
};
|
||||||
}
|
}
|
||||||
vnode.state["selected"] = selected;
|
|
||||||
|
|
||||||
const downloadUrl = getDownloadUrl(filter);
|
const filterAttrs = {};
|
||||||
|
filterAttrs["resource"] = "virtualParameters";
|
||||||
const attrs = {};
|
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||||
attrs["resource"] = "virtualParameters";
|
filterAttrs["onChange"] = onFilterChanged;
|
||||||
attrs["filter"] = vnode.attrs["filter"];
|
|
||||||
attrs["onChange"] = onFilterChanged;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
m("h1", "Listing virtual parameters"),
|
m("h1", "Listing virtual parameters"),
|
||||||
m(filterComponent, attrs),
|
m(filterComponent, filterAttrs),
|
||||||
renderTable(
|
m(indexTableComponent, attrs)
|
||||||
virtualParameters,
|
|
||||||
count.value,
|
|
||||||
selected,
|
|
||||||
showMore,
|
|
||||||
downloadUrl,
|
|
||||||
sort,
|
|
||||||
onSortChange
|
|
||||||
)
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in new issue
Block a user