zmiany dodawania/edycji produktu
This commit is contained in:
Kamil
parent
8e6726348d
commit
d193cbe51e
@ -84,22 +84,18 @@ const DodawanieProduktu = () => {
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-8">Dodaj nowy produkt lub usługę</h2>
|
||||
{error && <p className="text-red-500 mb-4">{error}</p>}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Nazwa</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={newProduct.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Nazwa produktu lub usługi"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={newProduct.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Opis"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
/></div>
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Cena</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
@ -109,38 +105,75 @@ const DodawanieProduktu = () => {
|
||||
placeholder="Cena"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
<select
|
||||
name="type"
|
||||
value={newProduct.type}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Typ</label>
|
||||
<div className="flex items-center space-x-6">
|
||||
<label className="flex items-center space">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="1"
|
||||
checked={newProduct.type === "1"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Produkt</span>
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="0"
|
||||
checked={newProduct.type === "0"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Usługa</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Dostępność (ilość)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="availability"
|
||||
value={newProduct.type === "0" ? 0 : newProduct.availability}
|
||||
onChange={(e) => {
|
||||
if (newProduct.type === "1") handleInputChange(e);
|
||||
}}
|
||||
disabled={newProduct.type === "0"}
|
||||
className={`block w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none ${
|
||||
newProduct.type === "0" ? "bg-gray-200 text-gray-500 cursor-not-allowed" : "border-gray-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Opis</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={newProduct.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Opis"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="1">Produkt</option>
|
||||
<option value="0">Usługa</option>
|
||||
</select>
|
||||
{newProduct.type === '1' && (
|
||||
<input
|
||||
type="number"
|
||||
name="availability"
|
||||
value={newProduct.availability}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Dostępność (ilość)"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
|
||||
>Anuluj</button>
|
||||
<button
|
||||
<button
|
||||
onClick={handleAddProduct}
|
||||
className="bg-gradient-to-r from-green-500 to-green-700 text-white py-2 px-4 rounded-lg hover:from-green-600 hover:to-green-800 transition"
|
||||
>
|
||||
Dodaj
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
|
||||
>Anuluj</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -133,9 +133,10 @@ const EdycjaProduktu = () => {
|
||||
<div className="p-8 bg-white rounded-lg shadow-lg border border-gray-200 w-full max-w-4xl h-max">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-4">Edycja produktu</h2>
|
||||
{errors.general && <p className="text-red-500 mb-4">{errors.general}</p>}
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="relative">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Nazwa</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
@ -146,20 +147,8 @@ const EdycjaProduktu = () => {
|
||||
/>
|
||||
{errors.name && <span className="absolute text-red-500 text-sm">{errors.name}</span>}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={product.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Opis"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
{errors.description && <span className="absolute text-red-500 text-sm">{errors.description}</span>}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Cena</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
@ -171,50 +160,80 @@ const EdycjaProduktu = () => {
|
||||
/>
|
||||
{errors.price && <span className="absolute text-red-500 text-sm">{errors.price}</span>}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="relative">
|
||||
<select
|
||||
name="type"
|
||||
value={product.type}
|
||||
onChange={handleInputChange}
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="1">Produkt</option>
|
||||
<option value="0">Usługa</option>
|
||||
</select>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Typ</label>
|
||||
<div className="flex items-center space-x-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="1"
|
||||
checked={product.type === "1"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Produkt</span>
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="0"
|
||||
checked={product.type === "0"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Usługa</span>
|
||||
</label>
|
||||
{errors.type && <span className="absolute text-red-500 text-sm">{errors.type}</span>}
|
||||
</div>
|
||||
|
||||
{product.type === '1' && (
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="availability"
|
||||
value={product.availability}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Dostępność (ilość)"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
{errors.availability && <span className="absolute text-red-500 text-sm">{errors.availability}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Dostępność (ilość)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="availability"
|
||||
value={product.type === "0" ? 0 : product.availability}
|
||||
onChange={(e) => {
|
||||
if (product.type === "1") handleInputChange(e);
|
||||
}}
|
||||
disabled={product.type === "0"}
|
||||
className={`block w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none ${product.type === "0" ? "bg-gray-200 text-gray-500 cursor-not-allowed" : "border-gray-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Opis</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={product.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Opis"
|
||||
className="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
|
||||
>Anuluj</button>
|
||||
<button
|
||||
onClick={handleSaveChanges}
|
||||
className="bg-gradient-to-r from-green-500 to-green-700 text-white py-2 px-4 rounded-lg hover:from-green-600 hover:to-green-800 transition"
|
||||
>
|
||||
Zapisz zmiany
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
|
||||
>Anuluj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default EdycjaProduktu;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user