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

Disable free-text boxes on Team category

Browse Source 
Edit Multi Data Entry to display something when editing and the box is disabled when it has no data.
This commit is contained in:
Mike Simpson 2023-06-28 16:40:45 +01:00
parent 9f842dd445
commit fd1429e2da
3 changed files with 81 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,83 +69,89 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
copy={copyable ? props.copy : undefined} copy={copyable ? props.copy : undefined}
/> />
<div id={`${props.slug}-wrapper`}> <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.length === 0 && !isEditing && isEditing && isDisabled && values.length === 0 &&
<div className="input-group"> <div className="input-group">
<input className="form-control no-entries" type="text" value="No entries" disabled={true} /> <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
</div> </div>
} }
<ul className="data-entry-list"> {
{ values.map((val, i) => (
values.map((val, i) => ( <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
<li className="input-group" key={i /* i as key prevents input component recreation on edit */}> <DataEntryInput
<DataEntryInput slug={props.slug}
slug={props.slug} name={`${slugWithModifier}-${i}`}
name={`${slugWithModifier}-${i}`} id={`${slugWithModifier}-${i}`}
id={`${slugWithModifier}-${i}`} value={val}
value={val} disabled={!editableEntries || isDisabled}
disabled={!editableEntries || isDisabled} onChange={(_key, val) => edit(i, val)}
onChange={(_key, val) => edit(i, val)}
maxLength={props.maxLength} maxLength={props.maxLength}
isUrl={props.isUrl} isUrl={props.isUrl}
valueTransform={props.valueTransform} valueTransform={props.valueTransform}
autofill={props.autofill} autofill={props.autofill}
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty} showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
/> />
{ {
!isDisabled && !isDisabled &&
<div className="input-group-append"> <div className="input-group-append">
<button type="button" onClick={() => remove(i)} <button type="button" onClick={() => remove(i)}
title="Remove" title="Remove"
data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button> data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
</div> </div>
} }
</li> </li>
)) ))
} }
{ {
!isDisabled && !isDisabled &&
<li className="input-group"> <li className="input-group">
<DataEntryInput <DataEntryInput
slug={props.slug} slug={props.slug}
name={slugWithModifier} name={slugWithModifier}
id={slugWithModifier} id={slugWithModifier}
value={newValue} value={newValue}
disabled={props.disabled} disabled={props.disabled}
required={props.required && values.length < 1} required={props.required && values.length < 1}
onChange={(_key, val) => setNewValue(val)} onChange={(_key, val) => setNewValue(val)}
onConfirm={(_key, val) => addNew(val)} onConfirm={(_key, val) => addNew(val)}
maxLength={props.maxLength} maxLength={props.maxLength}
placeholder={props.placeholder} placeholder={props.placeholder}
isUrl={props.isUrl} isUrl={props.isUrl}
valueTransform={props.valueTransform} valueTransform={props.valueTransform}
confirmOnEnter={confirmOnEnter} confirmOnEnter={confirmOnEnter}
autofill={props.autofill} autofill={props.autofill}
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty} showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
confirmOnAutofillSelect={true} confirmOnAutofillSelect={true}
/> />
{ {
newValue != undefined && newValue != undefined &&
<> <>
<div className="input-group-append"> <div className="input-group-append">
<button type="button" <button type="button"
className="btn btn-primary data-entry-list-button" className="btn btn-primary data-entry-list-button"
title="Confirm new value" title="Confirm new value"
onClick={() => addNew()} onClick={() => addNew()}
><SaveIcon /></button> ><SaveIcon /></button>
</div> </div>
<div className="input-group-append"> <div className="input-group-append">
<button type="button" onClick={() => clearNew()} <button type="button" onClick={() => clearNew()}
title="Clear new value" title="Clear new value"
className="btn btn-warning data-entry-list-button"><CloseIcon /></button> className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
</div> </div>
</> </>
} }
</li> </li>
} }
</ul> </ul>
</div> </div>

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

@ -146,6 +146,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip={dataFields.landowner.tooltip} tooltip={dataFields.landowner.tooltip}
placeholder="" placeholder=""
editableEntries={true} editableEntries={true}
disabled={true}
/> />
<Verification <Verification
slug="landowner" slug="landowner"
@ -213,6 +214,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip={dataFields.developer_name.tooltip} tooltip={dataFields.developer_name.tooltip}
placeholder="" placeholder=""
editableEntries={true} editableEntries={true}
disabled={true}
/> />
<Verification <Verification
slug="developer_name" slug="developer_name"
@ -263,6 +265,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip={dataFields.designers.tooltip} tooltip={dataFields.designers.tooltip}
placeholder="" placeholder=""
editableEntries={true} editableEntries={true}
disabled={true}
/> />
<Verification <Verification
slug="designers" slug="designers"
@ -272,7 +275,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.designers} user_verified_as={props.user_verified.designers}
verified_count={props.building.verified.designers} verified_count={props.building.verified.designers}
/> />
<SelectDataEntry <SelectDataEntry
slug='lead_designer_type' slug='lead_designer_type'
title={dataFields.lead_designer_type.title} title={dataFields.lead_designer_type.title}
@ -330,6 +332,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
onChange={props.onChange} onChange={props.onChange}
placeholder="" placeholder=""
editableEntries={true} editableEntries={true}
disabled={true}
/> />
<Verification <Verification
slug="builder" slug="builder"

6
app/src/frontend/config/data-fields-config.ts
View File

@ -969,7 +969,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
landowner: { landowner: {
category: Category.Team, category: Category.Team,
title: "Landowner(s) at time of construction", title: "Landowner(s) at time of construction",
tooltip: "Land owner when the building was constructed.<br/>For info on current land ownership, see 'Planning Controls'.", tooltip: "Land owner when the building was constructed.<br/><br/>Free-text entry disabled for security reasons.<br/><br/>For info on current land ownership, see 'Planning Controls'.",
example: ["", "", ""], example: ["", "", ""],
}, },
landowner_source_type: { landowner_source_type: {
@ -988,7 +988,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
designers: { designers: {
category: Category.Team, category: Category.Team,
title: "Who were the main designer(s)?", title: "Who were the main designer(s)?",
tooltip: "Free text. First name, space, then Last name", tooltip: "First name, space, then Last name.<br/><br/>Free-text entry disabled for security reasons.",
example: ["", "", ""], example: ["", "", ""],
}, },
designers_source_type: { designers_source_type: {
@ -1031,7 +1031,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
}, },
builder: { builder: {
category: Category.Team, category: Category.Team,
title: "Name of builder/construction team", title: "Name of builder/construction team.<br/><br/>Free-text entry disabled for security reasons.",
example: ["", "", ""], example: ["", "", ""],
}, },
builder_source_type: { builder_source_type: {