98 lines
6.5 KiB
TypeScript
98 lines
6.5 KiB
TypeScript
import { Button } from "@govoplan/core-webui";
|
|
import { Card } from "@govoplan/core-webui";
|
|
import { PageTitle } from "@govoplan/core-webui";
|
|
import { StatusBadge } from "@govoplan/core-webui";
|
|
import DataGrid, { type DataGridColumn } from "../../components/table/DataGrid";
|
|
|
|
const personalContacts = [
|
|
{ name: "i18n:govoplan-campaign.ada_lovelace.a69a9f8a", email: "ada@example.local", source: "Personal", tags: "i18n:govoplan-campaign.used_recently.af75cea7" },
|
|
{ name: "i18n:govoplan-campaign.grace_hopper.d97e6939", email: "grace@example.local", source: "Personal", tags: "i18n:govoplan-campaign.favorite.6b90b6a1" }];
|
|
|
|
|
|
const groupContacts = [
|
|
{ name: "i18n:govoplan-campaign.project_office.c35aa9ca", email: "project-office@example.local", source: "Group", tags: "i18n:govoplan-campaign.shared.50d0d8dd" },
|
|
{ name: "i18n:govoplan-campaign.finance_team.ff353e5c", email: "finance@example.local", source: "Group", tags: "i18n:govoplan-campaign.shared_list.b3c94b39" }];
|
|
|
|
|
|
const tenantContacts = [
|
|
{ name: "i18n:govoplan-campaign.helpdesk.191815bf", email: "helpdesk@example.local", source: "Tenant", tags: "i18n:govoplan-campaign.directory.4b892fe0" },
|
|
{ name: "i18n:govoplan-campaign.data_protection.06e87cd3", email: "privacy@example.local", source: "Tenant", tags: "i18n:govoplan-campaign.directory.4b892fe0" }];
|
|
|
|
|
|
function contactColumns(): DataGridColumn<{name: string;email: string;source: string;tags: string;}>[] {
|
|
return [
|
|
{ id: "name", header: "i18n:govoplan-campaign.name.709a2322", width: "minmax(180px, 1fr)", sortable: true, filterable: true, sticky: "start", render: (contact) => <strong>{contact.name}</strong>, value: (contact) => contact.name },
|
|
{ id: "email", header: "i18n:govoplan-campaign.email.84add5b2", width: 240, sortable: true, filterable: true, value: (contact) => contact.email },
|
|
{ id: "scope", header: "i18n:govoplan-campaign.scope.4651a34e", width: 140, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "Personal", label: "i18n:govoplan-campaign.personal.40f07323" }, { value: "Group", label: "i18n:govoplan-campaign.group.171a0606" }, { value: "Tenant", label: "i18n:govoplan-campaign.tenant.3ca93c78" }] }, value: (contact) => contact.source },
|
|
{ id: "tags", header: "i18n:govoplan-campaign.tags.848eed0f", width: 180, sortable: true, filterable: true, value: (contact) => contact.tags },
|
|
{ id: "status", header: "i18n:govoplan-campaign.status.bae7d5be", width: 130, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "mock", label: "i18n:govoplan-campaign.mock.3bba2a47" }], display: "pill" }, render: () => <StatusBadge status="mock" />, value: () => "mock" }];
|
|
|
|
}
|
|
|
|
export default function AddressBookPage() {
|
|
const allContacts = [...personalContacts, ...groupContacts, ...tenantContacts];
|
|
|
|
return (
|
|
<div className="content-pad workspace-data-page module-entry-page address-book-page">
|
|
<div className="page-heading split workspace-heading">
|
|
<div>
|
|
<PageTitle>i18n:govoplan-campaign.address_book.f6327f59</PageTitle>
|
|
<p>i18n:govoplan-campaign.mock_workspace_for_personal_group_and_tenant_add.ce99f4d4</p>
|
|
</div>
|
|
<div className="button-row compact-actions">
|
|
<Button disabled>i18n:govoplan-campaign.import.d6fbc9d2</Button>
|
|
<Button variant="primary" disabled>i18n:govoplan-campaign.add_contact.6da0b4b8</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-grid">
|
|
<Card title="i18n:govoplan-campaign.personal.40f07323"><strong className="module-big-number">{personalContacts.length}</strong><p className="muted">i18n:govoplan-campaign.private_contacts_and_remembered_addresses.2bd71556</p></Card>
|
|
<Card title="i18n:govoplan-campaign.group.171a0606"><strong className="module-big-number">{groupContacts.length}</strong><p className="muted">i18n:govoplan-campaign.shared_group_address_books_and_lists.12bac69d</p></Card>
|
|
<Card title="i18n:govoplan-campaign.tenant.3ca93c78"><strong className="module-big-number">{tenantContacts.length}</strong><p className="muted">i18n:govoplan-campaign.tenant_directory_and_approved_shared_contacts.fa671f1b</p></Card>
|
|
<Card title="i18n:govoplan-campaign.sync.905f6309"><strong className="module-big-number">i18n:govoplan-campaign.mock.3bba2a47</strong><p className="muted">i18n:govoplan-campaign.carddav_ldap_import_connectors_can_be_added_late.0471f513</p></Card>
|
|
</div>
|
|
|
|
<div className="dashboard-grid settings-dashboard-grid">
|
|
<Card title="i18n:govoplan-campaign.address_book_scopes.b0d0efde">
|
|
<div className="address-book-scope-list">
|
|
<AddressBookScope title="i18n:govoplan-campaign.personal_address_book.e240066d" description="i18n:govoplan-campaign.private_contacts_remembered_recipients_and_perso.685cca95" status="Local" />
|
|
<AddressBookScope title="i18n:govoplan-campaign.group_address_books.aed5a7c0" description="i18n:govoplan-campaign.shared_contact_sets_for_teams_departments_or_cam.4408edd7" status="Shared" />
|
|
<AddressBookScope title="i18n:govoplan-campaign.tenant_directory.11b0e09c" description="i18n:govoplan-campaign.tenant_wide_contacts_functional_mailboxes_and_ap.c437a8b9" status="Directory" />
|
|
</div>
|
|
</Card>
|
|
<Card title="i18n:govoplan-campaign.planned_address_actions.1d4a056a">
|
|
<div className="placeholder-stack">
|
|
<span>i18n:govoplan-campaign.choose_addresses_from_personal_group_or_tenant_s.3d6dc0e4</span>
|
|
<span>i18n:govoplan-campaign.remember_addresses_used_in_campaigns_after_opt_i.6f8b2529</span>
|
|
<span>i18n:govoplan-campaign.share_selected_contacts_with_a_group.604d1464</span>
|
|
<span>i18n:govoplan-campaign.use_contacts_in_to_cc_bcc_sender_and_reply_to_fi.79f3ea6a</span>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card title="i18n:govoplan-campaign.contacts.b0dd615c" actions={<Button disabled>i18n:govoplan-campaign.manage_sources.ec758de0</Button>}>
|
|
<DataGrid
|
|
id="address-book-contacts"
|
|
rows={allContacts}
|
|
columns={contactColumns()}
|
|
getRowKey={(contact) => contact.source + "-" + contact.email}
|
|
emptyText="i18n:govoplan-campaign.no_contacts_found.ad977b09"
|
|
className="compact-table-wrap module-table" />
|
|
|
|
</Card>
|
|
</div>);
|
|
|
|
}
|
|
|
|
function AddressBookScope({ title, description, status }: {title: string;description: string;status: string;}) {
|
|
return (
|
|
<div className="address-book-scope-card">
|
|
<div>
|
|
<strong>{title}</strong>
|
|
<p>{description}</p>
|
|
</div>
|
|
<StatusBadge status={status} />
|
|
</div>);
|
|
|
|
}
|