Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 8x 8x 8x 8x 1x 9x 6x 4x 3x 1x 3x 11x 8x 20x 3x 14x 20x 5x 5x 5x 5x 1x 1x 1x 13x 4x 2x 5x 5x 5x 7x 7x 9x 17x | import React from "react";
import SelectInput from "../../../../../ahuora-design-system/inputs/SelectInput";
import { Button } from "../../../../../ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogTitle,
} from "../../../../../ahuora-design-system/ui/dialog";
import { Input } from "../../../../../ahuora-design-system/ui/input";
import { Label } from "../../../../../ahuora-design-system/ui/label";
import {
useCoreCustomPropertyPackagesCreateMutation,
useCoreCustomPropertyPackagesListQuery,
} from "../../../../../api/apiStore.gen";
import { useProjectId } from "../../../../../hooks/project";
export function CustomPackageChooser({
customPackageId,
onCustomPackageChange,
}: {
customPackageId?: number;
onCustomPackageChange: (newCustomPackageId: number) => void;
}) {
const { data: customPackages } = useCoreCustomPropertyPackagesListQuery({});
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
const onOptionChange = (newValue: string) => {
if (newValue === "ADD_PACKAGE") {
setIsDialogOpen(true);
// TODO
} else {
const newCustomPackageId = parseInt(newValue);
onCustomPackageChange(newCustomPackageId);
}
};
return (
<>
<SelectInput
ariaLabel="Select custom Package"
title="Select custom package"
data={[
...(customPackages?.map((pkg) => ({
label: pkg.name,
value: pkg.id + "",
})) || []),
{
label: "Add New..",
value: "ADD_PACKAGE",
},
]}
value={customPackageId + ""}
handleChange={onOptionChange}
/>
<CustomPackageCreator
open={isDialogOpen}
onOpenChange={setIsDialogOpen}
onPackageCreated={onCustomPackageChange}
/>
</>
);
}
export function CustomPackageCreator({
open,
onOpenChange,
onPackageCreated,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
onPackageCreated: (newCustomPackageId: number) => void;
}) {
const [createPackage] = useCoreCustomPropertyPackagesCreateMutation();
const [name, setName] = React.useState("");
const onCreate = async () => {
onOpenChange(false);
const result = await createPackage({
customPropertyPackage: {
name: name,
},
}).unwrap();
onPackageCreated(result.id);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<div className="flex flex-col gap-4">
<DialogTitle>Create Custom Property Package</DialogTitle>
<div className="flex flex-col gap-2">
<Label>Name</Label>
<Input
aria-label="Custom Package Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<Button onClick={onCreate}>Create</Button>
</div>
</DialogContent>
</Dialog>
);
}
|