Untitled
unknown
plain_text
a month ago
17 kB
7
Indexable
import React from 'react';
import { UX } from '@d-lift/uxcomponents';
import './AppealsStatusCard.scss';
const AppealsStatusCard = (props) => {
const { className, data, onClick } = props;
let ip = false;
let su = true;
return (
<UX type="card" className={className} id={data?.appealId}>
<UX type="row">
<UX type="column">
{<DataModule label={'Appeal_data_header'} data={data?.appealId} />}
</UX>
</UX>
<UX type="row">
<UX type="column">
{<DataModule label={'Program_data_header'} data={data?.program} />}
</UX>
<UX type="column" className="date-sub-header">
{<DataModule label={'Date_sub_data_header'} data={data?.submittedDate} />}
</UX>
</UX>
<hr className="mt-0" />
<UX type="row">
<UX
type="column"
className="col-12 col-md-6 col-lg-4 footer-btn"
showIf={data?.statusCode === 'IP'}>
<UX type="icon" className="footer-icon-hover" symbol="fa fa-pen" />
<UX
type="hyperLink"
link="/"
className="footer-link"
labelKey={'Edit_label'}
click={(e) => {
e.preventDefault();
onClick(data);
}}
/>
</UX>
<UX
type="column"
className=" col-12 col-md-6 col-lg-4 footer-btn"
showIf={data?.statusCode === 'IP'}>
<UX type="icon" className="footer-icon-hover" symbol="fa fa-trash" />
<UX
type="hyperLink"
link="/"
className="footer-link"
labelKey={'Delete_label'}
click={(e) => {
e.preventDefault();
onClick(data);
}}
/>
</UX>
<UX type="column" className="footer-btn" showIf={data?.statusCode === 'SU'}>
<UX type="icon" className="footer-icon-hover" symbol="fa fa-eye" />
<UX
type="hyperLink"
link="/"
className="footer-link"
labelKey={'View_label'}
click={(e) => {
e.preventDefault();
onClick(data);
}}
/>
</UX>
<UX type="column" className="footer-btn pl-42" showIf={data?.statusCode === 'SU'}>
<UX type="icon" className="footer-icon-hover" symbol="fa fa-file-pdf" />
<UX
type="hyperLink"
link="/"
className="footer-link"
labelKey={'View_Pdf_label'}
click={(e) => {
e.preventDefault();
onClick(data);
}}
/>
</UX>
<UX
type="column"
className="col col-lg-5 footer-btn pl-36"
showIf={data?.statusCode === 'SU'}>
<UX type="icon" className="footer-icon-hover" symbol="fa fa-file-download" />
<UX
type="hyperLink"
link="/"
className="footer-link"
labelKey={'Withdraw_label'}
click={(e) => {
e.preventDefault();
onClick(data);
}}
/>
</UX>
</UX>
</UX>
);
};
export default AppealsStatusCard;
const DataModule = ({ label, data }) => {
return (
<>
<UX type="para" className="data-header" labelKey={label} />
<UX type="para" className="data-details">
{data}
</UX>
</>
);
};
import { useAppState, withPage } from '@d-lift/core';
import { AppContext, Navigate, Lift } from '@d-lift/core';
import {
Section,
Page,
Header,
Button,
Row,
Column,
Para,
Icon,
Card,
Modal,
} from '@d-lift/uxcomponents';
import React, { useEffect, useState } from 'react';
import ToDoCard from '@/UXModule/Card/ToDoCard/ToDoCard';
import AppealsStatusCard from '@/UXModule/Card/AppealsStatusCard/AppealsStatusCard';
const pageConfig = {
Description: 'Appeals Dashboard Page',
ContentManager: true,
PageId: 'APLDB',
PageName: 'APLDB',
ContextRoot: 'Appeals',
LayoutStyle: 'home',
};
const APLDB = () => {
const [fileManageAppealsCards] = useAppState('fileManageAppealsCards', []);
const [appealsDetailsCardsData, setAppealsDetailsCardsData] = useAppState(
'AppealsDetailsCardData',
[],
);
//const [dataLoaded, setDataLoaded] = useAppState('dataLoaded', true);
const [ipCount, setIpCount] = useAppState('ipCount', 0);
const [suCount, setSuCount] = useAppState('suCount', 0);
const [deleteModal, setDeleteModal] = useAppState('deleteModal', false);
const [viewDetails, setViewDetails] = useAppState('viewDetails', false);
useEffect(() => {
updateFileManageAppealsCards();
updateAppealsDetailsCardsData();
}, []);
const addFileManageAppealsCardItem = (cardItem) => {
const nextFileManageAppealCard = [...AppContext.model.getValue('fileManageAppealsCards')];
nextFileManageAppealCard.push(cardItem);
AppContext.model.setValue('fileManageAppealsCards', nextFileManageAppealCard);
};
const updateFileManageAppealsCards = () => {
addFileManageAppealsCardItem({
heading: 'File_appeal_heading',
description: 'File_appeal_description',
type: 'fileAppeal',
linkText: 'File_appeal_link',
});
addFileManageAppealsCardItem({
heading: 'Link_appeal_heading',
description: 'Link_appeal_description',
type: 'linkAppeal',
linkText: 'Link_appeal_link',
});
addFileManageAppealsCardItem({
heading: 'Upload_document_heading',
description: 'Upload_document_description',
type: 'linkAppeal',
linkText: 'Upload_document_link',
});
};
const updateAppealsDetailsCardsData = () => {
const AppealsDetailsCardData = [
{
appealId: '1234567890',
program: 'TANF',
status: 'In Progress',
statusCode: 'IP',
submittedDate: '01/01/2021 12:00 PM',
},
{
appealId: '1234567891',
program: 'SNAP',
status: 'Submitted',
statusCode: 'SU',
submittedDate: '01/01/2021 12:00 PM',
},
{
appealId: '1234567892',
program: 'DSNAP',
status: 'Submitted',
statusCode: 'SU',
submittedDate: '01/01/2021 12:00 PM',
},
{
appealId: '1234567893',
program: 'childcare',
status: 'Submitted',
statusCode: 'SU',
submittedDate: '01/01/2021 12:00 PM',
},
];
setAppealsDetailsCardsData(AppealsDetailsCardData);
setSuCount(AppealsDetailsCardData.filter((data) => data.statusCode === 'SU').length);
setIpCount(AppealsDetailsCardData.filter((data) => data.statusCode === 'IP').length);
};
const handleFileManageAppealCardClick = (data) => {
if (data.type === 'fileAppeal') {
Navigate.to('/Appeals/APLMR');
}
};
const handleAppealDetailsCardClick = (data) => {
setDeleteModal(true);
console.log('AppealsDetailsCard clicked:', data);
};
const deleteAppealCardDetails = async () => {
try {
const request = {};
setDeleteModal(false);
Lift.spinner.show();
// const response = await adminService.deleteAppealCardDetails({
// requestBody: request,
// });
// if (response) {
// } else {
// }
} catch (error) {
} finally {
Lift.spinner.hide();
}
};
const closeDeleteModal = () => {
setDeleteModal(false);
};
const handleViewDetails = (data) => {
setViewDetails(true);
console.log('Appeals View Details clicked:', data);
};
const closeViewDetails = () => {
setViewDetails(false);
};
return (
<Page>
<Section className="container">
<Row>
<Column>
<Header labelKey="Appeals_dashboard_header_1" />
<Para labelKey="Appeals_dashboard_sub_heading_1"></Para>
{fileManageAppealsCards?.map((cardData, index) => (
<ToDoCard
key={`fileManageAppealsCards_${index}`}
className="mb-4"
data={cardData}
onClick={() => handleFileManageAppealCardClick(cardData)}
/>
))}
</Column>
<Column>
<Header labelKey="Appeals_dashboard_header_2" />
<div style={{ display: 'flex', alignItems: 'center' }}>
<Para
className="status-heading"
labelKey="Appeals_dashboard_inprogress_heading"
/>
<Para className="mb-3 status-heading">{'(' + ipCount + ')'}</Para>
</div>
{appealsDetailsCardsData?.map((cardData, index) => (
<AppealsStatusCard
key={`AppealsDetailsCardData_${index}`}
className="mb-4"
data={cardData}
onClick={() => handleAppealDetailsCardClick(cardData)}
showIf="{AppealsDetail.statusCode === 'IP' && dataLoaded}"
/>
))}
<Card className="mb-4 justify-items" showIf="{!dataLoaded}">
<Para
className="mb-0 status-heading"
labelKey="inprogress_empty_text"
/>
</Card>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Para
className="status-heading"
labelKey="Appeals_dashboard_submitted_heading"
/>
<Para className="mb-3 status-heading">{'(' + suCount + ')'}</Para>
</div>
{appealsDetailsCardsData?.map((cardData, index) => (
<AppealsStatusCard
key={`AppealsStatusCardData_${index}`}
className="mb-4"
data={cardData}
//onClick={() => handleAppealDetailsCardClick(cardData)}
onClick={() => handleViewDetails(cardData)}
showIf="{AppealsDetail.statusCode === 'SU' && dataLoaded}"
/>
))}
<Card className="mb-4 justify-items" showIf="{!dataLoaded}">
<Para className="mb-0 status-heading" labelKey="submitted_empty_text" />
</Card>
<Modal isOpen={deleteModal}>
<div className="d-flex justify-content-center mb-3">
<Icon
symbol="fa fa-exclamation-circle"
aria-hidden="true"
//style={{ 'font-size': '0.2em' }}
/>
</div>
<Header className="mb-3" labelKey="delete_notification" />
<div style={{ display: 'flex', alignItems: 'center' }}>
<Column>
<Row>
{' '}
<Button
className="col-auto mx-2 mb-2"
labelKey="cancel_btn"
click={closeDeleteModal}
/>
</Row>
<Row>
<Button
className="col-auto mx-2"
labelKey="delete_btn"
click={deleteAppealCardDetails}
/>
</Row>
</Column>
</div>
</Modal>
<Modal isOpen={viewDetails}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Header
className="mb-3 float-right"
labelKey="appeal_status_header1"
/>
</div>
<Header size="2" className="mb-3 " labelKey="appeal_status_header2" />
<Para labelKey="draft_label" />
<Para labelKey="draft_text" />
<Para labelKey="inprogress_label" />
<Para labelKey="inprogress_text" />
<Para labelKey="hearing_label" />
<Para labelKey="hearing_text" />
<Para labelKey="hearingInprogress_label" />
<Para labelKey="hearingInprogress_text" />
<Para labelKey="administrativeDecision_label" />
<Para labelKey="administrativeDecision_text" />
<Para labelKey="decisionIssued_label" />
<Para labelKey="decisionIssued_text" />
<Para labelKey="rescheduledHearing_label" />
<Para labelKey="rescheduledHearing_text" />
<Para labelKey="petition_label" />
<Para labelKey="petition_text" />
<Para labelKey="closed_label" />
<Para labelKey="closed_text" />
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button
className="col-auto mx-2 mb-2"
labelKey="okay_btn"
click={closeViewDetails}
/>
</div>
</Modal>
</Column>
</Row>
</Section>
</Page>
);
};
export default withPage(pageConfig, APLDB);
in the above code we are able to send only one func as onClick={() => handleAppealDetailsCardClick(cardData)} to AppealsStatusCard, but update the code to send the handleAppealDetailsCardClick for delete functionality and handleEditAppealDetailsCardClick() for when clcked on editEditor is loading...
Leave a Comment