diff --git a/dashboard/public/locales/en.json b/dashboard/public/locales/en.json index 4900019..49662b4 100644 --- a/dashboard/public/locales/en.json +++ b/dashboard/public/locales/en.json @@ -39,6 +39,7 @@ "disable": "Disable", "close": "Close", "save": "Save", + "day": "Day", "page": { "settings": { "certificate": { diff --git a/dashboard/public/locales/kur.json b/dashboard/public/locales/kur.json index 2b1be22..9ba00ad 100644 --- a/dashboard/public/locales/kur.json +++ b/dashboard/public/locales/kur.json @@ -32,6 +32,7 @@ "disable": "Naçalakî ke", "close": "Dayixe", "save": "Seyv Bike", + "day": "Roj", "page": { "settings": { "certificate": { diff --git a/dashboard/src/features/users/dialogs/mutation/fields/data-limit.tsx b/dashboard/src/features/users/dialogs/mutation/fields/data-limit.tsx index c32f414..6a5db58 100644 --- a/dashboard/src/features/users/dialogs/mutation/fields/data-limit.tsx +++ b/dashboard/src/features/users/dialogs/mutation/fields/data-limit.tsx @@ -21,7 +21,7 @@ export const DataLimitField: FC = () => { name="data_limit" render={({ field }) => ( - {t('page.users.data_limit')} + {t('page.users.data_limit')} (GB) diff --git a/dashboard/src/features/users/dialogs/mutation/fields/index.ts b/dashboard/src/features/users/dialogs/mutation/fields/index.ts index affdc85..dfe10ab 100644 --- a/dashboard/src/features/users/dialogs/mutation/fields/index.ts +++ b/dashboard/src/features/users/dialogs/mutation/fields/index.ts @@ -4,3 +4,5 @@ export * from "./note" export * from "./services" export * from "./data-limit-reset-strategy" export * from "./username" +export * from "./onhold-timeout" +export * from "./onhold-expire-duration" diff --git a/dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx b/dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx index 32ecc7c..bae8c7f 100644 --- a/dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx +++ b/dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx @@ -27,7 +27,7 @@ export const OnHoldExpireDurationField: FC = () name="on_hold_expire_duration" render={({ field }) => ( - {t('page.users.on_hold_expire_duration')} + {t('page.users.on_hold_expire_duration')} ({t('day')}) = ({ loadFormtter: (d) => ({ ...d, data_limit: (d.data_limit ? d.data_limit : 0) / DATA_LIMIT_METRIC }) }) - const [ - selectedDataLimitTab, - setSelectedDataLimitTab - ] = useState<'limited' | 'unlimited' | string>('limited'); - useEffect(() => { - if (selectedDataLimitTab === 'limited') { - form.setValue("data_limit", 1) - form.setValue("data_limit_reset_strategy", "no_reset"); - } else { - form.setValue("data_limit", 0) - form.setValue("data_limit_reset_strategy", "no_reset"); - } - }, [selectedDataLimitTab, form]); - - const getUserExpirationMethod = useCallback((entity: UserMutationType) => { - if (entity.status === "on_hold") - return 'onhold' - else if (entity.expire !== undefined) - return 'determined' - else - return 'unlimited' - }, []) - - const defaultExpirationMethodTab = entity?.username ? getUserExpirationMethod(entity) : 'determined' - const [ - selectedExpirationMethodTab, - setSelectedExpirationMethodTab - ] = useState<'determined' | 'onhold' | 'unlimited' | string>(defaultExpirationMethodTab); - - useEffect(() => { - form.setValue("status", "active") - if (selectedExpirationMethodTab === 'onhold') { - form.setValue("status", "on_hold") - form.setValue("expire", undefined); - form.clearErrors("expire"); - } else if (selectedExpirationMethodTab === "unlimited") { - form.setValue("expire", undefined); - form.setValue("on_hold_expire_duration", undefined); - form.setValue("on_hold_timeout", undefined); - form.clearErrors("expire"); - form.clearErrors("on_hold_expire_duration"); - form.clearErrors("on_hold_timeout"); - } else { - form.setValue("on_hold_expire_duration", 0); - form.setValue("on_hold_timeout", null); - form.clearErrors("on_hold_expire_duration"); - form.clearErrors("on_hold_timeout"); - } - }, [selectedExpirationMethodTab, form]); - return ( @@ -131,58 +72,8 @@ export const UsersMutationDialog: FC = ({
- - {t('page.users.data_limit_method')} - -
- - - - {t('page.users.limited')} - - - {t('page.users.unlimited')} - - - - - {form.watch().data_limit !== 0 && } - - -
- - {t('page.users.expire_method')} - - - - - {t('page.users.determined_expire')} - - - {t('page.users.onhold_expire')} - - - {t('page.users.unlimited')} - - - - - - - - - - + +
diff --git a/dashboard/src/features/users/dialogs/mutation/sections/data-limit.tsx b/dashboard/src/features/users/dialogs/mutation/sections/data-limit.tsx new file mode 100644 index 0000000..c9a4aed --- /dev/null +++ b/dashboard/src/features/users/dialogs/mutation/sections/data-limit.tsx @@ -0,0 +1,64 @@ + +import { FC, useEffect, useState } from "react"; +import { + Tabs, + TabsTrigger, + TabsContent, + FormLabel +} from '@marzneshin/components'; +import { useTranslation } from 'react-i18next'; +import { + DataLimitField, + DataLimitResetStrategyField, +} from "../fields"; +import { TabsList } from "@radix-ui/react-tabs"; +import { useFormContext } from 'react-hook-form'; + +export const DataLimitFields: FC = () => { + const form = useFormContext() + + const { t } = useTranslation() + const [ + selectedDataLimitTab, + setSelectedDataLimitTab + ] = useState<'limited' | 'unlimited' | string>('limited'); + useEffect(() => { + if (selectedDataLimitTab === 'limited') { + form.setValue("data_limit", 1) + form.setValue("data_limit_reset_strategy", "no_reset"); + } else { + form.setValue("data_limit", 0) + form.setValue("data_limit_reset_strategy", "no_reset"); + } + // eslint-disable-next-line + }, [selectedDataLimitTab]); + + return ( + <> + + + {t('page.users.data_limit_method')} + +
+ + + + {t('page.users.limited')} + + + {t('page.users.unlimited')} + + + + + {form.watch().data_limit !== 0 && } + + +
+ + ) +} diff --git a/dashboard/src/features/users/dialogs/mutation/sections/expiration-method.tsx b/dashboard/src/features/users/dialogs/mutation/sections/expiration-method.tsx new file mode 100644 index 0000000..704d5b5 --- /dev/null +++ b/dashboard/src/features/users/dialogs/mutation/sections/expiration-method.tsx @@ -0,0 +1,62 @@ +import { FC } from "react"; +import { + Tabs, + TabsTrigger, + TabsContent, + FormLabel +} from '@marzneshin/components'; +import { + UserMutationType, +} from "@marzneshin/features/users"; +import { + ExpireDateField, + OnHoldTimeoutField, + OnHoldExpireDurationField, +} from "../fields"; +import { TabsList } from "@radix-ui/react-tabs"; +import { useTranslation } from "react-i18next"; +import { useExpirationMethodTabs } from "./use-expiration-method-tabs"; + +interface ExpirationMethodProps { + entity: UserMutationType | null +} + + +export const ExpirationMethodFields: FC = ({ entity }) => { + const { t } = useTranslation() + const { setSelectedExpirationMethodTab, defaultExpirationMethodTab } = useExpirationMethodTabs({ entity }) + + return ( + <> + + {t('page.users.expire_method')} + + + + + {t('page.users.determined_expire')} + + + {t('page.users.onhold_expire')} + + + {t('page.users.unlimited')} + + + + + + + + + + + + ) +} diff --git a/dashboard/src/features/users/dialogs/mutation/sections/index.ts b/dashboard/src/features/users/dialogs/mutation/sections/index.ts new file mode 100644 index 0000000..ec76006 --- /dev/null +++ b/dashboard/src/features/users/dialogs/mutation/sections/index.ts @@ -0,0 +1,2 @@ +export * from './data-limit' +export * from './expiration-method' diff --git a/dashboard/src/features/users/dialogs/mutation/sections/use-expiration-method-tabs.ts b/dashboard/src/features/users/dialogs/mutation/sections/use-expiration-method-tabs.ts new file mode 100644 index 0000000..9a282e0 --- /dev/null +++ b/dashboard/src/features/users/dialogs/mutation/sections/use-expiration-method-tabs.ts @@ -0,0 +1,49 @@ +import { UserMutationType } from "@marzneshin/features/users"; +import { useEffect, useState } from "react"; +import { useFormContext } from "react-hook-form"; + +type ExpirationMethodStrategy = "onhold" | "determined" | "unlimited"; + +const getUserExpirationMethod = (entity: UserMutationType): ExpirationMethodStrategy => { + if (entity.status === "on_hold") + return 'onhold' + else if (entity.expire !== undefined) + return 'determined' + else + return 'unlimited' +} + + +export const useExpirationMethodTabs = ({ entity }: { entity: UserMutationType | null }) => { + const form = useFormContext() + + const defaultExpirationMethodTab = entity?.username ? getUserExpirationMethod(entity) : 'determined' + const [ + selectedExpirationMethodTab, + setSelectedExpirationMethodTab + ] = useState(defaultExpirationMethodTab); + + useEffect(() => { + form.setValue("status", "active") + if (selectedExpirationMethodTab === 'onhold') { + form.setValue("status", "on_hold") + form.setValue("expire", undefined); + form.clearErrors("expire"); + } else if (selectedExpirationMethodTab === "unlimited") { + form.setValue("expire", undefined); + form.setValue("on_hold_expire_duration", undefined); + form.setValue("on_hold_timeout", undefined); + form.clearErrors("expire"); + form.clearErrors("on_hold_expire_duration"); + form.clearErrors("on_hold_timeout"); + } else { + form.setValue("on_hold_expire_duration", 0); + form.setValue("on_hold_timeout", null); + form.clearErrors("on_hold_expire_duration"); + form.clearErrors("on_hold_timeout"); + } + // eslint-disable-next-line + }, [selectedExpirationMethodTab]); + + return { selectedExpirationMethodTab, defaultExpirationMethodTab, setSelectedExpirationMethodTab } +}