mirror of
https://github.com/pawelmalak/flame.git
synced 2024-12-21 01:01:30 +03:00
Split BookmarksTable into separate components. Minor changes to reducers
This commit is contained in:
Paweł Malak
parent
e15c2a2f07
commit
a02814aa02
@ -1,272 +0,0 @@
|
|||||||
import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
|
|
||||||
import {
|
|
||||||
DragDropContext,
|
|
||||||
Droppable,
|
|
||||||
Draggable,
|
|
||||||
DropResult,
|
|
||||||
} from 'react-beautiful-dnd';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
// Redux
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
import { State } from '../../../store/reducers';
|
|
||||||
import { bindActionCreators } from 'redux';
|
|
||||||
import { actionCreators } from '../../../store';
|
|
||||||
|
|
||||||
// Typescript
|
|
||||||
import { Bookmark, Category } from '../../../interfaces';
|
|
||||||
import { ContentType } from '../Bookmarks';
|
|
||||||
|
|
||||||
// CSS
|
|
||||||
import classes from './BookmarkTable.module.css';
|
|
||||||
|
|
||||||
// UI
|
|
||||||
import { Table, Icon } from '../../UI';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
contentType: ContentType;
|
|
||||||
categories: Category[];
|
|
||||||
updateHandler: (data: Category | Bookmark) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const BookmarkTable = (props: Props): JSX.Element => {
|
|
||||||
const { config } = useSelector((state: State) => state.config);
|
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const {
|
|
||||||
pinCategory,
|
|
||||||
deleteCategory,
|
|
||||||
deleteBookmark,
|
|
||||||
createNotification,
|
|
||||||
reorderCategories,
|
|
||||||
} = bindActionCreators(actionCreators, dispatch);
|
|
||||||
|
|
||||||
const [localCategories, setLocalCategories] = useState<Category[]>([]);
|
|
||||||
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
|
|
||||||
|
|
||||||
// Copy categories array
|
|
||||||
useEffect(() => {
|
|
||||||
setLocalCategories([...props.categories]);
|
|
||||||
}, [props.categories]);
|
|
||||||
|
|
||||||
// Check ordering
|
|
||||||
useEffect(() => {
|
|
||||||
const order = config.useOrdering;
|
|
||||||
|
|
||||||
if (order === 'orderId') {
|
|
||||||
setIsCustomOrder(true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const deleteCategoryHandler = (category: Category): void => {
|
|
||||||
const proceed = window.confirm(
|
|
||||||
`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (proceed) {
|
|
||||||
deleteCategory(category.id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteBookmarkHandler = (bookmark: Bookmark): void => {
|
|
||||||
const proceed = window.confirm(
|
|
||||||
`Are you sure you want to delete ${bookmark.name}?`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (proceed) {
|
|
||||||
deleteBookmark(bookmark.id, bookmark.categoryId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const keyboardActionHandler = (
|
|
||||||
e: KeyboardEvent,
|
|
||||||
category: Category,
|
|
||||||
handler: Function
|
|
||||||
) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handler(category);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const dragEndHanlder = (result: DropResult): void => {
|
|
||||||
if (!isCustomOrder) {
|
|
||||||
createNotification({
|
|
||||||
title: 'Error',
|
|
||||||
message: 'Custom order is disabled',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!result.destination) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tmpCategories = [...localCategories];
|
|
||||||
const [movedApp] = tmpCategories.splice(result.source.index, 1);
|
|
||||||
tmpCategories.splice(result.destination.index, 0, movedApp);
|
|
||||||
|
|
||||||
setLocalCategories(tmpCategories);
|
|
||||||
reorderCategories(tmpCategories);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (props.contentType === ContentType.category) {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<div className={classes.Message}>
|
|
||||||
{isCustomOrder ? (
|
|
||||||
<p>You can drag and drop single rows to reorder categories</p>
|
|
||||||
) : (
|
|
||||||
<p>
|
|
||||||
Custom order is disabled. You can change it in{' '}
|
|
||||||
<Link to="/settings/other">settings</Link>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DragDropContext onDragEnd={dragEndHanlder}>
|
|
||||||
<Droppable droppableId="categories">
|
|
||||||
{(provided) => (
|
|
||||||
<Table
|
|
||||||
headers={['Name', 'Visibility', 'Actions']}
|
|
||||||
innerRef={provided.innerRef}
|
|
||||||
>
|
|
||||||
{localCategories.map(
|
|
||||||
(category: Category, index): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<Draggable
|
|
||||||
key={category.id}
|
|
||||||
draggableId={category.id.toString()}
|
|
||||||
index={index}
|
|
||||||
>
|
|
||||||
{(provided, snapshot) => {
|
|
||||||
const style = {
|
|
||||||
border: snapshot.isDragging
|
|
||||||
? '1px solid var(--color-accent)'
|
|
||||||
: 'none',
|
|
||||||
borderRadius: '4px',
|
|
||||||
...provided.draggableProps.style,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
{...provided.draggableProps}
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
style={style}
|
|
||||||
>
|
|
||||||
<td style={{ width: '300px' }}>
|
|
||||||
{category.name}
|
|
||||||
</td>
|
|
||||||
<td style={{ width: '300px' }}>
|
|
||||||
{category.isPublic ? 'Visible' : 'Hidden'}
|
|
||||||
</td>
|
|
||||||
{!snapshot.isDragging && (
|
|
||||||
<td className={classes.TableActions}>
|
|
||||||
<div
|
|
||||||
className={classes.TableAction}
|
|
||||||
onClick={() =>
|
|
||||||
deleteCategoryHandler(category)
|
|
||||||
}
|
|
||||||
onKeyDown={(e) =>
|
|
||||||
keyboardActionHandler(
|
|
||||||
e,
|
|
||||||
category,
|
|
||||||
deleteCategoryHandler
|
|
||||||
)
|
|
||||||
}
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
<Icon icon="mdiDelete" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classes.TableAction}
|
|
||||||
onClick={() =>
|
|
||||||
props.updateHandler(category)
|
|
||||||
}
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
<Icon icon="mdiPencil" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classes.TableAction}
|
|
||||||
onClick={() => pinCategory(category)}
|
|
||||||
onKeyDown={(e) =>
|
|
||||||
keyboardActionHandler(
|
|
||||||
e,
|
|
||||||
category,
|
|
||||||
pinCategory
|
|
||||||
)
|
|
||||||
}
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
{category.isPinned ? (
|
|
||||||
<Icon
|
|
||||||
icon="mdiPinOff"
|
|
||||||
color="var(--color-accent)"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Icon icon="mdiPin" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</Table>
|
|
||||||
)}
|
|
||||||
</Droppable>
|
|
||||||
</DragDropContext>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const bookmarks: { bookmark: Bookmark; categoryName: string }[] = [];
|
|
||||||
props.categories.forEach((category: Category) => {
|
|
||||||
category.bookmarks.forEach((bookmark: Bookmark) => {
|
|
||||||
bookmarks.push({
|
|
||||||
bookmark,
|
|
||||||
categoryName: category.name,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Table
|
|
||||||
headers={['Name', 'URL', 'Icon', 'Visibility', 'Category', 'Actions']}
|
|
||||||
>
|
|
||||||
{bookmarks.map(
|
|
||||||
(bookmark: { bookmark: Bookmark; categoryName: string }) => {
|
|
||||||
return (
|
|
||||||
<tr key={bookmark.bookmark.id}>
|
|
||||||
<td>{bookmark.bookmark.name}</td>
|
|
||||||
<td>{bookmark.bookmark.url}</td>
|
|
||||||
<td>{bookmark.bookmark.icon}</td>
|
|
||||||
<td>{bookmark.bookmark.isPublic ? 'Visible' : 'Hidden'}</td>
|
|
||||||
<td>{bookmark.categoryName}</td>
|
|
||||||
<td className={classes.TableActions}>
|
|
||||||
<div
|
|
||||||
className={classes.TableAction}
|
|
||||||
onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
<Icon icon="mdiDelete" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classes.TableAction}
|
|
||||||
onClick={() => props.updateHandler(bookmark.bookmark)}
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
<Icon icon="mdiPencil" />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</Table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
195
client/src/components/Bookmarks/Table/BookmarksTable.tsx
Normal file
195
client/src/components/Bookmarks/Table/BookmarksTable.tsx
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
import { useState, useEffect, Fragment } from 'react';
|
||||||
|
import {
|
||||||
|
DragDropContext,
|
||||||
|
Droppable,
|
||||||
|
Draggable,
|
||||||
|
DropResult,
|
||||||
|
} from 'react-beautiful-dnd';
|
||||||
|
|
||||||
|
// Redux
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { State } from '../../../store/reducers';
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
import { actionCreators } from '../../../store';
|
||||||
|
|
||||||
|
// Typescript
|
||||||
|
import { Bookmark, Category } from '../../../interfaces';
|
||||||
|
|
||||||
|
// CSS
|
||||||
|
import classes from './Table.module.css';
|
||||||
|
|
||||||
|
// UI
|
||||||
|
import { Table } from '../../UI';
|
||||||
|
import { TableActions } from '../../Actions/TableActions';
|
||||||
|
import { bookmarkTemplate } from '../../../utility';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
openFormForUpdating: (data: Category | Bookmark) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
|
||||||
|
const {
|
||||||
|
bookmarks: { categoryInEdit },
|
||||||
|
config: { config },
|
||||||
|
} = useSelector((state: State) => state);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const {
|
||||||
|
deleteBookmark,
|
||||||
|
updateBookmark,
|
||||||
|
createNotification,
|
||||||
|
reorderBookmarks,
|
||||||
|
} = bindActionCreators(actionCreators, dispatch);
|
||||||
|
|
||||||
|
const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
|
||||||
|
|
||||||
|
// Copy bookmarks array
|
||||||
|
useEffect(() => {
|
||||||
|
if (categoryInEdit) {
|
||||||
|
setLocalBookmarks([...categoryInEdit.bookmarks]);
|
||||||
|
}
|
||||||
|
}, [categoryInEdit]);
|
||||||
|
|
||||||
|
// Drag and drop handler
|
||||||
|
const dragEndHanlder = (result: DropResult): void => {
|
||||||
|
if (config.useOrdering !== 'orderId') {
|
||||||
|
createNotification({
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Custom order is disabled',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!result.destination) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tmpBookmarks = [...localBookmarks];
|
||||||
|
const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
|
||||||
|
tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
|
||||||
|
|
||||||
|
setLocalBookmarks(tmpBookmarks);
|
||||||
|
|
||||||
|
const categoryId = categoryInEdit?.id || -1;
|
||||||
|
reorderBookmarks(tmpBookmarks, categoryId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Action hanlders
|
||||||
|
const deleteBookmarkHandler = (id: number, name: string) => {
|
||||||
|
const categoryId = categoryInEdit?.id || -1;
|
||||||
|
|
||||||
|
const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
|
||||||
|
if (proceed) {
|
||||||
|
deleteBookmark(id, categoryId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateBookmarkHandler = (id: number) => {
|
||||||
|
const bookmark =
|
||||||
|
categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
|
||||||
|
|
||||||
|
openFormForUpdating(bookmark);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeBookmarkVisibiltyHandler = (id: number) => {
|
||||||
|
const bookmark =
|
||||||
|
categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
|
||||||
|
|
||||||
|
const categoryId = categoryInEdit?.id || -1;
|
||||||
|
const [prev, curr] = [categoryId, categoryId];
|
||||||
|
|
||||||
|
updateBookmark(
|
||||||
|
id,
|
||||||
|
{ ...bookmark, isPublic: !bookmark.isPublic },
|
||||||
|
{ prev, curr }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
{!categoryInEdit ? (
|
||||||
|
<div className={classes.Message}>
|
||||||
|
<p>
|
||||||
|
Switch to grid view and click on the name of category you want to
|
||||||
|
edit
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={classes.Message}>
|
||||||
|
<p>
|
||||||
|
Editing bookmarks from <span>{categoryInEdit.name}</span> category
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{categoryInEdit && (
|
||||||
|
<DragDropContext onDragEnd={dragEndHanlder}>
|
||||||
|
<Droppable droppableId="bookmarks">
|
||||||
|
{(provided) => (
|
||||||
|
<Table
|
||||||
|
headers={[
|
||||||
|
'Name',
|
||||||
|
'URL',
|
||||||
|
'Icon',
|
||||||
|
'Visibility',
|
||||||
|
'Category',
|
||||||
|
'Actions',
|
||||||
|
]}
|
||||||
|
innerRef={provided.innerRef}
|
||||||
|
>
|
||||||
|
{localBookmarks.map((bookmark, index): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<Draggable
|
||||||
|
key={bookmark.id}
|
||||||
|
draggableId={bookmark.id.toString()}
|
||||||
|
index={index}
|
||||||
|
>
|
||||||
|
{(provided, snapshot) => {
|
||||||
|
const style = {
|
||||||
|
border: snapshot.isDragging
|
||||||
|
? '1px solid var(--color-accent)'
|
||||||
|
: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
...provided.draggableProps.style,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
{...provided.draggableProps}
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<td style={{ width: '200px' }}>{bookmark.name}</td>
|
||||||
|
<td style={{ width: '200px' }}>{bookmark.url}</td>
|
||||||
|
<td style={{ width: '200px' }}>{bookmark.icon}</td>
|
||||||
|
<td style={{ width: '200px' }}>
|
||||||
|
{bookmark.isPublic ? 'Visible' : 'Hidden'}
|
||||||
|
</td>
|
||||||
|
<td style={{ width: '200px' }}>
|
||||||
|
{categoryInEdit.name}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
{!snapshot.isDragging && (
|
||||||
|
<TableActions
|
||||||
|
entity={bookmark}
|
||||||
|
deleteHandler={deleteBookmarkHandler}
|
||||||
|
updateHandler={updateBookmarkHandler}
|
||||||
|
changeVisibilty={changeBookmarkVisibiltyHandler}
|
||||||
|
showPin={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Draggable>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</Droppable>
|
||||||
|
</DragDropContext>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
};
|
||||||
169
client/src/components/Bookmarks/Table/CategoryTable.tsx
Normal file
169
client/src/components/Bookmarks/Table/CategoryTable.tsx
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
import { useState, useEffect, Fragment } from 'react';
|
||||||
|
import {
|
||||||
|
DragDropContext,
|
||||||
|
Droppable,
|
||||||
|
Draggable,
|
||||||
|
DropResult,
|
||||||
|
} from 'react-beautiful-dnd';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
// Redux
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { State } from '../../../store/reducers';
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
import { actionCreators } from '../../../store';
|
||||||
|
|
||||||
|
// Typescript
|
||||||
|
import { Bookmark, Category } from '../../../interfaces';
|
||||||
|
|
||||||
|
// CSS
|
||||||
|
import classes from './Table.module.css';
|
||||||
|
|
||||||
|
// UI
|
||||||
|
import { Table } from '../../UI';
|
||||||
|
import { TableActions } from '../../Actions/TableActions';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
openFormForUpdating: (data: Category | Bookmark) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
|
||||||
|
const {
|
||||||
|
config: { config },
|
||||||
|
bookmarks: { categories },
|
||||||
|
} = useSelector((state: State) => state);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const {
|
||||||
|
pinCategory,
|
||||||
|
deleteCategory,
|
||||||
|
createNotification,
|
||||||
|
reorderCategories,
|
||||||
|
updateCategory,
|
||||||
|
} = bindActionCreators(actionCreators, dispatch);
|
||||||
|
|
||||||
|
const [localCategories, setLocalCategories] = useState<Category[]>([]);
|
||||||
|
|
||||||
|
// Copy categories array
|
||||||
|
useEffect(() => {
|
||||||
|
setLocalCategories([...categories]);
|
||||||
|
}, [categories]);
|
||||||
|
|
||||||
|
// Drag and drop handler
|
||||||
|
const dragEndHanlder = (result: DropResult): void => {
|
||||||
|
if (config.useOrdering !== 'orderId') {
|
||||||
|
createNotification({
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Custom order is disabled',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!result.destination) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tmpCategories = [...localCategories];
|
||||||
|
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
|
||||||
|
tmpCategories.splice(result.destination.index, 0, movedCategory);
|
||||||
|
|
||||||
|
setLocalCategories(tmpCategories);
|
||||||
|
reorderCategories(tmpCategories);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Action handlers
|
||||||
|
const deleteCategoryHandler = (id: number, name: string) => {
|
||||||
|
const proceed = window.confirm(
|
||||||
|
`Are you sure you want to delete ${name}? It will delete ALL assigned bookmarks`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (proceed) {
|
||||||
|
deleteCategory(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCategoryHandler = (id: number) => {
|
||||||
|
const category = categories.find((c) => c.id === id) as Category;
|
||||||
|
openFormForUpdating(category);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pinCategoryHandler = (id: number) => {
|
||||||
|
const category = categories.find((c) => c.id === id) as Category;
|
||||||
|
pinCategory(category);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeCategoryVisibiltyHandler = (id: number) => {
|
||||||
|
const category = categories.find((c) => c.id === id) as Category;
|
||||||
|
updateCategory(id, { ...category, isPublic: !category.isPublic });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className={classes.Message}>
|
||||||
|
{config.useOrdering === 'orderId' ? (
|
||||||
|
<p>You can drag and drop single rows to reorder categories</p>
|
||||||
|
) : (
|
||||||
|
<p>
|
||||||
|
Custom order is disabled. You can change it in the{' '}
|
||||||
|
<Link to="/settings/interface">settings</Link>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DragDropContext onDragEnd={dragEndHanlder}>
|
||||||
|
<Droppable droppableId="categories">
|
||||||
|
{(provided) => (
|
||||||
|
<Table
|
||||||
|
headers={['Name', 'Visibility', 'Actions']}
|
||||||
|
innerRef={provided.innerRef}
|
||||||
|
>
|
||||||
|
{localCategories.map((category, index): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<Draggable
|
||||||
|
key={category.id}
|
||||||
|
draggableId={category.id.toString()}
|
||||||
|
index={index}
|
||||||
|
>
|
||||||
|
{(provided, snapshot) => {
|
||||||
|
const style = {
|
||||||
|
border: snapshot.isDragging
|
||||||
|
? '1px solid var(--color-accent)'
|
||||||
|
: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
...provided.draggableProps.style,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
{...provided.draggableProps}
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<td style={{ width: '300px' }}>{category.name}</td>
|
||||||
|
<td style={{ width: '300px' }}>
|
||||||
|
{category.isPublic ? 'Visible' : 'Hidden'}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
{!snapshot.isDragging && (
|
||||||
|
<TableActions
|
||||||
|
entity={category}
|
||||||
|
deleteHandler={deleteCategoryHandler}
|
||||||
|
updateHandler={updateCategoryHandler}
|
||||||
|
pinHanlder={pinCategoryHandler}
|
||||||
|
changeVisibilty={changeCategoryVisibiltyHandler}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Draggable>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</Droppable>
|
||||||
|
</DragDropContext>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,16 +1,3 @@
|
|||||||
.TableActions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.TableAction {
|
|
||||||
width: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.TableAction:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Message {
|
.Message {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -20,7 +7,8 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Message a {
|
.Message a,
|
||||||
|
.Message span {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
20
client/src/components/Bookmarks/Table/Table.tsx
Normal file
20
client/src/components/Bookmarks/Table/Table.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { Category, Bookmark } from '../../../interfaces';
|
||||||
|
import { ContentType } from '../Bookmarks';
|
||||||
|
import { BookmarksTable } from './BookmarksTable';
|
||||||
|
import { CategoryTable } from './CategoryTable';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
contentType: ContentType;
|
||||||
|
openFormForUpdating: (data: Category | Bookmark) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Table = (props: Props): JSX.Element => {
|
||||||
|
const tableEl =
|
||||||
|
props.contentType === ContentType.category ? (
|
||||||
|
<CategoryTable openFormForUpdating={props.openFormForUpdating} />
|
||||||
|
) : (
|
||||||
|
<BookmarksTable openFormForUpdating={props.openFormForUpdating} />
|
||||||
|
);
|
||||||
|
|
||||||
|
return tableEl;
|
||||||
|
};
|
||||||
@ -22,77 +22,86 @@ export const appsReducer = (
|
|||||||
action: Action
|
action: Action
|
||||||
): AppsState => {
|
): AppsState => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case ActionType.getApps:
|
case ActionType.getApps: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
loading: true,
|
loading: true,
|
||||||
errors: undefined,
|
errors: undefined,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.getAppsSuccess:
|
case ActionType.getAppsSuccess: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
loading: false,
|
loading: false,
|
||||||
apps: action.payload || [],
|
apps: action.payload || [],
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.pinApp:
|
case ActionType.pinApp: {
|
||||||
const pinnedAppIdx = state.apps.findIndex(
|
const appIdx = state.apps.findIndex(
|
||||||
(app) => app.id === action.payload.id
|
(app) => app.id === action.payload.id
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: [
|
apps: [
|
||||||
...state.apps.slice(0, pinnedAppIdx),
|
...state.apps.slice(0, appIdx),
|
||||||
action.payload,
|
action.payload,
|
||||||
...state.apps.slice(pinnedAppIdx + 1),
|
...state.apps.slice(appIdx + 1),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.addAppSuccess:
|
case ActionType.addAppSuccess: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: [...state.apps, action.payload],
|
apps: [...state.apps, action.payload],
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.deleteApp:
|
case ActionType.deleteApp: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: [...state.apps].filter((app) => app.id !== action.payload),
|
apps: [...state.apps].filter((app) => app.id !== action.payload),
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.updateApp:
|
case ActionType.updateApp: {
|
||||||
const updatedAppIdx = state.apps.findIndex(
|
const appIdx = state.apps.findIndex(
|
||||||
(app) => app.id === action.payload.id
|
(app) => app.id === action.payload.id
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: [
|
apps: [
|
||||||
...state.apps.slice(0, updatedAppIdx),
|
...state.apps.slice(0, appIdx),
|
||||||
action.payload,
|
action.payload,
|
||||||
...state.apps.slice(updatedAppIdx + 1),
|
...state.apps.slice(appIdx + 1),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.reorderApps:
|
case ActionType.reorderApps: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: action.payload,
|
apps: action.payload,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.sortApps:
|
case ActionType.sortApps: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
apps: sortData<App>(state.apps, action.payload),
|
apps: sortData<App>(state.apps, action.payload),
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case ActionType.setEditApp:
|
case ActionType.setEditApp: {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
appInUpdate: action.payload,
|
appInUpdate: action.payload,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
|
|||||||
@ -22,24 +22,28 @@ export const authReducer = (
|
|||||||
token: action.payload,
|
token: action.payload,
|
||||||
isAuthenticated: true,
|
isAuthenticated: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.logout:
|
case ActionType.logout:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
token: null,
|
token: null,
|
||||||
isAuthenticated: false,
|
isAuthenticated: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.autoLogin:
|
case ActionType.autoLogin:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
token: action.payload,
|
token: action.payload,
|
||||||
isAuthenticated: true,
|
isAuthenticated: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.authError:
|
case ActionType.authError:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
token: null,
|
token: null,
|
||||||
isAuthenticated: false,
|
isAuthenticated: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,26 +26,31 @@ export const configReducer = (
|
|||||||
loading: false,
|
loading: false,
|
||||||
config: action.payload,
|
config: action.payload,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.updateConfig:
|
case ActionType.updateConfig:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
config: action.payload,
|
config: action.payload,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.fetchQueries:
|
case ActionType.fetchQueries:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
customQueries: action.payload,
|
customQueries: action.payload,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.addQuery:
|
case ActionType.addQuery:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
customQueries: [...state.customQueries, action.payload],
|
customQueries: [...state.customQueries, action.payload],
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.deleteQuery:
|
case ActionType.deleteQuery:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
customQueries: action.payload,
|
customQueries: action.payload,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.updateQuery:
|
case ActionType.updateQuery:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
|
|||||||
@ -29,6 +29,7 @@ export const notificationReducer = (
|
|||||||
],
|
],
|
||||||
idCounter: state.idCounter + 1,
|
idCounter: state.idCounter + 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.clearNotification:
|
case ActionType.clearNotification:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
|
|||||||
@ -24,6 +24,7 @@ export const themeReducer = (
|
|||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case ActionType.setTheme:
|
case ActionType.setTheme:
|
||||||
return { theme: action.payload };
|
return { theme: action.payload };
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user