mirror of
https://github.com/umami-software/umami.git
synced 2025-12-08 05:12:36 +01:00
Responsive tables.
This commit is contained in:
Mike Cao
parent
cb9dcc7300
commit
9f6e17b986
14 changed files with 26 additions and 31 deletions
109
components/settings/AccountSettings.js
Normal file
109
components/settings/AccountSettings.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import Icon from 'components/common/Icon';
|
||||
import Table from 'components/common/Table';
|
||||
import Modal from 'components/common/Modal';
|
||||
import AccountEditForm from 'components/forms/AccountEditForm';
|
||||
import Pen from 'assets/pen.svg';
|
||||
import Plus from 'assets/plus.svg';
|
||||
import Trash from 'assets/trash.svg';
|
||||
import Check from 'assets/check.svg';
|
||||
import { get } from 'lib/web';
|
||||
import styles from './AccountSettings.module.css';
|
||||
import DeleteForm from '../forms/DeleteForm';
|
||||
|
||||
export default function AccountSettings() {
|
||||
const [data, setData] = useState();
|
||||
const [addAccount, setAddAccount] = useState();
|
||||
const [editAccount, setEditAccount] = useState();
|
||||
const [deleteAccount, setDeleteAccount] = useState();
|
||||
const [saved, setSaved] = useState(0);
|
||||
|
||||
const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
|
||||
|
||||
const Buttons = row =>
|
||||
row.username !== 'admin' ? (
|
||||
<>
|
||||
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
|
||||
<div>Edit</div>
|
||||
</Button>
|
||||
<Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
|
||||
<div>Delete</div>
|
||||
</Button>
|
||||
</>
|
||||
) : null;
|
||||
|
||||
const columns = [
|
||||
{ key: 'username', label: 'Username', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'is_admin',
|
||||
label: 'Administrator',
|
||||
className: 'col-6 col-md-4',
|
||||
render: Checkmark,
|
||||
},
|
||||
{
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4'),
|
||||
render: Buttons,
|
||||
},
|
||||
];
|
||||
|
||||
function handleSave() {
|
||||
setSaved(state => state + 1);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setEditAccount(null);
|
||||
setAddAccount(null);
|
||||
setDeleteAccount(null);
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
setData(await get(`/api/accounts`));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [saved]);
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<div>Accounts</div>
|
||||
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
|
||||
<div>Add account</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<Table columns={columns} rows={data} />
|
||||
{editAccount && (
|
||||
<Modal title="Edit account">
|
||||
<AccountEditForm
|
||||
values={{ ...editAccount, password: '' }}
|
||||
onSave={handleSave}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{addAccount && (
|
||||
<Modal title="Add account">
|
||||
<AccountEditForm onSave={handleSave} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{deleteAccount && (
|
||||
<Modal title="Delete account">
|
||||
<DeleteForm
|
||||
values={{ type: 'account', id: deleteAccount.user_id, name: deleteAccount.username }}
|
||||
onSave={handleSave}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
4
components/settings/AccountSettings.module.css
Normal file
4
components/settings/AccountSettings.module.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
37
components/settings/ProfileSettings.js
Normal file
37
components/settings/ProfileSettings.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import ChangePasswordForm from '../forms/ChangePasswordForm';
|
||||
import Modal from 'components/common/Modal';
|
||||
import Dots from 'assets/ellipsis-h.svg';
|
||||
|
||||
export default function ProfileSettings() {
|
||||
const user = useSelector(state => state.user);
|
||||
const [changePassword, setChangePassword] = useState(false);
|
||||
const { user_id } = user;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<div>Profile</div>
|
||||
<Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
|
||||
<div>Change password</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<dl>
|
||||
<dt>Username</dt>
|
||||
<dd>{user.username}</dd>
|
||||
</dl>
|
||||
{changePassword && (
|
||||
<Modal title="Change password">
|
||||
<ChangePasswordForm
|
||||
values={{ user_id }}
|
||||
onSave={() => setChangePassword(false)}
|
||||
onClose={() => setChangePassword(false)}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
28
components/settings/Settings.js
Normal file
28
components/settings/Settings.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React, { useState } from 'react';
|
||||
import Page from 'components/layout/Page';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import WebsiteSettings from './WebsiteSettings';
|
||||
import AccountSettings from './AccountSettings';
|
||||
import ProfileSettings from './ProfileSettings';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
export default function Settings() {
|
||||
const user = useSelector(state => state.user);
|
||||
const [option, setOption] = useState(1);
|
||||
|
||||
const menuOptions = [
|
||||
{ label: 'Websites', value: 1 },
|
||||
{ label: 'Accounts', value: 2, hidden: !user.is_admin },
|
||||
{ label: 'Profile', value: 3 },
|
||||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
|
||||
{option === 1 && <WebsiteSettings />}
|
||||
{option === 2 && <AccountSettings />}
|
||||
{option === 3 && <ProfileSettings />}
|
||||
</MenuLayout>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
139
components/settings/WebsiteSettings.js
Normal file
139
components/settings/WebsiteSettings.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Table from 'components/common/Table';
|
||||
import Button from 'components/common/Button';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Modal from 'components/common/Modal';
|
||||
import WebsiteEditForm from '../forms/WebsiteEditForm';
|
||||
import DeleteForm from '../forms/DeleteForm';
|
||||
import TrackingCodeForm from '../forms/TrackingCodeForm';
|
||||
import ShareUrlForm from '../forms/ShareUrlForm';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import Pen from 'assets/pen.svg';
|
||||
import Trash from 'assets/trash.svg';
|
||||
import Plus from 'assets/plus.svg';
|
||||
import Code from 'assets/code.svg';
|
||||
import Link from 'assets/link.svg';
|
||||
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();
|
||||
const [showUrl, setShowUrl] = useState();
|
||||
const [saved, setSaved] = useState(0);
|
||||
|
||||
const Buttons = row => (
|
||||
<>
|
||||
{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)}
|
||||
/>
|
||||
<Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
|
||||
<div>Edit</div>
|
||||
</Button>
|
||||
<Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
|
||||
<div>Delete</div>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{ key: 'name', label: 'Name', className: 'col-6 col-md-4' },
|
||||
{ key: 'domain', label: 'Domain', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'action',
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4 pt-1'),
|
||||
render: Buttons,
|
||||
},
|
||||
];
|
||||
|
||||
function handleSave() {
|
||||
setSaved(state => state + 1);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setAddWebsite(null);
|
||||
setEditWebsite(null);
|
||||
setDeleteWebsite(null);
|
||||
setShowCode(null);
|
||||
setShowUrl(null);
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
setData(await get(`/api/websites`));
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
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} />
|
||||
{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">
|
||||
<DeleteForm
|
||||
values={{ type: 'website', id: deleteWebsite.website_id, name: deleteWebsite.name }}
|
||||
onSave={handleSave}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{showCode && (
|
||||
<Modal title="Tracking code">
|
||||
<TrackingCodeForm values={showCode} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{showUrl && (
|
||||
<Modal title="Share URL">
|
||||
<ShareUrlForm values={showUrl} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
7
components/settings/WebsiteSettings.module.css
Normal file
7
components/settings/WebsiteSettings.module.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.col {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue