rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.9.69 updated UI layout and styles

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-18 11:33:14 -04:00
parent efaec151c6
commit 19932d9ca8
6 changed files with 73 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/MobileEventForm.jsx
View File

@@ -189,6 +189,11 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
const def = selectedDate ? selectedDate.toISOString().slice(0,10) : new Date().toISOString().slice(0,10);
const [title, setTitle] = useState(event?.title||'');
const [typeId, setTypeId] = useState(event?.event_type_id ? String(event.event_type_id) : '');
const [localTypes, setLocalTypes] = useState(eventTypes);
const [showAddType, setShowAddType] = useState(false);
const [newTypeName, setNewTypeName] = useState('');
const [newTypeColour, setNewTypeColour] = useState('#6366f1');
const [savingType, setSavingType] = useState(false);
const [sd, setSd] = useState(event ? toDateIn(event.start_at) : def);
const [st, setSt] = useState(event ? toTimeIn(event.start_at) : '09:00');
const [ed, setEd] = useState(event ? toDateIn(event.end_at) : def);
@@ -208,21 +213,34 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
const [showRecurrence, setShowRecurrence] = useState(false);
const [showGroups, setShowGroups] = useState(false);
// Auto-set typeId to default event type
// Sync and initialise typeId
useEffect(() => {
setLocalTypes(eventTypes);
if(!event && typeId==='' && eventTypes.length>0) {
const def = eventTypes.find(t=>t.is_default) || eventTypes[0];
if(def) setTypeId(String(def.id));
}
}, [eventTypes]);
const createEventType = async () => {
if(!newTypeName.trim()) return;
setSavingType(true);
try {
const r = await api.createEventType({ name: newTypeName.trim(), colour: newTypeColour });
setLocalTypes(prev => [...prev, r.eventType]);
setTypeId(String(r.eventType.id));
setNewTypeName(''); setShowAddType(false);
} catch(e) { toast(e.message, 'error'); }
finally { setSavingType(false); }
};
// When start date changes, match end date
useEffect(() => { if(!event) setEd(sd); }, [sd]);
// When type or start time changes, auto-set end time
useEffect(() => {
if(!sd||!st) return;
const typ = eventTypes.find(t=>t.id===Number(typeId));
const typ = localTypes.find(t=>t.id===Number(typeId));
const dur = typ?.default_duration_hrs||1;
const start = buildISO(sd,st);
if(start && !event) { setEd(toDateIn(addHours(start,dur))); setEt(toTimeIn(addHours(start,dur))); }
@@ -262,8 +280,28 @@ 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">
<select value={typeId} onChange={e=>setTypeId(e.target.value)} style={{ background:'transparent',border:'none',fontSize:15,color:'var(--text-primary)',width:'100%',outline:'none' }}>
{eventTypes.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
<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>
</select>
</MobileRow>