mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-29 15:49:37 +02:00
Cleaned up Apps component. Delete App redux action. Apps edit mode with functionality do delete and pin apps
This commit is contained in:
parent
7e540587a5
commit
cb0b4b495f
10 changed files with 225 additions and 52 deletions
62
client/src/components/Apps/AppTable/AppTable.module.css
Normal file
62
client/src/components/Apps/AppTable/AppTable.module.css
Normal file
|
@ -0,0 +1,62 @@
|
|||
.TableContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.Table th,
|
||||
.Table td {
|
||||
/* border: 1px solid orange; */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Head */
|
||||
|
||||
.Table th {
|
||||
--header-radius: 4px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.Table th:first-child {
|
||||
border-top-left-radius: var(--header-radius);
|
||||
border-bottom-left-radius: var(--header-radius);
|
||||
}
|
||||
|
||||
.Table th:last-child {
|
||||
border-top-right-radius: var(--header-radius);
|
||||
border-bottom-right-radius: var(--header-radius);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
|
||||
.Table td {
|
||||
/* opacity: 0.5; */
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* .Table td:hover {
|
||||
opacity: 1;
|
||||
} */
|
||||
|
||||
/* Actions */
|
||||
|
||||
.TableActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.TableAction {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.TableAction:hover {
|
||||
cursor: pointer;
|
||||
}
|
67
client/src/components/Apps/AppTable/AppTable.tsx
Normal file
67
client/src/components/Apps/AppTable/AppTable.tsx
Normal file
|
@ -0,0 +1,67 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { App, GlobalState } from '../../../interfaces';
|
||||
import { pinApp, deleteApp } from '../../../store/actions';
|
||||
|
||||
import classes from './AppTable.module.css';
|
||||
import Icon from '../../UI/Icon/Icon';
|
||||
|
||||
interface ComponentProps {
|
||||
apps: App[];
|
||||
pinApp: (id: number, isPinned: boolean) => void;
|
||||
deleteApp: (id: number) => void;
|
||||
}
|
||||
|
||||
const AppTable = (props: ComponentProps): JSX.Element => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.TableContainer}>
|
||||
<table className={classes.Table}>
|
||||
<thead className={classes.TableHead}>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Url</th>
|
||||
<th>Icon</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className={classes.TableBody}>
|
||||
{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)}>
|
||||
<Icon icon='mdiDelete' />
|
||||
</div>
|
||||
<div className={classes.TableAction}><Icon icon='mdiPencil' /></div>
|
||||
<div className={classes.TableAction} onClick={() => props.pinApp(app.id, app.isPinned)}>
|
||||
{app.isPinned? <Icon icon='mdiPinOff' color='var(--color-accent)' /> : <Icon icon='mdiPin' />}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
apps: state.app.apps
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, { pinApp, deleteApp })(AppTable);
|
|
@ -1,4 +1,4 @@
|
|||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Redux
|
||||
|
@ -22,12 +22,11 @@ import Modal from '../UI/Modal/Modal';
|
|||
import AppGrid from './AppGrid/AppGrid';
|
||||
import AppForm from './AppForm/AppForm';
|
||||
import AppTable from './AppTable/AppTable';
|
||||
import Test from '../Test';
|
||||
|
||||
interface ComponentProps {
|
||||
getApps: Function;
|
||||
pinApp: (id: number, isPinned: boolean) => any;
|
||||
addApp: (formData: NewApp) => any;
|
||||
pinApp: (id: number, isPinned: boolean) => void;
|
||||
addApp: (formData: NewApp) => void;
|
||||
apps: App[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
@ -38,17 +37,8 @@ const Apps = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
useEffect(() => {
|
||||
props.getApps();
|
||||
// props.addApp({
|
||||
// name: 'Plex',
|
||||
// url: '192.168.0.128',
|
||||
// icon: 'cat'
|
||||
// })
|
||||
}, [props.getApps]);
|
||||
|
||||
const pinAppHandler = (id: number, state: boolean): void => {
|
||||
props.pinApp(id, state);
|
||||
}
|
||||
|
||||
const toggleModal = (): void => {
|
||||
setModalIsOpen(!modalIsOpen);
|
||||
}
|
||||
|
@ -83,7 +73,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
<div className={classes.Apps}>
|
||||
{props.loading
|
||||
? 'loading'
|
||||
? <Spinner />
|
||||
: (!isInEdit
|
||||
? <AppGrid apps={props.apps} />
|
||||
: <AppTable />)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue