Skip to content

Commit

Permalink
Update EditTaskModal.jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nahiyan-16
Nahiyan-16 committed Jun 10, 2024
1 parent ba0ddbb commit b53f9f4
Showing 1 changed file with 162 additions and 149 deletions.
311 changes: 162 additions & 149 deletions src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,35 +285,38 @@ function EditTaskModal(props) {
</tr>
<tr>
<td scope="col">Task Name</td>
{ReadOnlySectionWrapper(
<textarea
rows="2"
type="text"
className="task-name border border-dark rounded"
onChange={e => setTaskName(e.target.value)}
onKeyPress={e => setTaskName(e.target.value)}
value={taskName}
/>,
editable,
taskName
)}
<td>
{ReadOnlySectionWrapper(
<textarea
rows="2"
type="text"
className="task-name border border-dark rounded"
onChange={e => setTaskName(e.target.value)}
onKeyPress={e => setTaskName(e.target.value)}
value={taskName}
/>,
editable,
taskName
)}
</td>
</tr>
<tr>
<td scope="col">Priority</td>
{ReadOnlySectionWrapper(
<select
id="priority"
onChange={e => setPriority(e.target.value)}
value={priority}
className='mt-2 ml-3'
>
<option value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Tertiary">Tertiary</option>
</select>,
editable,
priority
)}
<td>
{ReadOnlySectionWrapper(
<select
id="priority"
onChange={e => setPriority(e.target.value)}
value={priority}
>
<option value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Tertiary">Tertiary</option>
</select>,
editable,
priority
)}
</td>
</tr>
<tr>
<td scope="col">Resources</td>
Expand All @@ -332,105 +335,109 @@ function EditTaskModal(props) {
</tr>
<tr>
<td scope="col">Assigned</td>
{ReadOnlySectionWrapper(
<div className="flex-row d-inline align-items-center">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="true"
name="Assigned"
value="true"
onChange={e => setAssigned(true)}
checked={assigned}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="true">
Yes
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="false"
name="Assigned"
value="false"
onChange={e => setAssigned(false)}
checked={!assigned}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="false">
No
</label>
</div>
</div>,
editable,
assigned? 'Yes' : 'No'
)}
<td>
{ReadOnlySectionWrapper(
<div className="flex-row d-inline align-items-center">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="true"
name="Assigned"
value="true"
onChange={e => setAssigned(true)}
checked={assigned}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="true">
Yes
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="false"
name="Assigned"
value="false"
onChange={e => setAssigned(false)}
checked={!assigned}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="false">
No
</label>
</div>
</div>,
editable,
assigned? 'Yes' : 'No'
)}
</td>
</tr>
<tr>
<td scope="col">Status</td>
{ReadOnlySectionWrapper(
<div className="flex-row d-inline align-items-center">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="active"
name="status"
value="Active"
checked={status === 'Active' || status === 'Started'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="active">
Active
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="notStarted"
name="status"
value="Not Started"
checked={status === 'Not Started'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="notStarted">
Not Started
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="paused"
name="status"
value="Paused"
checked={status === 'Paused'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="paused">
Paused
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="complete"
name="status"
value="Complete"
checked={status === 'Complete'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="complete">
Complete
</label>
</div>
</div>,
editable,
status
)}
<td>
{ReadOnlySectionWrapper(
<div className="flex-row d-inline align-items-center">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="active"
name="status"
value="Active"
checked={status === 'Active' || status === 'Started'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="active">
Active
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="notStarted"
name="status"
value="Not Started"
checked={status === 'Not Started'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="notStarted">
Not Started
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="paused"
name="status"
value="Paused"
checked={status === 'Paused'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="paused">
Paused
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
id="complete"
name="status"
value="Complete"
checked={status === 'Complete'}
onChange={(e) => setStatus(e.target.value)}
/>
<label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="complete">
Complete
</label>
</div>
</div>,
editable,
status
)}
</td>
</tr>
<tr>
<td scope="col" data-tip="Hours - Best-case">
Expand Down Expand Up @@ -574,17 +581,19 @@ function EditTaskModal(props) {
</tr>
<tr>
<td scope="col">Category</td>
{ReadOnlySectionWrapper(
<select value={category} onChange={e => setCategory(e.target.value)}>
{categoryOptions.map(cla => (
<option value={cla.value} key={cla.value}>
{cla.label}
</option>
))}
</select>,
editable,
category
)}
<td>
{ReadOnlySectionWrapper(
<select value={category} onChange={e => setCategory(e.target.value)}>
{categoryOptions.map(cla => (
<option value={cla.value} key={cla.value}>
{cla.label}
</option>
))}
</select>,
editable,
category
)}
</td>
</tr>

<tr>
Expand Down Expand Up @@ -649,6 +658,7 @@ function EditTaskModal(props) {
</tr>
<tr>
<td scope="col">Start Date</td>
<td>
{ReadOnlySectionWrapper(
<div className='text-dark'>
<DayPickerInput
Expand All @@ -665,25 +675,28 @@ function EditTaskModal(props) {
editable,
convertDate(startedDate)
)}
</td>
</tr>
<tr>
<td scope="col">End Date</td>
{ReadOnlySectionWrapper(
<div className='text-dark'>
<DayPickerInput
format={FORMAT}
formatDate={formatDate}
placeholder={`${dateFnsFormat(new Date(), FORMAT)}`}
onDayChange={(day, mod, input) => changeDateEnd(input.state.value)}

/>
<div className='warning text-danger'>
{dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
</div>
</div>,
editable,
convertDate(dueDate)
)}
<td>
{ReadOnlySectionWrapper(
<div className='text-dark'>
<DayPickerInput
format={FORMAT}
formatDate={formatDate}
placeholder={`${dateFnsFormat(new Date(), FORMAT)}`}
onDayChange={(day, mod, input) => changeDateEnd(input.state.value)}

/>
<div className='warning text-danger'>
{dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
</div>
</div>,
editable,
convertDate(dueDate)
)}
</td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit b53f9f4

Please sign in to comment.