Add owner column to admin website settings table

This commit is contained in:
Chris Walsh 2021-12-01 16:03:18 -08:00
parent b756fcddf1
commit 9cff025784
No known key found for this signature in database
GPG key ID: 28EE0CCA6032019E
3 changed files with 80 additions and 14 deletions

View file

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
import Link from 'components/common/Link';
import Table from 'components/common/Table';
@ -25,6 +26,7 @@ import useFetch from 'hooks/useFetch';
import styles from './WebsiteSettings.module.css';
export default function WebsiteSettings() {
const user = useSelector(state => state.user);
const [editWebsite, setEditWebsite] = useState();
const [resetWebsite, setResetWebsite] = useState();
const [deleteWebsite, setDeleteWebsite] = useState();
@ -33,7 +35,9 @@ export default function WebsiteSettings() {
const [showUrl, setShowUrl] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
const { data } = useFetch(`/api/websites`, {}, [saved]);
const { data } = useFetch(`/api/websites` + (user.is_admin ? '?include_all=true' : ''), {}, [
saved,
]);
const Buttons = row => (
<ButtonLayout align="right">
@ -55,15 +59,27 @@ export default function WebsiteSettings() {
tooltipId={`button-code-${row.website_id}`}
onClick={() => setShowCode(row)}
/>
<Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
<FormattedMessage id="label.edit" defaultMessage="Edit" />
</Button>
<Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
<FormattedMessage id="label.reset" defaultMessage="Reset" />
</Button>
<Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
<FormattedMessage id="label.delete" defaultMessage="Delete" />
</Button>
<Button
icon={<Pen />}
size="small"
tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
tooltipId={`button-edit-${row.website_id}`}
onClick={() => setEditWebsite(row)}
/>
<Button
icon={<Reset />}
size="small"
tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
tooltipId={`button-reset-${row.website_id}`}
onClick={() => setResetWebsite(row)}
/>
<Button
icon={<Trash />}
size="small"
tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
tooltipId={`button-delete-${row.website_id}`}
onClick={() => setDeleteWebsite(row)}
/>
</ButtonLayout>
);
@ -74,6 +90,30 @@ export default function WebsiteSettings() {
</Link>
);
const adminColumns = [
{
key: 'name',
label: <FormattedMessage id="label.name" defaultMessage="Name" />,
className: 'col-4 col-xl-3',
render: DetailsLink,
},
{
key: 'domain',
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
className: 'col-4 col-xl-3',
},
{
key: 'account',
label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
className: 'col-4 col-xl-1',
},
{
key: 'action',
className: classNames(styles.buttons, 'col-12 col-xl-5 pt-2 pt-xl-0'),
render: Buttons,
},
];
const columns = [
{
key: 'name',
@ -137,7 +177,7 @@ export default function WebsiteSettings() {
<FormattedMessage id="label.add-website" defaultMessage="Add website" />
</Button>
</PageHeader>
<Table columns={columns} rows={data} empty={empty} />
<Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
{editWebsite && (
<Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
<WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />