Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-20 03:59:36 +02:00
Code Issues Releases Wiki Activity

Apps reordering. Sorting apps while adding them

Browse source
This commit is contained in:
unknown 2021-06-15 16:02:57 +02:00
parent 9a1ec76ffd
commit ce173f2c42
12 changed files with 219 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

130
client/src/components/Apps/AppTable/AppTable.tsx
View file

@ -1,7 +1,8 @@
import { KeyboardEvent } from 'react';
import { connect } from 'react-redux';
import { App, GlobalState } from '../../../interfaces';
import { pinApp, deleteApp } from '../../../store/actions';
import { pinApp, deleteApp, reorderApp } from '../../../store/actions';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import classes from './AppTable.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
@ -12,6 +13,7 @@ interface ComponentProps {
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
updateAppHandler: (app: App) => void;
reorderApp: (apps: App[]) => void;
}
const AppTable = (props: ComponentProps): JSX.Element => {
@ -29,49 +31,89 @@ const AppTable = (props: ComponentProps): JSX.Element => {
}
}
const dragEndHanlder = (result: DropResult): void => {
console.log(result);
if (!result.destination) {
return;
}
const tmpApps = [...props.apps];
const [movedApp] = tmpApps.splice(result.source.index, 1);
tmpApps.splice(result.destination.index, 0, movedApp);
props.reorderApp(tmpApps);
}
return (
<Table headers={[
'Name',
'URL',
'Icon',
'Actions'
]}>
{props.apps.map((app: App): JSX.Element => {
return (
<tr key={app.id}>
<td>{app.name}</td>
<td>{app.url}</td>
<td>{app.icon}</td>
<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.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
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>
</tr>
)
})}
</Table>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId='apps'>
{(provided) => (
<Table headers={[
'Name',
'URL',
'Icon',
'Actions'
]}
innerRef={provided.innerRef}>
{props.apps.map((app: App, index): JSX.Element => {
return (
<Draggable key={app.id} draggableId={app.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'}}>{app.name}</td>
<td style={{width:'200px'}}>{app.url}</td>
<td style={{width:'200px'}}>{app.icon}</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.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
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>
)}
</tr>
)
}}
</Draggable>
)
})}
</Table>
)}
</Droppable>
</DragDropContext>
)
}
@ -81,4 +123,4 @@ const mapStateToProps = (state: GlobalState) => {
}
}
export default connect(mapStateToProps, { pinApp, deleteApp })(AppTable);
export default connect(mapStateToProps, { pinApp, deleteApp, reorderApp })(AppTable);