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 { m } from "./components";
|
||||
import config from "./config";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import filterComponent from "./filter-component";
|
||||
import * as store from "./store";
|
||||
import * as taskQueue from "./task-queue";
|
||||
import * as notifications from "./notifications";
|
||||
import { evaluate, extractParams } from "../lib/common/expression";
|
||||
import { parse, stringify } from "../lib/common/expression-parser";
|
||||
import { evaluate, extractParams } from "../lib/common/expression";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import * as smartQuery from "./smart-query";
|
||||
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 {
|
||||
const buttons = [];
|
||||
|
||||
@@ -332,13 +192,14 @@ function renderActions(selected): Children {
|
||||
)
|
||||
);
|
||||
|
||||
return m(".actions-bar", buttons);
|
||||
return buttons;
|
||||
}
|
||||
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Devices - GenieACS";
|
||||
const attributes = vnode.attrs["indexParameters"];
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
@@ -352,15 +213,34 @@ export const component: ClosureComponent = (): Component => {
|
||||
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"]
|
||||
? 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"]
|
||||
? memoizedParse(vnode.attrs["filter"])
|
||||
: true;
|
||||
@@ -372,39 +252,49 @@ export const component: ClosureComponent = (): Component => {
|
||||
});
|
||||
const count = store.count("devices", filter);
|
||||
|
||||
const selected = new Set();
|
||||
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(filter, attributes);
|
||||
|
||||
const downloadUrl = getDownloadUrl(
|
||||
filter,
|
||||
vnode.attrs["indexParameters"]
|
||||
const valueCallback = (attr, device): Children => {
|
||||
return m.context(
|
||||
{ device: device, parameter: attr.parameter },
|
||||
attr.type || "parameter",
|
||||
attr
|
||||
);
|
||||
};
|
||||
|
||||
const attrs = {};
|
||||
attrs["resource"] = "devices";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = devs.value;
|
||||
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 [
|
||||
m("h1", "Listing devices"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
devs,
|
||||
vnode.attrs["indexParameters"],
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
),
|
||||
renderActions(selected)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+92
-192
@@ -1,6 +1,7 @@
|
||||
import { ClosureComponent, Component, Children } from "mithril";
|
||||
import { m } from "./components";
|
||||
import config from "./config";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import filterComponent from "./filter-component";
|
||||
import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
@@ -19,7 +20,7 @@ const attributes = [
|
||||
{ id: "channel", label: "Channel" },
|
||||
{ id: "code", label: "Code" },
|
||||
{ id: "message", label: "Message" },
|
||||
{ id: "detail", label: "Detail", unsortable: true },
|
||||
{ id: "detail", label: "Detail" },
|
||||
{ id: "retries", label: "Retries" },
|
||||
{ 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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
@@ -245,15 +81,29 @@ export const component: ClosureComponent = (): Component => {
|
||||
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"]
|
||||
? 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"]
|
||||
? memoizedParse(vnode.attrs["filter"])
|
||||
: true;
|
||||
@@ -265,32 +115,82 @@ export const component: ClosureComponent = (): Component => {
|
||||
});
|
||||
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 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 = {};
|
||||
attrs["resource"] = "faults";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = faults.value;
|
||||
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 [
|
||||
m("h1", "Listing faults"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
faults,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+96
-209
@@ -6,6 +6,7 @@ import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import * as overlay from "./overlay";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -129,150 +130,70 @@ export function init(args): Promise<{}> {
|
||||
return Promise.resolve({ filter, sort });
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
filesResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Files - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
},
|
||||
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)];
|
||||
for (const attr of attributes) {
|
||||
const label = attr.label;
|
||||
const count = store.count("files", filter);
|
||||
|
||||
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 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"
|
||||
)
|
||||
];
|
||||
const attrs = {};
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = files.value;
|
||||
attrs["total"] = count.value;
|
||||
attrs["showMoreCallback"] = showMore;
|
||||
attrs["sortAttributes"] = sortAttributes;
|
||||
attrs["onSortChange"] = onSortChange;
|
||||
attrs["downloadUrl"] = downloadUrl;
|
||||
|
||||
if (window.authorizer.hasAccess("files", 3)) {
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -313,87 +234,53 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Files - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
|
||||
function onFilterChanged(filter): void {
|
||||
const ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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
|
||||
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());
|
||||
});
|
||||
|
||||
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 attrs = {};
|
||||
attrs["resource"] = "files";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "files";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing files"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
files,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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 memoize from "../lib/common/memoize";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import * as overlay from "./overlay";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -35,14 +36,14 @@ const attributes = [
|
||||
"virtualParameters"
|
||||
]
|
||||
},
|
||||
{ id: "filter", label: "Filter", unsortable: true },
|
||||
{ id: "filter", label: "Filter" },
|
||||
{
|
||||
id: "access",
|
||||
label: "Access",
|
||||
type: "combo",
|
||||
options: ["1: count", "2: read", "3: write"]
|
||||
},
|
||||
{ id: "validate", label: "Validate", unsortable: true }
|
||||
{ id: "validate", label: "Validate" }
|
||||
];
|
||||
|
||||
const unpackSmartQuery = memoize(query => {
|
||||
@@ -155,191 +156,110 @@ export function init(args): Promise<{}> {
|
||||
return Promise.resolve({ filter, sort });
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
permissionsResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Permissions - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
},
|
||||
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)];
|
||||
for (const attr of attributes) {
|
||||
const label = attr.label;
|
||||
const count = store.count("permissions", filter);
|
||||
|
||||
if (attr.unsortable) {
|
||||
labels.push(m("th", label));
|
||||
continue;
|
||||
}
|
||||
const downloadUrl = getDownloadUrl(filter);
|
||||
|
||||
let direction = 1;
|
||||
|
||||
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];
|
||||
const valueCallback = (attr, permission): Children => {
|
||||
if (attr.id === "access") {
|
||||
if (val === 1) val = "1: count";
|
||||
else if (val === 2) val = "2: read";
|
||||
else if (val === 3) val = "3: write";
|
||||
}
|
||||
tds.push(m("td", val));
|
||||
const val = permission["access"];
|
||||
if (val === 1) return "1: count";
|
||||
else if (val === 2) return "2: read";
|
||||
else if (val === 3) return "3: write";
|
||||
return val;
|
||||
}
|
||||
|
||||
tds.push(
|
||||
m(
|
||||
"td.table-row-links",
|
||||
return permission[attr.id];
|
||||
};
|
||||
|
||||
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(
|
||||
"button",
|
||||
{
|
||||
title: "Delete permission",
|
||||
onclick: () => {
|
||||
if (
|
||||
!confirm(`Deleting ${permission._id} permission. Are you sure?`)
|
||||
!confirm(
|
||||
`Deleting ${permission._id} permission. Are you sure?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
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)) {
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -380,87 +300,55 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Permissions - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
|
||||
function onFilterChanged(filter): void {
|
||||
const ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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
|
||||
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());
|
||||
});
|
||||
|
||||
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 attrs = {};
|
||||
attrs["resource"] = "permissions";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "permissions";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing permissions"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
permissions,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+140
-249
@@ -6,6 +6,7 @@ import * as overlay from "./overlay";
|
||||
import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -20,10 +21,10 @@ const attributes = [
|
||||
{ id: "channel", label: "Channel" },
|
||||
{ id: "weight", label: "Weight" },
|
||||
{ id: "schedule", label: "Schedule" },
|
||||
{ id: "events", label: "Events", unsortable: true },
|
||||
{ id: "precondition", label: "Precondition", unsortable: true },
|
||||
{ id: "provision", label: "Provision", type: "combo", unsortable: true },
|
||||
{ id: "provisionArgs", label: "Arguments", unsortable: true }
|
||||
{ id: "events", label: "Events" },
|
||||
{ id: "precondition", label: "Precondition" },
|
||||
{ id: "provision", label: "Provision", type: "combo" },
|
||||
{ id: "provisionArgs", label: "Arguments" }
|
||||
];
|
||||
|
||||
const unpackSmartQuery = memoize(query => {
|
||||
@@ -122,73 +123,90 @@ export function init(args): Promise<{}> {
|
||||
return Promise.resolve({ filter, sort });
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
presetsResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
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();
|
||||
}
|
||||
},
|
||||
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) {
|
||||
const label = attr.label;
|
||||
for (const p of provisions.value) provisionIds.add(p["_id"]);
|
||||
|
||||
if (attr.unsortable) {
|
||||
labels.push(m("th", label));
|
||||
continue;
|
||||
provisionAttr["options"] = Array.from(provisionIds);
|
||||
}
|
||||
|
||||
let direction = 1;
|
||||
|
||||
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 downloadUrl = getDownloadUrl(filter);
|
||||
|
||||
const valueCallback = (attr, preset): {} => {
|
||||
if (attr.id !== "precondition") return preset[attr.id];
|
||||
let devicesUrl = "/#!/devices";
|
||||
if (preset["precondition"].length) {
|
||||
devicesUrl += `?${m.buildQueryString({
|
||||
@@ -196,24 +214,24 @@ function renderTable(
|
||||
})}`;
|
||||
}
|
||||
|
||||
const tds = [m("td", checkbox)];
|
||||
for (const attr of attributes) {
|
||||
if (attr.id === "precondition") {
|
||||
tds.push(
|
||||
m(
|
||||
"td",
|
||||
{ title: preset[attr.id] },
|
||||
m("a", { href: devicesUrl }, preset[attr.id])
|
||||
)
|
||||
return m(
|
||||
"a",
|
||||
{ href: devicesUrl, title: preset["precondition"] },
|
||||
preset["precondition"]
|
||||
);
|
||||
} else {
|
||||
tds.push(m("td", preset[attr.id]));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
tds.push(
|
||||
m(
|
||||
"td.table-row-links",
|
||||
const attrs = {};
|
||||
attrs["attributes"] = attributes;
|
||||
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(
|
||||
"a",
|
||||
{
|
||||
@@ -255,85 +273,12 @@ function renderTable(
|
||||
},
|
||||
"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)) {
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -374,107 +319,53 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "presets";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing presets"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
presets,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+101
-226
@@ -6,6 +6,7 @@ import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import * as overlay from "./overlay";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -119,83 +120,68 @@ export function init(args): Promise<{}> {
|
||||
});
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
provisionsResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Provisions - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
},
|
||||
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)];
|
||||
for (const attr of attributes) {
|
||||
const label = attr.label;
|
||||
const count = store.count("provisions", filter);
|
||||
|
||||
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 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",
|
||||
const attrs = {};
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = provisions.value;
|
||||
attrs["total"] = count.value;
|
||||
attrs["showMoreCallback"] = showMore;
|
||||
attrs["sortAttributes"] = sortAttributes;
|
||||
attrs["onSortChange"] = onSortChange;
|
||||
attrs["downloadUrl"] = downloadUrl;
|
||||
attrs["recordActionsCallback"] = provision => {
|
||||
return [
|
||||
m(
|
||||
"a",
|
||||
{
|
||||
@@ -237,91 +223,12 @@ function renderTable(
|
||||
},
|
||||
"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)) {
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -362,87 +269,55 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Provisions - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
|
||||
function onFilterChanged(filter): void {
|
||||
const ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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
|
||||
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());
|
||||
});
|
||||
|
||||
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 attrs = {};
|
||||
attrs["resource"] = "provisions";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "provisions";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing provisions"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
provisions,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+115
-234
@@ -7,6 +7,7 @@ import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import * as overlay from "./overlay";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -21,13 +22,7 @@ const memoizedJsonParse = memoize(JSON.parse);
|
||||
|
||||
const attributes = [
|
||||
{ id: "_id", label: "Username" },
|
||||
{
|
||||
id: "roles",
|
||||
label: "Roles",
|
||||
type: "multi",
|
||||
options: [],
|
||||
unsortable: true
|
||||
}
|
||||
{ id: "roles", label: "Roles", type: "multi", options: [] }
|
||||
];
|
||||
|
||||
const unpackSmartQuery = memoize(query => {
|
||||
@@ -144,80 +139,82 @@ export function init(args): Promise<{}> {
|
||||
return Promise.resolve({ filter, sort });
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
usersResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Users - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
},
|
||||
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) {
|
||||
const label = attr.label;
|
||||
|
||||
if (attr.unsortable) {
|
||||
labels.push(m("th", label));
|
||||
continue;
|
||||
if (attr.id === "roles")
|
||||
attr.options = [...new Set(permissions.value.map(p => p.role))];
|
||||
}
|
||||
}
|
||||
|
||||
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 canWrite = window.authorizer.hasAccess("users", 3);
|
||||
|
||||
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 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",
|
||||
const attrs = {};
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = users.value;
|
||||
attrs["total"] = count.value;
|
||||
attrs["showMoreCallback"] = showMore;
|
||||
attrs["sortAttributes"] = sortAttributes;
|
||||
attrs["onSortChange"] = onSortChange;
|
||||
attrs["downloadUrl"] = downloadUrl;
|
||||
attrs["recordActionsCallback"] = user => {
|
||||
return [
|
||||
m(
|
||||
"a",
|
||||
{
|
||||
@@ -262,9 +259,9 @@ function renderTable(
|
||||
)
|
||||
];
|
||||
|
||||
if (canChangePasswords) {
|
||||
if (canWrite) {
|
||||
children.push(m("hr"));
|
||||
const attrs = {
|
||||
const _attrs = {
|
||||
noAuth: true,
|
||||
username: user._id,
|
||||
onPasswordChange: () => {
|
||||
@@ -272,7 +269,7 @@ function renderTable(
|
||||
m.redraw();
|
||||
}
|
||||
};
|
||||
children.push(m(changePasswordComponent, attrs));
|
||||
children.push(m(changePasswordComponent, _attrs));
|
||||
}
|
||||
|
||||
return children;
|
||||
@@ -282,84 +279,10 @@ function renderTable(
|
||||
},
|
||||
"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 = {
|
||||
resource: "users",
|
||||
attributes: [
|
||||
@@ -369,7 +292,8 @@ function renderTable(
|
||||
attributes[1]
|
||||
]
|
||||
};
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -410,96 +334,53 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Users - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
|
||||
function onFilterChanged(filter): void {
|
||||
const ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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
|
||||
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());
|
||||
});
|
||||
|
||||
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();
|
||||
if (vnode.state["selected"]) {
|
||||
for (const user of users.value) {
|
||||
if (vnode.state["selected"].has(user["_id"]))
|
||||
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;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "users";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing users"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
users,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
+103
-236
@@ -6,6 +6,7 @@ import * as store from "./store";
|
||||
import * as notifications from "./notifications";
|
||||
import memoize from "../lib/common/memoize";
|
||||
import putFormComponent from "./put-form-component";
|
||||
import indexTableComponent from "./index-table-component";
|
||||
import * as overlay from "./overlay";
|
||||
import * as smartQuery from "./smart-query";
|
||||
import { map, parse, stringify } from "../lib/common/expression-parser";
|
||||
@@ -119,84 +120,68 @@ export function init(args): Promise<{}> {
|
||||
});
|
||||
}
|
||||
|
||||
function renderTable(
|
||||
virtualParametersResponse,
|
||||
total,
|
||||
selected,
|
||||
showMoreCallback,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
): Children {
|
||||
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"]);
|
||||
export const component: ClosureComponent = (): Component => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Virtual Parameters - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
},
|
||||
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)];
|
||||
for (const attr of attributes) {
|
||||
const label = attr.label;
|
||||
const count = store.count("virtualParameters", filter);
|
||||
|
||||
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 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",
|
||||
const attrs = {};
|
||||
attrs["attributes"] = attributes;
|
||||
attrs["data"] = virtualParameters.value;
|
||||
attrs["total"] = count.value;
|
||||
attrs["showMoreCallback"] = showMore;
|
||||
attrs["sortAttributes"] = sortAttributes;
|
||||
attrs["onSortChange"] = onSortChange;
|
||||
attrs["downloadUrl"] = downloadUrl;
|
||||
attrs["recordActionsCallback"] = virtualParameter => {
|
||||
return [
|
||||
m(
|
||||
"a",
|
||||
{
|
||||
@@ -238,100 +223,12 @@ function renderTable(
|
||||
},
|
||||
"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)) {
|
||||
buttons.push(
|
||||
attrs["actionsCallback"] = (selected): Children => {
|
||||
return [
|
||||
m(
|
||||
"button.primary",
|
||||
{
|
||||
@@ -372,87 +269,57 @@ function renderTable(
|
||||
}
|
||||
},
|
||||
"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 => {
|
||||
return {
|
||||
view: vnode => {
|
||||
document.title = "Virtual Parameters - GenieACS";
|
||||
|
||||
function showMore(): void {
|
||||
vnode.state["showCount"] =
|
||||
(vnode.state["showCount"] || PAGE_SIZE) + PAGE_SIZE;
|
||||
m.redraw();
|
||||
}
|
||||
|
||||
function onFilterChanged(filter): void {
|
||||
const ops = { filter };
|
||||
if (vnode.attrs["sort"]) ops["sort"] = vnode.attrs["sort"];
|
||||
m.route.set(m.route.get(), ops);
|
||||
}
|
||||
|
||||
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
|
||||
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());
|
||||
});
|
||||
|
||||
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 attrs = {};
|
||||
attrs["resource"] = "virtualParameters";
|
||||
attrs["filter"] = vnode.attrs["filter"];
|
||||
attrs["onChange"] = onFilterChanged;
|
||||
const filterAttrs = {};
|
||||
filterAttrs["resource"] = "virtualParameters";
|
||||
filterAttrs["filter"] = vnode.attrs["filter"];
|
||||
filterAttrs["onChange"] = onFilterChanged;
|
||||
|
||||
return [
|
||||
m("h1", "Listing virtual parameters"),
|
||||
m(filterComponent, attrs),
|
||||
renderTable(
|
||||
virtualParameters,
|
||||
count.value,
|
||||
selected,
|
||||
showMore,
|
||||
downloadUrl,
|
||||
sort,
|
||||
onSortChange
|
||||
)
|
||||
m(filterComponent, filterAttrs),
|
||||
m(indexTableComponent, attrs)
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user