gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/sections/data-limit.tsx · v0.3.0
Source
1 5875753 Mrdn 2y ago
2 5875753 Mrdn 2y ago import { FC, useEffect, useState } from "react";
3 5875753 Mrdn 2y ago import {
4 5875753 Mrdn 2y ago Tabs,
5 5875753 Mrdn 2y ago TabsTrigger,
6 5875753 Mrdn 2y ago TabsContent,
7 5875753 Mrdn 2y ago FormLabel
8 5875753 Mrdn 2y ago } from '@marzneshin/components';
9 5875753 Mrdn 2y ago import { useTranslation } from 'react-i18next';
10 5875753 Mrdn 2y ago import {
11 5875753 Mrdn 2y ago DataLimitField,
12 5875753 Mrdn 2y ago DataLimitResetStrategyField,
13 5875753 Mrdn 2y ago } from "../fields";
14 5875753 Mrdn 2y ago import { TabsList } from "@radix-ui/react-tabs";
15 5875753 Mrdn 2y ago import { useFormContext } from 'react-hook-form';
16 5875753 Mrdn 2y ago
17 5875753 Mrdn 2y ago export const DataLimitFields: FC = () => {
18 5875753 Mrdn 2y ago const form = useFormContext()
19 5875753 Mrdn 2y ago
20 5875753 Mrdn 2y ago const { t } = useTranslation()
21 88321ab Mardin 2y ago const data_limit = form.watch().data_limit;
22 88321ab Mardin 2y ago
23 5875753 Mrdn 2y ago const [
24 5875753 Mrdn 2y ago selectedDataLimitTab,
25 5875753 Mrdn 2y ago setSelectedDataLimitTab
26 88321ab Mardin 2y ago ] = useState((data_limit === 0) ? "unlimited" : "limited");
27 88321ab Mardin 2y ago
28 5875753 Mrdn 2y ago useEffect(() => {
29 88321ab Mardin 2y ago setSelectedDataLimitTab((data_limit === 0) ? "unlimited" : "limited")
30 88321ab Mardin 2y ago }, [data_limit])
31 88321ab Mardin 2y ago
32 88321ab Mardin 2y ago useEffect(() => {
33 88321ab Mardin 2y ago if (selectedDataLimitTab !== 'limited') {
34 88321ab Mardin 2y ago form.setValue("data_limit", undefined)
35 5875753 Mrdn 2y ago form.setValue("data_limit_reset_strategy", "no_reset");
36 88321ab Mardin 2y ago }
37 5875753 Mrdn 2y ago // eslint-disable-next-line
38 5875753 Mrdn 2y ago }, [selectedDataLimitTab]);
39 5875753 Mrdn 2y ago
40 5875753 Mrdn 2y ago return (
41 5875753 Mrdn 2y ago <>
42 5875753 Mrdn 2y ago <FormLabel>
43 5875753 Mrdn 2y ago {t('page.users.data_limit_method')}
44 5875753 Mrdn 2y ago </FormLabel>
45 5875753 Mrdn 2y ago <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
46 88321ab Mardin 2y ago <Tabs defaultValue={selectedDataLimitTab} onValueChange={setSelectedDataLimitTab} className="mt-2 w-full">
47 5875753 Mrdn 2y ago <TabsList className="flex flex-row items-center p-1 w-full rounded-md bg-accent">
48 5875753 Mrdn 2y ago <TabsTrigger
49 5875753 Mrdn 2y ago className="w-full"
50 5875753 Mrdn 2y ago value="limited">
51 5875753 Mrdn 2y ago {t('page.users.limited')}
52 5875753 Mrdn 2y ago </TabsTrigger>
53 5875753 Mrdn 2y ago <TabsTrigger
54 5875753 Mrdn 2y ago className="w-full"
55 5875753 Mrdn 2y ago value="unlimited">
56 5875753 Mrdn 2y ago {t('page.users.unlimited')}
57 5875753 Mrdn 2y ago </TabsTrigger>
58 5875753 Mrdn 2y ago </TabsList>
59 5875753 Mrdn 2y ago <TabsContent value="limited">
60 5875753 Mrdn 2y ago <DataLimitField />
61 5875753 Mrdn 2y ago {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
62 5875753 Mrdn 2y ago </TabsContent>
63 5875753 Mrdn 2y ago </Tabs>
64 5875753 Mrdn 2y ago </div>
65 5875753 Mrdn 2y ago </>
66 5875753 Mrdn 2y ago )
67 5875753 Mrdn 2y ago }