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 | 19x 19x 19x 14x 19x 13x 13x | import {
DialogDescription,
DialogTitle,
} from "../../../../../ahuora-design-system/ui/dialog";
import { ScrollArea } from "../../../../../ahuora-design-system/ui/scroll-area";
import { Separator } from "../../../../../ahuora-design-system/ui/separator";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../../../../../ahuora-design-system/ui/tabs";
import { useCoreCustomCompoundsListQuery } from "../../../../../api/apiStore.gen";
import { CompoundsChooser } from "./CompoundsChooser";
import { CompoundViewer } from "./CompoundViewer";
import { CustomPropertyPackageProperties } from "./CustomPropertyPackageProperties";
import { useCustomPropertyPackage } from "./useCustomPropertyPackage";
type CustomPropertyPackageEditorProps = {
customPackageId: number;
};
export function CustomPropertyPackageEditor(
props: CustomPropertyPackageEditorProps,
) {
const [propertyPackage, optimisticUpdate] = useCustomPropertyPackage(
props.customPackageId,
);
const { data: allCompounds } = useCoreCustomCompoundsListQuery({});
// Filter compounds to only those in the package
const compounds =
allCompounds?.filter((compound) =>
propertyPackage?.compounds.some((c) => c === compound.id),
) || [];
return (
<Tabs defaultValue="select-compounds" orientation="vertical">
<DialogTitle>Custom Property Package Editor</DialogTitle>
<DialogDescription className="hidden">
Enter the custom property package parameters.
</DialogDescription>
<Separator className="my-4"></Separator>
<div className="flex flex-row gap-4">
<div className="w-60">
<TabsList className="flex flex-col h-[150]">
<TabsTrigger value="select-compounds">Compounds</TabsTrigger>
{compounds.map((compound) => (
<TabsTrigger key={compound.id} value={"compound-" + compound.id}>
{compound.name}
</TabsTrigger>
))}
<TabsTrigger value="other-properties">Other Properties</TabsTrigger>
</TabsList>
</div>
<div className="flex-1 w-[700px]">
<ScrollArea className="h-[400px]">
<TabsContent value="select-compounds">
<CompoundsChooser customPackageId={props.customPackageId} />
</TabsContent>
{compounds.map((compound) => (
<TabsContent key={compound.id} value={"compound-" + compound.id}>
<CompoundViewer compoundId={compound.id} />
</TabsContent>
))}
<TabsContent value="other-properties">
<CustomPropertyPackageProperties
customPackageId={props.customPackageId}
/>
</TabsContent>
</ScrollArea>
</div>
</div>
</Tabs>
);
}
|