umami/components/settings/WebsiteSettings.js

236 lines
7.7 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-18 07:47:58 +02:00
import classNames from 'classnames';
import Link from 'components/common/Link';
2020-08-12 07:24:41 +02:00
import Table from 'components/common/Table';
import Button from 'components/common/Button';
import OverflowText from 'components/common/OverflowText';
2020-08-12 07:24:41 +02:00
import PageHeader from 'components/layout/PageHeader';
import Modal from 'components/common/Modal';
2020-09-06 02:27:01 +02:00
import WebsiteEditForm from 'components/forms/WebsiteEditForm';
import ResetForm from 'components/forms/ResetForm';
2020-09-06 02:27:01 +02:00
import DeleteForm from 'components/forms/DeleteForm';
import TrackingCodeForm from 'components/forms/TrackingCodeForm';
import ShareUrlForm from 'components/forms/ShareUrlForm';
2020-08-12 07:24:41 +02:00
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import ButtonLayout from 'components/layout/ButtonLayout';
2020-09-06 02:27:01 +02:00
import Toast from 'components/common/Toast';
2020-10-21 15:44:43 +02:00
import Favicon from 'components/common/Favicon';
2020-08-09 08:48:43 +02:00
import Pen from 'assets/pen.svg';
import Trash from 'assets/trash.svg';
import Reset from 'assets/redo.svg';
2020-08-09 08:48:43 +02:00
import Plus from 'assets/plus.svg';
import Code from 'assets/code.svg';
import LinkIcon from 'assets/link.svg';
2020-09-06 02:27:01 +02:00
import useFetch from 'hooks/useFetch';
import useUser from 'hooks/useUser';
2020-08-09 08:48:43 +02:00
import styles from './WebsiteSettings.module.css';
export default function WebsiteSettings() {
const { user } = useUser();
2020-08-09 08:48:43 +02:00
const [editWebsite, setEditWebsite] = useState();
const [resetWebsite, setResetWebsite] = useState();
2020-08-09 08:48:43 +02:00
const [deleteWebsite, setDeleteWebsite] = useState();
const [addWebsite, setAddWebsite] = useState();
const [showCode, setShowCode] = useState();
2020-08-15 10:17:15 +02:00
const [showUrl, setShowUrl] = useState();
2020-08-09 08:48:43 +02:00
const [saved, setSaved] = useState(0);
2020-09-01 00:57:59 +02:00
const [message, setMessage] = useState();
2022-02-27 09:25:24 +01:00
const { data } = useFetch('/websites', { params: { include_all: !!user?.is_admin } }, [saved]);
2020-08-09 08:48:43 +02:00
2020-08-12 07:24:41 +02:00
const Buttons = row => (
2020-09-22 06:34:55 +02:00
<ButtonLayout align="right">
2020-08-15 10:17:15 +02:00
{row.share_id && (
<Button
icon={<LinkIcon />}
2020-08-15 10:17:15 +02:00
size="small"
2020-09-17 07:29:40 +02:00
tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
2020-08-15 10:17:15 +02:00
tooltipId={`button-share-${row.website_id}`}
onClick={() => setShowUrl(row)}
/>
)}
<Button
icon={<Code />}
size="small"
2020-09-06 02:27:01 +02:00
tooltip={
2020-09-17 07:29:40 +02:00
<FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
2020-09-06 02:27:01 +02:00
}
2020-08-15 10:17:15 +02:00
tooltipId={`button-code-${row.website_id}`}
onClick={() => setShowCode(row)}
/>
<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>
2020-08-12 07:24:41 +02:00
);
2020-10-21 15:44:43 +02:00
const DetailsLink = ({ website_id, name, domain }) => (
<Link
className={styles.detailLink}
href="/website/[...id]"
as={`/website/${website_id}/${name}`}
>
2020-10-21 15:44:43 +02:00
<Favicon domain={domain} />
<OverflowText tooltipId={`${website_id}-name`}>{name}</OverflowText>
</Link>
);
const Domain = ({ domain, website_id }) => (
<OverflowText tooltipId={`${website_id}-domain`}>{domain}</OverflowText>
);
const adminColumns = [
{
key: 'name',
label: <FormattedMessage id="label.name" defaultMessage="Name" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-4 col-xl-3',
render: DetailsLink,
},
{
key: 'domain',
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-4 col-xl-3',
render: Domain,
},
{
key: 'account',
label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-4 col-xl-1',
},
{
key: 'action',
className: classNames(styles.buttons, 'col-12 col-xl-5 pt-2 pt-xl-0'),
render: Buttons,
},
];
2020-08-09 08:48:43 +02:00
const columns = [
2020-09-06 02:27:01 +02:00
{
key: 'name',
label: <FormattedMessage id="label.name" defaultMessage="Name" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-6 col-xl-4',
render: DetailsLink,
2020-09-06 02:27:01 +02:00
},
{
key: 'domain',
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-6 col-xl-4',
render: Domain,
2020-09-06 02:27:01 +02:00
},
2020-08-09 08:48:43 +02:00
{
key: 'action',
className: classNames(styles.buttons, 'col-12 col-xl-4 pt-2 pt-xl-0'),
2020-08-12 07:24:41 +02:00
render: Buttons,
2020-08-09 08:48:43 +02:00
},
];
function handleSave() {
setSaved(state => state + 1);
2020-09-06 02:27:01 +02:00
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
2020-08-09 08:48:43 +02:00
handleClose();
}
function handleClose() {
setAddWebsite(null);
setEditWebsite(null);
setResetWebsite(null);
2020-08-09 08:48:43 +02:00
setDeleteWebsite(null);
setShowCode(null);
2020-08-15 10:17:15 +02:00
setShowUrl(null);
2020-08-09 08:48:43 +02:00
}
if (!data) {
return null;
}
const empty = (
2020-09-06 02:27:01 +02:00
<EmptyPlaceholder
msg={
<FormattedMessage
2020-09-17 07:29:40 +02:00
id="message.no-websites-configured"
2020-09-06 02:27:01 +02:00
defaultMessage="You don't have any websites configured."
/>
}
>
<Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.add-website" defaultMessage="Add website" />
</Button>
</EmptyPlaceholder>
);
2020-08-09 08:48:43 +02:00
return (
<>
<PageHeader>
2020-09-06 02:27:01 +02:00
<div>
2020-09-17 07:29:40 +02:00
<FormattedMessage id="label.websites" defaultMessage="Websites" />
2020-09-06 02:27:01 +02:00
</div>
2020-08-09 08:48:43 +02:00
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.add-website" defaultMessage="Add website" />
2020-08-09 08:48:43 +02:00
</Button>
</PageHeader>
<Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
2020-08-09 08:48:43 +02:00
{editWebsite && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
2020-08-09 08:48:43 +02:00
<WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
</Modal>
)}
{addWebsite && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.add-website" defaultMessage="Add website" />}>
2020-08-09 08:48:43 +02:00
<WebsiteEditForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
{resetWebsite && (
<Modal
title={<FormattedMessage id="label.reset-website" defaultMessage="Reset statistics" />}
>
<ResetForm
values={{ type: 'website', id: resetWebsite.website_id, name: resetWebsite.name }}
onSave={handleSave}
onClose={handleClose}
/>
</Modal>
)}
2020-08-09 08:48:43 +02:00
{deleteWebsite && (
2020-09-06 02:27:01 +02:00
<Modal
2020-10-13 07:53:59 +02:00
title={<FormattedMessage id="label.delete-website" defaultMessage="Delete website" />}
2020-09-06 02:27:01 +02:00
>
2020-08-09 11:03:37 +02:00
<DeleteForm
values={{ type: 'website', id: deleteWebsite.website_id, name: deleteWebsite.name }}
onSave={handleSave}
onClose={handleClose}
/>
2020-08-09 08:48:43 +02:00
</Modal>
)}
{showCode && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.tracking-code" defaultMessage="Tracking code" />}>
2020-08-15 10:17:15 +02:00
<TrackingCodeForm values={showCode} onClose={handleClose} />
</Modal>
)}
{showUrl && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.share-url" defaultMessage="Share URL" />}>
2020-08-15 10:17:15 +02:00
<ShareUrlForm values={showUrl} onClose={handleClose} />
2020-08-09 08:48:43 +02:00
</Modal>
)}
2020-09-01 00:57:59 +02:00
{message && <Toast message={message} onClose={() => setMessage(null)} />}
2020-08-09 08:48:43 +02:00
</>
);
}