Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AccountDetailPanel to use modal form

Browse Source
This commit is contained in:
Oliver Walters 2024-08-21 07:08:30 +00:00
parent c83feb1181
commit cae3c505ab
1 changed files with 66 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
View File

@ -1,11 +1,26 @@
import { Trans, t } from '@lingui/macro';
import { Button, Group, Stack, Text, TextInput, Title } from '@mantine/core';
import {
ActionIcon,
Button,
Group,
Stack,
Table,
Text,
TextInput,
Title,
Tooltip
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { useToggle } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useMemo } from 'react';
import { api } from '../../../../App';
import { EditButton } from '../../../../components/buttons/EditButton';
import { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
import { StylishText } from '../../../../components/items/StylishText';
import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
import { useEditApiFormModal } from '../../../../hooks/UseForm';
import { apiUrl } from '../../../../states/ApiState';
import { useUserState } from '../../../../states/UserState';
@ -14,66 +29,57 @@ export function AccountDetailPanel() {
state.user,
state.fetchUserState
]);
const form = useForm({ initialValues: user });
const [editing, setEditing] = useToggle([false, true] as const);
function SaveData(values: any) {
// copy values over to break form rendering link
const urlVals = { ...values };
urlVals.is_active = true;
// send
api
.put(apiUrl(ApiEndpoints.user_me), urlVals)
.then((res) => {
if (res.status === 200) {
setEditing();
fetchUserState();
}
})
.catch(() => {
console.error('ERR: Error saving user data');
});
}
const userFields: ApiFormFieldSet = useMemo(() => {
return {
first_name: {},
last_name: {}
};
}, []);
const editUser = useEditApiFormModal({
title: t`Edit User Information`,
url: ApiEndpoints.user_me,
onFormSuccess: fetchUserState,
fields: userFields,
successMessage: t`User details updated`
});
return (
<form onSubmit={form.onSubmit((values) => SaveData(values))}>
<Group>
<Title order={3}>
<Trans>Account Details</Trans>
</Title>
<EditButton setEditing={setEditing} editing={editing} />
</Group>
<Group>
{editing ? (
<Stack gap="xs">
<TextInput
label="first name"
placeholder={t`First name`}
{...form.getInputProps('first_name')}
/>
<TextInput
label="Last name"
placeholder={t`Last name`}
{...form.getInputProps('last_name')}
/>
<Group justify="right" mt="md">
<Button type="submit">
<Trans>Submit</Trans>
</Button>
</Group>
</Stack>
) : (
<Stack gap="0">
<Text>
<Trans>First name: </Trans>
{form.values.first_name}
</Text>
<Text>
<Trans>Last name: </Trans>
{form.values.last_name}
</Text>
</Stack>
)}
</Group>
</form>
<>
{editUser.modal}
<Stack gap="xs">
<Group justify="space-between">
<StylishText size="xl">
<Trans>User Details</Trans>
</StylishText>
<Tooltip label={t`Edit User Information`}>
<ActionIcon variant="default" onClick={editUser.open}>
<IconEdit />
</ActionIcon>
</Tooltip>
</Group>
<Table>
<Table.Tr>
<Table.Td>
<Trans>Username</Trans>
</Table.Td>
<Table.Td>{user?.username}</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>First Name</Trans>
</Table.Td>
<Table.Td>{user?.first_name}</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Last Name</Trans>
</Table.Td>
<Table.Td>{user?.last_name}</Table.Td>
</Table.Tr>
</Table>
</Stack>
</>
);
}