Untitled
unknown
plain_text
a year ago
6.0 kB
4
Indexable
import React, { useEffect } from 'react'; import { withPage, Lift, useAppState, Util } from '@d-lift/core'; import BodySection from '@/Layout/BodySection'; import webService from '@/Services/WebService'; import Questions from './Components/Questions'; import RFIDetails from './Components/RFIDetails'; import { Page } from '@d-lift/uxcomponents'; import './response.scss'; const RFIResponse = () => { const [responseData, setResponseData] = useAppState('responseData', false); const [rfi, setRfi] = useAppState('rfi'); const [responseStats, setResponseStats] = useAppState('responseStats', ''); const updateResponseData = (newResponseData) => { setResponseData(newResponseData); }; useEffect(() => { if (rfi) { loadResponseData(rfi); console.log(rfi); } }, [rfi]); useEffect(() => { if (responseData) { const stats = calculateResponseStats(responseData.questions); setResponseStats(stats); console.log(stats); console.log(responseStats); } }, [responseData]); const loadResponseData = async (rfi) => { try { Lift.spinner.show(); const response = await webService.getFullDetails({ requestBody: { rfiId: rfi?.id }, }); console.log(response); if (response) { updateResponseData(response); Lift.Application.Notification.success('Response Data loaded successfully'); } } catch (error) { console.log(error); Lift.Application.Notification.error('Failed to load Response Data'); } finally { Lift.spinner.hide(); } }; const calculateResponseStats = (data) => { console.log(data); const totalQuestions = data.length; const answeredQuestions = data.filter((q) => q?.answers && q?.answers.length > 0).length; const percentageAnswered = totalQuestions > 0 ? ((answeredQuestions / totalQuestions) * 100).toFixed(2) : 0; return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`; }; return ( <Page ref-table-list="OFFERING,STATE,PROGRAM,CATEGORY"> <BodySection> {rfi && ( <RFIDetails rfi={rfi} responseStats={responseStats} /> )} {responseData && ( <Questions responseData={responseData.questions} updateResponseData={updateResponseData}></Questions> )} </BodySection> </Page> ); }; export default withPage( { Description: 'Respond to an RFI page', ContentManager: true, LayoutStyle: 'rfi-dashboard', }, RFIResponse, ); import React from 'react'; import { Button, Label, Column, Header, Row, Para } from '@d-lift/uxcomponents'; import { Util } from '@d-lift/core'; const RFIDetails = ({ rfi, responseStats }) => { return ( <> <div className="ux-rfi-grey-border w-100 mt-3"> <Header className="pt-3 ux-rfi-font-header" size="2"> {rfi.title} </Header> <Row> <Column className="col-9"> <Row className="d-flex flex-wrap"> <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label"> {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)} </Para> <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"> {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)} </Para> <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"> {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)} </Para> </Row> </Column> <Column> <div className="ux-rfi-grey-border"> <Label labelKey="requested_by" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para className="ux-rfi-bold"> {Util.getRefTableDescriptionByCode('STATE', rfi.state)} </Para> <Label labelKey="due" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para className="ux-rfi-bold">{rfi.dueDt}</Para> <Label labelKey="responses" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"> <Para className="ux-rfi-bold">{responseStats}</Para> </Label> <div className="m-0 p-1"> <Button id="summarizeBtn" size="small" className="ux-rfi-green-button" // click={} labelKey="summarize_btn"></Button> </div> </div> </Column> </Row> </div> <div className="ux-rfi-grey-border w-100 mt-3"> <Para className="mt-2 scrollable-content">{rfi.description}</Para> </div> </> ); }; export default RFIDetails;
Editor is loading...
Leave a Comment