Ui fixes #16
@@ -0,0 +1,53 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import GlassTooltip from '@/Components/FlightsGoneBy/GlassTooltip.vue'
|
||||||
|
import type { Anchor } from 'vuetify'
|
||||||
|
|
||||||
|
withDefaults(defineProps<{
|
||||||
|
label?: string
|
||||||
|
location?: Anchor
|
||||||
|
}>(), {
|
||||||
|
label: 'Missing something?',
|
||||||
|
})
|
||||||
|
|
||||||
|
defineSlots<{
|
||||||
|
default(): any
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<GlassTooltip :location="location ?? 'top'" :open-delay="150">
|
||||||
|
<template #activator="{ props: activatorProps }">
|
||||||
|
<button
|
||||||
|
v-bind="activatorProps"
|
||||||
|
type="button"
|
||||||
|
class="missing-entity-link"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #default>
|
||||||
|
<slot />
|
||||||
|
</template>
|
||||||
|
</GlassTooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.missing-entity-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.missing-entity-link:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -8,6 +8,7 @@ import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
|
|||||||
import type {SeatType, FlightReason, FlightClass, CrewType, SharedProps} from '@/Types/types'
|
import type {SeatType, FlightReason, FlightClass, CrewType, SharedProps} from '@/Types/types'
|
||||||
import { ref, watch, computed, onMounted, nextTick } from 'vue'
|
import { ref, watch, computed, onMounted, nextTick } from 'vue'
|
||||||
import { VTimePicker, VDatePicker } from 'vuetify/components'
|
import { VTimePicker, VDatePicker } from 'vuetify/components'
|
||||||
|
import MissingEntityLink from "@/Components/FlightsGoneBy/Tooltips/MissingEntityLink.vue";
|
||||||
|
|
||||||
defineOptions({ layout: MainLayout })
|
defineOptions({ layout: MainLayout })
|
||||||
const page = usePage<SharedProps>().props
|
const page = usePage<SharedProps>().props
|
||||||
@@ -759,6 +760,10 @@ function commitArrivalTimeInput() {
|
|||||||
:prefilled-options="fromOptionsData"
|
:prefilled-options="fromOptionsData"
|
||||||
:error-messages="submitForm.errors.from_id"
|
:error-messages="submitForm.errors.from_id"
|
||||||
/>
|
/>
|
||||||
|
<MissingEntityLink label="Missing airport?">
|
||||||
|
<p>If you can't find an airport we will be happy to add it, but you'll have to contact support with details of the airport.</p>
|
||||||
|
<p>Unfortunately you won't be able to proceed with adding this flight until the airport has been added.</p>
|
||||||
|
</MissingEntityLink>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
@@ -783,6 +788,10 @@ function commitArrivalTimeInput() {
|
|||||||
:prefilled-options="airlineOptionsData"
|
:prefilled-options="airlineOptionsData"
|
||||||
:error-messages="submitForm.errors.airline_id"
|
:error-messages="submitForm.errors.airline_id"
|
||||||
/>
|
/>
|
||||||
|
<MissingEntityLink label="Missing airline? No problem">
|
||||||
|
<p>If you can't find the airline you flew with, just leave it blank but make sure to add a valid flight number. We will be notified of flights with missing airlines and add the airline shortly.</p>
|
||||||
|
<p>If you don't know your flight number or a missing airline hasn't been added within 48 hours, please contact support.</p>
|
||||||
|
</MissingEntityLink>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user