|
|
|
|
@@ -280,26 +280,14 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
|
|
|
|
|
|
|
|
|
|
{/* Event Type */}
|
|
|
|
|
<MobileRow icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2H2l8 9.46V19l4 2v-8.54L22 2z"/></svg>} label="Event Type">
|
|
|
|
|
<div>
|
|
|
|
|
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
|
|
|
|
|
<select value={typeId} onChange={e=>setTypeId(e.target.value)} style={{ background:'transparent',border:'none',fontSize:15,color:'var(--text-primary)',flex:1,outline:'none' }}>
|
|
|
|
|
{localTypes.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
|
|
|
|
|
</select>
|
|
|
|
|
{isToolManager && (
|
|
|
|
|
<button onClick={()=>setShowAddType(v=>!v)} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--primary)',fontSize:13,fontWeight:600,flexShrink:0,padding:'2px 4px' }}>
|
|
|
|
|
{showAddType ? 'Cancel' : '+ Type'}
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{showAddType && (
|
|
|
|
|
<div style={{ marginTop:10, padding:'12px', background:'var(--background)', borderRadius:'var(--radius)', border:'1px solid var(--border)' }}>
|
|
|
|
|
<input value={newTypeName} onChange={e=>setNewTypeName(e.target.value)} placeholder="Type name…" style={{ width:'100%', padding:'8px 10px', border:'1px solid var(--border)', borderRadius:'var(--radius)', fontSize:14, marginBottom:8, boxSizing:'border-box', background:'var(--surface)', color:'var(--text-primary)' }}/>
|
|
|
|
|
<div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
|
|
|
|
|
<label style={{ fontSize:13, color:'var(--text-tertiary)', flexShrink:0 }}>Colour</label>
|
|
|
|
|
<input type="color" value={newTypeColour} onChange={e=>setNewTypeColour(e.target.value)} style={{ flex:1, height:32, border:'1px solid var(--border)', borderRadius:4, padding:2 }}/>
|
|
|
|
|
</div>
|
|
|
|
|
<button onClick={createEventType} disabled={savingType||!newTypeName.trim()} style={{ width:'100%', padding:'9px', background:'var(--primary)', color:'white', border:'none', borderRadius:'var(--radius)', fontSize:14, fontWeight:600, cursor:'pointer', opacity:savingType?0.6:1 }}>{savingType?'Creating…':'Create Type'}</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
|
|
|
|
|
<select value={typeId} onChange={e=>setTypeId(e.target.value)} style={{ background:'transparent',border:'none',fontSize:15,color:'var(--text-primary)',flex:1,outline:'none' }}>
|
|
|
|
|
{localTypes.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
|
|
|
|
|
</select>
|
|
|
|
|
{isToolManager && (
|
|
|
|
|
<button onClick={()=>setShowAddType(true)} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--primary)',fontSize:13,fontWeight:600,flexShrink:0,padding:'2px 4px' }}>
|
|
|
|
|
+ Type
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</MobileRow>
|
|
|
|
|
@@ -389,6 +377,33 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
|
|
|
|
|
{showStartDate && <CalendarPicker value={sd} onChange={v=>{setSd(v);setShowStartDate(false);}} onClose={()=>setShowStartDate(false)}/>}
|
|
|
|
|
{showEndDate && <CalendarPicker value={ed} onChange={v=>{setEd(v);setShowEndDate(false);}} onClose={()=>setShowEndDate(false)}/>}
|
|
|
|
|
{showRecurrence && <RecurrenceSheet value={recRule} onChange={v=>{setRecRule(v);}} onClose={()=>setShowRecurrence(false)}/>}
|
|
|
|
|
{showAddType && (
|
|
|
|
|
<div style={{ position:'fixed',inset:0,zIndex:200,display:'flex',alignItems:'flex-end' }} onClick={e=>e.target===e.currentTarget&&setShowAddType(false)}>
|
|
|
|
|
<div style={{ width:'100%',background:'var(--surface)',borderRadius:'16px 16px 0 0',padding:20,boxShadow:'0 -4px 20px rgba(0,0,0,0.2)' }}>
|
|
|
|
|
<div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16 }}>
|
|
|
|
|
<span style={{ fontWeight:700,fontSize:16 }}>New Event Type</span>
|
|
|
|
|
<button onClick={()=>{setShowAddType(false);setNewTypeName('');setNewTypeColour('#6366f1');}} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--text-secondary)',fontSize:20,lineHeight:1 }}>✕</button>
|
|
|
|
|
</div>
|
|
|
|
|
<input
|
|
|
|
|
autoFocus
|
|
|
|
|
value={newTypeName}
|
|
|
|
|
onChange={e=>setNewTypeName(e.target.value)}
|
|
|
|
|
onKeyDown={e=>e.key==='Enter'&&createEventType()}
|
|
|
|
|
placeholder="Type name…"
|
|
|
|
|
style={{ width:'100%',padding:'12px 14px',border:'1px solid var(--border)',borderRadius:'var(--radius)',fontSize:16,marginBottom:12,boxSizing:'border-box',background:'var(--background)',color:'var(--text-primary)' }}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ display:'flex',alignItems:'center',gap:12,marginBottom:16 }}>
|
|
|
|
|
<label style={{ fontSize:14,color:'var(--text-tertiary)',flexShrink:0 }}>Colour</label>
|
|
|
|
|
<input type="color" value={newTypeColour} onChange={e=>setNewTypeColour(e.target.value)} style={{ flex:1,height:40,border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:3,cursor:'pointer' }}/>
|
|
|
|
|
</div>
|
|
|
|
|
<button
|
|
|
|
|
onClick={createEventType}
|
|
|
|
|
disabled={savingType||!newTypeName.trim()}
|
|
|
|
|
style={{ width:'100%',padding:'14px',background:'var(--primary)',color:'white',border:'none',borderRadius:'var(--radius)',fontSize:16,fontWeight:700,cursor:'pointer',opacity:savingType?0.6:1 }}
|
|
|
|
|
>{savingType?'Creating…':'Create Type'}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|