sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added settings page and function

Browse Source 
- add Role Ring for avatar and display role for user nav
This commit is contained in:
Sam Liu
2026-01-06 21:37:53 +07:00
parent 8146565d2c
commit a4e96fe045
64 changed files with 2828 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/components/form/settings-form.tsx Normal file
View File

@@ -0,0 +1,196 @@
import { settingQueries } from '@/service/queries';
import { updateSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = {
site_language: '',
site_name: '',
site_description: '',
site_keywords: '',
};
const SettingsForm = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { data: settings } = useQuery(settingQueries.list());
const updateMutation = useMutation({
mutationFn: updateSettings,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: settingQueries.all });
toast.success(t('settings.messages.update_success'));
},
});
const form = useForm({
defaultValues: {
...defaultValues,
site_name: settings?.site_name?.value || '',
site_description: settings?.site_description?.value || '',
site_keywords: settings?.site_keywords?.value || '',
site_language: settings?.site_language?.value || '',
},
validators: {
onSubmit: settingSchema,
onChange: settingSchema,
},
onSubmit: async ({ value }) => {
updateMutation.mutate({ data: value as SettingsInput });
},
});
return (
<Card className="@container/card col-span-1 @xl/main:col-span-2">
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<GearIcon size={20} />
{t('settings.ui.title')}
</CardTitle>
</CardHeader>
<CardContent>
<form
id="settings-form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<FieldGroup>
<form.Field
name="site_name"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.name')}
</FieldLabel>
<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
aria-invalid={isInvalid}
/>
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
/>
<form.Field
name="site_description"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.description')}
</FieldLabel>
<Textarea
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
aria-invalid={isInvalid}
rows={4}
/>
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
/>
<form.Field
name="site_keywords"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.keywords')}
</FieldLabel>
<Textarea
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
aria-invalid={isInvalid}
rows={4}
/>
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
/>
<form.Field
name="site_language"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.language')}
</FieldLabel>
<Select
name={field.name}
value={field.state.value}
onValueChange={(value) => field.handleChange(value)}
aria-invalid={isInvalid}
>
<SelectTrigger>
<SelectValue placeholder="Select Language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="en">English</SelectItem>
<SelectItem value="vi">Vietnamese</SelectItem>
</SelectContent>
</Select>
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
/>
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
</Field>
</FieldGroup>
</form>
</CardContent>
</Card>
);
};
export default SettingsForm;