main page
This commit is contained in:
JUSN committed
commit
7fb446c53a
8943 files changed
+1209030
No files matched your search
@@ -0,0 +1,177 @@
|
||||
import { useState } from 'react'
|
||||
import { FaCaretDown } from 'react-icons/fa6'
|
||||
|
||||
const TICKET_TYPES = [
|
||||
'Home Office', 'Holidays', 'Trip', 'Supportrequest', 'Change Request',
|
||||
'Maintenance', 'Project', 'Controlling', 'Development', 'Documentation',
|
||||
'Meeting/Conference', 'IT Management', 'IT Security', 'Procurement',
|
||||
'Rollout', 'Emergency Call', 'Other Services'
|
||||
]
|
||||
|
||||
const SYSTEMS = [
|
||||
'Account View', 'Client', 'Cofano', 'Credentials', 'Diamant', 'Docuware',
|
||||
'EDI', 'eMail', 'Employee', 'Invoice', 'LBase', 'Medical Office', 'Network',
|
||||
'O365', 'PDF Viewer', 'Printer', 'Reports', 'Server', 'Time Tracking',
|
||||
'TK', 'TOS', 'Vivendi NG', 'VGM', '(W)LAN', '(W)WAN', 'WOMS', 'n/a'
|
||||
]
|
||||
|
||||
const STATUSES = [
|
||||
'Open', 'Occupied', 'Assigned', 'Awaiting', 'Added Info',
|
||||
'In Test', 'Halted', 'Aborted', 'Cancelled', 'Closed'
|
||||
]
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: 0, label: 'None' },
|
||||
{ value: 1, label: 'Low' },
|
||||
{ value: 2, label: 'Medium' },
|
||||
{ value: 3, label: 'High' },
|
||||
{ value: 4, label: 'Critical' }
|
||||
]
|
||||
|
||||
export default function TicketFilters({ filters, onChange, onApply }) {
|
||||
const [localFilters, setLocalFilters] = useState(filters)
|
||||
|
||||
const handleCheckboxChange = (category, value) => {
|
||||
const current = localFilters[category] || []
|
||||
const updated = current.includes(value)
|
||||
? current.filter(v => v !== value)
|
||||
: [...current, value]
|
||||
setLocalFilters({ ...localFilters, [category]: updated })
|
||||
}
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setLocalFilters({ ...localFilters, [field]: value })
|
||||
}
|
||||
|
||||
const handleApply = () => {
|
||||
onChange(localFilters)
|
||||
onApply()
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="bg-dark-grey text-white">
|
||||
<td className="text-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="WOID"
|
||||
className="form-control"
|
||||
style={{ width: '80px', background: '#616161', color: '#fff', border: 'none' }}
|
||||
value={localFilters.woid || ''}
|
||||
onChange={(e) => handleInputChange('woid', e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Created"
|
||||
className="form-control"
|
||||
style={{ width: '100px', background: '#616161', color: '#fff', border: 'none' }}
|
||||
value={localFilters.createdDate || ''}
|
||||
onChange={(e) => handleInputChange('createdDate', e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-dark">
|
||||
Type / Location <FaCaretDown />
|
||||
</button>
|
||||
<div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||||
{TICKET_TYPES.map(type => (
|
||||
<label key={type} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(localFilters.type || []).includes(type)}
|
||||
onChange={() => handleCheckboxChange('type', type)}
|
||||
/>
|
||||
{type}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-dark">
|
||||
System <FaCaretDown />
|
||||
</button>
|
||||
<div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||||
{SYSTEMS.map(system => (
|
||||
<label key={system} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(localFilters.system || []).includes(system)}
|
||||
onChange={() => handleCheckboxChange('system', system)}
|
||||
/>
|
||||
{system}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Customer or Location"
|
||||
className="form-control"
|
||||
style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
|
||||
value={localFilters.customer || ''}
|
||||
onChange={(e) => handleInputChange('customer', e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="User or Topic"
|
||||
className="form-control"
|
||||
style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
|
||||
value={localFilters.userTopic || ''}
|
||||
onChange={(e) => handleInputChange('userTopic', e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-dark">
|
||||
Status <FaCaretDown />
|
||||
</button>
|
||||
<div className="dropdown-content">
|
||||
{STATUSES.map(status => (
|
||||
<label key={status} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(localFilters.status || []).includes(status)}
|
||||
onChange={() => handleCheckboxChange('status', status)}
|
||||
/>
|
||||
{status}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-dark">
|
||||
Priority <FaCaretDown />
|
||||
</button>
|
||||
<div className="dropdown-content">
|
||||
{PRIORITIES.map(p => (
|
||||
<label key={p.value} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(localFilters.priority || []).includes(p.value)}
|
||||
onChange={() => handleCheckboxChange('priority', p.value)}
|
||||
/>
|
||||
{p.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">Approval</td>
|
||||
<td className="text-center">
|
||||
<button className="btn btn-green" onClick={handleApply}>
|
||||
Apply!
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user