sccoreui
Version:
ui-sccore
99 lines (98 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const datatable_1 = require("primereact/datatable");
const column_1 = require("primereact/column");
const utils_1 = require("primereact/utils");
const ripple_1 = require("primereact/ripple");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const table_data_1 = require("./table-data");
const checkbox_1 = require("primereact/checkbox");
const avatargroup_1 = require("primereact/avatargroup");
const avatar_1 = require("primereact/avatar");
const progressbar_1 = require("primereact/progressbar");
const TableComponent = () => {
const statusTemplate1 = (rowData) => {
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-1 px-2 text-green-700 w-4rem text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " ", rowData.status] })));
};
const statusTemplate2 = (rowData) => {
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `bg-transparent border-round-2xl px-2 border-1 ${rowData.status === "Customer"
? "border-green-600 text-green-700"
: "border-gray-600 text-gray-700"}` }, { children: rowData.status })));
};
const emptyStateTemplate1 = () => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center h-20rem gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "warning-icon" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center gap-1" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-semibold text-gray-900 line-height-3 text-lg text-center m-0" }, { children: "Something went wrong..." })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal text-center m-0" }, { children: ["We had some trouble loading this page. Please refresh ", (0, jsx_runtime_1.jsx)("br", {}), " the page to try again or get in touch if the problem sticks ", (0, jsx_runtime_1.jsx)("br", {}), "around!"] }))] })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 mt-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, label: "Contact support" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Refresh Page" })] }))] })));
};
const nameHeaderTemplate = () => {
return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "text-sm text-gray-600 flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), "Name"] })));
};
const nameBodyTemplate = (rowData) => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false }), (0, jsx_runtime_1.jsx)("img", { src: rowData.image, className: "border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "line-height-2" }, { children: ["@", rowData.name.split(" ")[0]] }))] }))] })));
};
const roleHeaderTemplate = () => {
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-1" }, { children: ["Role ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle" })] })));
};
const teamsBodyTemplate = (rowData) => {
const { teams } = rowData;
return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex gap-1" }, { children: [teams.slice(0, 3).map((eachName) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${eachName === "Design"
? "bg-primary-50 text-primary-700"
: eachName === "Product"
? "bg-blue-50 text-blue-700"
: "bg-indigo-50 text-indigo-700"} text-sm font-medium border-round-2xl px-2` }, { children: eachName }), eachName))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-gray-100 border-round-2xl px-2 text-gray-700" }, { children: ["+", teams.length - 3] }))] })));
};
const actionButtonTemplate1 = () => {
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-trash" }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-pencil" })] })));
};
const actionButtonTemplate2 = () => {
return (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-ellipsis-v" });
};
const pagenatorTemplate = {
layout: "PrevPageLink PageLinks CurrentPageReport NextPageLink",
PrevPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
},
PageLinks: (options) => {
if ((options.view.startPage === options.page &&
options.view.startPage !== 0) ||
(options.view.endPage === options.page &&
options.page + 1 !== options.totalPages)) {
const className = (0, utils_1.classNames)(options.className, { "p-disabled": true });
return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." }));
}
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
},
NextPageLink: (options) => {
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
},
CurrentPageReport: (options) => {
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
color: "var(--gray-700)",
userSelect: "none",
width: "120px",
textAlign: "center",
}, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
},
};
const tableHeaderTemplate1 = () => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-xl font-semibold bg-white text-gray-900" }, { children: ["Team Members", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-round-2xl px-2 font-medium bg-primary-50 text-primary-700 text-sm" }, { children: "100 users" })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
};
const tableHeaderTemplate2 = () => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-semibold text-xl line-height-4" }, { children: "Customers" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: "These companies have purchased in the last 12 months." }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
};
const companyBodyTemplate = (rowData) => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: rowData.image, className: "border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-medium text-base line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.website }))] }))] })));
};
const aboutBodyTemplate = (rowData) => {
return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-normal text-base line-height-2" }, { children: rowData.about.title })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.about.description }))] })));
};
const usersBodyTemplate = (rowData) => {
return ((0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, Object.assign({ className: "w-10" }, { children: [rowData.users.slice(0, 5).map((eachUser) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: eachUser, shape: "circle", size: "large" }, eachUser))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: `+${rowData.users.length - 5}`, shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] })));
};
const licenseBodyTemplate = (rowData) => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-10rem align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: rowData.licenseUse, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2 flex align-items-start text-center text-sm" }, { children: [rowData.licenseUse, "%"] }))] })));
};
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.teamData, paginator: true, paginatorClassName: "bg-square px-6 py-3", paginatorTemplate: pagenatorTemplate, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate1, emptyMessage: emptyStateTemplate1, className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: nameHeaderTemplate, body: nameBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", sortable: true, headerClassName: "h-3rem text-sm text-gray-600", body: statusTemplate1, style: { width: "7rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: roleHeaderTemplate, headerClassName: "h-3rem text-sm text-gray-600", field: "role", style: { width: "11rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Email address", headerClassName: "h-3rem text-sm text-gray-600", field: "email", style: { width: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Teams", body: teamsBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate1, style: { width: "7rem" } })] })), (0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.customersData, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate2, emptyMessage: "No customers found.", className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: "Company", body: companyBodyTemplate, sortable: true, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", body: statusTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "About", body: aboutBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "20rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Users", body: usersBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "License Use", body: licenseBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "4rem" } })] }))] })));
};
exports.default = TableComponent;