refactor: polish shift dialog with Vuexy-style alert and sticky footer
Made-with: Cursor
This commit is contained in:
@@ -71,14 +71,18 @@ const form = ref({
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
/** Single accordion panel id for time-slot help; `undefined` = collapsed (saves vertical space). */
|
||||
const timeSlotHelpPanel = ref<string | undefined>(undefined)
|
||||
/** Time-slot hierarchy uitleg (ingeklapt = minder visuele ruis). */
|
||||
const timeSlotHelpOpen = ref(false)
|
||||
|
||||
watch(modelValue, (open) => {
|
||||
if (open)
|
||||
timeSlotHelpPanel.value = undefined
|
||||
timeSlotHelpOpen.value = false
|
||||
})
|
||||
|
||||
function toggleTimeSlotHelp() {
|
||||
timeSlotHelpOpen.value = !timeSlotHelpOpen.value
|
||||
}
|
||||
|
||||
// Populate form when editing
|
||||
watch(
|
||||
() => props.shift,
|
||||
@@ -204,74 +208,103 @@ function onSubmit() {
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="640"
|
||||
scrollable
|
||||
@after-leave="!isEditing && resetForm()"
|
||||
>
|
||||
<VCard rounded="lg">
|
||||
<VCardItem class="py-4">
|
||||
<VCardTitle class="text-h6">
|
||||
<VCard
|
||||
class="d-flex flex-column overflow-hidden"
|
||||
max-height="min(90vh, 880px)"
|
||||
rounded="lg"
|
||||
>
|
||||
<VCardItem class="flex-shrink-0 pb-3 pt-5 px-6">
|
||||
<VCardTitle class="text-h6 ps-0">
|
||||
{{ isEditing ? 'Shift bewerken' : 'Shift toevoegen' }}
|
||||
</VCardTitle>
|
||||
<VCardSubtitle
|
||||
v-if="section"
|
||||
class="text-body-2 text-high-emphasis opacity-100 mt-1"
|
||||
class="text-body-2 mt-2 ps-0 d-flex align-center flex-wrap gap-2"
|
||||
>
|
||||
<span>{{ section.name }}</span>
|
||||
<span class="text-high-emphasis">{{ section.name }}</span>
|
||||
<VChip
|
||||
v-if="section.type === 'cross_event'"
|
||||
size="x-small"
|
||||
size="small"
|
||||
color="info"
|
||||
variant="tonal"
|
||||
class="ms-2"
|
||||
>
|
||||
festival-breed
|
||||
</VChip>
|
||||
<span
|
||||
v-else-if="isSubEvent && eventDetail?.name"
|
||||
class="text-medium-emphasis"
|
||||
> · {{ eventDetail.name }}</span>
|
||||
>· {{ eventDetail.name }}</span>
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VDivider />
|
||||
<VDivider class="flex-shrink-0" />
|
||||
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
class="d-flex flex-column flex-grow-1"
|
||||
style="min-height: 0"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VCardText class="pt-5">
|
||||
<VExpansionPanels
|
||||
<VCardText
|
||||
class="flex-grow-1 overflow-y-auto px-6 py-5"
|
||||
style="min-height: 0"
|
||||
>
|
||||
<VAlert
|
||||
v-if="showInfoTooltip && tooltipText"
|
||||
v-model="timeSlotHelpPanel"
|
||||
class="mb-6 border rounded-lg"
|
||||
variant="accordion"
|
||||
elevation="0"
|
||||
variant="tonal"
|
||||
type="info"
|
||||
border="start"
|
||||
border-color="info"
|
||||
density="comfortable"
|
||||
:icon="false"
|
||||
class="mb-6"
|
||||
>
|
||||
<VExpansionPanel value="time-slot-help">
|
||||
<VExpansionPanelTitle class="py-3 min-h-0">
|
||||
<div class="d-flex align-center text-start">
|
||||
<div class="d-flex align-start gap-3">
|
||||
<VIcon
|
||||
icon="tabler-info-circle"
|
||||
color="info"
|
||||
size="22"
|
||||
class="mt-1 flex-shrink-0"
|
||||
/>
|
||||
<div class="flex-grow-1 min-width-0">
|
||||
<VBtn
|
||||
variant="text"
|
||||
block
|
||||
class="d-flex justify-space-between align-center px-0 text-high-emphasis"
|
||||
height="auto"
|
||||
min-height="0"
|
||||
@click="toggleTimeSlotHelp"
|
||||
>
|
||||
<span class="text-body-1 font-weight-medium text-start me-2">
|
||||
Tijdsloten in dit evenement
|
||||
</span>
|
||||
<VIcon
|
||||
icon="tabler-info-circle"
|
||||
color="info"
|
||||
size="22"
|
||||
class="me-3 flex-shrink-0"
|
||||
:icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
|
||||
size="20"
|
||||
class="text-medium-emphasis flex-shrink-0"
|
||||
/>
|
||||
<span class="text-body-1 font-weight-medium">Tijdsloten in dit evenement</span>
|
||||
</div>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText class="text-body-2">
|
||||
<p class="mb-0">
|
||||
{{ tooltipText.main }}
|
||||
</p>
|
||||
<p class="text-caption text-medium-emphasis mb-0 mt-3">
|
||||
<span class="font-weight-medium text-high-emphasis">Tip:</span>
|
||||
{{ tooltipText.tip }}
|
||||
</p>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</VBtn>
|
||||
<VExpandTransition>
|
||||
<div
|
||||
v-show="timeSlotHelpOpen"
|
||||
class="text-body-2 mt-3"
|
||||
>
|
||||
<p class="mb-2">
|
||||
{{ tooltipText.main }}
|
||||
</p>
|
||||
<p class="text-caption text-medium-emphasis mb-0">
|
||||
<span class="font-weight-medium text-high-emphasis">Tip:</span>
|
||||
{{ tooltipText.tip }}
|
||||
</p>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</div>
|
||||
</div>
|
||||
</VAlert>
|
||||
|
||||
<p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
|
||||
<p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
|
||||
Tijd & rol
|
||||
</p>
|
||||
<VRow>
|
||||
@@ -318,6 +351,9 @@ function onSubmit() {
|
||||
v-else
|
||||
type="info"
|
||||
variant="tonal"
|
||||
border="start"
|
||||
border-color="info"
|
||||
density="comfortable"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-2">
|
||||
<span>Maak eerst een time slot aan</span>
|
||||
@@ -344,9 +380,9 @@ function onSubmit() {
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VDivider class="my-5" />
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
|
||||
<p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-2">
|
||||
Tijden (optioneel)
|
||||
</p>
|
||||
<p class="text-caption text-medium-emphasis mb-4">
|
||||
@@ -361,8 +397,7 @@ function onSubmit() {
|
||||
v-model="form.report_time"
|
||||
label="Rapporttijd"
|
||||
type="time"
|
||||
hint="Aanwezig vanaf"
|
||||
persistent-hint
|
||||
hide-details="auto"
|
||||
:error-messages="errors.report_time"
|
||||
/>
|
||||
</VCol>
|
||||
@@ -374,8 +409,7 @@ function onSubmit() {
|
||||
v-model="form.actual_start_time"
|
||||
label="Starttijd"
|
||||
type="time"
|
||||
hint="Leeg = time slot"
|
||||
persistent-hint
|
||||
hide-details="auto"
|
||||
:error-messages="errors.actual_start_time"
|
||||
/>
|
||||
</VCol>
|
||||
@@ -387,16 +421,15 @@ function onSubmit() {
|
||||
v-model="form.actual_end_time"
|
||||
label="Eindtijd"
|
||||
type="time"
|
||||
hint="Leeg = time slot"
|
||||
persistent-hint
|
||||
hide-details="auto"
|
||||
:error-messages="errors.actual_end_time"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VDivider class="my-5" />
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
|
||||
<p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
|
||||
Capaciteit
|
||||
</p>
|
||||
<VRow>
|
||||
@@ -419,19 +452,21 @@ function onSubmit() {
|
||||
>
|
||||
<AppTextField
|
||||
v-model.number="form.slots_open_for_claiming"
|
||||
label="Open voor vrijwilligers (claimen)"
|
||||
label="Open voor claimen"
|
||||
type="number"
|
||||
min="0"
|
||||
:max="form.slots_total"
|
||||
hint="Vrijwilligers kunnen zelf boeken tot dit maximum"
|
||||
persistent-hint
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.slots_open_for_claiming"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VDivider class="my-5" />
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
|
||||
<p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
|
||||
Opties
|
||||
</p>
|
||||
<VRow>
|
||||
@@ -442,9 +477,9 @@ function onSubmit() {
|
||||
<VSwitch
|
||||
v-model="form.is_lead_role"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
label="Leidinggevende rol"
|
||||
hint="Coördinatie / verantwoordelijke"
|
||||
persistent-hint
|
||||
hide-details
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
@@ -454,16 +489,19 @@ function onSubmit() {
|
||||
<VSwitch
|
||||
v-model="form.allow_overlap"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
label="Overlap toegestaan"
|
||||
hint="Zelfde tijdvak, meerdere shifts voor één persoon"
|
||||
persistent-hint
|
||||
hide-details
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<p class="text-caption text-medium-emphasis mb-0 mt-2">
|
||||
Leiding: coördinatie of verantwoordelijke. Overlap: dezelfde persoon mag meerdere shifts in hetzelfde tijdvak.
|
||||
</p>
|
||||
|
||||
<VDivider class="my-5" />
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
|
||||
<p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
|
||||
Documentatie & status
|
||||
</p>
|
||||
<VRow>
|
||||
@@ -487,9 +525,9 @@ function onSubmit() {
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
<VDivider class="flex-shrink-0" />
|
||||
|
||||
<VCardActions class="px-6 py-4">
|
||||
<VCardActions class="flex-shrink-0 px-6 py-4 bg-surface">
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
|
||||
Reference in New Issue
Block a user