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