Skip to content

Commit

Permalink
Data Refresh and Display Issues (#370)
Browse files Browse the repository at this point in the history 
* fixed a few issues with refresh etc

* Fixed multiple issues including data not being refetched and displayed properly and small styling issues

* more small polishing

* task/stashed-extension-modal-styles (#371)

Style ideas - not needed just left over work when
trying to figure out the useEffect yesterday for
extension modal

Co-authored-by: Carrie Arnold <[email protected]>

---------

Co-authored-by: sophia-massie <[email protected]>
Co-authored-by: Chandra Y <[email protected]>
  • Loading branch information
@happycodemonkey @sophia-massie @chandra-tacc
3 people authored Nov 20, 2024
1 parent 4685e4a commit 0cfee1c
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 121 deletions.
4 changes: 4 additions & 0 deletions apcd-cms/src/apps/admin_extension/static/admin_extension/css/modal.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.modal-dialog {
max-width: 55%;
}

.title {
margin-top: 0;
}
Expand Down
1 change: 1 addition & 0 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,6 +5,7 @@
<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" %}
Expand Down
20 changes: 13 additions & 7 deletions apcd-cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useExtensions, ExtensionRow, ExtensionEditRow } from 'hooks/admin';
import { useExtensions, ExtensionRow } from 'hooks/admin';
import LoadingSpinner from 'core-components/LoadingSpinner';
import SectionMessage from 'core-components/SectionMessage';
import Paginator from 'core-components/Paginator';
Expand Down Expand Up @@ -29,9 +29,16 @@ export const AdminExtensions: React.FC = () => {
setPage(1);
};

useEffect(() => {
const closeModal = () => {
setIsViewModalOpen(false);
setIsEditModalOpen(false);
setSelectedExtension(null);
};

const onEditSuccess = (updatedExtension: ExtensionRow) => {
// Refresh extension data after editing is successful
refetch();
}, [status, org, page, refetch]);
};

if (isLoading) {
return <LoadingSpinner />;
Expand Down Expand Up @@ -77,7 +84,6 @@ export const AdminExtensions: React.FC = () => {
<select
id="statusFilter"
className="status-filter"
//defaultValue={data?.selected_status} // Use defaultValue to set the initial selected value
onChange={(e) => setStatus(e.target.value)}
value={data?.selected_status}
>
Expand All @@ -95,7 +101,6 @@ export const AdminExtensions: React.FC = () => {
<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)}
value={data?.selected_org}
>
Expand Down Expand Up @@ -155,14 +160,15 @@ export const AdminExtensions: React.FC = () => {
<ViewExtensionModal
extension={selectedExtension}
isVisible={isViewModalOpen}
onClose={() => setIsViewModalOpen(false)}
onClose={closeModal}
/>
<EditExtensionModal
extension={selectedExtension}
statusOptions={data?.status_edit_options}
outcomeOptions={data?.outcome_edit_options}
isVisible={isEditModalOpen}
onClose={() => setIsEditModalOpen(false)}
onEditSuccess={onEditSuccess}
onClose={closeModal}
/>
</>
)}
Expand Down
170 changes: 56 additions & 114 deletions apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
Modal,
ModalBody,
ModalHeader,
Button,
Label,
FormGroup,
Row,
Expand All @@ -24,8 +23,10 @@ import * as Yup from 'yup';
import { ExtensionRow } from 'hooks/admin';
import { useEntities } from 'hooks/entities';
import QueryWrapper from 'core-wrappers/QueryWrapper';
import { convertPeriodLabelToApiValue } from 'utils/dateUtil';
import { convertPeriodLabelToApiValue, convertApiValueToPeriodLabel } from 'utils/dateUtil';
import styles from './EditExtensionModal.module.css';
import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
import Button from 'core-components/Button';

interface EditExtensionModalProps {
isVisible: boolean;
Expand Down Expand Up @@ -100,22 +101,26 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
actions: FormikHelpers<FormValues>
) => {
const { ext_id } = values;
const api_values = {
...values,
'applicable_data_period': convertPeriodLabelToApiValue(values['applicable_data_period']),
}
const url = `administration/update-extension/${ext_id}/`;

try {
setShowSuccessMessage(false);
const response = await fetchUtil({
url,
method: 'PUT',
body: values,
body: api_values,
});

if (onEditSuccess && response) {
onEditSuccess(response);
setUserFields([
{
label: 'Applicable Data Period',
value: values.applicable_data_period || 'None',
value: convertApiValueToPeriodLabel(values.applicable_data_period) || 'None',
},
{
label: 'Approved Expiration Date',
Expand Down Expand Up @@ -158,27 +163,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
setShowSuccessMessage(false);
setShowErrorMessage(false);
};
/*
const userFields = [
{
label: 'Applicable Data Period',
value: extension.applicable_data_period
? extension.applicable_data_period
: 'None',
},
{
label: 'Approved Expiration Date',
value: extension.approved_expiration_date
? extension.approved_expiration_date
: 'None',
},
{ label: 'Exception Status', value: extension.ex_status },
{ label: 'Exception Outcome', value: extension.ex_outcome },
{
label: 'Exception Notes',
value: extension.notes ? extension.notes : 'None',
},
];*/

const closeBtn = (
<button className="close" onClick={onClose} type="button">
&times;
Expand All @@ -190,32 +175,26 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
<Modal
isOpen={isVisible}
onClose={onClose}
className={styles.customModal}
onClosed={handleClose}
className="modal-dialog modal-lg"
>
<ModalHeader close={closeBtn}>
Edit Extension ID {extension.ext_id} for {extension.org_name}
</ModalHeader>
<ModalBody>
<Alert color="success" isOpen={showSuccessMessage}>
Success: The extension data has been successfully updated.
</Alert>
<div className={styles.greyRectangle}>Edit Selected Extension</div>
<h4 className="modal-header">Edit Selected Exception</h4>
<QueryWrapper
isLoading={entitiesLoading}
error={entitiesError as Error}
>
<FormikProvider value={formik}>
<form onSubmit={formik.handleSubmit}>
<Row>
<Col md={6}>
<FormGroup>
<Label
for="applicable_data_period"
className={styles.customLabel}
>
<strong>Applicable Data Period</strong>
</Label>
<Col md={3}>
<FieldWrapper
name="applicable_data_period"
label="Applicable Data Period"
required={false}
>
<Field
as="select"
name="applicable_data_period"
Expand All @@ -225,7 +204,6 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
)}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
>
{submitterData?.submitters
.find(
Expand All @@ -241,27 +219,17 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
</option>
))}
</Field>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
>
Current: {extension.applicable_data_period}
</small>
<ErrorMessage
name="applicable_data_period"
component="div"
className="text-danger"
/>
</FormGroup>
<div
className="help-text">
Current:{' '}{(extension.applicable_data_period)}
</div>
</FieldWrapper>
</Col>
<Col md={6}>
<FormGroup>
<Label
for="approved_expiration_date"
className={styles.customLabel}
>
<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 @@ -273,38 +241,29 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
/>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
<div
className="help-text"
>
Current:{' '}
{extension.approved_expiration_date
? new Date(
extension.approved_expiration_date
).toLocaleDateString()
: 'None'}
</small>
<ErrorMessage
name="approved_expiration_date"
component="div"
className="text-danger"
/>
</FormGroup>
</div>
</FieldWrapper>
</Col>
<Col md={6}>
<FormGroup>
<Label for="ext_status" className={styles.customLabel}>
<strong>Extension Status</strong>
</Label>
<Col md={3}>
<FieldWrapper name = "ext_status"
label="Exception Status"
required={false}>
<Field
as="select"
name="ext_status"
id="ext_status"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
value={formik.values.ext_status}
>
{statusOptions?.map(
Expand All @@ -320,25 +279,17 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
)
)}
</Field>
<ErrorMessage
name="ext_status"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
<Col md={6}>
<FormGroup>
<Label for="ext_outcome" className={styles.customLabel}>
<strong>Extension Outcome</strong>
</Label>
<Col md={3}>
<FieldWrapper name="ext_outcome" label="Extension Outcome"
required={false}>
<Field
as="select"
name="ext_outcome"
id="ext_outcome"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
value={formik.values.ext_outcome}
>
{outcomeOptions?.map((opt) => (
Expand All @@ -351,18 +302,10 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
</option>
))}
</Field>
<ErrorMessage
name="ext_outcome"
component="div"
className="text-danger"
/>
</FormGroup>
</FieldWrapper>
</Col>
<Col md={6}>
<FormGroup>
<Label for="notes" className={styles.customLabel}>
<strong>Notes</strong>
</Label>
<FieldWrapper name ="notes" label="Notes" required={false}>
<Field
as="textarea"
name="notes"
Expand All @@ -371,39 +314,38 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
maxLength="2000" // Set the maxLength attribute
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
/>
<small
className="form-text text-muted"
style={{ fontStyle: 'italic' }}
<div
className="help-text"
>
2000 character limit
</small>
<ErrorMessage
name="notes"
component="div"
className="text-danger"
/>
</FormGroup>
</div>
</FieldWrapper>
</Col>
</Row>
<br />
<Alert
color="success"
isOpen={showSuccessMessage}
>
Success: The exception data has been successfully updated.
</Alert>
<Alert color="danger" isOpen={showErrorMessage}>
Error: {errorMessage}
</Alert>
<Button
type="submit"
color="primary"
type="primary"
attr="submit"
disabled={formik.isSubmitting}
className={styles.customSubmitButton}
>
Submit
</Button>
</form>
</FormikProvider>
</QueryWrapper>
<hr />
<div className={styles.viewRecord}>
<h4 className="modal-header">Current Exception Information</h4>
<div>
{userFields.map((field, index) => (
<Row key={index}>
<Col md={6}>
Expand Down
Loading

0 comments on commit 0cfee1c

Please sign in to comment.