parent
df60e91bf3
commit
cda62f0a80
8 changed files with 347 additions and 324 deletions
@ -0,0 +1,118 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { Button, Dialog, DialogActions, Divider, Typography, Box, TextField, IconButton } from "@material-ui/core"; |
||||||
|
import { ExternalLinksEditor } from './ExternalLinksEditor'; |
||||||
|
import UndoIcon from '@material-ui/icons/Undo'; |
||||||
|
import { ResourceType } from '../../api/api'; |
||||||
|
let _ = require('lodash') |
||||||
|
|
||||||
|
export enum EditablePropertyType { |
||||||
|
Text = 0, |
||||||
|
} |
||||||
|
|
||||||
|
export interface EditableProperty { |
||||||
|
metadataKey: string, |
||||||
|
title: string, |
||||||
|
type: EditablePropertyType |
||||||
|
} |
||||||
|
|
||||||
|
function EditTextProperty(props: { |
||||||
|
title: string, |
||||||
|
originalValue: string, |
||||||
|
currentValue: string, |
||||||
|
onChange: (v: string) => void |
||||||
|
}) { |
||||||
|
return <Box display="flex" alignItems="center" width="100%"> |
||||||
|
<TextField |
||||||
|
// Here we "abuse" the label to show the original title.
|
||||||
|
// emptying the text box means going back to the original.
|
||||||
|
variant="outlined" |
||||||
|
value={props.currentValue} |
||||||
|
label={props.title} |
||||||
|
helperText={(props.currentValue != props.originalValue) && |
||||||
|
"Current: " + props.originalValue || undefined} |
||||||
|
error={(props.currentValue != props.originalValue)} |
||||||
|
onChange={(e: any) => { |
||||||
|
props.onChange((e.target.value == "") ? |
||||||
|
props.originalValue : e.target.value) |
||||||
|
}} |
||||||
|
fullWidth={true} |
||||||
|
/> |
||||||
|
{props.currentValue != props.originalValue && <IconButton |
||||||
|
onClick={() => { |
||||||
|
props.onChange(props.originalValue) |
||||||
|
}} |
||||||
|
><UndoIcon /></IconButton>} |
||||||
|
</Box> |
||||||
|
} |
||||||
|
|
||||||
|
function PropertyEditor(props: { |
||||||
|
originalMetadata: any, |
||||||
|
currentMetadata: any, |
||||||
|
onChange: (metadata: any) => void, |
||||||
|
editableProperties: EditableProperty[] |
||||||
|
}) { |
||||||
|
return <Box display="flex" width="100%"> |
||||||
|
{props.editableProperties.map( |
||||||
|
(p: EditableProperty) => { |
||||||
|
if (p.type == EditablePropertyType.Text) { |
||||||
|
return <EditTextProperty |
||||||
|
title={p.title} |
||||||
|
originalValue={props.originalMetadata[p.metadataKey]} |
||||||
|
currentValue={props.currentMetadata[p.metadataKey]} |
||||||
|
onChange={(v: string) => props.onChange({ ...props.currentMetadata, [p.metadataKey]: v })} |
||||||
|
/> |
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
)} |
||||||
|
</Box > |
||||||
|
} |
||||||
|
|
||||||
|
export default function EditItemDialog(props: { |
||||||
|
open: boolean, |
||||||
|
onClose: () => void, |
||||||
|
onSubmit: (v: any) => void, |
||||||
|
id: number, |
||||||
|
metadata: any, |
||||||
|
defaultExternalLinksQuery: string, |
||||||
|
editableProperties: EditableProperty[], |
||||||
|
resourceType: ResourceType, |
||||||
|
editStoreLinks: boolean, |
||||||
|
}) { |
||||||
|
let [editingMetadata, setEditingMetadata] = useState<any>(props.metadata); |
||||||
|
|
||||||
|
return <Dialog |
||||||
|
maxWidth="lg" |
||||||
|
fullWidth |
||||||
|
open={props.open} |
||||||
|
onClose={props.onClose} |
||||||
|
disableBackdropClick={true}> |
||||||
|
<Typography variant="h5">Properties</Typography> |
||||||
|
<PropertyEditor |
||||||
|
originalMetadata={props.metadata} |
||||||
|
currentMetadata={editingMetadata} |
||||||
|
onChange={setEditingMetadata} |
||||||
|
editableProperties={props.editableProperties} |
||||||
|
/> |
||||||
|
{props.editStoreLinks && <><Divider /> |
||||||
|
<Typography variant="h5">External Links</Typography> |
||||||
|
<ExternalLinksEditor |
||||||
|
metadata={editingMetadata} |
||||||
|
original={props.metadata} |
||||||
|
onChange={(v: any) => setEditingMetadata(v)} |
||||||
|
defaultQuery={props.defaultExternalLinksQuery} |
||||||
|
resourceType={props.resourceType} |
||||||
|
/></>} |
||||||
|
<Divider /> |
||||||
|
{!_.isEqual(editingMetadata, props.metadata) && <DialogActions> |
||||||
|
<Button variant="contained" color="secondary" |
||||||
|
onClick={() => { |
||||||
|
props.onSubmit(editingMetadata); |
||||||
|
props.onClose(); |
||||||
|
}}>Save all changes</Button> |
||||||
|
<Button variant="outlined" |
||||||
|
onClick={() => setEditingMetadata(props.metadata)}>Discard changes</Button> |
||||||
|
</DialogActions>} |
||||||
|
</Dialog> |
||||||
|
|
||||||
|
} |
||||||
@ -1,93 +0,0 @@ |
|||||||
import React, { useState } from 'react'; |
|
||||||
import { Box, IconButton, TextField } from '@material-ui/core'; |
|
||||||
import EditIcon from '@material-ui/icons/Edit'; |
|
||||||
import CheckIcon from '@material-ui/icons/Check'; |
|
||||||
import UndoIcon from '@material-ui/icons/Undo'; |
|
||||||
import { useTheme } from '@material-ui/core/styles'; |
|
||||||
|
|
||||||
// This component is an editable text. It shows up as normal text,
|
|
||||||
// but will display an edit icon on hover. When clicked, this
|
|
||||||
// enables a text input to make a new suggestion.
|
|
||||||
// The text can show a striked-through version of the old text,
|
|
||||||
// with the new value next to it and an undo button.
|
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
defaultValue: string, |
|
||||||
changedValue: string | null, // Null == not changed
|
|
||||||
editingValue: string | null, // Null == not editing
|
|
||||||
editingLabel: string, |
|
||||||
onChangeEditingValue: (v: string | null) => void, |
|
||||||
onChangeChangedValue: (v: string | null) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export default function EditableText(props: IProps) { |
|
||||||
let editingValue = props.editingValue; |
|
||||||
let defaultValue = props.defaultValue; |
|
||||||
let changedValue = props.changedValue; |
|
||||||
let onChangeEditingValue = props.onChangeEditingValue; |
|
||||||
let onChangeChangedValue = props.onChangeChangedValue; |
|
||||||
let editing = editingValue !== null; |
|
||||||
let editingLabel = props.editingLabel; |
|
||||||
|
|
||||||
const theme = useTheme(); |
|
||||||
|
|
||||||
const [hovering, setHovering] = useState<Boolean>(false); |
|
||||||
|
|
||||||
const editButton = <Box |
|
||||||
visibility={(hovering && !editing) ? "visible" : "hidden"}> |
|
||||||
<IconButton |
|
||||||
onClick={() => onChangeEditingValue(changedValue || defaultValue)} |
|
||||||
> |
|
||||||
<EditIcon /> |
|
||||||
</IconButton> |
|
||||||
</Box> |
|
||||||
|
|
||||||
const discardChangesButton = <Box |
|
||||||
visibility={(hovering && !editing) ? "visible" : "hidden"}> |
|
||||||
<IconButton |
|
||||||
onClick={() => { |
|
||||||
onChangeChangedValue(null); |
|
||||||
onChangeEditingValue(null); |
|
||||||
}} |
|
||||||
> |
|
||||||
<UndoIcon /> |
|
||||||
</IconButton> |
|
||||||
</Box> |
|
||||||
|
|
||||||
if (editing) { |
|
||||||
return <Box display="flex" alignItems="center"> |
|
||||||
<TextField |
|
||||||
variant="outlined" |
|
||||||
value={editingValue || ""} |
|
||||||
label={editingLabel} |
|
||||||
inputProps={{ style: { fontSize: '2rem' } }} |
|
||||||
onChange={(e: any) => onChangeEditingValue(e.target.value)} |
|
||||||
/> |
|
||||||
<IconButton |
|
||||||
onClick={() => { |
|
||||||
onChangeChangedValue(editingValue === defaultValue ? null : editingValue); |
|
||||||
onChangeEditingValue(null); |
|
||||||
}} |
|
||||||
><CheckIcon /></IconButton> |
|
||||||
</Box> |
|
||||||
} else if (changedValue) { |
|
||||||
return <Box |
|
||||||
onMouseEnter={() => setHovering(true)} |
|
||||||
onMouseLeave={() => setHovering(false)} |
|
||||||
display="flex" |
|
||||||
alignItems="center" |
|
||||||
> |
|
||||||
<del style={{ color: theme.palette.text.secondary }}>{defaultValue}</del>→ |
|
||||||
{changedValue} |
|
||||||
{editButton} |
|
||||||
{discardChangesButton} |
|
||||||
</Box> |
|
||||||
} |
|
||||||
|
|
||||||
return <Box |
|
||||||
onMouseEnter={() => setHovering(true)} |
|
||||||
onMouseLeave={() => setHovering(false)} |
|
||||||
display="flex" |
|
||||||
alignItems="center" |
|
||||||
>{defaultValue}{editButton}</Box>; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue