diff --git a/frontend/src/pages/Referrals.tsx b/frontend/src/pages/Referrals.tsx index cb6c9e2..ea389c7 100644 --- a/frontend/src/pages/Referrals.tsx +++ b/frontend/src/pages/Referrals.tsx @@ -17,7 +17,7 @@ import { Table, TableCellContent } from "@/components/Table"; import { formatPhoneNumber } from "@/components/helpers"; import { DataContext } from "@/contexts/DataContext"; -const TABLE_COLUMN_NAMES = [ +const REFERRING_STAFF_TABLE_COLUMN_NAMES = [ "Name", "Email", "Phone Number", @@ -25,7 +25,6 @@ const TABLE_COLUMN_NAMES = [ "Referring Staff", "Status", "View", - "Delete", ]; const ENTRIES_PER_PAGE = 6; @@ -233,6 +232,7 @@ export function Referrals() { const [showNewClientPopup, setShowNewClientPopup] = useState<boolean>(false); const [successfulRemovalPopup, setSuccessfulRemovalPopup] = useState<boolean>(false); const [statusFilter, setStatusFilter] = useState<string>(""); + const [columnNames, setColumnNames] = useState<string[]>(REFERRING_STAFF_TABLE_COLUMN_NAMES); const fetchReferrals = () => { if (filterMode === ReferralFilterOption.MY_REFERRALS) { @@ -274,6 +274,14 @@ export function Referrals() { useEffect(fetchReferrals, [filterMode, dataContext.currentUser]); + useEffect(() => { + if (dataContext.currentUser?.isHousingLocator) { + setColumnNames([...REFERRING_STAFF_TABLE_COLUMN_NAMES, "Delete"]); + } else { + setColumnNames(REFERRING_STAFF_TABLE_COLUMN_NAMES); + } + }, [dataContext.currentUser]); + const handleDelete = (referral: Referral) => { deleteReferral(referral._id) .then((response) => { @@ -338,13 +346,12 @@ export function Referrals() { </FilterContainer> </TopRow> <Table - columns={TABLE_COLUMN_NAMES} + columns={columnNames} rows={ filteredReferrals ? filteredReferrals.map((referral, idx) => { const { renterCandidate, assignedReferringStaff, status } = referral; - - return [ + const row = [ renterCandidate.firstName + " " + renterCandidate.lastName, renterCandidate.email, formatPhoneNumber(renterCandidate.phone), @@ -354,17 +361,24 @@ export function Referrals() { <ViewButton key={`view-${idx}`} to={`/candidate/${renterCandidate._id}`}> View </ViewButton>, - <DeleteIcon - key={`delete-${idx}`} - src="/trash-can.svg" - onClick={() => { - if (referral !== null) { - setSelectedReferral(referral); - setPopup(true); - } - }} - />, ] as TableCellContent[]; + + if (dataContext.currentUser?.isHousingLocator) { + row.push( + <DeleteIcon + key={`delete-${idx}`} + src="/trash-can.svg" + onClick={() => { + if (referral !== null) { + setSelectedReferral(referral); + setPopup(true); + } + }} + />, + ); + } + + return row; }) : [] } diff --git a/frontend/src/pages/RenterCandidatePage.tsx b/frontend/src/pages/RenterCandidatePage.tsx index e79a166..5b4a983 100644 --- a/frontend/src/pages/RenterCandidatePage.tsx +++ b/frontend/src/pages/RenterCandidatePage.tsx @@ -265,6 +265,14 @@ const XButton = styled.div` width: 10px; `; +const REFERRING_STAFF_COLUMN_NAMES = [ + "Unit", + "Referring Staff", + "Housing Locator", + "Status", + "Last Updated", +]; + type ReferralQuery = Record<string, Partial<UpdateReferralRequest>>; export function RenterCandidatePage() { @@ -283,6 +291,7 @@ export function RenterCandidatePage() { const [popup, setPopup] = useState(false); const [confirmPopup, setConfirmPopup] = useState(false); const [backPopup, setBackPopup] = useState(false); + const [columnNames, setColumnNames] = useState<string[]>(REFERRING_STAFF_COLUMN_NAMES); const [currReferral, setCurrReferral] = useState<string>(""); @@ -342,12 +351,47 @@ export function RenterCandidatePage() { useEffect(fetchRenterCandidate, []); + useEffect(() => { + if (currentUser?.isHousingLocator) { + setColumnNames([...REFERRING_STAFF_COLUMN_NAMES, "Delete"]); + } else { + setColumnNames(REFERRING_STAFF_COLUMN_NAMES); + } + }, [currentUser]); + if (loading || !renterCandidate) { return <Loading />; } - const renderHousingLocatorCell = (referral: Referral) => { - if (currentUser?.isHousingLocator) { + const renderReferringStaffCell = (referral: Referral, editing: boolean) => { + if (editing) { + return ( + <UserDropdown + width="200px" + placeholder="Search" + initialSelection={referral.assignedReferringStaff} + options={allReferringStaff} + onSelect={(referringStaff) => { + setEditReferralQuery({ + ...editReferralQuery, + [referral._id]: { + ...editReferralQuery[referral._id], + referringStaff: referringStaff._id, + }, + }); + }} + isTableDropdown={true} + /> + ); + } else { + return ( + referral.assignedReferringStaff.firstName + " " + referral.assignedReferringStaff.lastName + ); + } + }; + + const renderHousingLocatorCell = (referral: Referral, editing: boolean) => { + if (currentUser?.isHousingLocator && editing) { return ( <UserDropdown width="200px" @@ -378,8 +422,8 @@ export function RenterCandidatePage() { ); }; - const renderStatusCell = (referral: Referral, status: string) => { - if (currentUser?.isHousingLocator) { + const renderStatusCell = (referral: Referral, status: string, editing: boolean) => { + if (currentUser?.isHousingLocator && editing) { return ( <ReferralTableDropDown key={referral._id} @@ -556,65 +600,6 @@ export function RenterCandidatePage() { </EditSection> </EditColumn> </EditSection> - <TableContainer> - <Title>Current Referrals</Title> - <Table - columns={[ - "Unit", - "Referring Staff", - "Housing Locator", - "Status", - "Last Updated", - "Delete", - ]} - rows={ - renterReferrals - ? renterReferrals.map((referral, idx) => { - const { unit, assignedReferringStaff, status, updatedAt } = referral; - // return list of cells for each row - return [ - <ListingAddressLink - key={`listing-address-${idx}`} - to={`/unit/${unit._id}`} - state={{ prevPage: pathname }} - > - {unit.listingAddress} - </ListingAddressLink>, - <UserDropdown - key={idx} - width="200px" - placeholder="Search" - initialSelection={assignedReferringStaff} - options={allReferringStaff} - onSelect={(referringStaff) => { - setEditReferralQuery({ - ...editReferralQuery, - [referral._id]: { - ...editReferralQuery[referral._id], - referringStaff: referringStaff._id, - }, - }); - }} - isTableDropdown={true} - />, - renderHousingLocatorCell(referral), - renderStatusCell(referral, status), - formatDate(updatedAt.toString()), - <DeleteIcon - key={`delete-${idx}`} - src="/trash-can.svg" - onClick={() => { - setPopup(true); - setCurrReferral(referral._id); - }} - ></DeleteIcon>, - ] as TableCellContent[]; - }) - : [] - } - rowsPerPage={5} - /> - </TableContainer> </> ) : ( <> @@ -640,61 +625,53 @@ export function RenterCandidatePage() { <InfoText>{renterCandidate.program}</InfoText> </InfoColumn> </InfoRow> - <TableContainer> - <Title>Current Referrals</Title> - <Table - columns={[ - "Unit", - "Referring Staff", - "Housing Locator", - "Status", - "Last Updated", - "Delete", - ]} - rows={ - renterReferrals - ? renterReferrals.map((referral, idx) => { - const { - unit, - assignedReferringStaff, - assignedHousingLocator, - status, - updatedAt, - } = referral; - // return list of cells for each row - return [ - <ListingAddressLink - key={`listing-address-${idx}`} - to={`/unit/${unit._id}`} - state={{ prevPage: pathname }} - > - {unit.listingAddress} - </ListingAddressLink>, - assignedReferringStaff.firstName + " " + assignedReferringStaff.lastName, - assignedHousingLocator - ? assignedHousingLocator.firstName + - " " + - assignedHousingLocator.lastName - : "N/A", - status, - formatDate(updatedAt.toString()), - <DeleteIcon - key={`delete-${idx}`} - src="/trash-can.svg" - onClick={() => { - setPopup(true); - setCurrReferral(referral._id); - }} - ></DeleteIcon>, - ] as TableCellContent[]; - }) - : [] - } - rowsPerPage={5} - /> - </TableContainer> </> )} + <TableContainer> + <Title>Current Referrals</Title> + <Table + columns={columnNames} + rows={ + renterReferrals + ? renterReferrals.map((referral, idx) => { + const { unit, status, updatedAt } = referral; + // return list of cells for each row + const row = [ + <ListingAddressLink + key={`listing-address-${idx}`} + to={`/unit/${unit._id}`} + state={{ prevPage: pathname }} + > + {unit.listingAddress} + </ListingAddressLink>, + + renderReferringStaffCell(referral, isEditing), + renderHousingLocatorCell(referral, isEditing), + renderStatusCell(referral, status, isEditing), + formatDate(updatedAt.toString()), + ] as TableCellContent[]; + + if (currentUser?.isHousingLocator) { + row.push( + <DeleteIcon + key={`delete-${idx}`} + src="/trash-can.svg" + onClick={() => { + setPopup(true); + setCurrReferral(referral._id); + }} + />, + ); + } + + return row; + }) + : [] + } + rowsPerPage={5} + /> + </TableContainer> + {popup && ( <> <Overlay />