Skip to content

🐛 use searchable event picker when editing a status #5158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MrKrisKrisu merged 1 commit into from
Oct 17, 2026
Merged

🐛 use searchable event picker when editing a status #5158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions resources/tailwind-app/components/Checkin/EventPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Api, EventResource } from '../../../types/Api.gen';
const props = defineProps<{
modelValue?: EventResource | null;
timestamp?: string;
outline?: boolean;
}>();

const emit = defineEmits<{
Expand Down Expand Up @@ -49,11 +50,14 @@ onMounted(fetchEvents);
<button
type="button"
class="btn btn-sm gap-1"
:class="modelValue ? 'btn-primary' : 'btn-ghost'"
:class="outline ? 'btn-outline' : modelValue ? 'btn-primary' : 'btn-ghost'"
@click="open = !open"
>
<Calendar class="w-4 h-4" />
<span v-if="modelValue" class="max-w-[10rem] truncate text-xs">{{ modelValue.name }}</span>
<span v-if="outline" class="max-w-[10rem] truncate">
{{ modelValue?.name ?? trans('events.no-event-dropdown') }}
</span>
<span v-else-if="modelValue" class="max-w-[10rem] truncate text-xs">{{ modelValue.name }}</span>
</button>

<div
Expand Down Expand Up @@ -96,9 +100,9 @@ onMounted(fetchEvents);
<p>{{ trans('stationboard.events-none') }}</p>
<p class="mt-1">
{{ trans('stationboard.events-propose') }}
<router-link :to="{ name: 'event-list' }" target="_blank" class="link link-primary"
>traewelling.de/events</router-link
>
<router-link :to="{ name: 'contribute-events-suggest' }" target="_blank" class="link link-primary">
{{ trans('events.suggest.card_button') }}
</router-link>
</p>
</div>
</div>
Expand Down
74 changes: 12 additions & 62 deletions resources/tailwind-app/components/Status/StatusEditModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script setup lang="ts">
import { Briefcase, Building2, Calendar, User } from '@lucide/vue';
import { Briefcase, Building2, User } from '@lucide/vue';
import { trans } from 'laravel-vue-i18n';
import { DateTime as LuxonDateTime } from 'luxon';
import { Notyf } from 'notyf';
import { inject, ref, watch } from 'vue';
import { computed, inject, ref, watch } from 'vue';
import {
Api,
Business,
Expand All @@ -15,6 +15,7 @@ import {
import { getDepartureForStatus } from '../../../vue/helpers/DateTimeHelper';
import { useActiveCheckin } from '../../../vue/stores/activeCheckin';
import { ALL_VISIBILITIES, VISIBILITY_ICONS } from '../../helpers/visibility';
import EventPicker from '../Checkin/EventPicker.vue';

const props = defineProps<{
open: boolean;
Expand All @@ -36,8 +37,9 @@ const manualArrival = ref('');
const body = ref('');
const business = ref<Business>(Business.Value0);
const visibility = ref<StatusVisibility>(StatusVisibility.Value0);
const eventId = ref<number | null>(null);
const events = ref<EventResource[]>([]);
const selectedEvent = ref<EventResource | null>(null);

const departureTimestamp = computed(() => getDepartureForStatus(props.status).toISO() ?? undefined);

function isoToDatetimeLocal(iso: string | null | undefined): string {
if (!iso) return '';
Expand All @@ -48,21 +50,13 @@ function closeDropdown() {
(document.activeElement as HTMLElement)?.blur();
}

async function loadData() {
function loadData() {
body.value = props.status.body ?? '';
business.value = props.status.business ?? Business.Value0;
visibility.value = props.status.visibility ?? StatusVisibility.Value0;
eventId.value = props.status.event?.id ?? null;
selectedEvent.value = props.status.event ?? null;
manualDeparture.value = isoToDatetimeLocal(props.status.checkin.manualDeparture);
manualArrival.value = isoToDatetimeLocal(props.status.checkin.manualArrival);

try {
const dep = getDepartureForStatus(props.status).toISO() ?? '';
const evRes = await api.events.getEvents({ timestamp: dep });
events.value = evRes.data.data ?? [];
} catch {
events.value = [];
}
}

watch(
Expand All @@ -80,7 +74,7 @@ async function save() {
body: body.value || null,
business: business.value,
visibility: visibility.value,
eventId: eventId.value,
eventId: selectedEvent.value?.id ?? null,
manualDeparture: manualDeparture.value ? LuxonDateTime.fromISO(manualDeparture.value).toISO() : null,
manualArrival: manualArrival.value ? LuxonDateTime.fromISO(manualArrival.value).toISO() : null,
} as StatusUpdateBody;
Expand Down Expand Up @@ -131,8 +125,10 @@ async function save() {
</div>
</div>

<!-- Business, Visibility, Event -->
<!-- Event, Business, Visibility -->
<div class="flex flex-wrap gap-2 mb-4">
<EventPicker v-if="open" v-model="selectedEvent" :timestamp="departureTimestamp" outline />

<!-- Business dropdown -->
<div class="dropdown">
<button tabindex="0" class="btn btn-sm btn-outline gap-1">
Expand Down Expand Up @@ -227,52 +223,6 @@ async function save() {
</li>
</ul>
</div>

<!-- Event dropdown -->
<div class="dropdown">
<button tabindex="0" class="btn btn-sm btn-outline gap-1">
<Calendar class="inline-block size-4" />
{{
eventId
? (events.find((e) => e.id === eventId)?.name ?? '…')
: trans('events.no-event-dropdown')
}}
</button>
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box z-10 w-72 p-2 shadow-lg border border-base-200 max-h-60 overflow-y-auto"
>
<li
@click="
eventId = null;
closeDropdown();
"
>
<a :class="eventId === null ? 'active' : ''">
<Calendar class="w-4 h-4 shrink-0" />
{{ trans('events.no-event-dropdown') }}
</a>
</li>
<li
v-for="e in events"
:key="e.id"
@click="
eventId = e.id;
closeDropdown();
"
>
<a :class="eventId === e.id ? 'active' : ''">
<Calendar class="w-4 h-4 shrink-0" />
<span>
{{ e.name }}
<span v-if="e.hashtag" class="block text-xs text-base-content/50"
>#{{ e.hashtag }}</span
>
</span>
</a>
</li>
</ul>
</div>
</div>

<div class="modal-action">
Expand Down
Loading