Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[JSX] Refactor Modal Component to Support Conditional Form Wrapping #9516

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[JSX] Refactor Modal Component to Support Conditional Form Wrapping #9516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38afc2f
add form element to modal
ridz1208 Dec 16, 2024
deed549
added changes from lack of rebase
ridz1208 Dec 16, 2024
46dffb0
updated formelement props
ridz1208 Dec 16, 2024
9f962cf
modify uses of modal to avoid form nesting
ridz1208 Dec 17, 2024
0151ad4
resolving lint
ridz1208 Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions jsx/Form.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ type formElement = {
type: string
};
type formElementProps = {
name: string
id: string
method: 'POST' | 'GET',
action: string
class: string
columns: number
formElements: {[elementName: string]: formElement}
name?: string
id?: string
method?: 'POST' | 'GET' = 'POST',
action?: string = '',
class?: string
columns?: number
formElements?: {[elementName: string]: formElement}
onSubmit: (FormEvent) => void
onUserInput : (name: string, value: string) => void
onUserInput?: (name: string, value: string) => void
children: ReactNode
fieUpload: boolean
fileUpload?: boolean = false
};
/**
* FormElement class. See Form.js
Expand Down
29 changes: 18 additions & 11 deletions jsx/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Swal from 'sweetalert2';
import Loader from './Loader';
import {
ButtonElement,
FormElement,
} from 'jsx/Form';

export type ModalProps = PropsWithChildren<{
Expand Down Expand Up @@ -86,11 +87,7 @@ const Modal = ({
*/
const submitButton = () => {
if (onSubmit && !(loading || success)) { // Show button if conditions met
return (
<div style={submitStyle}>
<ButtonElement onUserInput={handleSubmit}/>
</div>
);
return <div style={submitStyle}><ButtonElement/></div>;
}
};

Expand Down Expand Up @@ -193,6 +190,17 @@ const Modal = ({
</div>
);

const content = (
<>
<div style={bodyStyle}>{show && children}</div>
<div style={footerStyle}>
{loader}
{successDisplay}
{submitButton()}
</div>
</>
);

return (
<div style={modalContainer} onClick={handleClose}>
<div style={modalContent} onClick={(e) => e.stopPropagation()}>
Expand All @@ -201,12 +209,11 @@ const Modal = ({
<span style={glyphStyle} onClick={handleClose}>×</span>
</div>
<div>
<div style={bodyStyle}>{show && children}</div>
<div style={footerStyle}>
{loader}
{successDisplay}
{submitButton()}
</div>
{onSubmit ? (
<FormElement onSubmit={handleSubmit}>
{content}
</FormElement>
) : content}
</div>
</div>
</div>
Expand Down
131 changes: 64 additions & 67 deletions modules/data_release/jsx/managePermissionsForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Loader from 'jsx/Loader';
import swal from 'sweetalert2';
import Modal from 'Modal';
import {
FormElement,
CheckboxElement,
StaticElement,
SearchableDropdown,
Expand Down Expand Up @@ -89,74 +88,72 @@ class ManagePermissionsForm extends Component {
onClose={this.props.onClose}
onSubmit={this.handleSubmit}
>
<FormElement name="manage_permissions">
<SearchableDropdown name="user"
label="Manage Versions a User has access to"
placeHolder="Search for a User"
options={options.users}
strictSearch={true}
onUserInput={this.setFormData}
value={this.state.user}
/>
{this.state.user && <StaticElement
label={'Versions'}
text={Object.values(options.versions).map((version) =>
<div>
<CheckboxElement
name={'versionsByUser'}
label={version}
value={data[this.state.user].versions.includes(version)}
onUserInput={(formElement, checked) =>
this.setFormData(
'versionsByUser', {
userId: this.state.user, version, checked,
}
)
}
/><br/>
</div>
)}
/>
}
<SearchableDropdown
name="version"
label="Manage Users with access to a Version"
placeHolder="Search for a Version"
options={options.versions}
strictSearch={true}
onUserInput={this.setFormData}
value={this.state.version}
/>
{this.state.version &&
<StaticElement
label={'Users'}
text={Object.values(this.state.originalData).map((user) => {
if (user.versions.includes(this.state.version)) {
return <div>
<CheckboxElement
name={'usersByVersion'}
label={user.name}
value={
data[user.id].versions.includes(this.state.version)
}
onUserInput={(_, checked) =>
this.setFormData(
'usersByVersion',
{
userId: user.id,
checked,
version: this.state.version,
}
)
}
/><br/>
</div>;
<SearchableDropdown name="user"
label="Manage Versions a User has access to"
placeHolder="Search for a User"
options={options.users}
strictSearch={true}
onUserInput={this.setFormData}
value={this.state.user}
/>
{this.state.user && <StaticElement
label={'Versions'}
text={Object.values(options.versions).map((version) =>
<div>
<CheckboxElement
name={'versionsByUser'}
label={version}
value={data[this.state.user].versions.includes(version)}
onUserInput={(formElement, checked) =>
this.setFormData(
'versionsByUser', {
userId: this.state.user, version, checked,
}
)
}
/><br/>
</div>
)}
/>
}
<SearchableDropdown
name="version"
label="Manage Users with access to a Version"
placeHolder="Search for a Version"
options={options.versions}
strictSearch={true}
onUserInput={this.setFormData}
value={this.state.version}
/>
{this.state.version &&
<StaticElement
label={'Users'}
text={Object.values(this.state.originalData).map((user) => {
if (user.versions.includes(this.state.version)) {
return <div>
<CheckboxElement
name={'usersByVersion'}
label={user.name}
value={
data[user.id].versions.includes(this.state.version)
}
onUserInput={(_, checked) =>
this.setFormData(
'usersByVersion',
{
userId: user.id,
checked,
version: this.state.version,
}
)
}
/><br/>
</div>;
}
)}
/>
}
</FormElement>
}
)}
/>
}
</Modal>
);
}
Expand Down
142 changes: 69 additions & 73 deletions modules/dataquery/jsx/definefilters.importcsvmodal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,80 +128,76 @@ function ImportCSVModal(props: {
throwWarning={true}
onClose={props.closeModal}
onSubmit={submitPromise}>
<div>
<form>
<fieldset>
<div>
<dl>
<dt style={dtstyle}>CSV containing list of</dt>
<dd>
<input type="radio" name="csvtype"
checked={csvType == 'candidate'}
onChange={() => setCSVType('candidate')}
/> Candidates
<input type="radio" name="csvtype"
style={{marginLeft: '1.5em'}}
checked={csvType == 'session'}
onChange={() => setCSVType('session')}
/> Sessions
</dd>
<dt style={dtstyle}>Candidate identifier type</dt>
<dd><input type="radio" name="candidtype"
checked={idType == 'CandID'}
onChange={() => setIdType('CandID')}
/> DCC ID
<input type="radio" name="candidtype"
style={{marginLeft: '1.5em'}}
checked={idType == 'PSCID'}
onChange={() => setIdType('PSCID')}
/> PSCID
</dd>
<dt style={dtstyle}>
Does CSV contain a header line?
</dt>
<dd><input type="radio" name="header"
checked={csvHeader == true}
onChange={() => setCSVHeader(true)}
/> Yes
<input type="radio" name="header"
style={{marginLeft: '1.5em'}}
checked={csvHeader == false}
onChange={() => setCSVHeader(false)}
/> No
</dd>
<dt style={dtstyle}>CSV File</dt>
<dd><FileElement label='' name="csvfile"
value={csvFile}
onUserInput={
(filename: string, file: string) => {
setCSVFile(file);
const papaparseConfig:
Papa.ParseConfig<any> = {
skipEmptyLines: true,
complete: csvParsed,
// Setting this to try would cause
// papaparse to return an object
// instead of string. We just skip
// the first row if the user says
// they have a header when parsing
// results.
header: false,
};
// Only 1 column, papaparse can't detect
// the delimiter if it's not explicitly
// specified.
if (csvType == 'candidate') {
papaparseConfig.delimiter = ',';
}
Papa.parse(file, papaparseConfig);
}
<fieldset>
<div>
<dl>
<dt style={dtstyle}>CSV containing list of</dt>
<dd>
<input type="radio" name="csvtype"
checked={csvType == 'candidate'}
onChange={() => setCSVType('candidate')}
/> Candidates
<input type="radio" name="csvtype"
style={{marginLeft: '1.5em'}}
checked={csvType == 'session'}
onChange={() => setCSVType('session')}
/> Sessions
</dd>
<dt style={dtstyle}>Candidate identifier type</dt>
<dd><input type="radio" name="candidtype"
checked={idType == 'CandID'}
onChange={() => setIdType('CandID')}
/> DCC ID
<input type="radio" name="candidtype"
style={{marginLeft: '1.5em'}}
checked={idType == 'PSCID'}
onChange={() => setIdType('PSCID')}
/> PSCID
</dd>
<dt style={dtstyle}>
Does CSV contain a header line?
</dt>
<dd><input type="radio" name="header"
checked={csvHeader == true}
onChange={() => setCSVHeader(true)}
/> Yes
<input type="radio" name="header"
style={{marginLeft: '1.5em'}}
checked={csvHeader == false}
onChange={() => setCSVHeader(false)}
/> No
</dd>
<dt style={dtstyle}>CSV File</dt>
<dd><FileElement label='' name="csvfile"
value={csvFile}
onUserInput={
(filename: string, file: string) => {
setCSVFile(file);
const papaparseConfig:
Papa.ParseConfig<any> = {
skipEmptyLines: true,
complete: csvParsed,
// Setting this to try would cause
// papaparse to return an object
// instead of string. We just skip
// the first row if the user says
// they have a header when parsing
// results.
header: false,
};
// Only 1 column, papaparse can't detect
// the delimiter if it's not explicitly
// specified.
if (csvType == 'candidate') {
papaparseConfig.delimiter = ',';
}
/></dd>
</dl>
</div>
</fieldset>
</form>
</div>
Papa.parse(file, papaparseConfig);
}
}
/></dd>
</dl>
</div>
</fieldset>
</Modal>;
}

Expand Down
Loading
Loading