99 lines
3.1 KiB
JavaScript
99 lines
3.1 KiB
JavaScript
import { useState } from "react";
|
|
import "../../styles/components/AddItemWithDetailsModal.css";
|
|
import ClassificationSection from "../forms/ClassificationSection";
|
|
import useActionToast from "../../hooks/useActionToast";
|
|
import ImageUploadSection from "../forms/ImageUploadSection";
|
|
|
|
export default function AddItemWithDetailsModal({ itemName, onConfirm, onSkip, onCancel }) {
|
|
const toast = useActionToast();
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [imagePreview, setImagePreview] = useState(null);
|
|
const [itemType, setItemType] = useState("");
|
|
const [itemGroup, setItemGroup] = useState("");
|
|
const [zone, setZone] = useState("");
|
|
|
|
const handleImageChange = (file) => {
|
|
setSelectedImage(file);
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setImagePreview(reader.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const handleImageRemove = () => {
|
|
setSelectedImage(null);
|
|
setImagePreview(null);
|
|
};
|
|
|
|
const handleItemTypeChange = (newType) => {
|
|
setItemType(newType);
|
|
setItemGroup(""); // Reset group when type changes
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (itemType && !itemGroup) {
|
|
toast.error("Add item failed", `Add item failed: Select an item group for ${itemName}`);
|
|
return;
|
|
}
|
|
|
|
const hasClassificationDetails = Boolean(itemType || itemGroup || zone);
|
|
const classification = hasClassificationDetails ? {
|
|
item_type: itemType,
|
|
item_group: itemGroup || null,
|
|
zone: zone || null
|
|
} : null;
|
|
|
|
onConfirm(selectedImage, classification);
|
|
};
|
|
|
|
const handleSkip = () => {
|
|
onSkip();
|
|
};
|
|
|
|
return (
|
|
<div className="add-item-details-overlay" onClick={onCancel}>
|
|
<div className="add-item-details-modal" onClick={(e) => e.stopPropagation()}>
|
|
<h2 className="add-item-details-title">Add Details for "{itemName}"</h2>
|
|
<p className="add-item-details-subtitle">Add an image and classification to help organize your list</p>
|
|
|
|
{/* Image Section */}
|
|
<div className="add-item-details-section">
|
|
<ImageUploadSection
|
|
imagePreview={imagePreview}
|
|
onImageChange={handleImageChange}
|
|
onImageRemove={handleImageRemove}
|
|
/>
|
|
</div>
|
|
|
|
{/* Classification Section */}
|
|
<div className="add-item-details-section">
|
|
<ClassificationSection
|
|
itemType={itemType}
|
|
itemGroup={itemGroup}
|
|
zone={zone}
|
|
onItemTypeChange={handleItemTypeChange}
|
|
onItemGroupChange={setItemGroup}
|
|
onZoneChange={setZone}
|
|
fieldClass="add-item-details-field"
|
|
selectClass="add-item-details-select"
|
|
/>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="add-item-details-actions">
|
|
<button onClick={onCancel} className="add-item-details-btn cancel">
|
|
Cancel
|
|
</button>
|
|
<button onClick={handleSkip} className="add-item-details-btn skip">
|
|
Skip All
|
|
</button>
|
|
<button onClick={handleConfirm} className="add-item-details-btn confirm">
|
|
Add Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|