umami/components/settings/WebsiteSettings.js

140 lines
4.0 KiB
JavaScript
Raw Normal View History

2020-08-09 08:48:43 +02:00
import React, { useState, useEffect } from 'react';
2020-08-18 07:47:58 +02:00
import classNames from 'classnames';
2020-08-12 07:24:41 +02:00
import Table from 'components/common/Table';
import Button from 'components/common/Button';
import PageHeader from 'components/layout/PageHeader';
import Modal from 'components/common/Modal';
2020-08-18 07:47:58 +02:00
import WebsiteEditForm from '../forms/WebsiteEditForm';
import DeleteForm from '../forms/DeleteForm';
import TrackingCodeForm from '../forms/TrackingCodeForm';
import ShareUrlForm from '../forms/ShareUrlForm';
2020-08-12 07:24:41 +02:00
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
2020-08-09 08:48:43 +02:00
import Pen from 'assets/pen.svg';
import Trash from 'assets/trash.svg';
import Plus from 'assets/plus.svg';
import Code from 'assets/code.svg';
2020-08-15 10:17:15 +02:00
import Link from 'assets/link.svg';
2020-08-09 08:48:43 +02:00
import { get } from 'lib/web';
import styles from './WebsiteSettings.module.css';
export default function WebsiteSettings() {
const [data, setData] = useState();
const [editWebsite, setEditWebsite] = useState();
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-08-12 07:24:41 +02:00
const Buttons = row => (
<>
2020-08-15 10:17:15 +02:00
{row.share_id && (
<Button
icon={<Link />}
size="small"
tooltip="Share URL"
tooltipId={`button-share-${row.website_id}`}
onClick={() => setShowUrl(row)}
/>
)}
<Button
icon={<Code />}
size="small"
tooltip="Get tracking code"
tooltipId={`button-code-${row.website_id}`}
onClick={() => setShowCode(row)}
/>
2020-08-12 07:24:41 +02:00
<Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
<div>Edit</div>
</Button>
<Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
<div>Delete</div>
</Button>
</>
);
2020-08-09 08:48:43 +02:00
const columns = [
2020-08-18 07:47:58 +02:00
{ key: 'name', label: 'Name', className: 'col-6 col-md-4' },
{ key: 'domain', label: 'Domain', className: 'col-6 col-md-4' },
2020-08-09 08:48:43 +02:00
{
key: 'action',
2020-08-18 09:51:32 +02:00
className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-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);
handleClose();
}
function handleClose() {
setAddWebsite(null);
setEditWebsite(null);
setDeleteWebsite(null);
setShowCode(null);
2020-08-15 10:17:15 +02:00
setShowUrl(null);
2020-08-09 08:48:43 +02:00
}
async function loadData() {
2020-08-12 07:24:41 +02:00
setData(await get(`/api/websites`));
2020-08-09 08:48:43 +02:00
}
useEffect(() => {
loadData();
}, [saved]);
if (!data) {
return null;
}
const empty = (
<EmptyPlaceholder msg={"You don't have any websites configured."}>
<Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
<div>Add website</div>
</Button>
</EmptyPlaceholder>
);
2020-08-09 08:48:43 +02:00
return (
<>
<PageHeader>
<div>Websites</div>
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
<div>Add website</div>
</Button>
</PageHeader>
<Table columns={columns} rows={data} empty={empty} />
2020-08-09 08:48:43 +02:00
{editWebsite && (
<Modal title="Edit website">
<WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
</Modal>
)}
{addWebsite && (
<Modal title="Add website">
<WebsiteEditForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
{deleteWebsite && (
<Modal title="Delete website">
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 && (
<Modal title="Tracking code">
2020-08-15 10:17:15 +02:00
<TrackingCodeForm values={showCode} onClose={handleClose} />
</Modal>
)}
{showUrl && (
<Modal title="Share URL">
<ShareUrlForm values={showUrl} onClose={handleClose} />
2020-08-09 08:48:43 +02:00
</Modal>
)}
</>
);
}