104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
|
import { useQuery } from '@apollo/client'
|
||
|
|
import { Button, Form, Input, message, Tabs } from 'antd'
|
||
|
|
import { useForm } from 'antd/lib/form/Form'
|
||
|
|
import Structure from 'components/structure'
|
||
|
|
import { withAuth } from 'components/with.auth'
|
||
|
|
import { NextPage } from 'next'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import React, { useState } from 'react'
|
||
|
|
import { useTranslation } from 'react-i18next'
|
||
|
|
import { cleanInput } from '../../../../components/clean.input'
|
||
|
|
import { BaseDataTab } from '../../../../components/user/admin/base.data.tab'
|
||
|
|
import { useUserUpdateMutation } from '../../../../graphql/mutation/user.update.mutation'
|
||
|
|
import {
|
||
|
|
ADMIN_USER_QUERY,
|
||
|
|
AdminUserQueryData,
|
||
|
|
AdminUserQueryVariables,
|
||
|
|
} from '../../../../graphql/query/admin.user.query'
|
||
|
|
|
||
|
|
const Index: NextPage = () => {
|
||
|
|
const { t } = useTranslation()
|
||
|
|
const router = useRouter()
|
||
|
|
const [form] = useForm()
|
||
|
|
const [saving, setSaving] = useState(false)
|
||
|
|
|
||
|
|
const { data, loading } = useQuery<AdminUserQueryData, AdminUserQueryVariables>(
|
||
|
|
ADMIN_USER_QUERY,
|
||
|
|
{
|
||
|
|
variables: {
|
||
|
|
id: router.query.id as string,
|
||
|
|
},
|
||
|
|
onCompleted: (next) => {
|
||
|
|
form.setFieldsValue(next)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
const [update] = useUserUpdateMutation()
|
||
|
|
|
||
|
|
const save = async (formData: AdminUserQueryData) => {
|
||
|
|
setSaving(true)
|
||
|
|
try {
|
||
|
|
const next = (
|
||
|
|
await update({
|
||
|
|
variables: cleanInput(formData),
|
||
|
|
})
|
||
|
|
).data
|
||
|
|
|
||
|
|
form.setFieldsValue(next)
|
||
|
|
|
||
|
|
await message.success(t('user:updated'))
|
||
|
|
} catch (e) {
|
||
|
|
console.error('failed to save', e)
|
||
|
|
await message.error(t('user:updateError'))
|
||
|
|
}
|
||
|
|
|
||
|
|
setSaving(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Structure
|
||
|
|
loading={loading || saving}
|
||
|
|
title={loading ? t('user:loading') : t('user:mange', { email: data.user.email })}
|
||
|
|
selected={'users'}
|
||
|
|
breadcrumbs={[
|
||
|
|
{ href: '/admin', name: t('admin:home') },
|
||
|
|
{ href: '/admin/users', name: t('admin:users') },
|
||
|
|
]}
|
||
|
|
extra={[
|
||
|
|
<Button key={'save'} onClick={form.submit} type={'primary'}>
|
||
|
|
{t('user:updateNow')}
|
||
|
|
</Button>,
|
||
|
|
]}
|
||
|
|
style={{ paddingTop: 0 }}
|
||
|
|
>
|
||
|
|
<Form
|
||
|
|
form={form}
|
||
|
|
onFinish={save}
|
||
|
|
onFinishFailed={async () => {
|
||
|
|
// TODO process errors
|
||
|
|
await message.error(t('validation:mandatoryFieldsMissing'))
|
||
|
|
}}
|
||
|
|
labelCol={{
|
||
|
|
xs: { span: 24 },
|
||
|
|
sm: { span: 6 },
|
||
|
|
}}
|
||
|
|
wrapperCol={{
|
||
|
|
xs: { span: 24 },
|
||
|
|
sm: { span: 18 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Form.Item noStyle name={['user', 'id']}>
|
||
|
|
<Input type={'hidden'} />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Tabs>
|
||
|
|
<BaseDataTab key={'base_data'} tab={t('user:baseData')} />
|
||
|
|
</Tabs>
|
||
|
|
</Form>
|
||
|
|
</Structure>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default withAuth(Index, ['admin'])
|