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

Client: Implemented new config system

Browse source
This commit is contained in:
Paweł Malak 2021-10-22 13:31:02 +02:00
parent 34279c8b8c
commit 76e50624e7
19 changed files with 625 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,24 @@
import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import {
DragDropContext,
Droppable,
Draggable,
DropResult,
} from 'react-beautiful-dnd';
import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions';
import {
pinApp,
deleteApp,
reorderApps,
updateConfig,
createNotification,
} from '../../../store/actions';
// Typescript
import { App, GlobalState, NewNotification } from '../../../interfaces';
import { App, Config, GlobalState, NewNotification } from '../../../interfaces';
// CSS
import classes from './AppTable.module.css';
@ -16,11 +27,9 @@ import classes from './AppTable.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table';
// Utils
import { searchConfig } from '../../../utility';
interface ComponentProps {
apps: App[];
config: Config;
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
updateAppHandler: (app: App) => void;
@ -36,38 +45,44 @@ const AppTable = (props: ComponentProps): JSX.Element => {
// Copy apps array
useEffect(() => {
setLocalApps([...props.apps]);
}, [props.apps])
}, [props.apps]);
// Check ordering
useEffect(() => {
const order = searchConfig('useOrdering', '');
const order = props.config.useOrdering;
if (order === 'orderId') {
setIsCustomOrder(true);
}
}, [])
}, []);
const deleteAppHandler = (app: App): void => {
const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`);
const proceed = window.confirm(
`Are you sure you want to delete ${app.name} at ${app.url} ?`
);
if (proceed) {
props.deleteApp(app.id);
}
}
};
// Support keyboard navigation for actions
const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
const keyboardActionHandler = (
e: KeyboardEvent,
app: App,
handler: Function
) => {
if (e.key === 'Enter') {
handler(app);
}
}
};
const dragEndHanlder = (result: DropResult): void => {
if (!isCustomOrder) {
props.createNotification({
title: 'Error',
message: 'Custom order is disabled'
})
message: 'Custom order is disabled',
});
return;
}
@ -81,32 +96,39 @@ const AppTable = (props: ComponentProps): JSX.Element => {
setLocalApps(tmpApps);
props.reorderApps(tmpApps);
}
};
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>
}
{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={dragEndHanlder}>
<Droppable droppableId='apps'>
<Droppable droppableId="apps">
{(provided) => (
<Table headers={[
'Name',
'URL',
'Icon',
'Actions'
]}
innerRef={provided.innerRef}>
<Table
headers={['Name', 'URL', 'Icon', 'Actions']}
innerRef={provided.innerRef}
>
{localApps.map((app: App, index): JSX.Element => {
return (
<Draggable key={app.id} draggableId={app.id.toString()} index={index}>
<Draggable
key={app.id}
draggableId={app.id.toString()}
index={index}
>
{(provided, snapshot) => {
const style = {
border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
border: snapshot.isDragging
? '1px solid var(--color-accent)'
: 'none',
borderRadius: '4px',
...provided.draggableProps.style,
};
@ -118,63 +140,85 @@ 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' }}>{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' />
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' />
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' />
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>
</Fragment>
)
}
);
};
const mapStateToProps = (state: GlobalState) => {
return {
apps: state.app.apps
}
}
apps: state.app.apps,
config: state.config.config,
};
};
const actions = {
pinApp,
deleteApp,
reorderApps,
updateConfig,
createNotification
}
createNotification,
};
export default connect(mapStateToProps, actions)(AppTable);
export default connect(mapStateToProps, actions)(AppTable);