Skip to content

Commit

Permalink
Task/wp 759 exeption listing bugs (#366)
Browse files Browse the repository at this point in the history 
* Exception Listing bugs fixed

* FieldWrapper applied

* Modal header and close button fix

---------

Co-authored-by: Chandra Y <[email protected]>
  • Loading branch information
@jmartinez-tacc @chandra-tacc
jmartinez-tacc and chandra-tacc authored Nov 19, 2024
1 parent d52d606 commit bf19bbd
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 106 deletions.
2 changes: 0 additions & 2 deletions apcd-cms/src/apps/admin_exception/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,6 @@ def getDate(row):
entity_name = title_case(exception[21])
status = title_case(exception[19]) if exception[19] else 'None'
outcome = title_case(exception[5]) if exception[5] else 'None'
status = title_case(exception[19]) if exception[19] else 'None'
outcome = title_case(exception[5]) if exception[5] else 'None'
if entity_name not in context['org_options']:
context['org_options'].append(entity_name)
# to make sure All is first in the dropdown filter options after sorting alphabetically
Expand Down
109 changes: 43 additions & 66 deletions apcd-cms/src/client/src/components/Admin/EditExceptionModal/EditExceptionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import * as Yup from 'yup';
import { ExceptionRow } from 'hooks/admin';
import { formatDate } from 'utils/dateUtil';
import styles from './EditExceptionModal.module.css';
import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
import Button from 'core-components/Button';

interface EditRecordModalProps {
Expand Down Expand Up @@ -219,6 +220,7 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
setShowSuccessMessage(false);
setShowErrorMessage(false);
};

const closeBtn = (
<button className="close" onClick={onClose} type="button">
&times;
Expand All @@ -242,11 +244,12 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
<form onSubmit={formik.handleSubmit}>
<Row>
{exception.request_type == 'Threshold' && (
<Col md={4}>
<FormGroup>
<Label for="approved_threshold">
<strong>Approved Threshold</strong>
</Label>
<Col md={3}>
<FieldWrapper
name="approved_threshold"
label="Approved Threshold"
required={false}
>
<Field
type="text"
name="approved_threshold"
Expand All @@ -258,27 +261,22 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control`}
/>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
>
Requested: {exception.requested_threshold}%
</small>
<ErrorMessage
name="approved_threshold"
component="div"
className="text-danger"
/>
</FormGroup>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
>
Requested: {exception.requested_threshold}%
</small>
</FieldWrapper>
</Col>
)}
<Col md={4}>
<FormGroup>
<Label for="approved_expiration_date">
<strong>Approved Expiration Date</strong>
</Label>
<Col md={3}>
<FieldWrapper
name="approved_expiration_date"
label="Approved Expiration Date"
required={false}
>
<Field
type="date"
name="approved_expiration_date"
Expand All @@ -290,7 +288,6 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control`}
/>
<small
className="form-text text-muted"
Expand All @@ -303,25 +300,20 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
).toLocaleDateString()
: 'None'}
</small>
<ErrorMessage
name="approved_expiration_date"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
<Col md={4}>
<FormGroup>
<Label for="status">
<strong>Exception Status</strong>
</Label>
<Col md={3}>
<FieldWrapper
name="status"
label="Exception Status"
required={false}
>
<Field
as="select"
name="status"
id="status"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control`}
value={formik.values.status}
>
{statusOptions?.map(
Expand All @@ -337,25 +329,20 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
)
)}
</Field>
<ErrorMessage
name="status"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
<Col md={4}>
<FormGroup>
<Label for="outcome">
<strong>Exception Outcome</strong>
</Label>
<Col md={3}>
<FieldWrapper
name="outcome"
label="Exception Outcome"
required={false}
>
<Field
as="select"
name="outcome"
id="outcome"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control`}
value={formik.values.outcome}
>
{outcomeOptions?.map((val, index) => (
Expand All @@ -368,18 +355,14 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
</option>
))}
</Field>
<ErrorMessage
name="outcome"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
<Col md={8}>
<FormGroup>
<Label for="notes">
<strong>Notes</strong>
</Label>
<Col md={6}>
<FieldWrapper
name="notes"
label="Notes"
required={false}
>
<Field
as="textarea"
name="notes"
Expand All @@ -389,20 +372,14 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
maxLength="2000" // Set the maxLength attribute
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control`}
/>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
>
2000 character limit
</small>
<ErrorMessage
name="notes"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
</Row>
<br />
Expand Down
74 changes: 39 additions & 35 deletions apcd-cms/src/client/src/components/Admin/Exceptions/AdminExceptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ export const AdminExceptions: React.FC = () => {

useEffect(() => {
refetch();
}, [status, org, page, refetch]);
}, [page, refetch]);

useEffect(() => {
setPage(1);
}, [status, org]);

const clearSelections = () => {
setStatus('Pending');
Expand Down Expand Up @@ -70,41 +74,41 @@ export const AdminExceptions: React.FC = () => {
<div className="filter-container">
<div className="filter-content">
{/* Filter */}
<span>
<b>Filter by Status: </b>
</span>
<select
id="statusFilter"
className="status-filter"
defaultValue={data?.selected_status} // Use defaultValue to set the initial selected value
onChange={(e) => setStatus(e.target.value)}
>
{data?.status_options.map((status, index) => (
<option className="dropdown-text" key={index} value={status}>
{status}
</option>
))}
</select>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<span>
<b>Filter by Status: </b>
</span>
<select
id="statusFilter"
value={status}
onChange={(e) => setStatus(e.target.value)}
>
{data?.status_options.map((status, index) => (
<option className="dropdown-text" key={index} value={status}>
{status}
</option>
))}
</select>

{/* Filter by Organization */}
<span>
<b>Filter by Organization: </b>
</span>
<select
id="organizationFilter"
className="status-filter org-filter"
defaultValue={data?.selected_org} // Use defaultValue to set the initial selected value
onChange={(e) => setOrg(e.target.value)}
>
{data?.org_options.map((org, index) => (
<option className="dropdown-text" key={index} value={org}>
{org}
</option>
))}
</select>
{data?.selected_status || data?.selected_org ? (
<button onClick={clearSelections}>Clear Options</button>
) : null}
{/* Filter by Organization */}
<span>
<b>Filter by Organization: </b>
</span>
<select
id="organizationFilter"
value={org}
onChange={(e) => setOrg(e.target.value)}
>
{data?.org_options.map((org, index) => (
<option className="dropdown-text" key={index} value={org}>
{org}
</option>
))}
</select>
{status !== 'Pending' || org !== 'All' ? (
<button onClick={clearSelections}>Clear Options</button>
) : null}
</div>
</div>
</div>
<table id="exceptionTable" className="exception-table">
Expand Down
6 changes: 3 additions & 3 deletions apcd-cms/src/client/src/components/Admin/ViewExceptionModal/ViewExceptionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';
import { ExceptionModalContent, ExceptionRow } from 'hooks/admin';
import { formatDate } from 'utils/dateUtil';
import { formatModalDate } from 'utils/dateUtil';
import styles from './ViewExceptionModal.module.css';

export const ViewExceptionModal: React.FC<{
Expand Down Expand Up @@ -50,7 +50,7 @@ export const ViewExceptionModal: React.FC<{
<Row>
<Col md={{ size: 4, offset: 1 }}>Created</Col>
<Col md={7}>
{(created_at && formatDate(created_at)) || 'None'}
{(created_at && formatModalDate(created_at)) || 'None'}
</Col>
</Row>
<Row>
Expand Down Expand Up @@ -130,7 +130,7 @@ export const ViewExceptionModal: React.FC<{
<Row>
<Col md={{ size: 4, offset: 1 }}>Last Updated</Col>
<Col md={7}>
{(updated_at && formatDate(updated_at)) || 'None'}
{(updated_at && formatModalDate(updated_at)) || 'None'}
</Col>
</Row>
<hr />
Expand Down
5 changes: 5 additions & 0 deletions apcd-cms/src/client/src/utils/dateUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ export const formatDate = (dateString: string | number | Date): string => {
}).format(date);
};

export const formatModalDate = (dateString: string | number | Date): string => {
return formatDate(dateString).replace('.','').
replace('AM','a.m.').replace('PM','p.m.');
};

/**
*
* @param period string - Jan. 2024 as example
Expand Down

0 comments on commit bf19bbd

Please sign in to comment.