@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
41 lines (40 loc) • 2.83 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the BSD 3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/
import { h, } from "@stencil/core";
import { Typography } from "@peculiar/certificates-viewer";
import { getString } from "../../utils/l10n";
import { CertificateIcon, RefreshIcon } from "../icons";
import { FortifyButton } from "../fortify-button";
import { FortifyButtonText } from "../fortify-button-text";
import { CertificatesListItem } from "./certificates-list-item";
export const CertificatesList = (props) => {
const { onUpdate, onCancel, onContinue, onCertificate, onCertificateDetails, certificates = [], providers = [], helpPageLink, loading, allowContinue, certificateSelectedIndex, } = props;
const renderCertificatesEmpty = () => ([
h(CertificateIcon, { class: "certificates_list_icon" }),
h(Typography, { color: "gray-9", variant: "b3" }, getString('certificates.empty.title')),
h(FortifyButtonText, { href: helpPageLink }, getString('actions.needHelp')),
]);
const renderCertificatesLoading = () => (h("peculiar-circular-progress", null));
const renderCertificatesList = () => (certificates.map((certificate) => (h(CertificatesListItem, { key: certificate.index, certificate: certificate, provider: providers.find((provider) => provider.id === certificate.providerID), isSelected: certificateSelectedIndex === certificate.index, onClick: onCertificate, onClickDetails: onCertificateDetails }))));
let content = null;
switch (true) {
case loading:
content = (h("div", { class: "certificates_list_content_center" }, renderCertificatesLoading()));
break;
case certificates.length > 0:
content = (h("ul", { role: "listbox" }, renderCertificatesList()));
break;
default:
content = (h("div", { class: "certificates_list_content_center" }, renderCertificatesEmpty()));
}
return (h("div", { class: "certificates_list" }, h(Typography, { variant: "h5", color: "black" }, getString('certificates.title')), h("div", { class: "certificates_list_content" }, content), h("div", { class: "certificates_list_actions container_actions" }, h(FortifyButton, { variant: "default", onClick: onUpdate, startIcon: h(RefreshIcon, null), disabled: loading }, getString('actions.updateCertificates')), h("div", { class: "container_actions" }, h(FortifyButton, { onClick: onCancel, disabled: loading }, getString('actions.cancel')), h(FortifyButton, { variant: "primary", disabled: loading || !allowContinue, onClick: onContinue }, getString('actions.continue'))))));
};
//# sourceMappingURL=certificates-list.js.map