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

change basic form to form context

Browse Source
This commit is contained in:
Sam Liu
2026-01-23 16:49:24 +07:00
parent 9766684e03
commit ff2140b9ef
21 changed files with 558 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/form/settings-form.tsx
View File

@@ -1,18 +1,15 @@
import { useAppForm } from '@/hooks/use-app-form';
import { m } from '@/paraglide/messages';
import { settingQueries } from '@/service/queries';
import { updateAdminSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { ReturnError } from '@/types/common';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
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 { Field, FieldGroup } from '../ui/field';
import { Skeleton } from '../ui/skeleton';
import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = {
site_name: '',
@@ -41,7 +38,7 @@ const SettingsForm = () => {
},
});
const form = useForm({
const form = useAppForm({
defaultValues: {
...defaultValues,
site_name: settings?.site_name?.value || '',
@@ -78,85 +75,21 @@ const SettingsForm = () => {
}}
>
<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}>
{m.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}>
{m.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}>
{m.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.AppField name="site_name">
{(field) => <field.TextField label={m.settings_form_name()} />}
</form.AppField>
<form.AppField name="site_description">
{(field) => (
<field.TextArea label={m.settings_form_description()} />
)}
</form.AppField>
<form.AppField name="site_keywords">
{(field) => <field.TextArea label={m.settings_form_keywords()} />}
</form.AppField>
<Field>
<Button type="submit">{m.ui_update_btn()}</Button>
<form.AppForm>
<form.SubscribeButton label={m.ui_update_btn()} />
</form.AppForm>
</Field>
</FieldGroup>
</form>