From c14118eb0809561ef383cae63d9f898d845ef871 Mon Sep 17 00:00:00 2001
From: Catia Barroco <104831678+CatiaBarroco-xgeeks@users.noreply.github.com>
Date: Fri, 16 Sep 2022 10:00:22 +0100
Subject: [PATCH] feat: responsible can change the responsible

---
 .../src/components/Board/Settings/index.tsx   | 213 +++++++++---------
 frontend/src/pages/boards/[boardId].tsx       |   1 +
 2 files changed, 113 insertions(+), 101 deletions(-)

diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index e8d8df186..e8a482144 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -45,6 +45,7 @@ type Props = {
 	isStakeholderOrAdmin?: boolean | undefined;
 	isOwner?: boolean | undefined;
 	isSAdmin?: boolean | undefined;
+	isResponsible: boolean;
 };
 
 const BoardSettings = ({
@@ -53,7 +54,8 @@ const BoardSettings = ({
 	socketId,
 	isStakeholderOrAdmin,
 	isOwner,
-	isSAdmin
+	isSAdmin,
+	isResponsible
 }: Props) => {
 	// Recoil State used on [boardId].tsx
 	const { board } = useRecoilValue(boardInfoState);
@@ -325,116 +327,125 @@ const BoardSettings = ({
 									</StyledAccordionContent>
 								</StyledAccordionItem>
 
-								{board.isSubBoard && (isStakeholderOrAdmin || isOwner || isSAdmin) && (
-									<StyledAccordionItem value="responsible">
-										<StyledAccordionHeader>
-											<StyledAccordionTrigger>
-												<Text heading="5">Team Responsible</Text>
-												<StyledAccordionIcon name="arrow-down" />
-											</StyledAccordionTrigger>
-										</StyledAccordionHeader>
-										<StyledAccordionContent>
-											<Flex direction="column" gap={16}>
-												<ConfigurationSettings
-													handleCheckedChange={handleResponsibleChange}
-													isChecked={switchesState.responsible}
-													text="Change responsible participant for this board."
-													title="Team Responsible"
-												>
-													<Flex
-														align="center"
-														css={{
-															mt: '$10',
-															opacity: !switchesState.responsible
-																? '40%'
-																: 'unset',
-															pointerEvents:
-																!switchesState.responsible
-																	? 'none'
-																	: 'unset',
-															transition: 'all 0.25s ease-in-out'
-														}}
+								{board.isSubBoard &&
+									(isStakeholderOrAdmin ||
+										isOwner ||
+										isSAdmin ||
+										isResponsible) && (
+										<StyledAccordionItem value="responsible">
+											<StyledAccordionHeader>
+												<StyledAccordionTrigger>
+													<Text heading="5">Team Responsible</Text>
+													<StyledAccordionIcon name="arrow-down" />
+												</StyledAccordionTrigger>
+											</StyledAccordionHeader>
+											<StyledAccordionContent>
+												<Flex direction="column" gap={16}>
+													<ConfigurationSettings
+														isChecked={switchesState.responsible}
+														text="Change responsible participant for this board."
+														title="Team Responsible"
+														handleCheckedChange={
+															handleResponsibleChange
+														}
 													>
-														<Text
-															css={{
-																mr: '$8',
-																color: '$primary300'
-															}}
-														>
-															Responsible Lottery
-														</Text>
-														<Separator
-															orientation="vertical"
-															css={{
-																'&[data-orientation=vertical]': {
-																	height: '$12',
-																	width: 1
-																}
-															}}
-														/>
-
 														<Flex
 															align="center"
-															justify="center"
 															css={{
-																height: '$24',
-																width: '$24',
-																borderRadius: '$round',
-																border: '1px solid $colors$primary400',
-																ml: '$12',
-																cursor: switchesState.responsible
-																	? 'pointer'
-																	: 'default',
-
-																transition: 'all 0.2s ease-in-out',
-
-																'&:hover': switchesState.responsible
-																	? {
-																			backgroundColor:
-																				'$primary400',
-																			color: 'white'
-																	  }
-																	: 'none'
+																mt: '$10',
+																opacity: !switchesState.responsible
+																	? '40%'
+																	: 'unset',
+																pointerEvents:
+																	!switchesState.responsible
+																		? 'none'
+																		: 'unset',
+																transition: 'all 0.25s ease-in-out'
 															}}
-															onClick={handleRandomResponsible}
 														>
-															<Icon
-																name="wand"
+															<Text
+																css={{
+																	mr: '$8',
+																	color: '$primary300'
+																}}
+															>
+																Responsible Lottery
+															</Text>
+															<Separator
+																orientation="vertical"
 																css={{
-																	width: '$12',
-																	height: '$12'
+																	'&[data-orientation=vertical]':
+																		{
+																			height: '$12',
+																			width: 1
+																		}
 																}}
 															/>
-														</Flex>
 
-														<Text
-															color="primary800"
-															css={{ mx: '$8' }}
-															size="sm"
-														>
-															{!responsible
-																? 'Responsible not found!'
-																: `${responsible?.firstName} ${responsible?.lastName}`}
-														</Text>
-
-														<Avatar
-															css={{ position: 'relative' }}
-															size={32}
-															colors={{
-																bg: '$highlight2Lighter',
-																fontColor: '$highlight2Dark'
-															}}
-															fallbackText={getInitials(
-																responsible?.firstName ?? '-',
-																responsible?.lastName ?? '-'
-															)}
-														/>
-													</Flex>
-												</ConfigurationSettings>
-											</Flex>
-										</StyledAccordionContent>
-									</StyledAccordionItem>
-								)}
+															<Flex
+																align="center"
+																justify="center"
+																css={{
+																	height: '$24',
+																	width: '$24',
+																	borderRadius: '$round',
+																	border: '1px solid $colors$primary400',
+																	ml: '$12',
+																	cursor: switchesState.responsible
+																		? 'pointer'
+																		: 'default',
+
+																	transition:
+																		'all 0.2s ease-in-out',
+
+																	'&:hover':
+																		switchesState.responsible
+																			? {
+																					backgroundColor:
+																						'$primary400',
+																					color: 'white'
+																			  }
+																			: 'none'
+																}}
+																onClick={handleRandomResponsible}
+															>
+																<Icon
+																	name="wand"
+																	css={{
+																		width: '$12',
+																		height: '$12'
+																	}}
+																/>
+															</Flex>
+
+															<Text
+																color="primary800"
+																css={{ mx: '$8' }}
+																size="sm"
+															>
+																{!responsible
+																	? 'Responsible not found!'
+																	: `${responsible?.firstName} ${responsible?.lastName}`}
+															</Text>
+
+															<Avatar
+																css={{ position: 'relative' }}
+																size={32}
+																colors={{
+																	bg: '$highlight2Lighter',
+																	fontColor: '$highlight2Dark'
+																}}
+																fallbackText={getInitials(
+																	responsible?.firstName ?? '-',
+																	responsible?.lastName ?? '-'
+																)}
+															/>
+														</Flex>
+													</ConfigurationSettings>
+												</Flex>
+											</StyledAccordionContent>
+										</StyledAccordionItem>
+									)}
 							</Accordion>
 							<ButtonsContainer gap={24} justify="end">
 								<Button
diff --git a/frontend/src/pages/boards/[boardId].tsx b/frontend/src/pages/boards/[boardId].tsx
index d3d5198a9..a1837cffe 100644
--- a/frontend/src/pages/boards/[boardId].tsx
+++ b/frontend/src/pages/boards/[boardId].tsx
@@ -147,6 +147,7 @@ const Board: NextPage<Props> = ({ boardId, mainBoardId }) => {
 						<BoardSettings
 							isOpen={isOpen}
 							isOwner={isOwner}
+							isResponsible={isResponsible}
 							isSAdmin={session?.isSAdmin}
 							isStakeholderOrAdmin={isStakeholderOrAdmin}
 							setIsOpen={setIsOpen}