Skip to content

Commit

Permalink
Fixup users
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmichaels-harvard
dmichaels-harvard committed Sep 4, 2023
1 parent 49e9123 commit 2774547
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 92 deletions.
42 changes: 21 additions & 21 deletions react/src/pages/EditBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const DynamicSelect = (props) => {
<select id={props.id} className="select" value={selected || ""} onChange={onChange} disabled={props.disabled || values.loading}>
{ !props.required && <option key="-" value="-">-</option> }
{ values.map(value => {
if (value.id) return <option key={value.id} value={value.id}>{value.title || value.name}</option>; else return null;
if (value.id) return <option key={value.id} value={value.id}>{value.title || value.key}</option>; else return null;
})}
</select>
{ props.subComponent && <>
Expand All @@ -57,21 +57,21 @@ const InputLine = (props) => {
<input
className="input icon-rtl"
placeholder={input.placeholder || input.label}
id={input.name}
id={input.key}
defaultValue={valueOf(input)}
onChange={handleChange}
readOnly={readonly}
disabled={isDisabled()}
autoFocus={input.focus ? true : false} />
{ (input.readonlyOverridableOnCreate && props.isCreate) && <>
<small id={`tooltip-${input.name}`} className="pointer">&nbsp;&nbsp;
<small id={`tooltip-${input.key}`} className="pointer">&nbsp;&nbsp;
{ readonly ? <>
<span onClick={() => setReadonly(false)}><img src={Image.EditIcon()} style={{height:"22px",marginBottom:"6px"}} /></span>
</>:<>
<span onClick={() => setReadonly(true)}><img src={Image.EditIcon()} style={{height:"22px",marginBottom:"6px",marginRight:"-8px"}} /></span>
&nbsp;&nbsp;</> }
</small>
<Tooltip id={`tooltip-${input.name}`} position="top" text={`Click to ${readonly ? "allow" : "disallow"} setting of this field.`} />
<Tooltip id={`tooltip-${input.key}`} position="top" text={`Click to ${readonly ? "allow" : "disallow"} setting of this field.`} />
{ (input.readonlyOverridableOnCreate && !readonly && input.readonlyOverridableOnCreateMessage) && <>
<br />
<small><b style={{color:"red"}}>
Expand Down Expand Up @@ -143,7 +143,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele

function setFocus() {
for (const input of inputs) {
const element = document.getElementById(input.name);
const element = document.getElementById(input.key);
if (input.focus) {
element.focus();
}
Expand All @@ -170,12 +170,12 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
const input = getInputByName(e.target.id);
if (input.required) {
const currentValue = e.target.value?.toString();
inputsRequiredStatus[input.name] = (currentValue?.toString()?.length > 0);
inputsRequiredStatus[input.key] = (currentValue?.toString()?.length > 0);
setInputsRequiredStatus(current => ({...inputsRequiredStatus}));
}
if (input.type === "email") {
const currentValue = e.target.value?.toString();
inputsRequiredStatus[input.name] = isValidEmail(currentValue);
inputsRequiredStatus[input.key] = isValidEmail(currentValue);
setInputsRequiredStatus(current => ({...inputsRequiredStatus}));
}
//
Expand All @@ -191,7 +191,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
const dependentInputs = getInputDependencies(input);
for (const dependentInput of dependentInputs) {
if (typeof(dependentInput.value) === "function") {
const dependentElement = document.getElementById(dependentInput.name);
const dependentElement = document.getElementById(dependentInput.key);
if (dependentElement) {
const dependentValue = dependentInput.value(e.target.value?.toString());
if (dependentValue !== undefined) {
Expand All @@ -207,7 +207,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
function getInputDependencies(input) {
const results = [];
if (input) {
const inputName = input.name;
const inputName = input.key;
for (const input of inputs) {
if (input.dependsOn === inputName) {
results.push(input);
Expand All @@ -217,9 +217,9 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
return results;
}

function getInputByName(name) {
function getInputByName(key) {
for (const input of inputs) {
if (input.name === name) {
if (input.key === key) {
return input;
}
}
Expand All @@ -232,7 +232,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
continue;
}
const originalValue = valueOf(input);
const element = document.getElementById(input.name);
const element = document.getElementById(input.key);
const currentValue = element.value?.toString();
if (originalValue?.toString() !== currentValue?.toString()) {
return true;
Expand All @@ -243,7 +243,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele

function resetInputValuesToOriginal() {
for (const input of inputs) {
const element = document.getElementById(input.name);
const element = document.getElementById(input.key);
if (element) {
element.value = valueOf(input);
}
Expand All @@ -254,12 +254,12 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
function gatherCurrentInputValues() {
const values = {}
for (const input of inputs) {
let value = document.getElementById(input.name).value;
let value = document.getElementById(input.key).value;
if (!input.readonly || (input.readonlyOverridableOnCreate && Str.HasValue(value))) {
if (input.type === "boolean") {
value = (value.toString().toLowerCase() === "true") ? true : false;
}
values[input.name] = value;
values[input.key] = value;
}
}
return values;
Expand Down Expand Up @@ -291,17 +291,17 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
const inputsRequiredStatus = {};
for (const input of inputs) {
if (input.required) {
inputsRequiredStatus[input.name] = document.getElementById(input.name)?.value?.toString()?.length > 0;
inputsRequiredStatus[input.key] = document.getElementById(input.key)?.value?.toString()?.length > 0;
}
if (input.type === "email") {
inputsRequiredStatus[input.name] = isValidEmail(document.getElementById(input.name)?.value?.toString());
inputsRequiredStatus[input.key] = isValidEmail(document.getElementById(input.key)?.value?.toString());
}
}
setInputsRequiredStatus(inputsRequiredStatus);
}

function inputRequiredIndicatorColor(input) {
return inputsRequiredStatus[input.name] ? "green" : "red";
return inputsRequiredStatus[input.key] ? "green" : "red";
}

function allowSubmit() {
Expand Down Expand Up @@ -332,14 +332,14 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
</td>
<td style={{paddingTop: "0.6em",whiteSpace:"nowrap"}}>
{ input.type === "boolean" ? <>
<select className="select" id={input.name} defaultValue={valueOf(input)} onChange={handleChange} disabled={isDisabled() || input.readonly}>
<select className="select" id={input.key} defaultValue={valueOf(input)} onChange={handleChange} disabled={isDisabled() || input.readonly}>
<option value={false}>False</option>
<option value={true}>True</option>
</select>
</>:<>
{ input.type === "select" ? <>
<DynamicSelect
id={input.name}
id={input.key}
url={input.url}
required={input.required}
selected={valueOf(input)}
Expand All @@ -355,7 +355,7 @@ const EditBox = ({ inputs, setInputs, title, loading, onCreate, onUpdate, onDele
<input
className="input icon-rtl"
placeholder={input.placeholder || input.label}
id={input.name}
id={input.key}
defaultValue={valueOf(input)}
onChange={handleChange}
readOnly={input.readonly}
Expand Down
Loading

0 comments on commit 2774547

Please sign in to comment.