91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import "./ui_template_general_layout.css";
|
|
import { createButton, createCard } from "./ui_template_elements";
|
|
import { currentLanguageIndex, ui_locales } from "./ui_template_locale";
|
|
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
export function buildSectionHeader(
|
|
titleText: string,
|
|
actionButtons: HTMLElement[] = [],
|
|
): HTMLElement {
|
|
const header = document.createElement("div");
|
|
header.className = "ui-general-block__section-header b01-dashboard__section-header";
|
|
|
|
const title = document.createElement("h3");
|
|
title.className = "ui-card__title";
|
|
title.style.margin = "0";
|
|
title.textContent = titleText;
|
|
|
|
const actions = document.createElement("div");
|
|
actions.className = "ui-general-block__actions b01-dashboard__actions";
|
|
actions.append(...actionButtons);
|
|
|
|
header.append(title, actions);
|
|
return header;
|
|
}
|
|
|
|
export function section(
|
|
title: string,
|
|
body: HTMLElement,
|
|
wide = false,
|
|
actions: HTMLElement[] = [],
|
|
): HTMLElement {
|
|
const header = buildSectionHeader(title, actions);
|
|
const card = createCard({ body: [header, body], raised: true });
|
|
card.classList.add("ui-general-block__section", "b01-dashboard__section");
|
|
if (wide) card.classList.add("ui-general-block__section--wide", "b01-dashboard__section--wide");
|
|
return card;
|
|
}
|
|
|
|
export function table(headers: string[], rows: HTMLElement[][]): HTMLElement {
|
|
if (!rows.length) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "ui-general-block__empty b01-dashboard__empty";
|
|
empty.textContent = L("Common_Status_Empty");
|
|
return empty;
|
|
}
|
|
const wrap = document.createElement("div");
|
|
wrap.className = "ui-general-block__table-wrap b01-dashboard__table-wrap";
|
|
const tableEl = document.createElement("table");
|
|
tableEl.className = "ui-general-block__table b01-dashboard__table";
|
|
const thead = document.createElement("thead");
|
|
const headRow = document.createElement("tr");
|
|
for (const header of headers) {
|
|
const th = document.createElement("th");
|
|
th.textContent = header;
|
|
headRow.append(th);
|
|
}
|
|
thead.append(headRow);
|
|
const tbody = document.createElement("tbody");
|
|
for (const row of rows) {
|
|
const tr = document.createElement("tr");
|
|
for (const cell of row) {
|
|
const td = document.createElement("td");
|
|
td.append(cell);
|
|
tr.append(td);
|
|
}
|
|
tbody.append(tr);
|
|
}
|
|
tableEl.append(thead, tbody);
|
|
wrap.append(tableEl);
|
|
return wrap;
|
|
}
|
|
|
|
export function text(value: unknown): HTMLElement {
|
|
const span = document.createElement("span");
|
|
span.textContent = value == null || value === "" ? "-" : String(value);
|
|
return span;
|
|
}
|
|
|
|
export function actionPair(approve: () => void, reject: () => void): HTMLElement {
|
|
const row = document.createElement("div");
|
|
row.className = "ui-general-block__actions b01-dashboard__actions";
|
|
row.append(
|
|
createButton({ label: L("B01_Dashboard_Approve"), variant: "ghost", onClick: approve }),
|
|
createButton({ label: L("B01_Dashboard_Reject"), variant: "danger", onClick: reject }),
|
|
);
|
|
return row;
|
|
}
|