Untitled
unknown
plain_text
a year ago
15 kB
3
Indexable
Update the below code to pass the rfiObj from getTitleLink on click of navigate and use that to create the request for webService.createRFIRequest import ConstantKeys from '@/Constants/ConstantKeys'; import webService from '@/Services/WebService'; import { AppContext, Lift, useAppState, Util } from '@d-lift/core'; import { Button, Checkbox, CheckboxGroup, DataTable, Group, Header, Label, NavLink, Textbox, UX, } from '@d-lift/uxcomponents'; import PropTypes from 'prop-types'; import React from 'react'; import '../search.scss'; const SearchRFIForm = ({ searchRFI, updateSearchRFI, filteredPrograms, filteredCategory }) => { const [RFIResultList, setRFIResultList] = useAppState('RFIResultList', []); const [showAdvanceSearchContent, setShowAdvanceSearchContent] = useAppState( 'showAdvanceSearchContent', false, ); const [resultsFound, setResultsFound] = useAppState('resultsFound', ''); const expandAdvanceSearch = () => { setShowAdvanceSearchContent(!showAdvanceSearchContent); }; const getTitleLink = (colData, rowData, index) => { let model = 'searchRFI[' + rowData.id + '].title'; let rfiObj = { id: 'jhghk', }; return ( <UX type="section"> <NavLink className="ux-rfi-link" to="/response"> {rowData.title} </NavLink> </UX> ); }; const getProgramDsc = (colData) => { return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData); }; const getCategoryDsc = (colData) => { return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, colData); }; const getOfferingDsc = (colData) => { return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.OFFERING, colData); }; const getStateDsc = (colData) => { return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData); }; const handleSearchRFI = async () => { if (AppContext.pagedetails.getPageContext().validate({ model: 'searchRFI' }).isError) { return; } try { Lift.spinner.show(); const searchResults = await webService.searchRFIRequest({ requestBody: searchRFI, }); if (searchResults?.length > 0) { setResultsFound(true); setRFIResultList(searchResults); } Lift.Application.Notification.success('Search completed successfully'); } catch (error) { Lift.Application.Notification.error('Failed to complete the search'); } finally { Lift.spinner.hide(); } }; const handleCategoryChange = (event) => { const selectedCategory = event.target.value; let updatedCategory = [...searchRFI.category]; if (selectedCategory === ConstantKeys.CONTEXT_KEYS.All) { updatedCategory = [ConstantKeys.CONTEXT_KEYS.All]; } else if (updatedCategory.includes(ConstantKeys.CONTEXT_KEYS.All)) { updatedCategory = updatedCategory.filter( (item) => item !== ConstantKeys.CONTEXT_KEYS.All, ); } const newList = { ...searchRFI, category: updatedCategory }; updateSearchRFI(newList); }; const handleProgramChange = (event) => { const value = event.target.value; let selectedPrograms = [...searchRFI.programs]; if (value === ConstantKeys.CONTEXT_KEYS.All) { selectedPrograms = [ConstantKeys.CONTEXT_KEYS.All]; } else if (selectedPrograms.includes(ConstantKeys.CONTEXT_KEYS.All)) { selectedPrograms = selectedPrograms.filter( (program) => program !== ConstantKeys.CONTEXT_KEYS.All, ); } const newList = { ...searchRFI, programs: selectedPrograms }; updateSearchRFI(newList); }; return ( <> <div className="pb-5"> <Header className="pt-3 ux-rfi-font-header" size="2" labelKey="search"></Header> <Group width="9,2"> <Textbox name="question" className="w-100 ux-rfi-search-bar" model="searchRFI.search" appendIcon="search" placeholder="Search"></Textbox> <Button id="submit-btn" className="ux-rfi-green-button mt-4" click={handleSearchRFI} labelKey="search_btn"></Button> </Group> <Button header-size={6} postIconClass="fa fa-angle-right" className="col-12 text-center mt-1 ux-rfi-search-btn" labelKey="advanced_search" click={expandAdvanceSearch}></Button> {showAdvanceSearchContent && ( <div> <div className="ux-rfi-grey-border w-100 mt-3"> <Label labelKey="category" className="mt-2 ux-rfi-label-normal"></Label> <div className="ux-rfi-grey-border mt-2"> <CheckboxGroup model="searchRFI.category" className="ux-rfi-checkbox-d-flex mt-3"> {filteredCategory.map((categoryItem, index) => ( <Checkbox key={index} id={'category-item-' + index} text={ categoryItem[ ConstantKeys.REF_TABLE_COLS.DESCRIPTION ] } value={categoryItem[ConstantKeys.REF_TABLE_COLS.CODE]} change={(event) => handleCategoryChange(event) }></Checkbox> ))} </CheckboxGroup> </div> </div> <div className="ux-rfi-grey-border w-100 mt-4 pt-3 mb-4"> <Label className="ux-rfi-label-normal mt-2" labelKey="program"></Label> <div className="ux-rfi-grey-border mt-2"> <CheckboxGroup model="searchRFI.programs" className="ux-rfi-checkbox-d-flex mt-3"> {filteredPrograms.map((programItem, index) => ( <Checkbox key={index} id={'program-item-' + index} text={ programItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION] } value={programItem[ConstantKeys.REF_TABLE_COLS.CODE]} change={(event) => handleProgramChange(event) }></Checkbox> ))} </CheckboxGroup> </div> </div> </div> )} <div className="mt-2"> <DataTable col-data-keys="title,programs,category,offering,state" col-default-headers="Title,Program,Category,Offering,State" datacollection="RFIResultList" customContent={{ Title: getTitleLink, Program: getProgramDsc, Category: getCategoryDsc, Offering: getOfferingDsc, State: getStateDsc, }} emptymsg-key="Empty_message" keyfield="id" hover="false" bordered="true" striped="true" emptymsg-key="no_records" /> </div> </div> </> ); }; // Is this needed SearchRFIForm.propTypes = { searchRFI: PropTypes.object.isRequired, updateSearchRFI: PropTypes.func.isRequired, }; export default SearchRFIForm; import React, { useState, useEffect } from 'react'; import { withPage, Lift, useAppState } from '@d-lift/core'; import BodySection from '@/Layout/BodySection'; import webService from '@/Services/WebService'; import Questions from './Components/Questions'; import { Button, Label, Column, Page, Header, Row, Para } from '@d-lift/uxcomponents'; import './response.scss'; const RFIResponse = () => { const [responseData, setResponseData] = useAppState('responseData', []); useEffect(() => { loadResponseData(); console.log('rfiObj forwarded from the search screen:', rfiObj); }, []); const loadResponseData = async () => { try { Lift.spinner.show(); const searchRFIRequest = { id: rfiObj.id }; const data = await webService.getFullDetails({ requestBody: searchRFIRequest, }); if (data) { const formattedData = data.map((item) => ({ ...item, questionsList: item.questionsList.map((question) => ({ ...question, answers: question.answers.map((answer) => ({ ...answer, respondDt: new Date(answer.respondDt).toLocaleDateString('en-US'), })), })), })); setResponseData(formattedData); 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(); } }; return ( <Page> <BodySection> <div className="ux-rfi-grey-border w-100 mt-3"> <Header className="pt-3 ux-rfi-font-header" size="2" labelKey="RFI_Title"></Header> <Row> <Column className="col-9"> <Row className="d-flex flex-wrap"> <Para labelKey="very_much_longer" className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label"></Para> <Para labelKey="selection_1" className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para> <Para labelKey="selection_1" className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para> <Para labelKey="selection_1" className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para> <Para labelKey="selection_1" className="ux-rfi-green-label mt-2 p-1 ux-rfi-label-normal"></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 labelKey="massachusetts" className="ux-rfi-bold"></Para> <Label labelKey="due" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para labelKey="nov_15" className="ux-rfi-bold"></Para> <Label labelKey="responses" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para labelKey="18_of_30" className="ux-rfi-bold"></Para> <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 labelKey="content" className="mt-2 scrollable-content"></Para> </div> <Questions responseData={responseData}></Questions> </BodySection> </Page> ); }; export default withPage( { Description: 'Respond to an RFI page', ContentManager: true, LayoutStyle: 'rfi-dashboard', }, RFIResponse, );
Editor is loading...
Leave a Comment