aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/CalendarsPage.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/settings/CalendarsPage.jsx')
-rw-r--r--modern/src/settings/CalendarsPage.jsx64
1 files changed, 64 insertions, 0 deletions
diff --git a/modern/src/settings/CalendarsPage.jsx b/modern/src/settings/CalendarsPage.jsx
new file mode 100644
index 00000000..de27a451
--- /dev/null
+++ b/modern/src/settings/CalendarsPage.jsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import {
+ Table, TableRow, TableCell, TableHead, TableBody,
+} from '@mui/material';
+import { useEffectAsync } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import SettingsMenu from './components/SettingsMenu';
+import CollectionFab from './components/CollectionFab';
+import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
+import SearchHeader, { filterByKeyword } from './components/SearchHeader';
+import useSettingsStyles from './common/useSettingsStyles';
+
+const CalendarsPage = () => {
+ const classes = useSettingsStyles();
+ const t = useTranslation();
+
+ const [timestamp, setTimestamp] = useState(Date.now());
+ const [items, setItems] = useState([]);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ useEffectAsync(async () => {
+ setLoading(true);
+ try {
+ const response = await fetch('/api/calendars');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, [timestamp]);
+
+ return (
+ <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedCalendars']}>
+ <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} />
+ <Table className={classes.table}>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
+ </TableCell>
+ </TableRow>
+ )) : (<TableShimmer columns={2} endAction />)}
+ </TableBody>
+ </Table>
+ <CollectionFab editPath="/settings/calendar" />
+ </PageLayout>
+ );
+};
+
+export default CalendarsPage;