diff --git a/dashboard/src/features/users/dialogs/mutation/fields/services.tsx b/dashboard/src/features/users/dialogs/mutation/fields/services.tsx
@@ -4,9 +4,8 @@ import {
FormItem,
FormLabel,
FormMessage,
- ToggleGroup,
- ToggleGroupItem,
- ScrollArea
+ ScrollArea,
+ Toggle
} from '@marzneshin/components';
import { useServicesQuery } from '@marzneshin/features/services';
import { ServiceCard } from '@marzneshin/features/users';
@@ -14,54 +13,49 @@ import { FC } from 'react'
import { useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
-interface ServicesFieldProps {
- services: number[]
- setServices: (s: number[]) => void
-}
+interface ServicesFieldProps { }
-export const ServicesField: FC<ServicesFieldProps> = ({
- services,
- setServices
-}) => {
+export const ServicesField: FC<ServicesFieldProps> = () => {
const form = useFormContext();
const { data } = useServicesQuery({ page: 1, size: 100 });
const { t } = useTranslation();
- const handleToggle = (selectedServiceIds: string[]) => {
- setServices(selectedServiceIds.map(Number));
- };
-
return (
- <FormField
- control={form.control}
- name="services"
- render={() => (
- <FormItem>
- <FormLabel>{t('services')}</FormLabel>
- <FormControl>
- <ToggleGroup
- defaultValue={services.map(String)}
- className="h-full"
- onValueChange={handleToggle}
- type="multiple"
- >
- <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
- {data.entity.map(service => (
- <ToggleGroupItem
+ <FormItem>
+ <FormLabel>{t('services')}</FormLabel>
+ <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
+ {data.entity.map(service => (
+ <FormField
+ control={form.control}
+ name={`services`}
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Toggle
key={service.id}
value={String(service.id)}
- {...form.register(`services.${service.id}`)}
+ pressed={field.value?.includes(service.id)}
+ onPressedChange={(checked) => {
+ return checked
+ ? field.onChange([...field.value, service.id])
+ : field.onChange(
+ field.value?.filter(
+ (value: number) => value !== service.id
+ )
+ )
+ }}
+ {...form.register(`services.${service.id}`, { shouldUnregister: true })}
className="px-0 mb-1 w-full"
>
<ServiceCard service={service} />
- </ToggleGroupItem>
- ))}
- </ScrollArea>
- </ToggleGroup>
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
+ </Toggle>
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ ))}
+ </ScrollArea>
+ </FormItem>
);
};
diff --git a/dashboard/src/features/users/dialogs/mutation/index.tsx b/dashboard/src/features/users/dialogs/mutation/index.tsx
@@ -55,7 +55,6 @@ export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
on_hold_timeout: null,
}), []);
- const [services, setServices] = useState<number[]>(entity ? entity.services : [])
const { form, handleSubmit } = useMutationDialog({
entity,
@@ -66,20 +65,15 @@ export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
getDefaultValue: getDefaultValues,
})
- useEffect(() => {
- form.setValue("services", services.map(Number).filter(item => typeof item === 'number'))
- }, [services, form])
-
-
const [selectedTab, setSelectedTab] = useState<'determined' | 'onhold' | 'unlimited' | string>('determined');
-
+ const expire = form.watch().expire
useEffect(() => {
+ form.setValue("status", "active")
if (selectedTab === 'onhold') {
form.setValue("status", "on_hold")
form.setValue("expire", null);
form.clearErrors("expire");
} else if (selectedTab === "unlimited") {
- form.setValue("status", "active")
form.setValue("expire", 0);
form.setValue("on_hold_expire_duration", 0);
form.setValue("on_hold_timeout", null);
@@ -87,13 +81,12 @@ export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
form.clearErrors("on_hold_expire_duration");
form.clearErrors("on_hold_timeout");
} else {
- form.setValue("status", "active")
form.setValue("on_hold_expire_duration", 0);
form.setValue("on_hold_timeout", null);
form.clearErrors("on_hold_expire_duration");
form.clearErrors("on_hold_timeout");
}
- }, [selectedTab, form]);
+ }, [selectedTab, form, expire]);
return (
<Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
@@ -146,7 +139,7 @@ export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
<NoteField />
</div>
<div>
- <ServicesField services={services} setServices={setServices} />
+ <ServicesField />
</div>
</div>
<Button