mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-27 23:09:35 +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
|
|
@ -10,7 +10,7 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.AppCardIcon {
|
||||
.AppIcon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 0.5em;
|
||||
|
|
|
|||
|
|
@ -1,64 +1,100 @@
|
|||
import { Fragment } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { App, Category } from '../../../interfaces';
|
||||
import { iconParser, searchConfig, urlParser } from '../../../utility';
|
||||
import Icon from '../../UI/Icons/Icon/Icon';
|
||||
import { actionCreators } from '../../../store';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
|
||||
import { Icon } from '../../UI';
|
||||
import classes from './AppCard.module.css';
|
||||
|
||||
interface ComponentProps {
|
||||
interface Props {
|
||||
category: Category;
|
||||
apps: App[]
|
||||
pinHandler?: Function;
|
||||
fromHomepage?: boolean;
|
||||
}
|
||||
|
||||
const AppCard = (props: ComponentProps): JSX.Element => {
|
||||
export const AppCard = (props: Props): JSX.Element => {
|
||||
const { category, fromHomepage = false } = props;
|
||||
|
||||
const {
|
||||
config: { config },
|
||||
auth: { isAuthenticated },
|
||||
} = useSelector((state: State) => state);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
return (
|
||||
<div className={classes.AppCard}>
|
||||
<h3>{props.category.name}</h3>
|
||||
<div className={classes.Apps}>
|
||||
{props.apps.map((app: App) => {
|
||||
const [displayUrl, redirectUrl] = urlParser(app.url);
|
||||
<h3
|
||||
className={
|
||||
fromHomepage || !isAuthenticated ? '' : classes.AppHeader
|
||||
}
|
||||
onClick={() => {
|
||||
if (!fromHomepage && isAuthenticated) {
|
||||
setEditCategory(category);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{category.name}
|
||||
</h3>
|
||||
|
||||
let iconEl: JSX.Element;
|
||||
const { icon } = app;
|
||||
|
||||
if (/.(jpeg|jpg|png)$/i.test(icon)) {
|
||||
iconEl = (
|
||||
<img
|
||||
src={`/uploads/${icon}`}
|
||||
alt={`${app.name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
);
|
||||
} else if (/.(svg)$/i.test(icon)) {
|
||||
iconEl = (
|
||||
<div className={classes.CustomIcon}>
|
||||
<svg
|
||||
data-src={`/uploads/${icon}`}
|
||||
fill='var(--color-primary)'
|
||||
className={classes.CustomIcon}
|
||||
></svg>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
iconEl = <Icon icon={iconParser(icon)} />;
|
||||
<div className={classes.Apps}>
|
||||
{category.apps.map((app: App) => {
|
||||
const redirectUrl = urlParser(app.url)[1];
|
||||
|
||||
let iconEl: JSX.Element = <Fragment></Fragment>;
|
||||
|
||||
if (app.icon) {
|
||||
const { icon, name } = app;
|
||||
|
||||
if (isImage(icon)) {
|
||||
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
|
||||
|
||||
iconEl = (
|
||||
<div className={classes.AppIcon}>
|
||||
<img
|
||||
src={source}
|
||||
alt={`${name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (isSvg(icon)) {
|
||||
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
|
||||
|
||||
iconEl = (
|
||||
<div className={classes.AppIcon}>
|
||||
<svg
|
||||
data-src={source}
|
||||
fill="var(--color-primary)"
|
||||
className={classes.AppIconSvg}
|
||||
></svg>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
iconEl = (
|
||||
<div className={classes.AppIcon}>
|
||||
<Icon icon={iconParser(icon)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={redirectUrl}
|
||||
target={searchConfig('appsSameTab', false) ? '' : '_blank'}
|
||||
rel='noreferrer'
|
||||
key={`app-${app.id}`}>
|
||||
<div className={classes.AppCardIcon}>{iconEl}</div>
|
||||
<div className={classes.AppCardDetails}>
|
||||
<h5>{app.name}</h5>
|
||||
<span>{displayUrl}</span>
|
||||
</div>
|
||||
target={config.appsSameTab ? '' : '_blank'}
|
||||
rel="noreferrer"
|
||||
key={`app-${app.id}`}
|
||||
>
|
||||
{app.icon && iconEl}
|
||||
{app.name}
|
||||
</a>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppCard;
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,325 +0,0 @@
|
|||
import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { App, Category, GlobalState, NewApp, NewCategory, NewNotification } from '../../../interfaces';
|
||||
import {
|
||||
addApp,
|
||||
addAppCategory,
|
||||
createNotification,
|
||||
getAppCategories,
|
||||
updateApp,
|
||||
updateAppCategory,
|
||||
} from '../../../store/actions';
|
||||
import Button from '../../UI/Buttons/Button/Button';
|
||||
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
|
||||
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
|
||||
import { ContentType } from '../Apps';
|
||||
import classes from './AppForm.module.css';
|
||||
|
||||
interface ComponentProps {
|
||||
modalHandler: () => void;
|
||||
contentType: ContentType;
|
||||
categories: Category[];
|
||||
category?: Category;
|
||||
app?: App;
|
||||
addAppCategory: (formData: NewCategory) => void;
|
||||
addApp: (formData: NewApp | FormData) => void;
|
||||
updateAppCategory: (id: number, formData: NewCategory) => void;
|
||||
updateApp: (id: number, formData: NewApp | FormData, previousCategoryId: number) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
}
|
||||
|
||||
const AppForm = (props: ComponentProps): JSX.Element => {
|
||||
const [useCustomIcon, setUseCustomIcon] = useState<boolean>(false);
|
||||
const [customIcon, setCustomIcon] = useState<File | null>(null);
|
||||
const [categoryData, setCategoryData] = useState<NewCategory>({
|
||||
name: '',
|
||||
type: 'apps'
|
||||
})
|
||||
|
||||
const [appData, setAppData] = useState<NewApp>({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
});
|
||||
|
||||
// Load category data if provided for editing
|
||||
useEffect(() => {
|
||||
if (props.category) {
|
||||
setCategoryData({ name: props.category.name, type: props.category.type });
|
||||
} else {
|
||||
setCategoryData({ name: '', type: "apps" });
|
||||
}
|
||||
}, [props.category]);
|
||||
|
||||
// Load app data if provided for editing
|
||||
useEffect(() => {
|
||||
if (props.app) {
|
||||
setAppData({
|
||||
name: props.app.name,
|
||||
url: props.app.url,
|
||||
categoryId: props.app.categoryId,
|
||||
icon: props.app.icon,
|
||||
});
|
||||
} else {
|
||||
setAppData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
});
|
||||
}
|
||||
}, [props.app]);
|
||||
|
||||
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
|
||||
e.preventDefault();
|
||||
|
||||
const createFormData = (): FormData => {
|
||||
const data = new FormData();
|
||||
Object.entries(appData).forEach((entry: [string, any]) => {
|
||||
data.append(entry[0], entry[1]);
|
||||
});
|
||||
if (customIcon) {
|
||||
data.append('icon', customIcon);
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
if (!props.category && !props.app) {
|
||||
// Add new
|
||||
if (props.contentType === ContentType.category) {
|
||||
// Add category
|
||||
props.addAppCategory(categoryData);
|
||||
setCategoryData({ name: '', type: 'apps' });
|
||||
} else if (props.contentType === ContentType.app) {
|
||||
// Add app
|
||||
if (appData.categoryId === -1) {
|
||||
props.createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select a category'
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.addApp(data);
|
||||
} else {
|
||||
props.addApp(appData);
|
||||
}
|
||||
setAppData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: appData.categoryId,
|
||||
icon: ''
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Update
|
||||
if (props.contentType === ContentType.category && props.category) {
|
||||
// Update category
|
||||
props.updateAppCategory(props.category.id, categoryData);
|
||||
setCategoryData({ name: '', type: 'apps' });
|
||||
} else if (props.contentType === ContentType.app && props.app) {
|
||||
// Update app
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.updateApp(props.app.id, data, props.app.categoryId);
|
||||
} else {
|
||||
props.updateApp(props.app.id, appData, props.app.categoryId);
|
||||
props.modalHandler();
|
||||
}
|
||||
}
|
||||
|
||||
setAppData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
});
|
||||
|
||||
setCustomIcon(null);
|
||||
}
|
||||
}
|
||||
|
||||
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, setDataFunction: Dispatch<SetStateAction<any>>, data: any): void => {
|
||||
setDataFunction({
|
||||
...data,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
const toggleUseCustomIcon = (): void => {
|
||||
setUseCustomIcon(!useCustomIcon);
|
||||
setCustomIcon(null);
|
||||
};
|
||||
|
||||
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (e.target.files) {
|
||||
setCustomIcon(e.target.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
let button = <Button>Submit</Button>
|
||||
|
||||
if (!props.category && !props.app) {
|
||||
if (props.contentType === ContentType.category) {
|
||||
button = <Button>Add new category</Button>;
|
||||
} else {
|
||||
button = <Button>Add new app</Button>;
|
||||
}
|
||||
} else if (props.category) {
|
||||
button = <Button>Update category</Button>
|
||||
} else if (props.app) {
|
||||
button = <Button>Update app</Button>
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalForm
|
||||
modalHandler={props.modalHandler}
|
||||
formHandler={formSubmitHandler}
|
||||
>
|
||||
{props.contentType === ContentType.category
|
||||
? (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryName'>Category Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='categoryName'
|
||||
placeholder='Social Media'
|
||||
required
|
||||
value={categoryData.name}
|
||||
onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
)
|
||||
: (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='name'>App Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
placeholder='Bookstack'
|
||||
required
|
||||
value={appData.name}
|
||||
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='url'>App URL</label>
|
||||
<input
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='bookstack.example.com'
|
||||
required
|
||||
value={appData.url}
|
||||
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}Check supported URL formats
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryId'>App Category</label>
|
||||
<select
|
||||
name='categoryId'
|
||||
id='categoryId'
|
||||
required
|
||||
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
|
||||
value={appData.categoryId}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</InputGroup>
|
||||
{!useCustomIcon
|
||||
// use mdi icon
|
||||
? (<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='text'
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
required
|
||||
value={appData.icon}
|
||||
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI.
|
||||
<a
|
||||
href='https://materialdesignicons.com/'
|
||||
target='blank'>
|
||||
{' '}Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon()}
|
||||
className={classes.Switch}>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>)
|
||||
// upload custom icon
|
||||
: (<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
required
|
||||
onChange={(e) => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png,.svg'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon()}
|
||||
className={classes.Switch}>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
{button}
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
categories: state.app.categories
|
||||
}
|
||||
}
|
||||
|
||||
const dispatchMap = {
|
||||
getAppCategories,
|
||||
addAppCategory,
|
||||
addApp,
|
||||
updateAppCategory,
|
||||
updateApp,
|
||||
createNotification
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, dispatchMap)(AppForm);
|
||||
|
|
@ -20,21 +20,3 @@
|
|||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.GridMessage {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.GridMessage a {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.AppsMessage {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.AppsMessage a {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -1,63 +1,62 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { App, Category } from '../../../interfaces';
|
||||
import AppCard from '../AppCard/AppCard';
|
||||
import { Category } from '../../../interfaces';
|
||||
import { Message } from '../../UI';
|
||||
import { AppCard } from '../AppCard/AppCard';
|
||||
import classes from './AppGrid.module.css';
|
||||
|
||||
interface ComponentProps {
|
||||
interface Props {
|
||||
categories: Category[];
|
||||
apps: App[];
|
||||
totalCategories?: number;
|
||||
searching: boolean;
|
||||
fromHomepage?: boolean;
|
||||
}
|
||||
|
||||
const AppGrid = (props: ComponentProps): JSX.Element => {
|
||||
export const AppGrid = (props: Props): JSX.Element => {
|
||||
const {
|
||||
categories,
|
||||
totalCategories,
|
||||
searching,
|
||||
fromHomepage = false,
|
||||
} = props;
|
||||
|
||||
let apps: JSX.Element;
|
||||
|
||||
if (props.categories.length > 0) {
|
||||
if (props.apps.length > 0) {
|
||||
if (categories.length) {
|
||||
if (searching && !categories[0].apps.length) {
|
||||
apps = <Message>No apps match your search criteria</Message>;
|
||||
} else {
|
||||
apps = (
|
||||
<div className={classes.AppGrid}>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return <AppCard key={category.id} category={category} apps={props.apps.filter((app: App) => app.categoryId === category.id)} />
|
||||
})}
|
||||
{categories.map(
|
||||
(category: Category): JSX.Element => (
|
||||
<AppCard
|
||||
category={category}
|
||||
fromHomepage={fromHomepage}
|
||||
key={category.id}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (props.searching) {
|
||||
apps = (
|
||||
<p className={classes.AppsMessage}>
|
||||
No apps match your search criteria
|
||||
</p>
|
||||
);
|
||||
} else {
|
||||
apps = (
|
||||
<p className={classes.AppsMessage}>
|
||||
You don't have any applications. You can add a new one from the{' '}
|
||||
<Link to="/applications">/applications</Link> menu
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (props.totalCategories) {
|
||||
if (totalCategories) {
|
||||
apps = (
|
||||
<p className={classes.AppsMessage}>
|
||||
There are no pinned application categories. You can pin them from the{' '}
|
||||
<Link to="/applications">/applications</Link> menu
|
||||
</p>
|
||||
<Message>
|
||||
There are no pinned categories. You can pin them from the{' '}
|
||||
<Link to="/apps">/apps</Link> menu
|
||||
</Message>
|
||||
);
|
||||
} else {
|
||||
apps = (
|
||||
<p className={classes.AppsMessage}>
|
||||
You don't have any applications. You can add a new one from the{' '}
|
||||
<Link to="/applications">/applications</Link> menu
|
||||
</p>
|
||||
<Message>
|
||||
You don't have any apps. You can add a new one from{' '}
|
||||
<Link to="/apps">/apps</Link> menu
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return apps;
|
||||
};
|
||||
|
||||
export default AppGrid;
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
.TableActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.TableAction {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.TableAction:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Message {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.Message a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.Message a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { App, Category, GlobalState } from '../../interfaces';
|
||||
import { getAppCategories, getApps } from '../../store/actions';
|
||||
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
|
||||
import Headline from '../UI/Headlines/Headline/Headline';
|
||||
import { Container } from '../UI/Layout/Layout';
|
||||
import Modal from '../UI/Modal/Modal';
|
||||
import Spinner from '../UI/Spinner/Spinner';
|
||||
import AppForm from './AppForm/AppForm';
|
||||
import AppGrid from './AppGrid/AppGrid';
|
||||
import { App, Category } from '../../interfaces';
|
||||
import { actionCreators } from '../../store';
|
||||
import { State } from '../../store/reducers';
|
||||
import { ActionButton, Container, Headline, Message, Modal, Spinner } from '../UI';
|
||||
import { AppGrid } from './AppGrid/AppGrid';
|
||||
import classes from './Apps.module.css';
|
||||
import AppTable from './AppTable/AppTable';
|
||||
import { Form } from './Form/Form';
|
||||
import { Table } from './Table/Table';
|
||||
|
||||
interface ComponentProps {
|
||||
loading: boolean;
|
||||
categories: Category[];
|
||||
getAppCategories: () => void;
|
||||
apps: App[];
|
||||
getApps: () => void;
|
||||
interface Props {
|
||||
searching: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -28,131 +21,159 @@ export enum ContentType {
|
|||
app,
|
||||
}
|
||||
|
||||
const Apps = (props: ComponentProps): JSX.Element => {
|
||||
const { apps, getApps, getAppCategories, categories, loading, searching = false } = props;
|
||||
export const Apps = (props: Props): JSX.Element => {
|
||||
// Get Redux state
|
||||
const {
|
||||
apps: { loading, categories, categoryInEdit },
|
||||
auth: { isAuthenticated },
|
||||
} = useSelector((state: State) => state);
|
||||
|
||||
// Get Redux action creators
|
||||
const dispatch = useDispatch();
|
||||
const { getCategories, setEditCategory, setEditApp } =
|
||||
bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
// Load categories if array is empty
|
||||
useEffect(() => {
|
||||
if (!categories.length) {
|
||||
getCategories();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Form
|
||||
const [modalIsOpen, setModalIsOpen] = useState(false);
|
||||
const [formContentType, setFormContentType] = useState(ContentType.category);
|
||||
const [isInEdit, setIsInEdit] = useState(false);
|
||||
const [isInUpdate, setIsInUpdate] = useState(false);
|
||||
|
||||
// Table
|
||||
const [showTable, setShowTable] = useState(false);
|
||||
const [tableContentType, setTableContentType] = useState(
|
||||
ContentType.category
|
||||
);
|
||||
const [isInUpdate, setIsInUpdate] = useState(false);
|
||||
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
|
||||
name: "",
|
||||
id: -1,
|
||||
isPinned: false,
|
||||
orderId: 0,
|
||||
type: "apps",
|
||||
apps: [],
|
||||
bookmarks: [],
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
const [appInUpdate, setAppInUpdate] = useState<App>({
|
||||
name: "string",
|
||||
url: "string",
|
||||
categoryId: -1,
|
||||
icon: "string",
|
||||
isPinned: false,
|
||||
orderId: 0,
|
||||
id: 0,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
|
||||
// Observe if user is authenticated -> set default view (grid) if not
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) {
|
||||
setShowTable(false);
|
||||
setModalIsOpen(false);
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
useEffect(() => {
|
||||
if (apps.length === 0) {
|
||||
getApps();
|
||||
if (categoryInEdit && !modalIsOpen) {
|
||||
setTableContentType(ContentType.app);
|
||||
setShowTable(true);
|
||||
}
|
||||
}, [getApps]);
|
||||
}, [categoryInEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (categories.length === 0) {
|
||||
getAppCategories();
|
||||
}
|
||||
}, [getAppCategories]);
|
||||
setShowTable(false);
|
||||
setEditCategory(null);
|
||||
}, []);
|
||||
|
||||
// Form actions
|
||||
const toggleModal = (): void => {
|
||||
setModalIsOpen(!modalIsOpen);
|
||||
};
|
||||
|
||||
const addActionHandler = (contentType: ContentType) => {
|
||||
const openFormForAdding = (contentType: ContentType) => {
|
||||
setFormContentType(contentType);
|
||||
setIsInUpdate(false);
|
||||
toggleModal();
|
||||
};
|
||||
|
||||
const editActionHandler = (contentType: ContentType) => {
|
||||
// We"re in the edit mode and the same button was clicked - go back to list
|
||||
if (isInEdit && contentType === tableContentType) {
|
||||
setIsInEdit(false);
|
||||
const openFormForUpdating = (data: Category | App): void => {
|
||||
setIsInUpdate(true);
|
||||
|
||||
const instanceOfCategory = (object: any): object is Category => {
|
||||
return 'apps' in object;
|
||||
};
|
||||
|
||||
if (instanceOfCategory(data)) {
|
||||
setFormContentType(ContentType.category);
|
||||
setEditCategory(data);
|
||||
} else {
|
||||
setIsInEdit(true);
|
||||
setFormContentType(ContentType.app);
|
||||
setEditApp(data);
|
||||
}
|
||||
|
||||
toggleModal();
|
||||
};
|
||||
|
||||
// Table actions
|
||||
const showTableForEditing = (contentType: ContentType) => {
|
||||
// We're in the edit mode and the same button was clicked - go back to list
|
||||
if (showTable && contentType === tableContentType) {
|
||||
setEditCategory(null);
|
||||
setShowTable(false);
|
||||
} else {
|
||||
setShowTable(true);
|
||||
setTableContentType(contentType);
|
||||
}
|
||||
};
|
||||
|
||||
const instanceOfCategory = (object: any): object is Category => {
|
||||
return !("categoryId" in object);
|
||||
};
|
||||
|
||||
const goToUpdateMode = (data: Category | App): void => {
|
||||
setIsInUpdate(true);
|
||||
if (instanceOfCategory(data)) {
|
||||
setFormContentType(ContentType.category);
|
||||
setCategoryInUpdate(data);
|
||||
} else {
|
||||
setFormContentType(ContentType.app);
|
||||
setAppInUpdate(data);
|
||||
}
|
||||
toggleModal();
|
||||
const finishEditing = () => {
|
||||
setShowTable(false);
|
||||
setEditCategory(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
|
||||
{!isInUpdate ? (
|
||||
<AppForm modalHandler={toggleModal} contentType={formContentType} />
|
||||
) : (
|
||||
formContentType === ContentType.category ? (
|
||||
<AppForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
|
||||
) : (
|
||||
<AppForm modalHandler={toggleModal} contentType={formContentType} app={appInUpdate} />
|
||||
)
|
||||
)}
|
||||
<Form
|
||||
modalHandler={toggleModal}
|
||||
contentType={formContentType}
|
||||
inUpdate={isInUpdate}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Headline
|
||||
title="All Applications"
|
||||
subtitle={(<Link to="/">Go back</Link>)}
|
||||
/>
|
||||
<Headline title="All Apps" subtitle={<Link to="/">Go back</Link>} />
|
||||
|
||||
<div className={classes.ActionsContainer}>
|
||||
<ActionButton name="Add Category" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.category)} />
|
||||
<ActionButton name="Add App" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.app)} />
|
||||
<ActionButton name="Edit Categories" icon="mdiPencil" handler={() => editActionHandler(ContentType.category)} />
|
||||
<ActionButton name="Edit Apps" icon="mdiPencil" handler={() => editActionHandler(ContentType.app)} />
|
||||
</div>
|
||||
{isAuthenticated && (
|
||||
<div className={classes.ActionsContainer}>
|
||||
<ActionButton
|
||||
name="Add Category"
|
||||
icon="mdiPlusBox"
|
||||
handler={() => openFormForAdding(ContentType.category)}
|
||||
/>
|
||||
<ActionButton
|
||||
name="Add App"
|
||||
icon="mdiPlusBox"
|
||||
handler={() => openFormForAdding(ContentType.app)}
|
||||
/>
|
||||
<ActionButton
|
||||
name="Edit Categories"
|
||||
icon="mdiPencil"
|
||||
handler={() => showTableForEditing(ContentType.category)}
|
||||
/>
|
||||
{showTable && tableContentType === ContentType.app && (
|
||||
<ActionButton
|
||||
name="Finish Editing"
|
||||
icon="mdiPencil"
|
||||
handler={finishEditing}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{categories.length && isAuthenticated && !showTable ? (
|
||||
<Message isPrimary={false}>
|
||||
Click on category name to edit its apps
|
||||
</Message>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<Spinner />
|
||||
) : (!isInEdit ? (
|
||||
<AppGrid categories={categories} apps={apps} searching />
|
||||
) : (
|
||||
<AppTable contentType={tableContentType} categories={categories} apps={apps} updateHandler={goToUpdateMode} />
|
||||
)
|
||||
) : !showTable ? (
|
||||
<AppGrid categories={categories} searching={props.searching} />
|
||||
) : (
|
||||
<Table
|
||||
contentType={tableContentType}
|
||||
openFormForUpdating={openFormForUpdating}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
loading: state.app.loading,
|
||||
categories: state.app.categories,
|
||||
apps: state.app.apps,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);
|
||||
|
|
|
|||
260
client/src/components/Apps/Form/AppsForm.tsx
Normal file
260
client/src/components/Apps/Form/AppsForm.tsx
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { App, Category, NewApp } from '../../../interfaces';
|
||||
import { actionCreators } from '../../../store';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { inputHandler, newAppTemplate } from '../../../utility';
|
||||
import { Button, InputGroup, ModalForm } from '../../UI';
|
||||
import classes from './Form.module.css';
|
||||
|
||||
// Redux
|
||||
// Typescript
|
||||
// UI
|
||||
// CSS
|
||||
// Utils
|
||||
interface Props {
|
||||
modalHandler: () => void;
|
||||
app?: App;
|
||||
}
|
||||
|
||||
export const AppsForm = ({
|
||||
app,
|
||||
modalHandler,
|
||||
}: Props): JSX.Element => {
|
||||
const { categories } = useSelector((state: State) => state.apps);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { addApp, updateApp, createNotification } =
|
||||
bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
|
||||
const [customIcon, setCustomIcon] = useState<File | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState<NewApp>(newAppTemplate);
|
||||
|
||||
// Load app data if provided for editing
|
||||
useEffect(() => {
|
||||
if (app) {
|
||||
setFormData({ ...app });
|
||||
} else {
|
||||
setFormData(newAppTemplate);
|
||||
}
|
||||
}, [app]);
|
||||
|
||||
const inputChangeHandler = (
|
||||
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
|
||||
options?: { isNumber?: boolean; isBool?: boolean }
|
||||
) => {
|
||||
inputHandler<NewApp>({
|
||||
e,
|
||||
options,
|
||||
setStateHandler: setFormData,
|
||||
state: formData,
|
||||
});
|
||||
};
|
||||
|
||||
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (e.target.files) {
|
||||
setCustomIcon(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
// Apps form handler
|
||||
const formSubmitHandler = (e: FormEvent): void => {
|
||||
e.preventDefault();
|
||||
|
||||
const createFormData = (): FormData => {
|
||||
const data = new FormData();
|
||||
if (customIcon) {
|
||||
data.append('icon', customIcon);
|
||||
}
|
||||
data.append('name', formData.name);
|
||||
data.append('url', formData.url);
|
||||
data.append('categoryId', `${formData.categoryId}`);
|
||||
data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
const checkCategory = (): boolean => {
|
||||
if (formData.categoryId < 0) {
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select category',
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
if (!app) {
|
||||
// add new app
|
||||
if (!checkCategory()) return;
|
||||
|
||||
if (formData.categoryId < 0) {
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select category',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
addApp(data);
|
||||
} else {
|
||||
addApp(formData);
|
||||
}
|
||||
|
||||
setFormData({
|
||||
...newAppTemplate,
|
||||
categoryId: formData.categoryId,
|
||||
isPublic: formData.isPublic,
|
||||
});
|
||||
} else {
|
||||
// update
|
||||
if (!checkCategory()) return;
|
||||
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
updateApp(app.id, data, {
|
||||
prev: app.categoryId,
|
||||
curr: formData.categoryId,
|
||||
});
|
||||
} else {
|
||||
updateApp(app.id, formData, {
|
||||
prev: app.categoryId,
|
||||
curr: formData.categoryId,
|
||||
});
|
||||
}
|
||||
|
||||
modalHandler();
|
||||
}
|
||||
|
||||
setFormData({ ...newAppTemplate, categoryId: formData.categoryId });
|
||||
setCustomIcon(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
|
||||
{/* NAME */}
|
||||
<InputGroup>
|
||||
<label htmlFor="name">App Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Reddit"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* URL */}
|
||||
<InputGroup>
|
||||
<label htmlFor="url">App URL</label>
|
||||
<input
|
||||
type="text"
|
||||
name="url"
|
||||
id="url"
|
||||
placeholder="reddit.com"
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* CATEGORY */}
|
||||
<InputGroup>
|
||||
<label htmlFor="categoryId">App Category</label>
|
||||
<select
|
||||
name="categoryId"
|
||||
id="categoryId"
|
||||
required
|
||||
onChange={(e) => inputChangeHandler(e, { isNumber: true })}
|
||||
value={formData.categoryId}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</InputGroup>
|
||||
|
||||
{/* ICON */}
|
||||
{!useCustomIcon ? (
|
||||
// mdi
|
||||
<InputGroup>
|
||||
<label htmlFor="icon">App Icon (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="icon"
|
||||
id="icon"
|
||||
placeholder="book-open-outline"
|
||||
value={formData.icon}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI or pass a valid URL.
|
||||
<a href="https://materialdesignicons.com/" target="blank">
|
||||
{' '}
|
||||
Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>
|
||||
) : (
|
||||
// custom
|
||||
<InputGroup>
|
||||
<label htmlFor="icon">App Icon (optional)</label>
|
||||
<input
|
||||
type="file"
|
||||
name="icon"
|
||||
id="icon"
|
||||
onChange={(e) => fileChangeHandler(e)}
|
||||
accept=".jpg,.jpeg,.png,.svg,.ico"
|
||||
/>
|
||||
<span
|
||||
onClick={() => {
|
||||
setCustomIcon(null);
|
||||
toggleUseCustomIcon(!useCustomIcon);
|
||||
}}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>
|
||||
)}
|
||||
|
||||
{/* VISIBILTY */}
|
||||
<InputGroup>
|
||||
<label htmlFor="isPublic">App visibility</label>
|
||||
<select
|
||||
id="isPublic"
|
||||
name="isPublic"
|
||||
value={formData.isPublic ? 1 : 0}
|
||||
onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
||||
>
|
||||
<option value={1}>Visible (anyone can access it)</option>
|
||||
<option value={0}>Hidden (authentication required)</option>
|
||||
</select>
|
||||
</InputGroup>
|
||||
|
||||
<Button>{app ? 'Update app' : 'Add new app'}</Button>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
97
client/src/components/Apps/Form/CategoryForm.tsx
Normal file
97
client/src/components/Apps/Form/CategoryForm.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { Category, NewCategory } from '../../../interfaces';
|
||||
import { actionCreators } from '../../../store';
|
||||
import { inputHandler, newAppCategoryTemplate } from '../../../utility';
|
||||
import { Button, InputGroup, ModalForm } from '../../UI';
|
||||
|
||||
// Redux
|
||||
// Typescript
|
||||
// UI
|
||||
// Utils
|
||||
interface Props {
|
||||
modalHandler: () => void;
|
||||
category?: Category;
|
||||
}
|
||||
|
||||
export const CategoryForm = ({
|
||||
category,
|
||||
modalHandler,
|
||||
}: Props): JSX.Element => {
|
||||
const dispatch = useDispatch();
|
||||
const { addCategory, updateCategory } = bindActionCreators(
|
||||
actionCreators,
|
||||
dispatch
|
||||
);
|
||||
|
||||
const [formData, setFormData] = useState<NewCategory>(newAppCategoryTemplate);
|
||||
|
||||
// Load category data if provided for editing
|
||||
useEffect(() => {
|
||||
if (category) {
|
||||
setFormData({ ...category });
|
||||
} else {
|
||||
setFormData(newAppCategoryTemplate);
|
||||
}
|
||||
}, [category]);
|
||||
|
||||
const inputChangeHandler = (
|
||||
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
|
||||
options?: { isNumber?: boolean; isBool?: boolean }
|
||||
) => {
|
||||
inputHandler<NewCategory>({
|
||||
e,
|
||||
options,
|
||||
setStateHandler: setFormData,
|
||||
state: formData,
|
||||
});
|
||||
};
|
||||
|
||||
// Category form handler
|
||||
const formSubmitHandler = (e: FormEvent): void => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!category) {
|
||||
addCategory(formData);
|
||||
} else {
|
||||
updateCategory(category.id, formData);
|
||||
modalHandler();
|
||||
}
|
||||
|
||||
setFormData(newAppCategoryTemplate);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
|
||||
<InputGroup>
|
||||
<label htmlFor="name">Category Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Social Media"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<label htmlFor="isPublic">Category visibility</label>
|
||||
<select
|
||||
id="isPublic"
|
||||
name="isPublic"
|
||||
value={formData.isPublic ? 1 : 0}
|
||||
onChange={(e) => inputChangeHandler(e, { isBool: true })}
|
||||
>
|
||||
<option value={1}>Visible (anyone can access it)</option>
|
||||
<option value={0}>Hidden (authentication required)</option>
|
||||
</select>
|
||||
</InputGroup>
|
||||
|
||||
<Button>{category ? 'Update category' : 'Add new category'}</Button>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
54
client/src/components/Apps/Form/Form.tsx
Normal file
54
client/src/components/Apps/Form/Form.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { Fragment } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { State } from '../../../store/reducers';
|
||||
import { appCategoryTemplate, appTemplate } from '../../../utility';
|
||||
import { ContentType } from '../Apps';
|
||||
import { AppsForm } from './AppsForm';
|
||||
import { CategoryForm } from './CategoryForm';
|
||||
|
||||
// Typescript
|
||||
// Utils
|
||||
interface Props {
|
||||
modalHandler: () => void;
|
||||
contentType: ContentType;
|
||||
inUpdate?: boolean;
|
||||
}
|
||||
|
||||
export const Form = (props: Props): JSX.Element => {
|
||||
const { categoryInEdit, appInEdit } = useSelector(
|
||||
(state: State) => state.apps
|
||||
);
|
||||
|
||||
const { modalHandler, contentType, inUpdate } = props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{!inUpdate ? (
|
||||
// form: add new
|
||||
<Fragment>
|
||||
{contentType === ContentType.category ? (
|
||||
<CategoryForm modalHandler={modalHandler} />
|
||||
) : (
|
||||
<AppsForm modalHandler={modalHandler} />
|
||||
)}
|
||||
</Fragment>
|
||||
) : (
|
||||
// form: update
|
||||
<Fragment>
|
||||
{contentType === ContentType.category ? (
|
||||
<CategoryForm
|
||||
modalHandler={modalHandler}
|
||||
category={categoryInEdit || appCategoryTemplate}
|
||||
/>
|
||||
) : (
|
||||
<AppsForm
|
||||
modalHandler={modalHandler}
|
||||
app={appInEdit || appTemplate}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
181
client/src/components/Apps/Table/AppsTable.tsx
Normal file
181
client/src/components/Apps/Table/AppsTable.tsx
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
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';
|
||||
|
||||
// Redux
|
||||
// Typescript
|
||||
// UI
|
||||
interface Props {
|
||||
openFormForUpdating: (data: Category | App) => void;
|
||||
}
|
||||
|
||||
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 apps array
|
||||
useEffect(() => {
|
||||
if (categoryInEdit) {
|
||||
setLocalApps([...categoryInEdit.apps]);
|
||||
}
|
||||
}, [categoryInEdit]);
|
||||
|
||||
// Drag and drop handler
|
||||
const dragEndHanlder = (result: DropResult): void => {
|
||||
if (config.useOrdering !== 'orderId') {
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Custom order is disabled',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!result.destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tmpApps = [...localApps];
|
||||
const [movedApp] = tmpApps.splice(result.source.index, 1);
|
||||
tmpApps.splice(result.destination.index, 0, movedApp);
|
||||
|
||||
setLocalApps(tmpApps);
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
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 }
|
||||
);
|
||||
};
|
||||
|
||||
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',
|
||||
'Visibility',
|
||||
'Category',
|
||||
'Actions',
|
||||
]}
|
||||
innerRef={provided.innerRef}
|
||||
>
|
||||
{localApps.map((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>
|
||||
<td style={{ width: '200px' }}>
|
||||
{app.isPublic ? 'Visible' : 'Hidden'}
|
||||
</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
{categoryInEdit.name}
|
||||
</td>
|
||||
|
||||
{!snapshot.isDragging && (
|
||||
<TableActions
|
||||
entity={app}
|
||||
deleteHandler={deleteAppHandler}
|
||||
updateHandler={updateAppHandler}
|
||||
changeVisibilty={changeAppVisibiltyHandler}
|
||||
showPin={false}
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
159
client/src/components/Apps/Table/CategoryTable.tsx
Normal file
159
client/src/components/Apps/Table/CategoryTable.tsx
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { App, Category } from '../../../interfaces';
|
||||
import { actionCreators } from '../../../store';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { TableActions } from '../../Actions/TableActions';
|
||||
import { Message, Table } from '../../UI';
|
||||
|
||||
// Redux
|
||||
// Typescript
|
||||
// UI
|
||||
interface Props {
|
||||
openFormForUpdating: (data: Category | App) => void;
|
||||
}
|
||||
|
||||
export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
|
||||
const {
|
||||
config: { config },
|
||||
apps: { categories },
|
||||
} = useSelector((state: State) => state);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
pinCategory,
|
||||
deleteCategory,
|
||||
createNotification,
|
||||
reorderCategories,
|
||||
updateCategory,
|
||||
} = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const [localCategories, setLocalCategories] = useState<Category[]>([]);
|
||||
|
||||
// Copy categories array
|
||||
useEffect(() => {
|
||||
setLocalCategories([...categories]);
|
||||
}, [categories]);
|
||||
|
||||
// Drag and drop handler
|
||||
const dragEndHanlder = (result: DropResult): void => {
|
||||
if (config.useOrdering !== 'orderId') {
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Custom order is disabled',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!result.destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tmpCategories = [...localCategories];
|
||||
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
|
||||
tmpCategories.splice(result.destination.index, 0, movedCategory);
|
||||
|
||||
setLocalCategories(tmpCategories);
|
||||
reorderCategories(tmpCategories);
|
||||
};
|
||||
|
||||
// Action handlers
|
||||
const deleteCategoryHandler = (id: number, name: string) => {
|
||||
const proceed = window.confirm(
|
||||
`Are you sure you want to delete ${name}? It will delete ALL assigned apps`
|
||||
);
|
||||
|
||||
if (proceed) {
|
||||
deleteCategory(id);
|
||||
}
|
||||
};
|
||||
|
||||
const updateCategoryHandler = (id: number) => {
|
||||
const category = categories.find((c) => c.id === id) as Category;
|
||||
openFormForUpdating(category);
|
||||
};
|
||||
|
||||
const pinCategoryHandler = (id: number) => {
|
||||
const category = categories.find((c) => c.id === id) as Category;
|
||||
pinCategory(category);
|
||||
};
|
||||
|
||||
const changeCategoryVisibiltyHandler = (id: number) => {
|
||||
const category = categories.find((c) => c.id === id) as Category;
|
||||
updateCategory(id, { ...category, isPublic: !category.isPublic });
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Message isPrimary={false}>
|
||||
{config.useOrdering === 'orderId' ? (
|
||||
<p>You can drag and drop single rows to reorder categories</p>
|
||||
) : (
|
||||
<p>
|
||||
Custom order is disabled. You can change it in the{' '}
|
||||
<Link to="/settings/interface">settings</Link>
|
||||
</p>
|
||||
)}
|
||||
</Message>
|
||||
|
||||
<DragDropContext onDragEnd={dragEndHanlder}>
|
||||
<Droppable droppableId="categories">
|
||||
{(provided) => (
|
||||
<Table
|
||||
headers={['Name', 'Visibility', 'Actions']}
|
||||
innerRef={provided.innerRef}
|
||||
>
|
||||
{localCategories.map((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 style={{ width: '300px' }}>{category.name}</td>
|
||||
<td style={{ width: '300px' }}>
|
||||
{category.isPublic ? 'Visible' : 'Hidden'}
|
||||
</td>
|
||||
|
||||
{!snapshot.isDragging && (
|
||||
<TableActions
|
||||
entity={category}
|
||||
deleteHandler={deleteCategoryHandler}
|
||||
updateHandler={updateCategoryHandler}
|
||||
pinHanlder={pinCategoryHandler}
|
||||
changeVisibilty={changeCategoryVisibiltyHandler}
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
20
client/src/components/Apps/Table/Table.tsx
Normal file
20
client/src/components/Apps/Table/Table.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { App, Category } from '../../../interfaces';
|
||||
import { ContentType } from '../Apps';
|
||||
import { AppsTable } from './AppsTable';
|
||||
import { CategoryTable } from './CategoryTable';
|
||||
|
||||
interface Props {
|
||||
contentType: ContentType;
|
||||
openFormForUpdating: (data: Category | App) => void;
|
||||
}
|
||||
|
||||
export const Table = (props: Props): JSX.Element => {
|
||||
const tableEl =
|
||||
props.contentType === ContentType.category ? (
|
||||
<CategoryTable openFormForUpdating={props.openFormForUpdating} />
|
||||
) : (
|
||||
<AppsTable openFormForUpdating={props.openFormForUpdating} />
|
||||
);
|
||||
|
||||
return tableEl;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue