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

Improve data netry list UI for new entry

Browse Source
This commit is contained in:
Maciej Ziarkowski 2021-03-16 19:02:11 +00:00
parent c9176f96ac
commit 27b7b72a57
4 changed files with 64 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ 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[];
@ -42,6 +43,9 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
props.onChange(props.slug, editedValues);
}, [newValue, values, props.onChange, props.slug]);
const clearNew = useCallback(() => {
setNewValue(null);
}, []);
const remove = useCallback((index: number) => {
const editedValues = values.slice();
@ -65,13 +69,13 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
copy={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>
}
{
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 */}>
@ -95,46 +99,55 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
<div className="input-group-append">
<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>
))
}
{
!isDisabled &&
<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={confirmOnEnter}
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>
}
</ul>
{
!isDisabled &&
<div 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={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={() => addNew()}
disabled={newValue == undefined}
>+</button>
</div>
</div>
}
</div>
</>)
};

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

@ -10,6 +10,7 @@ import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-dat
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}

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;