gitscope
/
← marzneshin / dashboard/src/features/subscription-settings/form/form.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/subscription-settings/form/form.tsx · v0.3.1
Source
1 0178858 Dawsh 2y ago import { zodResolver } from "@hookform/resolvers/zod";
2 0178858 Dawsh 2y ago import { useFieldArray, useForm } from "react-hook-form";
3 0178858 Dawsh 2y ago import { useTranslation } from "react-i18next";
4 0178858 Dawsh 2y ago import { schema } from "./schema";
5 0178858 Dawsh 2y ago import { RuleItem } from "./rule-item";
6 0178858 Dawsh 2y ago import {
7 0178858 Dawsh 2y ago HStack,
8 0178858 Dawsh 2y ago Button,
9 0178858 Dawsh 2y ago Form,
10 0178858 Dawsh 2y ago Sortable,
11 0178858 Dawsh 2y ago ScrollArea,
12 0178858 Dawsh 2y ago FormLabel,
13 89eec32 Dawsh 2y ago Separator,
14 89eec32 Dawsh 2y ago Awaiting,
15 0178858 Dawsh 2y ago } from "@marzneshin/components";
16 0178858 Dawsh 2y ago import { Schema } from "./schema"
17 89eec32 Dawsh 2y ago import { Overlay } from "./overlay"
18 0178858 Dawsh 2y ago import {
19 89eec32 Dawsh 2y ago TemplateOnAcceptanceField,
20 0178858 Dawsh 2y ago ProfileTitleField,
21 0178858 Dawsh 2y ago SupportLinkField,
22 fb4b69d Dawsh 2y ago UpdateIntervalField,
23 fb4b69d Dawsh 2y ago PlaceholderRemarkField,
24 fb4b69d Dawsh 2y ago PlaceholderIfDisabledField,
25 fb4b69d Dawsh 2y ago ShuffleConfigsField
26 0178858 Dawsh 2y ago } from "./fields";
27 0178858 Dawsh 2y ago import { NoRulesAlert } from "./no-rules-alert";
28 0178858 Dawsh 2y ago import {
29 0178858 Dawsh 2y ago useSubscriptionSettingsQuery,
30 0178858 Dawsh 2y ago useSubscriptionSettingsMutation,
31 0178858 Dawsh 2y ago } from "@marzneshin/features/subscription-settings";
32 0178858 Dawsh 2y ago import { useEffect, useCallback } from "react";
33 0178858 Dawsh 2y ago
34 0178858 Dawsh 2y ago export function SubscriptionRulesForm() {
35 0178858 Dawsh 2y ago const { t } = useTranslation()
36 89eec32 Dawsh 2y ago const { data, isFetching } = useSubscriptionSettingsQuery()
37 0178858 Dawsh 2y ago const subscriptionSettings = useSubscriptionSettingsMutation()
38 0178858 Dawsh 2y ago const form = useForm<Schema>({
39 0178858 Dawsh 2y ago resolver: zodResolver(schema),
40 0178858 Dawsh 2y ago defaultValues: data,
41 0178858 Dawsh 2y ago })
42 0178858 Dawsh 2y ago
43 89eec32 Dawsh 2y ago const handleResetLocalChanges = useCallback(
44 89eec32 Dawsh 2y ago () => {
45 89eec32 Dawsh 2y ago form.reset(data)
46 89eec32 Dawsh 2y ago },
47 89eec32 Dawsh 2y ago [form, data],
48 89eec32 Dawsh 2y ago )
49 89eec32 Dawsh 2y ago
50 0178858 Dawsh 2y ago const handleSubscriptionRulesDataUpdate = useCallback(
51 0178858 Dawsh 2y ago () => {
52 0178858 Dawsh 2y ago form.reset(data, {
53 0178858 Dawsh 2y ago keepDirtyValues: true
54 0178858 Dawsh 2y ago })
55 0178858 Dawsh 2y ago },
56 89eec32 Dawsh 2y ago [form, data],
57 0178858 Dawsh 2y ago )
58 0178858 Dawsh 2y ago
59 0178858 Dawsh 2y ago useEffect(() => {
60 0178858 Dawsh 2y ago if (data) {
61 0178858 Dawsh 2y ago handleSubscriptionRulesDataUpdate()
62 0178858 Dawsh 2y ago }
63 0178858 Dawsh 2y ago }, [data, handleSubscriptionRulesDataUpdate])
64 0178858 Dawsh 2y ago
65 0178858 Dawsh 2y ago const onSubmit = (data: Schema) => {
66 0178858 Dawsh 2y ago subscriptionSettings.mutate(data)
67 0178858 Dawsh 2y ago }
68 0178858 Dawsh 2y ago
69 0178858 Dawsh 2y ago const { fields, append, move, remove } = useFieldArray({
70 0178858 Dawsh 2y ago control: form.control,
71 0178858 Dawsh 2y ago name: "rules"
72 0178858 Dawsh 2y ago })
73 0178858 Dawsh 2y ago
74 0178858 Dawsh 2y ago return (
75 0178858 Dawsh 2y ago <Form {...form}>
76 0178858 Dawsh 2y ago <form
77 0178858 Dawsh 2y ago onSubmit={form.handleSubmit(onSubmit)}
78 0178858 Dawsh 2y ago className="flex w-full max-w-4xl flex-col gap-2"
79 0178858 Dawsh 2y ago >
80 89eec32 Dawsh 2y ago <ProfileTitleField />
81 0178858 Dawsh 2y ago <div className="md:grid grid-cols-2 gap-2 flex flex-col">
82 0178858 Dawsh 2y ago <UpdateIntervalField />
83 89eec32 Dawsh 2y ago <SupportLinkField />
84 0178858 Dawsh 2y ago </div>
85 89eec32 Dawsh 2y ago <TemplateOnAcceptanceField />
86 fb4b69d Dawsh 2y ago <PlaceholderRemarkField />
87 fb4b69d Dawsh 2y ago <PlaceholderIfDisabledField />
88 fb4b69d Dawsh 2y ago <ShuffleConfigsField />
89 89eec32 Dawsh 2y ago <Separator className="my-3" />
90 0178858 Dawsh 2y ago <h4 className="text-lg mt-2">
91 0178858 Dawsh 2y ago {t("page.settings.subscription-settings.subscription-title")}
92 0178858 Dawsh 2y ago </h4>
93 0178858 Dawsh 2y ago <p className="text-sm text-muted-foreground">
94 0178858 Dawsh 2y ago {t("page.settings.subscription-settings.subscription-desc")}
95 0178858 Dawsh 2y ago </p>
96 89eec32 Dawsh 2y ago <Awaiting
97 89eec32 Dawsh 2y ago isFetching={isFetching}
98 89eec32 Dawsh 2y ago Skeleton={
99 89eec32 Dawsh 2y ago <>
100 89eec32 Dawsh 2y ago <Overlay />
101 89eec32 Dawsh 2y ago <Overlay />
102 89eec32 Dawsh 2y ago <Overlay />
103 89eec32 Dawsh 2y ago <Overlay />
104 89eec32 Dawsh 2y ago </>
105 89eec32 Dawsh 2y ago }
106 89eec32 Dawsh 2y ago isNotFound={fields.length === 0}
107 89eec32 Dawsh 2y ago NotFound={<NoRulesAlert />}
108 89eec32 Dawsh 2y ago Component={
109 89eec32 Dawsh 2y ago <div className="space-y-1">
110 89eec32 Dawsh 2y ago <Sortable
111 89eec32 Dawsh 2y ago value={fields}
112 89eec32 Dawsh 2y ago onMove={({ activeIndex, overIndex }) =>
113 89eec32 Dawsh 2y ago move(activeIndex, overIndex)
114 89eec32 Dawsh 2y ago }
115 89eec32 Dawsh 2y ago >
116 89eec32 Dawsh 2y ago <div className="grid grid-cols-[2fr,1.3fr,0.25fr,0.25fr] items-center justify-start gap-2 my-2">
117 89eec32 Dawsh 2y ago <FormLabel>
118 89eec32 Dawsh 2y ago {t("pattern")}
119 89eec32 Dawsh 2y ago </FormLabel>
120 89eec32 Dawsh 2y ago <FormLabel>
121 89eec32 Dawsh 2y ago {t("result")}
122 89eec32 Dawsh 2y ago </FormLabel>
123 89eec32 Dawsh 2y ago </div>
124 89eec32 Dawsh 2y ago <ScrollArea className="flex flex-col w-full max-h-[400px] gap-2" type="always">
125 89eec32 Dawsh 2y ago {fields.map((field, index) => (
126 89eec32 Dawsh 2y ago <RuleItem
127 89eec32 Dawsh 2y ago field={field}
128 89eec32 Dawsh 2y ago index={index}
129 89eec32 Dawsh 2y ago onRemove={remove} />
130 89eec32 Dawsh 2y ago ))}
131 89eec32 Dawsh 2y ago </ScrollArea>
132 89eec32 Dawsh 2y ago </Sortable>
133 89eec32 Dawsh 2y ago </div>
134 89eec32 Dawsh 2y ago }
135 89eec32 Dawsh 2y ago />
136 0178858 Dawsh 2y ago <HStack className="w-full flex-end">
137 89eec32 Dawsh 2y ago <Button
138 89eec32 Dawsh 2y ago type="button"
139 89eec32 Dawsh 2y ago variant="destructive"
140 89eec32 Dawsh 2y ago className="w-fit"
141 89eec32 Dawsh 2y ago onMouseDown={handleResetLocalChanges}
142 89eec32 Dawsh 2y ago >
143 89eec32 Dawsh 2y ago {t("page.settings.subscription-settings.reset-local-changes")}
144 89eec32 Dawsh 2y ago </Button>
145 0178858 Dawsh 2y ago <Button
146 0178858 Dawsh 2y ago type="button"
147 0178858 Dawsh 2y ago variant="outline"
148 0178858 Dawsh 2y ago className="w-fit"
149 0178858 Dawsh 2y ago onClick={() =>
150 0178858 Dawsh 2y ago append({
151 89eec32 Dawsh 2y ago pattern: "",
152 0178858 Dawsh 2y ago result: "block",
153 0178858 Dawsh 2y ago })
154 0178858 Dawsh 2y ago }
155 0178858 Dawsh 2y ago >
156 0178858 Dawsh 2y ago {t("page.settings.subscription-settings.add-rule")}
157 0178858 Dawsh 2y ago </Button>
158 0178858 Dawsh 2y ago <Button type="submit" className="w-fit">
159 0178858 Dawsh 2y ago {t("submit")}
160 0178858 Dawsh 2y ago </Button>
161 0178858 Dawsh 2y ago </HStack>
162 0178858 Dawsh 2y ago </form>
163 0178858 Dawsh 2y ago </Form>
164 0178858 Dawsh 2y ago )
165 0178858 Dawsh 2y ago }