a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve multi-edit, autofill usability

Browse Source
This commit is contained in:
Maciej Ziarkowski 2020-01-07 19:06:42 +00:00
parent d9c0cca31b
commit 6ee4432fd5
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/frontend/building/data-components/autofill/autofillDropdown.tsx
View File

@ -27,14 +27,14 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> = props => {
useEffect(() => { useEffect(() => {
const doAsync = async () => { const doAsync = async () => {
if (!props.editing || props.fieldValue === '') return setOptions(null); if (!props.editing || (props.fieldValue === '' && options == null)) return setOptions(null);
const url = `/api/autofill?field_name=${props.fieldName}&field_value=${props.fieldValue}`; const url = `/api/autofill?field_name=${props.fieldName}&field_value=${props.fieldValue}`;
const { options } = await apiGet(url); const { options: newOptions } = await apiGet(url);
if (!props.editing) return; if (!props.editing) return;
setOptions(options); setOptions(newOptions);
}; };
doAsync(); doAsync();
@ -47,6 +47,7 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> = props => {
{ {
options.map(option => options.map(option =>
<div <div
key={option.id}
onMouseDown={e => /* prevent input blur */ e.preventDefault()} onMouseDown={e => /* prevent input blur */ e.preventDefault()}
onClick={e => { onClick={e => {
props.onSelect(option.value); props.onSelect(option.value);

16
app/src/frontend/building/data-components/data-entry-input.tsx
View File

@ -5,6 +5,7 @@ import { AutofillDropdown } from './autofill/autofillDropdown';
export interface TextDataEntryInputProps { export interface TextDataEntryInputProps {
slug: string; slug: string;
name?: string; name?: string;
id?: string;
onChange?: (key: string, val: any) => void; onChange?: (key: string, val: any) => void;
maxLength?: number; maxLength?: number;
@ -16,6 +17,8 @@ export interface TextDataEntryInputProps {
export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}> = props => { export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}> = props => {
const [isEditing, setEditing] = useState(false); const [isEditing, setEditing] = useState(false);
const nameAttr = props.name || props.slug;
const idAttr = props.id || props.slug;
const handleChange = (value: string) => { const handleChange = (value: string) => {
console.log(value); console.log(value);
@ -27,17 +30,18 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
}; };
return ( return (
<div <>
onFocus={e => setEditing(true)}
onBlur={e => setEditing(false)}
>
<input className="form-control" type="text" <input className="form-control" type="text"
name={props.slug} id={idAttr}
name={nameAttr}
value={props.value || ''} value={props.value || ''}
maxLength={props.maxLength} maxLength={props.maxLength}
disabled={props.disabled} disabled={props.disabled}
placeholder={props.placeholder} placeholder={props.placeholder}
onChange={e => handleChange(e.target.value)} onChange={e => handleChange(e.target.value)}
onInput={e => setEditing(true)}
onFocus={e => setEditing(true)}
onBlur={e => setEditing(false)}
/> />
{ {
props.autofill && props.autofill &&
@ -49,6 +53,6 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
fieldValue={props.value} fieldValue={props.value}
/> />
} }
</div> </>
); );
}; };

8
app/src/frontend/building/data-components/multi-data-entry.tsx
View File

@ -69,16 +69,18 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
tooltip={props.tooltip} tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0} disabled={props.disabled || props.value == undefined || props.value.length === 0}
/> />
<ul className="data-link-list"> <ul id={props.slug} className="data-link-list">
{ {
values.length === 0 && values.length === 0 &&
<div>No entries</div> <div>No entries</div>
} }
{ {
values.map((val, i) => ( values.map((val, i) => (
<li className="input-group" key={i}> <li className="input-group" key={i /* is as key prevents input component recreation on edit */}>
<DataEntryInput <DataEntryInput
slug={props.slug} slug={props.slug}
name={`${props.slug}-${i}`}
id={`${props.slug}-${i}`}
value={val} value={val}
disabled={isDisabled} disabled={isDisabled}
onChange={(key, val) => this.edit(i, val)} onChange={(key, val) => this.edit(i, val)}
@ -105,6 +107,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
<div className="input-group"> <div className="input-group">
<DataEntryInput <DataEntryInput
slug={props.slug} slug={props.slug}
name={`${props.slug}-new`}
id={`${props.slug}-new`}
value={this.state.newValue} value={this.state.newValue}
disabled={props.disabled} disabled={props.disabled}
onChange={(key, val) => this.setNewValue(val)} onChange={(key, val) => this.setNewValue(val)}