mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-20 03:59:36 +02:00
Merge branch 'master' of https://github.com/pawelmalak/flame into merge_upstream_2020-12-06
This commit is contained in:
François Darveau
commit
021bd4e85a
266 changed files with 13470 additions and 7067 deletions
|
|
@ -1,100 +1,51 @@
|
|||
import { Fragment, KeyboardEvent, useEffect, useState } from 'react';
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { App, Category, NewNotification } from '../../../interfaces';
|
||||
import {
|
||||
createNotification,
|
||||
deleteApp,
|
||||
deleteAppCategory,
|
||||
pinApp,
|
||||
pinAppCategory,
|
||||
reorderAppCategories,
|
||||
reorderApps,
|
||||
updateConfig,
|
||||
} from '../../../store/actions';
|
||||
import { searchConfig } from '../../../utility';
|
||||
import Icon from '../../UI/Icons/Icon/Icon';
|
||||
import Table from '../../UI/Table/Table';
|
||||
import { ContentType } from '../Apps';
|
||||
import classes from './AppTable.module.css';
|
||||
import { App, Category } from '../../../interfaces';
|
||||
import { actionCreators } from '../../../store';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { appTemplate } from '../../../utility';
|
||||
import { TableActions } from '../../Actions/TableActions';
|
||||
import { Message, Table } from '../../UI';
|
||||
|
||||
interface ComponentProps {
|
||||
contentType: ContentType;
|
||||
categories: Category[];
|
||||
apps: App[];
|
||||
pinAppCategory: (category: Category) => void;
|
||||
deleteAppCategory: (id: number) => void;
|
||||
reorderAppCategories: (categories: Category[]) => void;
|
||||
updateHandler: (data: Category | App) => void;
|
||||
pinApp: (app: App) => void;
|
||||
deleteApp: (id: number, categoryId: number) => void;
|
||||
reorderApps: (apps: App[]) => void;
|
||||
updateConfig: (formData: any) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
// Redux
|
||||
// Typescript
|
||||
// UI
|
||||
interface Props {
|
||||
openFormForUpdating: (data: Category | App) => void;
|
||||
}
|
||||
|
||||
const AppTable = (props: ComponentProps): JSX.Element => {
|
||||
const [localCategories, setLocalCategories] = useState<Category[]>([]);
|
||||
const [localApps, setLocalApps] = useState<App[]>([]);
|
||||
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
|
||||
export const AppsTable = ({ openFormForUpdating }: Props): JSX.Element => {
|
||||
const {
|
||||
apps: { categoryInEdit },
|
||||
config: { config },
|
||||
} = useSelector((state: State) => state);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
deleteApp,
|
||||
updateApp,
|
||||
createNotification,
|
||||
reorderApps,
|
||||
} = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const [localApps, setLocalApps] = useState<App[]>([]);
|
||||
|
||||
// Copy categories array
|
||||
useEffect(() => {
|
||||
setLocalCategories([...props.categories]);
|
||||
}, [props.categories]);
|
||||
|
||||
// Copy apps array
|
||||
useEffect(() => {
|
||||
setLocalApps([...props.apps]);
|
||||
}, [props.apps]);
|
||||
|
||||
// Check ordering
|
||||
useEffect(() => {
|
||||
const order = searchConfig("useOrdering", "");
|
||||
|
||||
if (order === "orderId") {
|
||||
setIsCustomOrder(true);
|
||||
if (categoryInEdit) {
|
||||
setLocalApps([...categoryInEdit.apps]);
|
||||
}
|
||||
}, []);
|
||||
}, [categoryInEdit]);
|
||||
|
||||
const deleteCategoryHandler = (category: Category): void => {
|
||||
const proceed = window.confirm(
|
||||
`Are you sure you want to delete ${category.name}? It will delete ALL assigned apps`
|
||||
);
|
||||
|
||||
if (proceed) {
|
||||
props.deleteAppCategory(category.id);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteAppHandler = (app: App): void => {
|
||||
const proceed = window.confirm(
|
||||
`Are you sure you want to delete ${app.name} at ${app.url} ?`
|
||||
);
|
||||
|
||||
if (proceed) {
|
||||
props.deleteApp(app.id, app.categoryId);
|
||||
}
|
||||
};
|
||||
|
||||
// Support keyboard navigation for actions
|
||||
const keyboardActionHandler = (
|
||||
e: KeyboardEvent,
|
||||
object: any,
|
||||
handler: Function
|
||||
) => {
|
||||
if (e.key === "Enter") {
|
||||
handler(object);
|
||||
}
|
||||
};
|
||||
|
||||
const dragEndHandler = (result: DropResult): void => {
|
||||
if (!isCustomOrder) {
|
||||
props.createNotification({
|
||||
title: "Error",
|
||||
message: "Custom order is disabled",
|
||||
// Drag and drop handler
|
||||
const dragEndHanlder = (result: DropResult): void => {
|
||||
if (config.useOrdering !== 'orderId') {
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Custom order is disabled',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
|
@ -103,149 +54,76 @@ const AppTable = (props: ComponentProps): JSX.Element => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (props.contentType === ContentType.app) {
|
||||
const tmpApps = [...localApps];
|
||||
const [movedApp] = tmpApps.splice(result.source.index, 1);
|
||||
tmpApps.splice(result.destination.index, 0, movedApp);
|
||||
const tmpApps = [...localApps];
|
||||
const [movedApp] = tmpApps.splice(result.source.index, 1);
|
||||
tmpApps.splice(result.destination.index, 0, movedApp);
|
||||
|
||||
setLocalApps(tmpApps);
|
||||
props.reorderApps(tmpApps);
|
||||
} else if (props.contentType === ContentType.category) {
|
||||
const tmpCategories = [...localCategories];
|
||||
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
|
||||
tmpCategories.splice(result.destination.index, 0, movedCategory);
|
||||
setLocalApps(tmpApps);
|
||||
|
||||
setLocalCategories(tmpCategories);
|
||||
props.reorderAppCategories(tmpCategories);
|
||||
const categoryId = categoryInEdit?.id || -1;
|
||||
reorderApps(tmpApps, categoryId);
|
||||
};
|
||||
|
||||
// Action hanlders
|
||||
const deleteAppHandler = (id: number, name: string) => {
|
||||
const categoryId = categoryInEdit?.id || -1;
|
||||
|
||||
const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
|
||||
if (proceed) {
|
||||
deleteApp(id, categoryId);
|
||||
}
|
||||
};
|
||||
|
||||
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={dragEndHandler}>
|
||||
<Droppable droppableId="categories">
|
||||
{(provided) => (
|
||||
<Table headers={["Name", "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>{category.name}</td>
|
||||
{!snapshot.isDragging && category.id >= 0 && (
|
||||
<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={() => props.pinAppCategory(category)}
|
||||
onKeyDown={(e) =>
|
||||
keyboardActionHandler(
|
||||
e,
|
||||
category,
|
||||
props.pinAppCategory
|
||||
)
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
{category.isPinned ? (
|
||||
<Icon
|
||||
icon="mdiPinOff"
|
||||
color="var(--color-accent)"
|
||||
/>
|
||||
) : (
|
||||
<Icon icon="mdiPin" />
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Table>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</Fragment>
|
||||
const updateAppHandler = (id: number) => {
|
||||
const app =
|
||||
categoryInEdit?.apps.find((b) => b.id === id) || appTemplate;
|
||||
|
||||
openFormForUpdating(app);
|
||||
};
|
||||
|
||||
const changeAppVisibiltyHandler = (id: number) => {
|
||||
const app =
|
||||
categoryInEdit?.apps.find((b) => b.id === id) || appTemplate;
|
||||
|
||||
const categoryId = categoryInEdit?.id || -1;
|
||||
const [prev, curr] = [categoryId, categoryId];
|
||||
|
||||
updateApp(
|
||||
id,
|
||||
{ ...app, isPublic: !app.isPublic },
|
||||
{ prev, curr }
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={classes.Message}>
|
||||
{isCustomOrder ? (
|
||||
<p>You can drag and drop single rows to reorder application</p>
|
||||
) : (
|
||||
<p>
|
||||
Custom order is disabled. You can change it in{" "}
|
||||
<Link to="/settings/other">settings</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<DragDropContext onDragEnd={dragEndHandler}>
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{!categoryInEdit ? (
|
||||
<Message isPrimary={false}>
|
||||
Switch to grid view and click on the name of category you want to edit
|
||||
</Message>
|
||||
) : (
|
||||
<Message isPrimary={false}>
|
||||
Editing apps from <span>{categoryInEdit.name}</span>
|
||||
category
|
||||
</Message>
|
||||
)}
|
||||
|
||||
{categoryInEdit && (
|
||||
<DragDropContext onDragEnd={dragEndHanlder}>
|
||||
<Droppable droppableId="apps">
|
||||
{(provided) => (
|
||||
<Table
|
||||
headers={["Name", "URL", "Icon", "Category", "Actions"]}
|
||||
headers={[
|
||||
'Name',
|
||||
'URL',
|
||||
'Icon',
|
||||
'Visibility',
|
||||
'Category',
|
||||
'Actions',
|
||||
]}
|
||||
innerRef={provided.innerRef}
|
||||
>
|
||||
{localApps.map((app: App, index): JSX.Element => {
|
||||
{localApps.map((app, index): JSX.Element => {
|
||||
return (
|
||||
<Draggable
|
||||
key={app.id}
|
||||
|
|
@ -255,15 +133,12 @@ const AppTable = (props: ComponentProps): JSX.Element => {
|
|||
{(provided, snapshot) => {
|
||||
const style = {
|
||||
border: snapshot.isDragging
|
||||
? "1px solid var(--color-accent)"
|
||||
: "none",
|
||||
borderRadius: "4px",
|
||||
? '1px solid var(--color-accent)'
|
||||
: 'none',
|
||||
borderRadius: '4px',
|
||||
...provided.draggableProps.style,
|
||||
};
|
||||
|
||||
const category = localCategories.find((category: Category) => category.id === app.categoryId);
|
||||
const categoryName = category?.name;
|
||||
|
||||
return (
|
||||
<tr
|
||||
{...provided.draggableProps}
|
||||
|
|
@ -271,58 +146,24 @@ const AppTable = (props: ComponentProps): JSX.Element => {
|
|||
ref={provided.innerRef}
|
||||
style={style}
|
||||
>
|
||||
<td style={{ width: "200px" }}>{app.name}</td>
|
||||
<td style={{ width: "200px" }}>{app.url}</td>
|
||||
<td style={{ width: "200px" }}>{app.icon}</td>
|
||||
<td style={{ width: "200px" }}>{categoryName}</td>
|
||||
<td style={{ width: '200px' }}>{app.name}</td>
|
||||
<td style={{ width: '200px' }}>{app.url}</td>
|
||||
<td style={{ width: '200px' }}>{app.icon}</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
{app.isPublic ? 'Visible' : 'Hidden'}
|
||||
</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
{categoryInEdit.name}
|
||||
</td>
|
||||
|
||||
{!snapshot.isDragging && (
|
||||
<td className={classes.TableActions}>
|
||||
<div
|
||||
className={classes.TableAction}
|
||||
onClick={() => deleteAppHandler(app)}
|
||||
onKeyDown={(e) =>
|
||||
keyboardActionHandler(
|
||||
e,
|
||||
app,
|
||||
deleteAppHandler
|
||||
)
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Icon icon="mdiDelete" />
|
||||
</div>
|
||||
<div
|
||||
className={classes.TableAction}
|
||||
onClick={() => props.updateHandler(app)}
|
||||
onKeyDown={(e) =>
|
||||
keyboardActionHandler(
|
||||
e,
|
||||
app,
|
||||
props.updateHandler
|
||||
)
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Icon icon="mdiPencil" />
|
||||
</div>
|
||||
<div
|
||||
className={classes.TableAction}
|
||||
onClick={() => props.pinApp(app)}
|
||||
onKeyDown={(e) =>
|
||||
keyboardActionHandler(e, app, props.pinApp)
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
{app.isPinned ? (
|
||||
<Icon
|
||||
icon="mdiPinOff"
|
||||
color="var(--color-accent)"
|
||||
/>
|
||||
) : (
|
||||
<Icon icon="mdiPin" />
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<TableActions
|
||||
entity={app}
|
||||
deleteHandler={deleteAppHandler}
|
||||
updateHandler={updateAppHandler}
|
||||
changeVisibilty={changeAppVisibiltyHandler}
|
||||
showPin={false}
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
|
|
@ -334,20 +175,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
|
|||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const actions = {
|
||||
pinAppCategory,
|
||||
deleteAppCategory,
|
||||
reorderAppCategories,
|
||||
pinApp,
|
||||
deleteApp,
|
||||
reorderApps,
|
||||
updateConfig,
|
||||
createNotification,
|
||||
};
|
||||
|
||||
export default connect(null, actions)(AppTable);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue