Added option to set custom description for apps

This commit is contained in:
Paweł Malak 2021-12-07 16:48:24 +01:00
parent b08181e712
commit 531ede0adf
7 changed files with 53 additions and 9 deletions

View file

@ -1,3 +1,6 @@
### v2.2.0 (TBA)
- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
### v2.1.1 (2021-12-02)
- Added support for Docker secrets ([#189](https://github.com/pawelmalak/flame/issues/189))
- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))

View file

@ -8,16 +8,15 @@ import { State } from '../../../store/reducers';
interface Props {
app: App;
pinHandler?: Function;
}
export const AppCard = (props: Props): JSX.Element => {
export const AppCard = ({ app }: Props): JSX.Element => {
const { config } = useSelector((state: State) => state.config);
const [displayUrl, redirectUrl] = urlParser(props.app.url);
const [displayUrl, redirectUrl] = urlParser(app.url);
let iconEl: JSX.Element;
const { icon } = props.app;
const { icon } = app;
if (isImage(icon)) {
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
@ -25,7 +24,7 @@ export const AppCard = (props: Props): JSX.Element => {
iconEl = (
<img
src={source}
alt={`${props.app.name} icon`}
alt={`${app.name} icon`}
className={classes.CustomIcon}
/>
);
@ -54,8 +53,8 @@ export const AppCard = (props: Props): JSX.Element => {
>
<div className={classes.AppCardIcon}>{iconEl}</div>
<div className={classes.AppCardDetails}>
<h5>{props.app.name}</h5>
<span>{displayUrl}</span>
<h5>{app.name}</h5>
<span>{!app.description.length ? displayUrl : app.description}</span>
</div>
</a>
);

View file

@ -96,7 +96,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
<ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
{/* NAME */}
<InputGroup>
<label htmlFor="name">App Name</label>
<label htmlFor="name">App name</label>
<input
type="text"
name="name"
@ -122,11 +122,27 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
/>
</InputGroup>
{/* DESCRIPTION */}
<InputGroup>
<label htmlFor="description">App description</label>
<input
type="text"
name="description"
id="description"
placeholder="My self-hosted app"
value={formData.description}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
Optional - If description is not set, app URL will be displayed
</span>
</InputGroup>
{/* ICON */}
{!useCustomIcon ? (
// use mdi icon
<InputGroup>
<label htmlFor="icon">App Icon</label>
<label htmlFor="icon">App icon</label>
<input
type="text"
name="icon"

View file

@ -5,6 +5,7 @@ export interface NewApp {
url: string;
icon: string;
isPublic: boolean;
description: string;
}
export interface App extends Model, NewApp {

View file

@ -5,6 +5,7 @@ export const newAppTemplate: NewApp = {
url: '',
icon: '',
isPublic: true,
description: '',
};
export const appTemplate: App = {

View file

@ -0,0 +1,19 @@
const { DataTypes } = require('sequelize');
const { STRING } = DataTypes;
const up = async (query) => {
await query.addColumn('apps', 'description', {
type: STRING,
allowNull: false,
defaultValue: '',
});
};
const down = async (query) => {
await query.removeColumn('apps', 'description');
};
module.exports = {
up,
down,
};

View file

@ -31,6 +31,11 @@ const App = sequelize.define(
allowNull: true,
defaultValue: 1,
},
description: {
type: DataTypes.STRING,
allowNull: false,
defaultValue: '',
},
},
{
tableName: 'apps',