319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react'
|
|
import { useNavigate, Link } from 'react-router-dom'
|
|
import { useAlert } from '../context/AlertContext'
|
|
import { useAuth } from '../context/AuthContext'
|
|
import { motion } from 'framer-motion'
|
|
import FormField from '../components/FormField'
|
|
import Forbidden from '../components/Forbidden'
|
|
import AdminDatePicker from '../components/AdminDatePicker'
|
|
import apiFetch from '../utils/api'
|
|
|
|
const API_BASE = '/api/admin'
|
|
|
|
interface Customer {
|
|
id: number
|
|
name: string
|
|
company_id?: string
|
|
city?: string
|
|
}
|
|
|
|
interface User {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
interface ProjectForm {
|
|
project_number: string
|
|
name: string
|
|
customer_id: number | null
|
|
customer_name: string
|
|
start_date: string
|
|
responsible_user_id: string
|
|
}
|
|
|
|
export default function ProjectCreate() {
|
|
const navigate = useNavigate()
|
|
const alert = useAlert()
|
|
const { hasPermission } = useAuth()
|
|
|
|
const [form, setForm] = useState<ProjectForm>({
|
|
project_number: '',
|
|
name: '',
|
|
customer_id: null,
|
|
customer_name: '',
|
|
start_date: new Date().toISOString().split('T')[0],
|
|
responsible_user_id: ''
|
|
})
|
|
const [users, setUsers] = useState<User[]>([])
|
|
const [saving, setSaving] = useState(false)
|
|
const [errors, setErrors] = useState<Record<string, string | undefined>>({})
|
|
const [loadingNumber, setLoadingNumber] = useState(true)
|
|
|
|
// Customer selector state
|
|
const [customers, setCustomers] = useState<Customer[]>([])
|
|
const [customerSearch, setCustomerSearch] = useState('')
|
|
const [showCustomerDropdown, setShowCustomerDropdown] = useState(false)
|
|
|
|
// Load initial data
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
try {
|
|
const [numRes, custRes, usersRes] = await Promise.all([
|
|
apiFetch(`${API_BASE}/projects/next-number`),
|
|
apiFetch(`${API_BASE}/customers`),
|
|
apiFetch(`${API_BASE}/users`)
|
|
])
|
|
|
|
const numData = await numRes.json()
|
|
if (numData.success) {
|
|
setForm(prev => ({ ...prev, project_number: numData.data?.next_number || numData.data?.number || '' }))
|
|
}
|
|
|
|
const custData = await custRes.json()
|
|
if (custData.success) {
|
|
setCustomers(Array.isArray(custData.data) ? custData.data : custData.data?.items || [])
|
|
}
|
|
|
|
const usersData = await usersRes.json()
|
|
if (usersData.success) {
|
|
const rawUsers = Array.isArray(usersData.data) ? usersData.data : usersData.data?.items || []
|
|
setUsers(rawUsers.map((u: any) => ({ id: u.id, name: `${u.first_name || ''} ${u.last_name || ''}`.trim() || u.username })))
|
|
}
|
|
} catch {
|
|
alert.error('Chyba při načítání dat')
|
|
} finally {
|
|
setLoadingNumber(false)
|
|
}
|
|
}
|
|
load()
|
|
}, [alert])
|
|
|
|
// Customer filtering
|
|
const filteredCustomers = useMemo(() => {
|
|
if (!customerSearch) return customers
|
|
const q = customerSearch.toLowerCase()
|
|
return customers.filter(c =>
|
|
(c.name || '').toLowerCase().includes(q) ||
|
|
(c.company_id || '').includes(customerSearch) ||
|
|
(c.city || '').toLowerCase().includes(q)
|
|
)
|
|
}, [customers, customerSearch])
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
const handleClickOutside = () => setShowCustomerDropdown(false)
|
|
if (showCustomerDropdown) {
|
|
document.addEventListener('click', handleClickOutside)
|
|
return () => document.removeEventListener('click', handleClickOutside)
|
|
}
|
|
}, [showCustomerDropdown])
|
|
|
|
if (!hasPermission('projects.create')) return <Forbidden />
|
|
|
|
const selectCustomer = (customer: Customer) => {
|
|
setForm(prev => ({ ...prev, customer_id: customer.id, customer_name: customer.name }))
|
|
setErrors(prev => ({ ...prev, customer_id: undefined }))
|
|
setCustomerSearch('')
|
|
setShowCustomerDropdown(false)
|
|
}
|
|
|
|
const clearCustomer = () => {
|
|
setForm(prev => ({ ...prev, customer_id: null, customer_name: '' }))
|
|
}
|
|
|
|
const updateForm = (field: keyof ProjectForm, value: unknown) => {
|
|
setForm(prev => ({ ...prev, [field]: value }))
|
|
setErrors(prev => ({ ...prev, [field]: undefined }))
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
const newErrors: Record<string, string> = {}
|
|
if (!form.name.trim()) newErrors.name = 'Název projektu je povinný'
|
|
if (!form.customer_id) newErrors.customer_id = 'Vyberte zákazníka'
|
|
setErrors(newErrors)
|
|
if (Object.keys(newErrors).length > 0) return
|
|
|
|
setSaving(true)
|
|
try {
|
|
const body = {
|
|
name: form.name.trim(),
|
|
customer_id: form.customer_id,
|
|
start_date: form.start_date,
|
|
project_number: form.project_number.trim(),
|
|
responsible_user_id: form.responsible_user_id || null
|
|
}
|
|
|
|
const res = await apiFetch(`${API_BASE}/projects`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
})
|
|
const data = await res.json()
|
|
if (data.success) {
|
|
navigate(`/projects/${data.data.project_id}`, { state: { created: true } })
|
|
} else {
|
|
alert.error(data.error || 'Nepodařilo se vytvořit projekt')
|
|
}
|
|
} catch {
|
|
alert.error('Chyba připojení')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
if (loadingNumber) {
|
|
return (
|
|
<div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
|
|
<div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
|
|
<div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
|
|
</div>
|
|
<div className="admin-card">
|
|
<div className="admin-skeleton" style={{ gap: '1.25rem' }}>
|
|
{[0, 1, 2, 3].map(i => (
|
|
<div key={i} className="admin-skeleton-row">
|
|
<div className="admin-skeleton-line w-1/4" />
|
|
<div className="admin-skeleton-line w-1/2" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<motion.div
|
|
className="admin-page-header"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
>
|
|
<div className="flex-row gap-4">
|
|
<Link to="/projects" className="admin-btn-icon" title="Zpět" aria-label="Zpět">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
</svg>
|
|
</Link>
|
|
<div>
|
|
<h1 className="admin-page-title">Nový projekt</h1>
|
|
<p className="admin-page-subtitle">Ruční vytvoření projektu</p>
|
|
</div>
|
|
</div>
|
|
<div className="admin-page-actions">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="admin-btn admin-btn-primary"
|
|
>
|
|
{saving ? 'Ukládám...' : 'Uložit'}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="admin-card"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.06 }}
|
|
style={{ overflow: 'visible' }}
|
|
>
|
|
<div className="admin-card-body">
|
|
<h3 className="admin-card-title">Základní údaje</h3>
|
|
<div className="admin-form">
|
|
<div className="admin-form-row">
|
|
<FormField label="Číslo projektu">
|
|
<input
|
|
type="text"
|
|
value={form.project_number}
|
|
onChange={(e) => updateForm('project_number', e.target.value)}
|
|
className="admin-form-input"
|
|
placeholder="Ponechte prázdné pro automatické"
|
|
/>
|
|
</FormField>
|
|
<FormField label="Název" error={errors.name} required>
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => updateForm('name', e.target.value)}
|
|
className="admin-form-input"
|
|
placeholder="Název projektu"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="admin-form-row">
|
|
<FormField label="Zákazník" error={errors.customer_id} required>
|
|
{form.customer_id ? (
|
|
<div className="offers-customer-selected">
|
|
<span>{form.customer_name}</span>
|
|
<button type="button" onClick={clearCustomer} className="admin-btn-icon" title="Odebrat zákazníka" aria-label="Odebrat zákazníka">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="offers-customer-select" onClick={(e) => e.stopPropagation()}>
|
|
<input
|
|
type="text"
|
|
value={customerSearch}
|
|
onChange={(e) => { setCustomerSearch(e.target.value); setShowCustomerDropdown(true) }}
|
|
onFocus={() => setShowCustomerDropdown(true)}
|
|
className="admin-form-input"
|
|
placeholder="Hledat zákazníka..."
|
|
/>
|
|
{showCustomerDropdown && (
|
|
<div className="offers-customer-dropdown">
|
|
{filteredCustomers.length === 0 ? (
|
|
<div className="offers-customer-dropdown-empty">
|
|
Žádní zákazníci
|
|
</div>
|
|
) : (
|
|
filteredCustomers.slice(0, 20).map(c => (
|
|
<div
|
|
key={c.id}
|
|
className="offers-customer-dropdown-item"
|
|
onMouseDown={() => selectCustomer(c)}
|
|
>
|
|
<div>{c.name}</div>
|
|
{c.city && <div>{c.city}</div>}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</FormField>
|
|
<FormField label="Datum zahájení">
|
|
<AdminDatePicker
|
|
mode="date"
|
|
value={form.start_date}
|
|
onChange={(val: string) => updateForm('start_date', val)}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="admin-form-row">
|
|
<FormField label="Zodpovědná osoba">
|
|
<select
|
|
value={form.responsible_user_id}
|
|
onChange={(e) => updateForm('responsible_user_id', e.target.value)}
|
|
className="admin-form-select"
|
|
>
|
|
<option value="">— Nevybráno —</option>
|
|
{users.map(u => (
|
|
<option key={u.id} value={u.id}>{u.name}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
)
|
|
}
|