Skip to content

Commit

Permalink
prettier run
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandra-tacc
chandra-tacc committed Nov 1, 2024
1 parent aad891b commit bb80df2
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 164 deletions.
138 changes: 69 additions & 69 deletions apcd-cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,22 @@ import ViewExtensionModal from 'apcd-components/Extensions/ViewExtensionModal/Vi
import EditExtensionModal from 'apcd-components/Extensions/EditExtensionModal/EditExtensionModal';
import { formatDate } from 'utils/dateUtil';


export const AdminExtensions: React.FC = () => {
const [status, setStatus] = useState('All');
const [org, setOrg] = useState('All');
const [page, setPage] = useState(1);
const { data, isLoading, isError, refetch } = useExtensions(status, org, page);
const { data, isLoading, isError, refetch } = useExtensions(
status,
org,
page
);
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);

const [selectedExtension, setSelectedExtension] =
const [selectedExtension, setSelectedExtension] =
useState<ExtensionRow | null>(null);

console.log(data);
console.log(data);

const clearSelections = () => {
setStatus('');
Expand All @@ -32,19 +35,19 @@ console.log(data);
refetch();
}, [status, org, page, refetch]);

if (isLoading) {
return <LoadingSpinner/>;
if (isLoading) {
return <LoadingSpinner />;
}

if (isError) {
return (
<SectionMessage type="error">
There was an error loading the page.{''}
<a href="https://txapcd.org/workbench/dashboard/tickets/create">
Please submit a ticket.
</a>
</SectionMessage>
);
return (
<SectionMessage type="error">
There was an error loading the page.{''}
<a href="https://txapcd.org/workbench/dashboard/tickets/create">
Please submit a ticket.
</a>
</SectionMessage>
);
}

const openAction = (
Expand All @@ -53,24 +56,21 @@ console.log(data);
) => {
const actionsDropdown = event.target;
const selectedOption = actionsDropdown.value;
setSelectedExtension(
data?.page.find((x) => x.ext_id === ext_id) ?? null
);
setSelectedExtension(data?.page.find((x) => x.ext_id === ext_id) ?? null);
if (selectedOption == 'viewExtension') {
setIsViewModalOpen(true);
} else if (selectedOption == 'editExtension') {
setIsEditModalOpen(true);
setIsEditModalOpen(true);
}
actionsDropdown.selectedIndex = 0;
};


return (
<div>
<h1>View Extension Requests</h1>
<p >All submitted extension requests</p>
<hr />
<div className="filter-container">
<div>
<h1>View Extension Requests</h1>
<p>All submitted extension requests</p>
<hr />
<div className="filter-container">
<div className="filter-content">
{/* Filter */}
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
Expand Down Expand Up @@ -114,63 +114,63 @@ console.log(data);
</div>
</div>
</div>
<table id="extensionTable" className="extension-table">
<thead>
<tr>
{data?.header.map((columnName: string, index: number) => (
<th key={index}>{columnName}</th>
))}
</tr>
</thead>
<tbody>
{data?.page.map((row: ExtensionRow, rowIndex: number) => (
<tr key={rowIndex}>
<td>{formatDate(row.created)}</td>
<td>{row.org_name}</td>
<td>{row.requestor}</td>
<td>{row.type}</td>
<td>{row.ext_outcome}</td>
<td>{row.ext_status}</td>
<td>{formatDate(row.approved_expiration_date)}</td>
<td className="modal-cell">
<table id="extensionTable" className="extension-table">
<thead>
<tr>
{data?.header.map((columnName: string, index: number) => (
<th key={index}>{columnName}</th>
))}
</tr>
</thead>
<tbody>
{data?.page.map((row: ExtensionRow, rowIndex: number) => (
<tr key={rowIndex}>
<td>{formatDate(row.created)}</td>
<td>{row.org_name}</td>
<td>{row.requestor}</td>
<td>{row.type}</td>
<td>{row.ext_outcome}</td>
<td>{row.ext_status}</td>
<td>{formatDate(row.approved_expiration_date)}</td>
<td className="modal-cell">
<select
id={`actionsDropdown_${row.ext_id}`}
defaultValue=""
className="status-filter"
onChange={(e) => openAction(e, row.ext_id)}
>
<option value="">Select Action</option>
<option value="viewExtension">View Record</option>
<option value="editExtension">Edit Record</option>
</select>
</td>
</tr>
))}
</tbody>
</table>
<div className={styles.paginatorContainer}>
<option value="">Select Action</option>
<option value="viewExtension">View Record</option>
<option value="editExtension">Edit Record</option>
</select>
</td>
</tr>
))}
</tbody>
</table>
<div className={styles.paginatorContainer}>
<Paginator
pages={data?.total_pages ?? 0}
current={data?.page_num ?? 0}
callback={setPage}
/>
{selectedExtension && (
<>
<ViewExtensionModal
extension={selectedExtension}
isVisible={isViewModalOpen}
onClose={() => setIsViewModalOpen(false)}
/>
<EditExtensionModal
extension={selectedExtension}
statusOptions={data?.status_edit_options}
outcomeOptions={data?.outcome_edit_options}
isVisible={isEditModalOpen}
onClose={() => setIsEditModalOpen(false)}
/>
</>
)}
</div>
<>
<ViewExtensionModal
extension={selectedExtension}
isVisible={isViewModalOpen}
onClose={() => setIsViewModalOpen(false)}
/>
<EditExtensionModal
extension={selectedExtension}
statusOptions={data?.status_edit_options}
outcomeOptions={data?.outcome_edit_options}
isVisible={isEditModalOpen}
onClose={() => setIsEditModalOpen(false)}
/>
</>
)}
</div>
</div>
);
};
97 changes: 53 additions & 44 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 @@ -54,14 +54,19 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
const [showErrorMessage, setShowErrorMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [userFields, setUserFields] = useState([
{ label: 'Applicable Data Period', value: extension?.applicable_data_period || 'None' },
{ label: 'Approved Expiration Date', value: extension?.approved_expiration_date || 'None' },
{
label: 'Applicable Data Period',
value: extension?.applicable_data_period || 'None',
},
{
label: 'Approved Expiration Date',
value: extension?.approved_expiration_date || 'None',
},
{ label: 'Exception Status', value: extension?.ext_status },
{ label: 'Exception Outcome', value: extension?.ext_outcome },
{ label: 'Exception Notes', value: extension?.notes || 'None' },
]);


if (!extension) return null;

// Use the custom hook to get form fields and validation
Expand Down Expand Up @@ -100,13 +105,18 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
if (onEditSuccess && response) {
onEditSuccess(response);
setUserFields([
{ label: 'Applicable Data Period', value: values.applicable_data_period || 'None' },
{ label: 'Approved Expiration Date', value: values.approved_expiration_date || 'None' },
{
label: 'Applicable Data Period',
value: values.applicable_data_period || 'None',
},
{
label: 'Approved Expiration Date',
value: values.approved_expiration_date || 'None',
},
{ label: 'Exception Status', value: values.ext_status },
{ label: 'Exception Outcome', value: values.ext_outcome },
{ label: 'Exception Notes', value: values.notes || 'None' },
]);

}

setShowSuccessMessage(true);
Expand Down Expand Up @@ -140,7 +150,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
setShowSuccessMessage(false);
setShowErrorMessage(false);
};
/*
/*
const userFields = [
{
label: 'Applicable Data Period',
Expand Down Expand Up @@ -172,8 +182,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
>
<div className={`modal-header ${styles.modalHeader}`}>
<Label className={styles.customModalTitle}>
Edit Extension ID {extension.ext_id} for{' '}
{extension.org_name}
Edit Extension ID {extension.ext_id} for {extension.org_name}
</Label>
<button
type="button"
Expand All @@ -191,40 +200,40 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
<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>
<Field
type="text"
name="applicable_data_period"
id="applicable_data_period"
value={
formik.values.applicable_data_period
? formik.values.applicable_data_period
: ''
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
/>
<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>
</Col>
<Col md={6}>
<FormGroup>
<Label
for="applicable_data_period"
className={styles.customLabel}
>
<strong>Applicable Data Period</strong>
</Label>
<Field
type="text"
name="applicable_data_period"
id="applicable_data_period"
value={
formik.values.applicable_data_period
? formik.values.applicable_data_period
: ''
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className={`form-control ${styles.viewRecord}`}
/>
<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>
</Col>
<Col md={6}>
<FormGroup>
<Label
Expand Down Expand Up @@ -391,4 +400,4 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
);
};

export default EditExtensionModal;
export default EditExtensionModal;
Loading

0 comments on commit bb80df2

Please sign in to comment.