Skip to content

Commit

Permalink
Merge pull request #148 from naweidner/fix-event-metadata-inputfields
Browse files Browse the repository at this point in the history 
Fix metadata input fields
  • Loading branch information
@Arnei
Arnei committed Apr 12, 2023
2 parents 2cf7297 + 44161a3 commit 9bd0d0c
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 60 deletions.
106 changes: 57 additions & 49 deletions app/src/components/shared/wizard/RenderField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,20 @@ const EditableDateValue = ({
</ThemeProvider>
</div>
) : (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
<span className="editable preserve-newlines">
{t("dateFormats.dateTime.short", { dateTime: new Date(text) }) || ""}
</span>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand Down Expand Up @@ -246,18 +248,20 @@ const EditableSingleSelect = ({
/>
</div>
) : (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
<span className="editable preserve-newlines">
{text || t("SELECT_NO_OPTION_SELECTED")}
</span>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand All @@ -271,7 +275,6 @@ const EditableSingleValueTextArea = ({
handleKeyDown,
form: { initialValues },
showCheck,
isFirst,
}) => {
return editMode ? (
<div
Expand All @@ -281,21 +284,23 @@ const EditableSingleValueTextArea = ({
>
<textarea
{...field}
autoFocus={isFirst}
autoFocus={true}
className="editable vertical-resize"
/>
</div>
) : (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
<span className="editable preserve-newlines">{text || ""}</span>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand All @@ -309,27 +314,28 @@ const EditableSingleValue = ({
setEditMode,
handleKeyDown,
showCheck,
isFirst,
}) => {
return editMode ? (
<div
onBlur={() => setEditMode(false)}
onKeyDown={(e) => handleKeyDown(e, "input")}
ref={childRef}
>
<input {...field} autoFocus={isFirst} type="text" />
<input {...field} autoFocus={true} type="text" />
</div>
) : (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
<span className="editable preserve-newlines">{text || ""}</span>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand Down Expand Up @@ -373,18 +379,20 @@ const EditableSingleValueTime = ({
</ThemeProvider>
</div>
) : (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
<span className="editable preserve-newlines">
{t("dateFormats.dateTime.short", { dateTime: new Date(text) }) || ""}
</span>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand Down
24 changes: 13 additions & 11 deletions app/src/components/shared/wizard/RenderMultiField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ const RenderMultiField = ({
// Renders multi select
const EditMultiSelect = ({
collection,
setEditMode,
handleKeyDown,
handleChange,
inputValue,
Expand All @@ -119,7 +118,7 @@ const EditMultiSelect = ({
return (
<>
<div ref={childRef}>
<div onBlur={() => setEditMode(false)}>
<div>
<input
type="text"
name={field.name}
Expand All @@ -128,6 +127,7 @@ const EditMultiSelect = ({
onChange={(e) => handleChange(e)}
placeholder={t("EDITABLE.MULTI.PLACEHOLDER")}
list="data-list"
autoFocus={true}
/>
{/* Display possible options for values as some kind of dropdown */}
<datalist id="data-list">
Expand Down Expand Up @@ -199,7 +199,7 @@ const ShowValue = ({
fieldValue,
}) => {
return (
<div onClick={() => setEditMode(true)}>
<div onClick={() => setEditMode(true)} className="show-edit">
{field.value instanceof Array && field.value.length !== 0 ? (
<ul>
{field.value.map((item, key) => (
Expand All @@ -211,14 +211,16 @@ const ShowValue = ({
) : (
<span className="editable preserve-newlines">{""}</span>
)}
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
<div>
<i className="edit fa fa-pencil-square" />
{showCheck && (
<i
className={cn("saved fa fa-check", {
active: initialValues[field.name] !== field.value,
})}
/>
)}
</div>
</div>
);
};
Expand Down
5 changes: 5 additions & 0 deletions app/src/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,11 @@ a.disabled, button.disabled, div.disabled {
}
}

div.show-edit {
display: flex;
justify-content: space-between;
}

span.editable {
border-bottom: 1px dashed #999;
}
Expand Down

0 comments on commit 9bd0d0c

Please sign in to comment.