80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref} from "vue";
|
|
import {Flight, User} from "@/Types/types";
|
|
import {router} from "@inertiajs/vue3";
|
|
|
|
defineProps<{
|
|
profileUser: User
|
|
flight: Flight
|
|
canEdit: boolean
|
|
referrer?: "departure-board" | "boarding-passes"
|
|
}>()
|
|
|
|
const deleting = ref(false)
|
|
function editRoute(id: number) {
|
|
return route('flights.edit', { flight: id })
|
|
}
|
|
|
|
const flightToDelete = ref<Flight | null>(null)
|
|
const showDeleteDialog = computed({
|
|
get: () => flightToDelete.value !== null,
|
|
set: (val) => { if (!val) flightToDelete.value = null }
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-menu>
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
v-bind="menuProps"
|
|
icon="mdi-dots-horizontal"
|
|
variant="text"
|
|
size="small"
|
|
density="compact"
|
|
/>
|
|
</template>
|
|
<v-list density="compact" bg-color="#1a1e2e">
|
|
<v-list-item
|
|
prepend-icon="mdi-magnify"
|
|
title="View Details"
|
|
:href="route('profile.flight', { userFlight: flight.id, user: profileUser.name })"
|
|
/>
|
|
<v-list-item v-if="canEdit"
|
|
prepend-icon="mdi-pencil-outline"
|
|
title="Edit"
|
|
:href="editRoute(flight.id)"
|
|
/>
|
|
<v-list-item v-if="canEdit"
|
|
prepend-icon="mdi-trash-can-outline"
|
|
title="Delete"
|
|
@click="flightToDelete = flight"
|
|
/>
|
|
|
|
</v-list>
|
|
</v-menu>
|
|
<v-dialog v-if="canEdit" v-model="showDeleteDialog" max-width="400">
|
|
<v-card title="Delete Flight">
|
|
<v-card-text>Are you sure you want to delete this flight?</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn v-if="!deleting" @click="flightToDelete = null">Cancel</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
:loading="deleting"
|
|
@click="deleting = true; router.delete(
|
|
route('flights.delete', { flight: flightToDelete!.id , referrer: referrer ?? 'departure-board'}),
|
|
{ onFinish: () => { deleting = false; flightToDelete = null } }
|
|
)"
|
|
>
|
|
Delete
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|