Skip to content

Commit

Permalink
task/WP-859-860-861 Admin Extension Listing (#423)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophia-massie
sophia-massie authored Feb 11, 2025
1 parent 67629ac commit a0ea24d
Show file tree
Hide file tree
Showing 5 changed files with 198 additions and 166 deletions.
3 changes: 1 addition & 2 deletions apcd_cms/src/apps/admin_extension/templates/list_admin_extension.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@
<link rel="stylesheet" href="{% static 'apcd_cms/css/table.css' %}">
<link rel="stylesheet" href="{% static 'apcd_cms/css/modal.css' %}">
<link rel="stylesheet" href="{% static 'admin_extension/css/table.css' %}">
<link rel="stylesheet" href="{% static 'admin_extension/css/modal.css' %}">

<div class="container">
{% include "nav_cms_breadcrumbs.html" %}
<div id="admin-extensions-root"></div>
</div>
{% endblock %}
{% endblock %}
52 changes: 2 additions & 50 deletions apcd_cms/src/apps/admin_extension/templates/view_admin_extension_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,54 +5,6 @@
<div class="modal-dialog modal-lg">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extension Details ID {{r.extension_id}} for {{r.entity_name}}</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&#xe912;</span>
</button>
</div>
<div class="modal-body">
<div>
<dl>
<h4>Details</h4>
<div class="modal-section">
<dl class="c-data-list--is-vert c-data-list--is-wide">
<dt class="c-data-list__key">Created</dt>
<dd class="c-data-list__value">{{r.created_at}}</dd>
<dt class="c-data-list__key">Entity Organization</dt>
<dd class="c-data-list__value">{{r.entity_name}}</dd>
<dt class="c-data-list__key">Requestor</dt>
<dd class="c-data-list__value">{{r.requestor_name}}</dd>
<dt class="c-data-list__key">Requestor Email</dt>
<dd class="c-data-list__value">{{r.requestor_email}}</dd>
<dt class="c-data-list__key">Extension Type</dt>
<dd class="c-data-list__value">{{r.extension_type}}</dd>
<dt class="c-data-list__key">Status</dt>
<dd class="c-data-list__value">{{r.status}}</dd>
<dt class="c-data-list__key">Outcome</dt>
<dd class="c-data-list__value">{{r.outcome}}</dd>
<dt class="c-data-list__key">Applicable Data Period</dt>
<dd class="c-data-list__value">{{r.applicable_data_period}}</dd>
<dt class="c-data-list__key">Current Expected Date</dt>
<dd class="c-data-list__value">{{r.current_expected_date}}</dd>
<dt class="c-data-list__key">Requested Target Date</dt>
<dd class="c-data-list__value">{{r.requested_target_date}}</dd>
<dt class="c-data-list__key">Approved Expiration Date</dt>
<dd class="c-data-list__value">{{r.approved_expiration_date}}</dd>
<dt class="c-data-list__key">Extension Justification</dt>
<dd class="c-data-list__value">{{r.explanation_justification}}</dd>
<dt class="c-data-list__key">Extension Notes</dt>
<dd class="c-data-list__value">{{r.notes}}</dd>
<dt class="c-data-list__key">Last Updated</dt>
<dd class="c-data-list__value">{{r.updated_at}}</dd>
</dl>
<hr>
</div>
</dd>
</dl>
</div>
</div>
</div>
<div id="view-extension-modal-root"></div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion apcd_cms/src/apps/admin_extension/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ def get_extensions_list_json(self, extensions, *args, **kwargs):
page_num = 1

def getDate(row):
date = row[2]
date = row[9]
return date if date is not None else datetimeDate(1,1,1) # put 'None' date entries all together at end of listing w/ date 1-1-0001

extensions = sorted(extensions, key=lambda row:getDate(row), reverse=True)
Expand Down
182 changes: 114 additions & 68 deletions apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,8 @@
import React, { useState, useEffect } from 'react';
import {
Modal,
ModalBody,
ModalHeader,
Label,
FormGroup,
Row,
Col,
Alert,
} from 'reactstrap';
import {
Formik,
Field,
Form,
ErrorMessage,
useFormik,
FormikHelpers,
FormikProvider,
} from 'formik';
import { Modal, ModalBody, ModalHeader, Row, Col, Alert } from 'reactstrap';
import { Field, useFormik, FormikHelpers, FormikProvider } from 'formik';
import { fetchUtil } from 'utils/fetchUtil';
import { formatDate } from 'utils/dateUtil';
import * as Yup from 'yup';
import { ExtensionRow } from 'hooks/admin';
import { useSubmitterDataPeriods } from 'hooks/entities';
Expand All @@ -27,7 +11,6 @@ import {
convertPeriodLabelToApiValue,
convertApiValueToPeriodLabel,
} from 'utils/dateUtil';
import styles from './EditExtensionModal.module.css';
import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
import Button from 'core-components/Button';

Expand Down Expand Up @@ -60,33 +43,104 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
const [showErrorMessage, setShowErrorMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [extensionFields, setExtensionFields] = useState([
{
label: 'Applicable Data Period',
value: extension?.applicable_data_period || 'None',
},
{
label: 'Approved Expiration Date',
value: extension?.approved_expiration_date || 'None',
},
{ label: 'Extension Status', value: extension?.ext_status },
{ label: 'Extension Outcome', value: extension?.ext_outcome },
{ label: 'Extension Notes', value: extension?.notes || 'None' },
]);
const [currentExtension, setCurrentExtension] = useState<ExtensionRow | null>(
extension
);

const {
data: submitterData,
isLoading: submitterDataLoading,
error: submitterDataError,
} = useSubmitterDataPeriods(extension?.submitter_id);

if (!extension) return null;
useEffect(() => {
setCurrentExtension(extension);
}, [extension]);

if (!currentExtension) return null;

const extensionFields = [
{
label: 'Created',
value: currentExtension?.created
? formatDate(currentExtension.created)
: 'None',
},
{
label: 'Entity Organization',
value: currentExtension?.org_name,
},
{
label: 'Requestor',
value: currentExtension?.requestor,
},
{
label: 'Requestor Email',
value: currentExtension?.requestor_email,
},
{
label: 'Extension Type',
value: currentExtension?.type,
},
{
label: 'Status',
value: currentExtension?.ext_status,
},
{
label: 'Outcome',
value: currentExtension?.ext_outcome,
},
{
label: 'Applicable Data Period',
value: currentExtension?.applicable_data_period,
},
{
label: 'Current Expected Date',
value:
currentExtension?.current_expected_date &&
currentExtension?.current_expected_date !== 'None'
? formatDate(currentExtension?.current_expected_date)
: 'None',
},
{
label: 'Requested Target Date',
value:
currentExtension?.requested_target_date &&
currentExtension?.requested_target_date !== 'None'
? formatDate(currentExtension?.requested_target_date)
: 'None',
},
{
label: 'Approved Expiration Date',
value:
currentExtension?.approved_expiration_date &&
currentExtension?.approved_expiration_date !== 'None'
? formatDate(currentExtension?.requested_target_date)
: 'None',
},
{
label: 'Extension Justification',
value: currentExtension?.explanation_justification,
},
{
label: 'Extension Notes',
value: currentExtension?.notes,
},
{
label: 'Last Updated',
value:
currentExtension?.updated_at && currentExtension?.updated_at !== 'None'
? formatDate(currentExtension?.updated_at)
: 'None',
},
];

// Use the custom hook to get form fields and validation
const useFormFields = () => {
const initialValues: FormValues = {
...extension,
ext_id: extension?.ext_id,
notes: extension?.notes || 'None', // Set notes to 'None' if it is null
...currentExtension,
ext_id: currentExtension?.ext_id,
notes: currentExtension?.notes || 'None', // Set notes to 'None' if it is null
};

const validationSchema = Yup.object({
Expand Down Expand Up @@ -121,26 +175,20 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
body: api_values,
});

if (onEditSuccess && response) {
onEditSuccess(response);
setExtensionFields([
{
label: 'Applicable Data Period',
value:
convertApiValueToPeriodLabel(values.applicable_data_period) ||
'None',
},
{
label: 'Approved Expiration Date',
value: values.approved_expiration_date || 'None',
},
{ label: 'Extension Status', value: values.ext_status },
{ label: 'Extension Outcome', value: values.ext_outcome },
{ label: 'Extension Notes', value: values.notes || 'None' },
]);
}
if (response) {
setCurrentExtension((prevExtension) => ({
...prevExtension!,
ext_status: values.ext_status,
ext_outcome: values.ext_outcome,
applicable_data_period: values.applicable_data_period,
approved_expiration_date: values.approved_expiration_date,
notes: values.notes,
updated_at: new Date().toISOString(),
}));

setShowSuccessMessage(true);
setShowSuccessMessage(true);
if (onEditSuccess) onEditSuccess(response);
}
} catch (error: any) {
if (error.response && error.response.data) {
// Use error message from the server response
Expand Down Expand Up @@ -170,6 +218,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
const handleClose = () => {
setShowSuccessMessage(false);
setShowErrorMessage(false);
onClose();
};

const closeBtn = (
Expand All @@ -186,7 +235,8 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
className="modal-dialog modal-lg"
>
<ModalHeader close={closeBtn}>
Edit Extension ID {extension.ext_id} for {extension.org_name}
Edit Extension ID {currentExtension.ext_id} for{' '}
{currentExtension.org_name}
</ModalHeader>
<ModalBody>
<h4 className="modal-header">Edit Selected Extension</h4>
Expand Down Expand Up @@ -223,7 +273,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
))}
</Field>
<div className="help-text">
Current: {extension.applicable_data_period}
Current: {currentExtension.applicable_data_period}
</div>
</FieldWrapper>
</Col>
Expand All @@ -246,10 +296,10 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
onBlur={formik.handleBlur}
/>
<div className="help-text">
Current:{' '}
{extension.approved_expiration_date
Requested Target Date:{' '}
{currentExtension.requested_target_date
? new Date(
extension.approved_expiration_date
currentExtension.requested_target_date
).toLocaleDateString()
: 'None'}
</div>
Expand Down Expand Up @@ -327,7 +377,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
</Row>
<br />
<Alert color="success" isOpen={showSuccessMessage}>
Success: The exception data has been successfully updated.
Success: The extension data has been successfully updated.
</Alert>
<Alert color="danger" isOpen={showErrorMessage}>
Error: {errorMessage}
Expand All @@ -347,12 +397,8 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
<div>
{extensionFields.map((field, index) => (
<Row key={index}>
<Col md={6}>
<p>{field.label}:</p>
</Col>
<Col md={6}>
<p>{field.value}</p>
</Col>
<Col md={{ size: 4, offset: 1 }}>{field.label}:</Col>
<Col md={6}>{field.value}</Col>
</Row>
))}
</div>
Expand Down
Loading

0 comments on commit a0ea24d

Please sign in to comment.