Skip to content

Commit

Permalink
refactor settings modal with tabs (#601)
Browse files Browse the repository at this point in the history
  • Loading branch information
@starheim98 @malinnsnieske
starheim98 authored and malinnsnieske committed Jan 27, 2025
1 parent e45211d commit d6e5edf
Showing 1 changed file with 174 additions and 118 deletions.
292 changes: 174 additions & 118 deletions frontend/beCompliant/src/components/table/SettingsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
Select,
Skeleton,
Stack,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
useToast,
} from '@kvib/react';
import { useFetchUserinfo } from '../../hooks/useFetchUserinfo';
Expand All @@ -38,68 +43,82 @@ export function SettingsModal({ onClose, isOpen }: Props) {
const { data: contexts, isPending: contextsIsLoading } =
useFetchAllContexts();

const handleSettingsSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const handleTeamSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!contextId) return;
const form = e.target as HTMLFormElement;
const changeTeamElement = form.elements.namedItem(
'editTeam'
) as HTMLSelectElement;
const copyContextElement = form.elements.namedItem(
'copyContextSelect'
) as HTMLSelectElement;

if (changeTeamElement?.value) {
const newTeamId = changeTeamElement.value;
try {
const response = await axiosFetch({
url: apiConfig.contexts.forIdAndTeam.url(contextId) + '/team',
method: 'PATCH',
data: {
teamId: newTeamId,
},

const newTeamId = (
e.currentTarget.elements.namedItem('editTeam') as HTMLSelectElement
)?.value;

if (!newTeamId) {
return;
}

try {
const response = await axiosFetch({
url: apiConfig.contexts.forIdAndTeam.url(contextId) + '/team',
method: 'PATCH',
data: {
teamId: newTeamId,
},
});

if (response.status === 200 || response.status === 204) {
onClose();
}
} catch (error) {
const toastId = 'change-context-team-error';
if (!toast.isActive(toastId)) {
toast({
id: toastId,
title: 'Å nei!',
description: 'Det har skjedd en feil. Prøv på nytt',
status: 'error',
duration: 5000,
isClosable: true,
});
if (response.status === 200 || response.status === 204) {
onClose();
}
} catch (error) {
const toastId = 'change-context-team-error';
if (!toast.isActive(toastId)) {
toast({
id: toastId,
title: 'Å nei!',
description: 'Det har skjedd en feil. Prøv på nytt',
status: 'error',
duration: 5000,
isClosable: true,
});
}
}
}
if (copyContextElement?.value) {
try {
const response = await axiosFetch({
url: apiConfig.contexts.byId.url(contextId) + '/answers',
method: 'PATCH',
data: {
copyContextId: copyContextElement.value,
},
};

const handleCopySubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!contextId) return;

const copyContextId = (
e.currentTarget.elements.namedItem(
'copyContextSelect'
) as HTMLSelectElement
)?.value;

if (!copyContextId) {
return;
}

try {
const response = await axiosFetch({
url: apiConfig.contexts.byId.url(contextId) + '/answers',
method: 'PATCH',
data: {
copyContextId,
},
});

if (response.status === 200 || response.status === 204) {
onClose();
}
} catch (error) {
const toastId = 'copy-context-error';
if (!toast.isActive(toastId)) {
toast({
id: toastId,
title: 'Å nei!',
description: 'Det har skjedd en feil. Prøv på nytt',
status: 'error',
duration: 5000,
isClosable: true,
});
if (response.status === 200 || response.status === 204) {
onClose();
}
} catch (error) {
const toastId = 'copy-context-error';
if (!toast.isActive(toastId)) {
toast({
id: toastId,
title: 'Å nei!',
description: 'Det har skjedd en feil. Prøv på nytt',
status: 'error',
duration: 5000,
isClosable: true,
});
}
}
}
};
Expand All @@ -117,69 +136,106 @@ export function SettingsModal({ onClose, isOpen }: Props) {
<Modal onClose={onClose} isOpen={isOpen} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Endre skjemautfylling</ModalHeader>
<ModalHeader>Rediger skjemautfylling</ModalHeader>
<ModalBody>
<form onSubmit={handleSettingsSubmit}>
<Stack gap="1rem">
<FormControl>
<FormLabel>
Endre teamet dette skjemaet skal gjelde for:
</FormLabel>
<Select name="editTeam" placeholder="Velg team">
{userinfo?.groups.map((team) => {
if (team.id === currentContext.data?.teamId) {
return null;
}
return (
<option key={team.id} value={team.id}>
{team.displayName}
</option>
);
})}
</Select>
</FormControl>
<FormControl>
<FormLabel>Kopier svar fra et annet skjema:</FormLabel>
<Skeleton isLoaded={!contextsIsLoading}>
<Select
name="copyContextSelect"
placeholder={
isDisabled
? 'Ingen eksisterende skjema funnet'
: 'Velg skjema'
}
bgColor="white"
borderColor="gray.200"
>
{contextsForTable?.map((context) => (
<option key={context.id} value={context.id}>
{context.name}
</option>
))}
</Select>
</Skeleton>
</FormControl>

<HStack justifyContent="end">
<Button
variant="secondary"
colorScheme="blue"
onClick={onClose}
>
Avbryt
</Button>

<Button
aria-label="Endre team"
variant="primary"
colorScheme="blue"
type="submit"
>
Lagre
</Button>
</HStack>
</Stack>
</form>
<Tabs size="sm">
<TabList>
<Tab>Endre team</Tab>
<Tab>Kopier svar</Tab>
</TabList>

<TabPanels>
<TabPanel>
<form onSubmit={handleTeamSubmit}>
<Stack gap="1rem">
<FormControl>
<FormLabel>
Velg teamet dette skjemaet skal gjelde for:
</FormLabel>
<Select
name="editTeam"
defaultValue={currentContext.data?.teamId || ''}
>
{userinfo?.groups.map((team) => {
return (
<option key={team.id} value={team.id}>
{team.displayName}
</option>
);
})}
</Select>
</FormControl>

<HStack justifyContent="end" mt={4}>
<Button
variant="secondary"
colorScheme="blue"
onClick={onClose}
>
Avbryt
</Button>
<Button
aria-label="Endre team"
variant="primary"
colorScheme="blue"
type="submit"
>
Lagre
</Button>
</HStack>
</Stack>
</form>
</TabPanel>

<TabPanel>
<form onSubmit={handleCopySubmit}>
<Stack gap="1rem">
<FormControl>
<FormLabel>Kopier svar fra et annet skjema:</FormLabel>
<Skeleton isLoaded={!contextsIsLoading}>
<Select
name="copyContextSelect"
placeholder={
isDisabled
? 'Ingen eksisterende skjema funnet'
: 'Velg skjema'
}
bgColor="white"
borderColor="gray.200"
isDisabled={isDisabled}
>
{contextsForTable?.map((context) => (
<option key={context.id} value={context.id}>
{context.name}
</option>
))}
</Select>
</Skeleton>
</FormControl>

<HStack justifyContent="end" mt={4}>
<Button
variant="secondary"
colorScheme="blue"
onClick={onClose}
>
Avbryt
</Button>
<Button
aria-label="Kopier svar"
variant="primary"
colorScheme="blue"
type="submit"
isDisabled={isDisabled}
>
Kopier
</Button>
</HStack>
</Stack>
</form>
</TabPanel>
</TabPanels>
</Tabs>
</ModalBody>
<ModalFooter></ModalFooter>
</ModalContent>
Expand Down

0 comments on commit d6e5edf

Please sign in to comment.