Add color request feature with modal and Safari styling fixes
- Implement color request modal popup instead of separate page - Add Serbian translations throughout - Fix Safari form styling issues with custom CSS - Add 'Other' option to material and finish dropdowns - Create admin panel for managing color requests - Add database migration for color_requests table - Implement API endpoints for color request management
This commit is contained in:
DaX
170
src/components/ColorRequestForm.tsx
Normal file
170
src/components/ColorRequestForm.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { colorRequestService } from '@/src/services/api';
|
||||
|
||||
interface ColorRequestFormProps {
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
color_name: '',
|
||||
material_type: 'PLA',
|
||||
finish_type: 'Basic',
|
||||
user_name: '',
|
||||
user_email: '',
|
||||
description: '',
|
||||
reference_url: ''
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const response = await colorRequestService.submit(formData);
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: 'Vaš zahtev je uspešno poslat!'
|
||||
});
|
||||
setFormData({
|
||||
color_name: '',
|
||||
material_type: 'PLA',
|
||||
finish_type: 'Basic',
|
||||
user_name: '',
|
||||
user_email: '',
|
||||
description: '',
|
||||
reference_url: ''
|
||||
});
|
||||
if (onSuccess) onSuccess();
|
||||
} catch (error) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: 'Greška pri slanju zahteva. Pokušajte ponovo.'
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">Zatraži Novu Boju</h2>
|
||||
|
||||
{message && (
|
||||
<div className={`mb-4 p-4 rounded ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
|
||||
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="color_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Naziv Boje *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="color_name"
|
||||
name="color_name"
|
||||
required
|
||||
value={formData.color_name}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
|
||||
placeholder="npr. Sunset Orange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="material_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Tip Materijala *
|
||||
</label>
|
||||
<select
|
||||
id="material_type"
|
||||
name="material_type"
|
||||
required
|
||||
value={formData.material_type}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
|
||||
>
|
||||
<option value="PLA">PLA</option>
|
||||
<option value="PETG">PETG</option>
|
||||
<option value="ABS">ABS</option>
|
||||
<option value="TPU">TPU</option>
|
||||
<option value="PLA-CF">PLA-CF</option>
|
||||
<option value="PETG-CF">PETG-CF</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="finish_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Tip Finiša
|
||||
</label>
|
||||
<select
|
||||
id="finish_type"
|
||||
name="finish_type"
|
||||
value={formData.finish_type}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
|
||||
>
|
||||
<option value="Basic">Basic</option>
|
||||
<option value="Matte">Matte</option>
|
||||
<option value="Silk">Silk</option>
|
||||
<option value="Metal">Metal</option>
|
||||
<option value="Sparkle">Sparkle</option>
|
||||
<option value="Glow">Glow</option>
|
||||
<option value="Transparent">Transparent</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email (opciono)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="user_email"
|
||||
name="user_email"
|
||||
value={formData.user_email}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
|
||||
placeholder="Za obaveštenja o statusu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={`px-6 py-2 rounded-md text-white font-medium ${
|
||||
isSubmitting
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-purple-600 hover:bg-purple-700'
|
||||
} transition-colors`}
|
||||
>
|
||||
{isSubmitting ? 'Slanje...' : 'Pošalji Zahtev'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user