-
Notifications
You must be signed in to change notification settings - Fork 180
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Select stakeholder if a user is part of multiple stakeholders (#10369)
* Select stakeholder if a user is part of multiple stakeholders * Avoid refresh of page * Review changes --------- Co-authored-by: Daniel M James <[email protected]>
- Loading branch information
1 parent
1746776
commit 940a1f7
Showing
3 changed files
with
110 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,109 @@ | ||
| import React from 'react'; | ||
| import { Container } from 'semantic-ui-react'; | ||
| import React, { useMemo, useState } from 'react'; | ||
| import { | ||
| Button, Container, Dropdown, Message, Modal, | ||
| } from 'semantic-ui-react'; | ||
| import useLoadedData from '../../lib/hooks/useLoadedData'; | ||
| import { actionUrls } from '../../lib/requests/routes.js.erb'; | ||
| import Loading from '../Requests/Loading'; | ||
| import Errored from '../Requests/Errored'; | ||
| import TicketHeader from './TicketHeader'; | ||
| import TicketWorkbench from './TicketWorkbench'; | ||
| import TicketLogs from './TicketLogs'; | ||
| import useInputState from '../../lib/hooks/useInputState'; | ||
|
|
||
| function SkateholderSelector({ stakeholderList, setUserSelectedStakeholder }) { | ||
| const [selectedOption, setSelectedOption] = useInputState(stakeholderList[0]); | ||
| return ( | ||
| <> | ||
| <p> | ||
| You are part of more than one stakeholder, please select the stakeholder as which you want | ||
| to visit the ticket page. | ||
| </p> | ||
| <Dropdown | ||
| options={stakeholderList.map((requesterStakeholder) => ({ | ||
| key: requesterStakeholder.id, | ||
| text: requesterStakeholder.stakeholder.name, | ||
| value: requesterStakeholder, | ||
| }))} | ||
| value={selectedOption} | ||
| onChange={setSelectedOption} | ||
| /> | ||
| <Button | ||
| disabled={!selectedOption} | ||
| onClick={() => setUserSelectedStakeholder(selectedOption)} | ||
| > | ||
| Select | ||
| </Button> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function TicketContent({ ticketDetails, currentStakeholder, sync }) { | ||
| return ( | ||
| <> | ||
| <TicketHeader ticketDetails={ticketDetails} /> | ||
| <TicketWorkbench | ||
| ticketDetails={ticketDetails} | ||
| sync={sync} | ||
| currentStakeholder={currentStakeholder} | ||
| /> | ||
| <TicketLogs logs={ticketDetails.ticket.ticket_logs} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default function Tickets({ id }) { | ||
| const { | ||
| data: ticketDetails, sync, loading, error, | ||
| } = useLoadedData(actionUrls.tickets.show(id)); | ||
|
|
||
| const [userSelectedStakeholder, setUserSelectedStakeholder] = useInputState(); | ||
| const currentStakeholder = useMemo(() => { | ||
| if (userSelectedStakeholder) { | ||
| return userSelectedStakeholder; | ||
| } if (ticketDetails?.requester_stakeholders.length === 1) { | ||
| return ticketDetails?.requester_stakeholders[0]; | ||
| } | ||
| return null; | ||
| }, [ticketDetails?.requester_stakeholders, userSelectedStakeholder]); | ||
|
|
||
| if (loading) return <Loading />; | ||
| if (error) return <Errored />; | ||
|
|
||
| return ( | ||
| <Container fluid> | ||
| <TicketHeader ticketDetails={ticketDetails} /> | ||
| <TicketWorkbench ticketDetails={ticketDetails} sync={sync} /> | ||
| <TicketLogs logs={ticketDetails.ticket.ticket_logs} /> | ||
| </Container> | ||
| <> | ||
| <Container fluid> | ||
| {userSelectedStakeholder && ( | ||
| <Message> | ||
| {`You are currently viewing the ticket as stakeholder "${userSelectedStakeholder.stakeholder.name}".`} | ||
| <Button | ||
| onClick={() => setUserSelectedStakeholder(false)} | ||
| > | ||
| Click here to change | ||
| </Button> | ||
| </Message> | ||
| )} | ||
| {currentStakeholder && ( | ||
| <TicketContent | ||
| ticketDetails={ticketDetails} | ||
| currentStakeholder={currentStakeholder} | ||
| sync={sync} | ||
| /> | ||
| )} | ||
| </Container> | ||
| <Modal | ||
| open={!currentStakeholder} | ||
| closeOnEscape={false} | ||
| closeOnDimmerClick={false} | ||
| > | ||
| <Modal.Header>Select stakeholder</Modal.Header> | ||
| <Modal.Content> | ||
| <SkateholderSelector | ||
| stakeholderList={ticketDetails?.requester_stakeholders} | ||
| setUserSelectedStakeholder={setUserSelectedStakeholder} | ||
| /> | ||
| </Modal.Content> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| } |