rodrigo/genieacs
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reusable index table component

Browse Source
This commit is contained in:
Shweelan Samson authored and Zaid Abdulla committed 2019-06-05 00:17:36 -07:00
1 parent ba8aa8cffc
commit 53032c83f1
9 files changed
+1361 -2056
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/virtual-parameters-page.ts
+162 -295
View File
@@ -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,274 +120,6 @@ 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"]);
}
},
disabled: !total
});
const labels = [m("th", selectAll)];
for (const attr of attributes) {
const label = attr.label;
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 virtualParameter of virtualParameters) {
const checkbox = m("input", {
type: "checkbox",
checked: selected.has(virtualParameter["_id"]),
onchange: e => {
if (e.target.checked) selected.add(virtualParameter["_id"]);
else selected.delete(virtualParameter["_id"]);
},
onclick: e => {
e.stopPropagation();
e.redraw = false;
}
});
const tds = [m("td", checkbox)];
for (const attr of attributes) {
if (attr.id === "script") {
const firstLines = virtualParameter[attr.id].split("\n", 11);
if (firstLines.length > 10) firstLines[10] = ["\ufe19"];
tds.push(
m("td", { title: firstLines.join("\n") }, firstLines[0] || "")
);
} else {
tds.push(m("td", virtualParameter[attr.id]));
}
}
tds.push(
m(
"td.table-row-links",
m(
"a",
{
onclick: () => {
const cb = (): Children => {
return m(
putFormComponent,
Object.assign(
{
base: virtualParameter,
actionHandler: (action, object) => {
return new Promise(resolve => {
putActionHandler(action, object, false)
.then(errors => {
const errorList = errors
? Object.values(errors)
: [];
if (errorList.length) {
for (const err of errorList)
notifications.push("error", err);
} else {
overlay.close(cb);
}
resolve();
})
.catch(err => {
notifications.push("error", err.message);
resolve();
});
});
}
},
formData
)
);
};
overlay.open(cb);
}
},
"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(
m(
"button.primary",
{
title: "Create new virtual parameter",
onclick: () => {
const cb = (): Children => {
return m(
putFormComponent,
Object.assign(
{
actionHandler: (action, object) => {
return new Promise(resolve => {
putActionHandler(action, object, true)
.then(errors => {
const errorList = errors
? Object.values(errors)
: [];
if (errorList.length) {
for (const err of errorList)
notifications.push("error", err);
} else {
overlay.close(cb);
}
resolve();
})
.catch(err => {
notifications.push("error", err.message);
resolve();
});
});
}
},
formData
)
);
};
overlay.open(cb);
}
},
"New"
)
);
}
return [
m(
"table.table.highlight",
m("thead", m("tr", labels)),
m("tbody", rows),
tfoot
),
m("div.actions-bar", buttons)
];
}
export const component: ClosureComponent = (): Component => {
return {
view: vnode => {
@@ -404,15 +137,27 @@ export const component: ClosureComponent = (): Component => {
m.route.set(m.route.get(), ops);
}
function onSortChange(sort): void {
const ops = { sort };
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);
}
const sort = vnode.attrs["sort"]
? memoizedJsonParse(vnode.attrs["sort"])
: {};
let filter = vnode.attrs["filter"]
? memoizedParse(vnode.attrs["filter"])
: true;
@@ -425,34 +170,156 @@ export const component: ClosureComponent = (): Component => {
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"]);
}
}
vnode.state["selected"] = selected;
const downloadUrl = getDownloadUrl(filter);
const attrs = {};
attrs["resource"] = "virtualParameters";
attrs["filter"] = vnode.attrs["filter"];
attrs["onChange"] = onFilterChanged;
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",
{
onclick: () => {
const cb = (): Children => {
return m(
putFormComponent,
Object.assign(
{
base: virtualParameter,
actionHandler: (action, object) => {
return new Promise(resolve => {
putActionHandler(action, object, false)
.then(errors => {
const errorList = errors
? Object.values(errors)
: [];
if (errorList.length) {
for (const err of errorList)
notifications.push("error", err);
} else {
overlay.close(cb);
}
resolve();
})
.catch(err => {
notifications.push("error", err.message);
resolve();
});
});
}
},
formData
)
);
};
overlay.open(cb);
}
},
"Show"
)
];
};
if (window.authorizer.hasAccess("virtualParameters", 3)) {
attrs["actionsCallback"] = (selected): Children => {
return [
m(
"button.primary",
{
title: "Create new virtual parameter",
onclick: () => {
const cb = (): Children => {
return m(
putFormComponent,
Object.assign(
{
actionHandler: (action, object) => {
return new Promise(resolve => {
putActionHandler(action, object, true)
.then(errors => {
const errorList = errors
? Object.values(errors)
: [];
if (errorList.length) {
for (const err of errorList)
notifications.push("error", err);
} else {
overlay.close(cb);
}
resolve();
})
.catch(err => {
notifications.push("error", err.message);
resolve();
});
});
}
},
formData
)
);
};
overlay.open(cb);
}
},
"New"
),
m(
"button.primary",
{
title: "Delete selected virtual parameters",
disabled: !selected.size,
onclick: e => {
if (
!confirm(
`Deleting ${
selected.size
} virtual parameters. Are you sure?`
)
)
return;
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"
)
];
};
}
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)
];
}
};