1
0
Fork 0
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:
unknown 2021-05-13 18:23:12 +02:00
parent 7e540587a5
commit cb0b4b495f
10 changed files with 225 additions and 52 deletions

View 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;
}

View 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);

View file

@ -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 />)