82 lines
7.3 KiB
JavaScript
82 lines
7.3 KiB
JavaScript
import React from 'react'
|
|
import { useForm, usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
|
|
export default function StudioGroupEventEditor() {
|
|
const { props } = usePage()
|
|
const eventRecord = props.event || null
|
|
const form = useForm({
|
|
title: eventRecord?.title || '',
|
|
summary: eventRecord?.summary || '',
|
|
description: eventRecord?.description || '',
|
|
event_type: eventRecord?.event_type || props.typeOptions?.[0]?.value || 'launch',
|
|
visibility: eventRecord?.visibility || props.visibilityOptions?.[0]?.value || 'public',
|
|
status: eventRecord?.status || props.statusOptions?.[0]?.value || 'draft',
|
|
start_at: eventRecord?.start_at ? eventRecord.start_at.slice(0, 16) : '',
|
|
end_at: eventRecord?.end_at ? eventRecord.end_at.slice(0, 16) : '',
|
|
timezone: eventRecord?.timezone || 'UTC',
|
|
location: eventRecord?.location || '',
|
|
external_url: eventRecord?.external_url || '',
|
|
linked_project_id: eventRecord?.linked_project?.id || '',
|
|
linked_collection_id: eventRecord?.linked_collection?.id || '',
|
|
linked_challenge_id: eventRecord?.linked_challenge?.id || '',
|
|
is_featured: Boolean(eventRecord?.is_featured),
|
|
cover_file: null,
|
|
})
|
|
|
|
const submit = (event) => {
|
|
event.preventDefault()
|
|
const options = { forceFormData: true, preserveScroll: true }
|
|
if (props.updateUrl) {
|
|
form.post(props.updateUrl, { ...options, _method: 'patch' })
|
|
return
|
|
}
|
|
form.post(props.storeUrl, options)
|
|
}
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
|
|
<form onSubmit={submit} className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="grid gap-4">
|
|
<input value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} placeholder="Event title" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<textarea value={form.data.summary} onChange={(event) => form.setData('summary', event.target.value)} placeholder="Short summary" rows={3} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<textarea value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} placeholder="Event description" rows={8} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<select value={form.data.event_type} onChange={(event) => form.setData('event_type', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">{(props.typeOptions || []).map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select>
|
|
<select value={form.data.visibility} onChange={(event) => form.setData('visibility', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">{(props.visibilityOptions || []).map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select>
|
|
<select value={form.data.status} onChange={(event) => form.setData('status', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">{(props.statusOptions || []).map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<input type="datetime-local" value={form.data.start_at} onChange={(event) => form.setData('start_at', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<input type="datetime-local" value={form.data.end_at} onChange={(event) => form.setData('end_at', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<input value={form.data.timezone} onChange={(event) => form.setData('timezone', event.target.value)} placeholder="Timezone" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<input value={form.data.location} onChange={(event) => form.setData('location', event.target.value)} placeholder="Location" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</div>
|
|
<input value={form.data.external_url} onChange={(event) => form.setData('external_url', event.target.value)} placeholder="External link" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<select value={form.data.linked_project_id} onChange={(event) => form.setData('linked_project_id', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
<option value="">No linked project</option>
|
|
{(props.projectOptions || []).map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
|
|
</select>
|
|
<select value={form.data.linked_collection_id} onChange={(event) => form.setData('linked_collection_id', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
<option value="">No linked collection</option>
|
|
{(props.collectionOptions || []).map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
|
|
</select>
|
|
<select value={form.data.linked_challenge_id} onChange={(event) => form.setData('linked_challenge_id', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
<option value="">No linked challenge</option>
|
|
{(props.challengeOptions || []).map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
|
|
</select>
|
|
</div>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white"><input type="checkbox" checked={form.data.is_featured} onChange={(event) => form.setData('is_featured', event.target.checked)} /> Featured event</label>
|
|
<input type="file" accept="image/*" onChange={(event) => form.setData('cover_file', event.target.files?.[0] || null)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</div>
|
|
<button type="submit" className="mt-6 rounded-full border border-white/10 bg-white/[0.05] px-5 py-2.5 text-sm font-semibold text-white">Save event</button>
|
|
</form>
|
|
{props.publishUrl ? <form onSubmit={(event) => { event.preventDefault(); form.post(props.publishUrl, { preserveScroll: true }) }} className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6"><button type="submit" className="rounded-full border border-white/10 bg-white/[0.05] px-5 py-2.5 text-sm font-semibold text-white">Publish event</button></form> : null}
|
|
</div>
|
|
</StudioLayout>
|
|
)
|
|
} |