← marzneshin
/
dashboard/src/modules/hosts/dialogs/mutation/fields/http-headers-dynamic-fields/index.tsx
/
blame
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/hosts/dialogs/mutation/fields/http-headers-dynamic-fields/index.tsx
· v0.7.3
Source
| 1 | 4056c66 | Dawsh | 1y ago | import { |
| 2 | 4056c66 | Dawsh | 1y ago | AlertCard, |
| 3 | 4056c66 | Dawsh | 1y ago | Button, |
| 4 | 4056c66 | Dawsh | 1y ago | FormLabel, |
| 5 | 4056c66 | Dawsh | 1y ago | ScrollArea, |
| 6 | 4056c66 | Dawsh | 1y ago | } from "@marzneshin/common/components"; |
| 7 | 4056c66 | Dawsh | 1y ago | import { useFieldArray, useFormContext } from "react-hook-form"; |
| 8 | 4056c66 | Dawsh | 1y ago | import { DynamicField } from "@marzneshin/libs/dynamic-field"; |
| 9 | 4056c66 | Dawsh | 1y ago | import { useTranslation } from "react-i18next"; |
| 10 | 4056c66 | Dawsh | 1y ago | import { ListPlus, Trash } from "lucide-react"; |
| 11 | 4056c66 | Dawsh | 1y ago | |
| 12 | 4056c66 | Dawsh | 1y ago | // TODO: Default back to previous value |
| 13 | 4056c66 | Dawsh | 1y ago | // TODO: Push up animation for adding new headers |
| 14 | 4056c66 | Dawsh | 1y ago | // TODO: Remove animation for removing previous headers |
| 15 | 4056c66 | Dawsh | 1y ago | |
| 16 | 4056c66 | Dawsh | 1y ago | export const HttpHeadersDynamicFields = () => { |
| 17 | 4056c66 | Dawsh | 1y ago | const { t } = useTranslation(); |
| 18 | 4056c66 | Dawsh | 1y ago | const { control } = useFormContext(); |
| 19 | 4056c66 | Dawsh | 1y ago | |
| 20 | 4056c66 | Dawsh | 1y ago | const { fields, append, remove, replace } = useFieldArray({ |
| 21 | 4056c66 | Dawsh | 1y ago | control, |
| 22 | 4056c66 | Dawsh | 1y ago | name: "http_headers", |
| 23 | 4056c66 | Dawsh | 1y ago | }); |
| 24 | 4056c66 | Dawsh | 1y ago | |
| 25 | 4056c66 | Dawsh | 1y ago | return ( |
| 26 | 4056c66 | Dawsh | 1y ago | <div className="mt-2 flex flex-col gap-2"> |
| 27 | 4056c66 | Dawsh | 1y ago | <FormLabel className="hstack justify-between items-center"> |
| 28 | 4056c66 | Dawsh | 1y ago | {t("page.hosts.http_headers")} |
| 29 | 4056c66 | Dawsh | 1y ago | <div className="hstack gap-1 items-center [*>button]:p-1"> |
| 30 | 4056c66 | Dawsh | 1y ago | <Button |
| 31 | 4056c66 | Dawsh | 1y ago | variant="secondary-destructive" |
| 32 | 4056c66 | Dawsh | 1y ago | size="icon" |
| 33 | 4056c66 | Dawsh | 1y ago | disabled={!fields.length} |
| 34 | 4056c66 | Dawsh | 1y ago | className="p-1" |
| 35 | 4056c66 | Dawsh | 1y ago | onClick={() => replace([])} |
| 36 | 4056c66 | Dawsh | 1y ago | > |
| 37 | 4056c66 | Dawsh | 1y ago | <Trash /> |
| 38 | 4056c66 | Dawsh | 1y ago | </Button> |
| 39 | 4056c66 | Dawsh | 1y ago | <Button |
| 40 | 4056c66 | Dawsh | 1y ago | variant="ghost" |
| 41 | 4056c66 | Dawsh | 1y ago | size="icon" |
| 42 | 4056c66 | Dawsh | 1y ago | className="p-1" |
| 43 | 4056c66 | Dawsh | 1y ago | onClick={(e) => { |
| 44 | 4056c66 | Dawsh | 1y ago | e.preventDefault(); |
| 45 | 4056c66 | Dawsh | 1y ago | append({ name: "", value: "" }); |
| 46 | 4056c66 | Dawsh | 1y ago | }} |
| 47 | 4056c66 | Dawsh | 1y ago | > |
| 48 | 4056c66 | Dawsh | 1y ago | <ListPlus /> |
| 49 | 4056c66 | Dawsh | 1y ago | </Button> |
| 50 | 4056c66 | Dawsh | 1y ago | </div> |
| 51 | 4056c66 | Dawsh | 1y ago | </FormLabel> |
| 52 | 4056c66 | Dawsh | 1y ago | <ScrollArea className="p-2 border-2 h-[7rem] max-h-[10rem] bg-background grid grid-cols-1 gap-2 rounded-md"> |
| 53 | 4056c66 | Dawsh | 1y ago | {fields.length !== 0 ? ( |
| 54 | 4056c66 | Dawsh | 1y ago | fields.map((field, index) => ( |
| 55 | 4056c66 | Dawsh | 1y ago | <DynamicField |
| 56 | 4056c66 | Dawsh | 1y ago | key={field.id} |
| 57 | 4056c66 | Dawsh | 1y ago | fieldIndex={index} |
| 58 | 4056c66 | Dawsh | 1y ago | parentFieldName="http_headers" |
| 59 | 4056c66 | Dawsh | 1y ago | onRemove={() => remove(index)} |
| 60 | 4056c66 | Dawsh | 1y ago | /> |
| 61 | 4056c66 | Dawsh | 1y ago | )) |
| 62 | 4056c66 | Dawsh | 1y ago | ) : ( |
| 63 | 4056c66 | Dawsh | 1y ago | <AlertCard |
| 64 | 4056c66 | Dawsh | 1y ago | size="wide-full" |
| 65 | 4056c66 | Dawsh | 1y ago | title={t("page.hosts.no-http-headers")} |
| 66 | 4056c66 | Dawsh | 1y ago | ></AlertCard> |
| 67 | 4056c66 | Dawsh | 1y ago | )} |
| 68 | 4056c66 | Dawsh | 1y ago | </ScrollArea> |
| 69 | 4056c66 | Dawsh | 1y ago | </div> |
| 70 | 4056c66 | Dawsh | 1y ago | ); |
| 71 | 4056c66 | Dawsh | 1y ago | }; |