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

Merge pull request #668 from mz8i/feature/667-list-entry-ui

Browse Source 
Feature 667: improved list entry UI
This commit is contained in:
Maciej Ziarkowski 2021-03-18 12:07:42 +00:00 committed by GitHub
commit 2169efdf98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 119 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/.eslintrc
View File

@ -39,7 +39,8 @@
"camelcase": ["warn", {"ignoreDestructuring": true ,"properties": "never"}],
"eol-last": ["warn", "always"],
"no-multiple-empty-lines": ["warn", {"max": 1}],
"prefer-const": "warn"
"prefer-const": "warn",
"react/prop-types": "off"
},
"settings": {
"react": {

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

@ -64,8 +64,6 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
placeholder={props.placeholder}
onKeyDown={e => {
if(e.keyCode === 13) {
// prevent form submit on enter
e.preventDefault();
if(props.confirmOnEnter) {
handleConfirm();
}

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

@ -1,105 +1,81 @@
import React, { Component, Fragment } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import './multi-data-entry.css';
import { BaseDataEntryProps } from '../data-entry';
import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
import { DataTitleCopyable } from '../data-title';
import { CloseIcon, SaveIcon } from '../../../components/icons';
interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
value: string[];
copyable: boolean;
editableEntries: boolean;
confirmOnEnter: boolean;
addOnAutofillSelect: boolean;
acceptAutofillValuesOnly: boolean;
copyable?: boolean;
editableEntries?: boolean;
confirmOnEnter?: boolean;
}
interface MultiDataEntryState {
newValue: string;
}
export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
editableEntries = false,
copyable = false,
confirmOnEnter = true,
...props
}) => {
const [newValue, setNewValue] = useState<string>();
class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState> {
const values = useMemo(() => props.value ?? [], [props.value]);
static defaultProps = {
editableEntries: false,
copyable: false,
confirmOnEnter: true,
addOnAutofillSelect: false,
acceptAutofillValuesOnly: false
};
const edit = useCallback((index: number, value: string) => {
const editedValues = values.slice();
editedValues.splice(index, 1, value);
props.onChange(props.slug, editedValues);
}, [values, props.onChange, props.slug]);
constructor(props) {
super(props);
this.state = {
newValue: null
};
this.setNewValue = this.setNewValue.bind(this);
this.edit = this.edit.bind(this);
this.addNew = this.addNew.bind(this);
this.remove = this.remove.bind(this);
}
/* accept a newValue parameter to handle cases where the value is set and submitted at the same time
* (like with autofill select enabled) - but otherwise use the current newValue saved in state
*/
const addNew = useCallback((newValueArg?: string) => {
const val = newValueArg ?? newValue;
if(val == undefined) return;
getValues() {
return this.props.value == undefined ? [] : this.props.value;
}
const editedValues = values.slice().concat(val);
cloneValues() {
return this.getValues().slice();
}
setNewValue(null);
props.onChange(props.slug, editedValues);
}, [newValue, values, props.onChange, props.slug]);
setNewValue(value: string) {
this.setState({newValue: value});
}
const clearNew = useCallback(() => {
setNewValue(null);
}, []);
edit(index: number, value: string) {
let values = this.cloneValues();
values.splice(index, 1, value);
this.props.onChange(this.props.slug, values);
}
addNew(newValue?: string) {
// accept a newValue parameter to handle cases where the value is set and submitted at the same time
// (like with autofill select enabled) - but otherwise use the current newValue saved in state
const val = newValue ?? this.state.newValue;
if (val == undefined) return;
const values = this.cloneValues().concat(val);
this.setState({newValue: null});
this.props.onChange(this.props.slug, values);
}
const remove = useCallback((index: number) => {
const editedValues = values.slice();
editedValues.splice(index, 1);
remove(index: number){
const values = this.cloneValues();
values.splice(index, 1);
this.props.onChange(this.props.slug, values);
}
props.onChange(props.slug, editedValues);
}, [values, props.onChange, props.slug]);
render() {
const values = this.getValues();
const props = this.props;
const isEditing = props.mode === 'edit';
const isDisabled = !isEditing || props.disabled;
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return <Fragment>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0}
copy={props.copyable ? props.copy : undefined}
/>
<div id={`${props.slug}-wrapper`}>
<ul className="data-link-list">
{
values.length === 0 && !isEditing &&
<div className="input-group">
<input className="form-control no-entries" type="text" value="No entries" disabled={true} />
</div>
}
const isEditing = props.mode === 'edit';
const isDisabled = !isEditing || props.disabled;
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return (<>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0}
copy={copyable ? props.copy : undefined}
/>
<div id={`${props.slug}-wrapper`}>
{
values.length === 0 && !isEditing &&
<div className="input-group">
<input className="form-control no-entries" type="text" value="No entries" disabled={true} />
</div>
}
<ul className="data-entry-list">
{
values.map((val, i) => (
<li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
@ -108,8 +84,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
name={`${slugWithModifier}-${i}`}
id={`${slugWithModifier}-${i}`}
value={val}
disabled={!props.editableEntries || isDisabled}
onChange={(key, val) => this.edit(i, val)}
disabled={!editableEntries || isDisabled}
onChange={(_key, val) => edit(i, val)}
maxLength={props.maxLength}
isUrl={props.isUrl}
@ -121,51 +97,57 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
{
!isDisabled &&
<div className="input-group-append">
<button type="button" onClick={e => this.remove(i)}
<button type="button" onClick={() => remove(i)}
title="Remove"
data-index={i} className="btn btn-outline-dark">✕</button>
data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
</div>
}
</li>
))
}
</ul>
{
!isDisabled &&
<div className="input-group">
<DataEntryInput
slug={props.slug}
name={slugWithModifier}
id={slugWithModifier}
value={this.state.newValue}
disabled={props.disabled}
required={props.required && values.length < 1}
onChange={(key, val) => this.setNewValue(val)}
onConfirm={(key, val) => this.addNew(val)}
<li className="input-group">
<DataEntryInput
slug={props.slug}
name={slugWithModifier}
id={slugWithModifier}
value={newValue}
disabled={props.disabled}
required={props.required && values.length < 1}
onChange={(_key, val) => setNewValue(val)}
onConfirm={(_key, val) => addNew(val)}
maxLength={props.maxLength}
placeholder={props.placeholder}
isUrl={props.isUrl}
valueTransform={props.valueTransform}
confirmOnEnter={props.confirmOnEnter}
maxLength={props.maxLength}
placeholder={props.placeholder}
isUrl={props.isUrl}
valueTransform={props.valueTransform}
confirmOnEnter={confirmOnEnter}
autofill={props.autofill}
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
confirmOnAutofillSelect={true}
/>
<div className="input-group-append">
<button type="button"
className="btn btn-outline-dark"
title="Add to list"
onClick={() => this.addNew()}
disabled={this.state.newValue == undefined}
>+</button>
</div>
</div>
autofill={props.autofill}
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
confirmOnAutofillSelect={true}
/>
{
newValue != undefined &&
<>
<div className="input-group-append">
<button type="button"
className="btn btn-primary data-entry-list-button"
title="Confirm new value"
onClick={() => addNew()}
><SaveIcon /></button>
</div>
<div className="input-group-append">
<button type="button" onClick={() => clearNew()}
title="Clear new value"
className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
</div>
</>
}
</li>
}
</div>
</Fragment>;
}
}
export default MultiDataEntry;
</ul>
</div>
</>)
};

2
app/src/frontend/building/data-container.tsx
View File

@ -364,6 +364,8 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
action={`/edit/${this.props.cat}/${this.props.building.building_id}`}
method="POST"
onSubmit={this.handleSubmit}>
{/* this disabled button prevents form submission on enter - see https://stackoverflow.com/a/51507806/1478817 */}
<button type="submit" disabled style={{display: 'none'}}></button>
{
(this.props.mode === 'edit' && !this.props.inactive) ?
<div className='edit-bar'>

2
app/src/frontend/building/data-containers/age.tsx
View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import { dataFields } from '../../config/data-fields-config';
import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry';
import TextboxDataEntry from '../data-components/textbox-data-entry';

7
app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
View File

@ -6,10 +6,11 @@ import { FieldRow } from '../../data-components/field-row';
import DataEntry, { BaseDataEntryProps } from '../../data-components/data-entry';
import { dataFields } from '../../../config/data-fields-config';
import SelectDataEntry from '../../data-components/select-data-entry';
import MultiDataEntry from '../../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-data-entry';
import { NumberRangeDataEntry } from './number-range-data-entry';
import './dynamics-data-entry.css';
import { CloseIcon } from '../../../components/icons';
type DemolishedBuilding = (BuildingAttributes['demolished_buildings'][number]);
@ -211,7 +212,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
<label>Please supply sources for any edits of existing records</label>
</>
}
<ul className="data-link-list">
<ul className="data-entry-list">
{
values.length === 0 &&
<div className="input-group">
@ -229,7 +230,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
title="Delete Record"
onClick={() => remove(id)}
data-index={id}
>x</button>
><CloseIcon /></button>
}
<DynamicsDataRow
value={pastBuilding}

3
app/src/frontend/building/data-containers/use.tsx
View File

@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
import InfoBox from '../../components/info-box';
import { dataFields } from '../../config/data-fields-config';
import DataEntry from '../data-components/data-entry';
import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
@ -28,7 +28,6 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => (
copyable={true}
autofill={true}
showAllOptionsOnEmpty={true}
addOnAutofillSelect={true}
/>
<Verification
slug="current_landuse_group"

8
app/src/frontend/building/sidebar.css
View File

@ -162,13 +162,17 @@
list-style: none;
padding-left: 0;
}
.data-section .data-link-list {
.data-section .data-entry-list {
padding: 0;
list-style: none;
margin-bottom: 0;
margin-top: 0.5rem;
}
.data-link-list li {
.data-entry-list li {
border-color: #6c757d;
border-radius: 0;
}
.data-entry-list-button {
width: 2.5em;
}

4
app/src/frontend/styles/forms.css
View File

@ -43,9 +43,7 @@ label {
margin-bottom: 0.25rem;
margin-right: 0.25rem;
}
form .btn {
margin-bottom: 0.25rem;
}
.buttons-container.btn-center {
margin-right: 0;
text-align: center;