143 lines
4.2 KiB
JavaScript
143 lines
4.2 KiB
JavaScript
import { useState } from "react";
|
|
import { Button, ButtonText } from "@/components/ui/button";
|
|
import { FormControl } from "@/components/ui/form-control";
|
|
import { Input, InputField } from "@/components/ui/input";
|
|
import { Text } from "@/components/ui/text";
|
|
import { VStack } from "@/components/ui/vstack";
|
|
import { Textarea, TextareaInput } from "@/components/ui/textarea";
|
|
import {
|
|
Select,
|
|
SelectTrigger,
|
|
SelectInput,
|
|
SelectIcon,
|
|
SelectPortal,
|
|
SelectBackdrop,
|
|
SelectContent,
|
|
SelectDragIndicator,
|
|
SelectDragIndicatorWrapper,
|
|
SelectItem,
|
|
} from "@/components/ui/select";
|
|
|
|
import { ChevronDownIcon } from "@/components/ui/icon";
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import { createNotice } from "@/api/notices";
|
|
|
|
export default function CreateNotice() {
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [price, setPrice] = useState("");
|
|
const [category, setCategory] = useState("");
|
|
const [error, setError] = useState({
|
|
title: false,
|
|
description: false,
|
|
price: false,
|
|
category: false,
|
|
});
|
|
|
|
const noticeMutation = useMutation({
|
|
mutationFn: () =>
|
|
createNotice({
|
|
title: title,
|
|
clientId: 1,
|
|
description: description,
|
|
price: parseFloat(price),
|
|
category: category,
|
|
status: "ACTIVE",
|
|
}),
|
|
onSuccess: () => {
|
|
console.log("Notice created successfully");
|
|
},
|
|
onError: (error) => {
|
|
console.error("Error creating notice");
|
|
},
|
|
});
|
|
|
|
const addNotice = () => {
|
|
setError({
|
|
title: !title,
|
|
description: !description,
|
|
price: !price,
|
|
category: !category,
|
|
});
|
|
|
|
if (!title || !description || !price || !category) {
|
|
console.log("Error in form");
|
|
return;
|
|
}
|
|
noticeMutation.mutate();
|
|
};
|
|
|
|
return (
|
|
<FormControl className="p-4 border rounded-lg border-outline-300">
|
|
<VStack space="xl">
|
|
<VStack space="xs">
|
|
<Text className="text-typography-500">Tytuł</Text>
|
|
<Input className="min-w-[250px]" isInvalid={error.title}>
|
|
<InputField
|
|
type="text"
|
|
value={title}
|
|
onChangeText={(value) => setTitle(value)}
|
|
/>
|
|
</Input>
|
|
</VStack>
|
|
|
|
<VStack space="xs">
|
|
<Text className="text-typography-500">Opis</Text>
|
|
<Textarea
|
|
size="md"
|
|
className="min-w-[250px] "
|
|
isInvalid={error.description}
|
|
>
|
|
<TextareaInput
|
|
placeholder="Opisz produkt"
|
|
value={description}
|
|
onChangeText={(value) => setDescription(value)}
|
|
/>
|
|
</Textarea>
|
|
</VStack>
|
|
|
|
<VStack space="xs">
|
|
<Text className="text-typography-500">Cena</Text>
|
|
<Input className="min-w-[250px]" isInvalid={error.price}>
|
|
<InputField
|
|
type="text"
|
|
value={price}
|
|
onChangeText={(value) => setPrice(value)}
|
|
/>
|
|
</Input>
|
|
</VStack>
|
|
<VStack space="xs">
|
|
<Text className="text-typography-500">Kategoria</Text>
|
|
<Select
|
|
onValueChange={(value) => setCategory(value)}
|
|
isInvalid={error.category}
|
|
>
|
|
<SelectTrigger variant="outline" size="md">
|
|
<SelectInput placeholder="Wybierz kategorię" />
|
|
<SelectIcon className="mr-3" as={ChevronDownIcon} />
|
|
</SelectTrigger>
|
|
<SelectPortal>
|
|
<SelectBackdrop />
|
|
<SelectContent>
|
|
<SelectDragIndicatorWrapper>
|
|
<SelectDragIndicator />
|
|
</SelectDragIndicatorWrapper>
|
|
<SelectItem label="Meble" value="Furniture" />
|
|
<SelectItem label="Biżuteria" value="Jewelry" />
|
|
<SelectItem label="Ceramika" value="Ceramics" />
|
|
</SelectContent>
|
|
</SelectPortal>
|
|
</Select>
|
|
</VStack>
|
|
<Button
|
|
className="ml-auto"
|
|
onPress={() => addNotice()}
|
|
disabled={noticeMutation.isLoading}
|
|
>
|
|
<ButtonText className="text-typography-0">Save</ButtonText>
|
|
</Button>
|
|
</VStack>
|
|
</FormControl>
|
|
);
|
|
}
|