Allowed filters in the url
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Airline, Alliance, Flight, RegionRange, FlightRange, FlightScope } from '@/Types/types'
|
import type { Airline, Alliance, Flight, RegionRange, FlightRange, FlightScope } from '@/Types/types'
|
||||||
import { ref, watch } from 'vue'
|
import { reactive, ref, watch, onMounted, nextTick } from 'vue'
|
||||||
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue"
|
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@@ -30,6 +30,56 @@ const emit = defineEmits<{
|
|||||||
}]
|
}]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
// ── Filter registry ──────────────────────────────────────────────────────────
|
||||||
|
//
|
||||||
|
// This is the single source of truth for every filter's identity. To add a
|
||||||
|
// new filter:
|
||||||
|
// 1. Add one entry here (name = the key used in `filters` + the URL param,
|
||||||
|
// emitKey = the key expected by the `change` event, kind = how to parse
|
||||||
|
// values coming back out of the URL).
|
||||||
|
// 2. Add a <v-select> in the template with :name="'yourName'" and
|
||||||
|
// v-model="filters.yourName" (initialise it in `filters` below, or just
|
||||||
|
// let step 1 do it for you since `filters` is derived from this list).
|
||||||
|
//
|
||||||
|
// Nothing else needs to know about the new filter — URL loading, URL syncing,
|
||||||
|
// and the emitted payload are all generic over this list.
|
||||||
|
|
||||||
|
type FilterKind = 'number' | 'string'
|
||||||
|
|
||||||
|
interface FilterDef {
|
||||||
|
name: string // key in `filters`, and the URL query param name
|
||||||
|
emitKey: string // key in the payload sent via the `change` event
|
||||||
|
kind: FilterKind // how to coerce values parsed back out of the URL
|
||||||
|
}
|
||||||
|
|
||||||
|
const FILTER_DEFS: FilterDef[] = [
|
||||||
|
{ name: 'year', emitKey: 'years', kind: 'number' },
|
||||||
|
{ name: 'airline', emitKey: 'airlines', kind: 'number' },
|
||||||
|
{ name: 'alliance', emitKey: 'alliances', kind: 'number' },
|
||||||
|
{ name: 'country', emitKey: 'countries', kind: 'string' },
|
||||||
|
{ name: 'continent', emitKey: 'continents', kind: 'string' },
|
||||||
|
{ name: 'flightClass', emitKey: 'flightClasses', kind: 'number' },
|
||||||
|
{ name: 'crewType', emitKey: 'crewTypes', kind: 'number' },
|
||||||
|
{ name: 'flightScope', emitKey: 'flightScopes', kind: 'string' },
|
||||||
|
{ name: 'flightRange', emitKey: 'flightRanges', kind: 'string' },
|
||||||
|
{ name: 'regionRange', emitKey: 'regionRanges', kind: 'string' },
|
||||||
|
{ name: 'flightReason', emitKey: 'flightReasons', kind: 'number' },
|
||||||
|
{ name: 'seatType', emitKey: 'seatTypes', kind: 'number' },
|
||||||
|
{ name: 'manufacturer', emitKey: 'manufacturers', kind: 'string' },
|
||||||
|
{ name: 'aircraftModel', emitKey: 'aircraftModels', kind: 'number' },
|
||||||
|
{ name: 'engineType', emitKey: 'engineTypes', kind: 'string' },
|
||||||
|
{ name: 'engineCount', emitKey: 'engineCounts', kind: 'number' },
|
||||||
|
{ name: 'airportRegion', emitKey: 'airportRegions', kind: 'number' },
|
||||||
|
{ name: 'otherUsers', emitKey: 'otherUsers', kind: 'string' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// Single reactive bag of filter state, one array per FILTER_DEFS entry.
|
||||||
|
// `filters.year`, `filters.airline`, etc. This is what every v-select
|
||||||
|
// v-models against.
|
||||||
|
const filters = reactive<Record<string, any[]>>(
|
||||||
|
Object.fromEntries(FILTER_DEFS.map(d => [d.name, []])),
|
||||||
|
)
|
||||||
|
|
||||||
// ── Available options ─────────────────────────────────────────────────────────
|
// ── Available options ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
type AirlineData = { id: number; name: string; airline: Airline }
|
type AirlineData = { id: number; name: string; airline: Airline }
|
||||||
@@ -163,59 +213,87 @@ function buildOptions(flights: Flight[]) {
|
|||||||
|
|
||||||
const availableOptions = buildOptions(props.flights)
|
const availableOptions = buildOptions(props.flights)
|
||||||
|
|
||||||
// ── Filter state ──────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
const selectedYears = ref<number[]>([])
|
|
||||||
const selectedAirlines = ref<number[]>([])
|
|
||||||
const selectedAlliances = ref<number[]>([])
|
|
||||||
const selectedCountries = ref<string[]>([])
|
|
||||||
const selectedContinents = ref<string[]>([])
|
|
||||||
const selectedFlightClasses = ref<number[]>([])
|
|
||||||
const selectedCrewTypes = ref<number[]>([])
|
|
||||||
const selectedFlightScopes = ref<FlightScope[]>([])
|
|
||||||
const selectedFlightRanges = ref<FlightRange[]>([])
|
|
||||||
const selectedRegionRanges = ref<RegionRange[]>([])
|
|
||||||
const selectedFlightReasons = ref<number[]>([])
|
|
||||||
const selectedSeatTypes = ref<number[]>([])
|
|
||||||
const selectedManufacturers = ref<string[]>([])
|
|
||||||
const selectedAircraftModels = ref<number[]>([])
|
|
||||||
const selectedEngineTypes = ref<string[]>([])
|
|
||||||
const selectedEngineCounts = ref<number[]>([])
|
|
||||||
const selectedAirportRegions = ref<number[]>([])
|
|
||||||
const selectedOtherUsers = ref<string[]>([])
|
|
||||||
|
|
||||||
// When selected countries change, drop any selected regions that no longer
|
// When selected countries change, drop any selected regions that no longer
|
||||||
// belong to any of the selected countries.
|
// belong to any of the selected countries.
|
||||||
watch(selectedCountries, (countries) => {
|
watch(() => filters.country, (countries) => {
|
||||||
if (countries.length === 0) return
|
if (countries.length === 0) return
|
||||||
selectedAirportRegions.value = selectedAirportRegions.value.filter(regionId => {
|
filters.airportRegion = filters.airportRegion.filter((regionId: number) => {
|
||||||
const region = availableOptions.airportRegions.find(r => r.id === regionId)
|
const region = availableOptions.airportRegions.find(r => r.id === regionId)
|
||||||
if (!region) return false
|
if (!region) return false
|
||||||
return [...(region as any).countryCodes].some((code: string) => countries.includes(code))
|
return [...region.countryCodes].some((code: string) => countries.includes(code))
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// ── URL query sync ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function loadFiltersFromQuery(): boolean {
|
||||||
|
const params = new URLSearchParams(window.location.search)
|
||||||
|
let foundAny = false
|
||||||
|
for (const def of FILTER_DEFS) {
|
||||||
|
const raw = params.get(def.name)
|
||||||
|
if (!raw) continue
|
||||||
|
const values = raw.split(',').filter(Boolean)
|
||||||
|
filters[def.name] = def.kind === 'number'
|
||||||
|
? values.map(Number).filter(n => !Number.isNaN(n))
|
||||||
|
: values
|
||||||
|
foundAny = true
|
||||||
|
}
|
||||||
|
return foundAny
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncUrlWithFilters() {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
for (const def of FILTER_DEFS) {
|
||||||
|
const value = filters[def.name]
|
||||||
|
if (value.length > 0)
|
||||||
|
params.set(def.name, value.join(','))
|
||||||
|
}
|
||||||
|
const query = params.toString()
|
||||||
|
const newUrl = `${window.location.pathname}${query ? `?${query}` : ''}`
|
||||||
|
window.history.replaceState(window.history.state, '', newUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Emit ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function emitFilters() {
|
function emitFilters() {
|
||||||
emit('change', {
|
syncUrlWithFilters()
|
||||||
years: selectedYears.value,
|
const payload = Object.fromEntries(
|
||||||
airlines: selectedAirlines.value,
|
FILTER_DEFS.map(def => [def.emitKey, filters[def.name]]),
|
||||||
alliances: selectedAlliances.value,
|
)
|
||||||
countries: selectedCountries.value,
|
emit('change', payload as Parameters<typeof emit>[1] extends [infer T] ? T : never)
|
||||||
continents: selectedContinents.value,
|
}
|
||||||
flightClasses: selectedFlightClasses.value,
|
|
||||||
crewTypes: selectedCrewTypes.value,
|
onMounted(async () => {
|
||||||
flightScopes: selectedFlightScopes.value,
|
const hasQueryFilters = loadFiltersFromQuery()
|
||||||
flightRanges: selectedFlightRanges.value,
|
|
||||||
regionRanges: selectedRegionRanges.value,
|
// Only emit if the URL actually seeded some filters - a plain page load
|
||||||
flightReasons: selectedFlightReasons.value,
|
// (no query params) should behave exactly like before and not emit at all,
|
||||||
seatTypes: selectedSeatTypes.value,
|
// since the parent already renders its own initial, unfiltered state.
|
||||||
manufacturers: selectedManufacturers.value,
|
if (!hasQueryFilters) return
|
||||||
aircraftModels: selectedAircraftModels.value,
|
|
||||||
engineTypes: selectedEngineTypes.value,
|
// Wait a beat before emitting. Charts further down the tree (ApexCharts,
|
||||||
engineCounts: selectedEngineCounts.value,
|
// in particular) initialize asynchronously on their own mount; firing our
|
||||||
airportRegions: selectedAirportRegions.value,
|
// update in the same synchronous pass can hand them new series data before
|
||||||
otherUsers: selectedOtherUsers.value,
|
// their internal chart instance exists yet, which throws inside the
|
||||||
})
|
// charting library. A couple of ticks is enough to let that settle.
|
||||||
|
await nextTick()
|
||||||
|
await nextTick()
|
||||||
|
emitFilters()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ── Copy link ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const linkCopied = ref(false)
|
||||||
|
|
||||||
|
async function copyFilterLink() {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(window.location.href)
|
||||||
|
linkCopied.value = true
|
||||||
|
setTimeout(() => { linkCopied.value = false }, 2000)
|
||||||
|
} catch {
|
||||||
|
// Clipboard API unavailable (e.g. non-secure context) - nothing to fall
|
||||||
|
// back to here, the button just silently no-ops.
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||||
@@ -225,362 +303,396 @@ const countryFlagClass = (code: string) =>
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flight-filters">
|
<div class="flight-filters-wrapper">
|
||||||
|
<div class="flight-filters">
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedYears"
|
name="year"
|
||||||
:items="availableOptions.years"
|
v-model="filters.year"
|
||||||
label="Year"
|
:items="availableOptions.years"
|
||||||
multiple clearable hide-details
|
label="Year"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ item }}<span v-if="index < Math.min(selectedYears.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ item }}<span v-if="index < Math.min(filters.year.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedYears.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.year.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedAirlines"
|
name="airline"
|
||||||
:items="availableOptions.airlines"
|
v-model="filters.airline"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.airlines"
|
||||||
label="Airline"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Airline"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #item="{ item, props: itemProps }">
|
>
|
||||||
<v-list-item v-bind="itemProps">
|
<template #item="{ item, props: itemProps }">
|
||||||
<template #prepend="{ isSelected }">
|
<v-list-item v-bind="itemProps">
|
||||||
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
<template #prepend="{ isSelected }">
|
||||||
</template>
|
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
||||||
<template #title>
|
</template>
|
||||||
<img
|
<template #title>
|
||||||
:src="(item as AirlineData).airline.logo_url"
|
<img
|
||||||
width="32" height="32"
|
:src="(item as AirlineData).airline.logo_url"
|
||||||
style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
|
width="32" height="32"
|
||||||
alt=""
|
style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
|
||||||
/>
|
alt=""
|
||||||
{{ (item as any).name }}
|
/>
|
||||||
</template>
|
{{ (item as any).name }}
|
||||||
</v-list-item>
|
</template>
|
||||||
</template>
|
</v-list-item>
|
||||||
<template #selection="{ item, index }">
|
</template>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedAirlines.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.airline.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirlines.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airline.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.alliances.length > 0"
|
v-if="availableOptions.alliances.length > 0"
|
||||||
v-model="selectedAlliances"
|
name="alliance"
|
||||||
:items="availableOptions.alliances"
|
v-model="filters.alliance"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.alliances"
|
||||||
label="Alliance"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Alliance"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #item="{ item, props: itemProps }">
|
>
|
||||||
<v-list-item v-bind="itemProps">
|
<template #item="{ item, props: itemProps }">
|
||||||
<template #prepend="{ isSelected }">
|
<v-list-item v-bind="itemProps">
|
||||||
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
<template #prepend="{ isSelected }">
|
||||||
</template>
|
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
||||||
<template #title>
|
</template>
|
||||||
<AllianceLogo :size="22" :alliance="(item as any).alliance" style="margin-right: 8px;" />
|
<template #title>
|
||||||
{{ (item as any).name }}
|
<AllianceLogo :size="22" :alliance="(item as any).alliance" style="margin-right: 8px;" />
|
||||||
</template>
|
{{ (item as any).name }}
|
||||||
</v-list-item>
|
</template>
|
||||||
</template>
|
</v-list-item>
|
||||||
<template #selection="{ item, index }">
|
</template>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedAlliances.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.alliance.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAlliances.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.alliance.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedCountries"
|
name="country"
|
||||||
:items="availableOptions.countries"
|
v-model="filters.country"
|
||||||
item-title="name" item-value="code"
|
:items="availableOptions.countries"
|
||||||
label="Country"
|
item-title="name" item-value="code"
|
||||||
multiple clearable hide-details
|
label="Country"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #item="{ item, props: itemProps }">
|
>
|
||||||
<v-list-item v-bind="itemProps">
|
<template #item="{ item, props: itemProps }">
|
||||||
<template #prepend="{ isSelected }">
|
<v-list-item v-bind="itemProps">
|
||||||
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
<template #prepend="{ isSelected }">
|
||||||
</template>
|
<v-checkbox-btn :model-value="isSelected" tabindex="-1" />
|
||||||
<template #title>
|
</template>
|
||||||
<span :class="countryFlagClass((item as any).code)" style="margin-right: 8px; font-size: 1.1em;" />
|
<template #title>
|
||||||
{{ (item as any).name }}
|
<span :class="countryFlagClass((item as any).code)" style="margin-right: 8px; font-size: 1.1em;" />
|
||||||
</template>
|
{{ (item as any).name }}
|
||||||
</v-list-item>
|
</template>
|
||||||
</template>
|
</v-list-item>
|
||||||
<template #selection="{ item, index }">
|
</template>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
<span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedCountries.length, 2) - 1">, </span>
|
<span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.country.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCountries.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.country.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.flightScopes.length > 1"
|
v-if="availableOptions.flightScopes.length > 1"
|
||||||
v-model="selectedFlightScopes"
|
name="flightScope"
|
||||||
:items="availableOptions.flightScopes"
|
v-model="filters.flightScope"
|
||||||
item-title="label" item-value="value"
|
:items="availableOptions.flightScopes"
|
||||||
label="Flight Scope"
|
item-title="label" item-value="value"
|
||||||
multiple clearable hide-details
|
label="Flight Scope"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).label }}<span v-if="index < Math.min(selectedFlightScopes.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).label }}<span v-if="index < Math.min(filters.flightScope.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightScopes.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightScope.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.airportRegions.length > 0"
|
v-if="availableOptions.airportRegions.length > 0"
|
||||||
v-model="selectedAirportRegions"
|
name="airportRegion"
|
||||||
:items="availableOptions.airportRegions"
|
v-model="filters.airportRegion"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.airportRegions"
|
||||||
label="Region"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Region"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedAirportRegions.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.airportRegion.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirportRegions.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airportRegion.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.regionRanges.length > 1"
|
v-if="availableOptions.regionRanges.length > 1"
|
||||||
v-model="selectedRegionRanges"
|
name="regionRange"
|
||||||
:items="availableOptions.regionRanges"
|
v-model="filters.regionRange"
|
||||||
item-title="label" item-value="value"
|
:items="availableOptions.regionRanges"
|
||||||
label="Region Range"
|
item-title="label" item-value="value"
|
||||||
multiple clearable hide-details
|
label="Region Range"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).label }}<span v-if="index < Math.min(selectedRegionRanges.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).label }}<span v-if="index < Math.min(filters.regionRange.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedRegionRanges.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.regionRange.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedContinents"
|
name="continent"
|
||||||
:items="availableOptions.continents"
|
v-model="filters.continent"
|
||||||
item-title="name" item-value="code"
|
:items="availableOptions.continents"
|
||||||
label="Continent"
|
item-title="name" item-value="code"
|
||||||
multiple clearable hide-details
|
label="Continent"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedContinents.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.continent.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedContinents.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.continent.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.flightRanges.length > 1"
|
v-if="availableOptions.flightRanges.length > 1"
|
||||||
v-model="selectedFlightRanges"
|
name="flightRange"
|
||||||
:items="availableOptions.flightRanges"
|
v-model="filters.flightRange"
|
||||||
item-title="label" item-value="value"
|
:items="availableOptions.flightRanges"
|
||||||
label="Flight Range"
|
item-title="label" item-value="value"
|
||||||
multiple clearable hide-details
|
label="Flight Range"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).label }}<span v-if="index < Math.min(selectedFlightRanges.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).label }}<span v-if="index < Math.min(filters.flightRange.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightRanges.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightRange.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedFlightClasses"
|
name="flightClass"
|
||||||
:items="availableOptions.classes"
|
v-model="filters.flightClass"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.classes"
|
||||||
label="Flight Class"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Flight Class"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedFlightClasses.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.flightClass.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightClass.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.flightReasons.length > 0"
|
v-if="availableOptions.flightReasons.length > 0"
|
||||||
v-model="selectedFlightReasons"
|
name="flightReason"
|
||||||
:items="availableOptions.flightReasons"
|
v-model="filters.flightReason"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.flightReasons"
|
||||||
label="Flight Reason"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Flight Reason"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedFlightReasons.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.flightReason.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightReasons.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightReason.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.seatTypes.length > 0"
|
v-if="availableOptions.seatTypes.length > 0"
|
||||||
v-model="selectedSeatTypes"
|
name="seatType"
|
||||||
:items="availableOptions.seatTypes"
|
v-model="filters.seatType"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.seatTypes"
|
||||||
label="Seat Type"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Seat Type"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedSeatTypes.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.seatType.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedSeatTypes.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.seatType.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.manufacturers.length > 0"
|
v-if="availableOptions.manufacturers.length > 0"
|
||||||
v-model="selectedManufacturers"
|
name="manufacturer"
|
||||||
:items="availableOptions.manufacturers"
|
v-model="filters.manufacturer"
|
||||||
item-title="name" item-value="name"
|
:items="availableOptions.manufacturers"
|
||||||
label="Aircraft Manufacturer"
|
item-title="name" item-value="name"
|
||||||
multiple clearable hide-details
|
label="Aircraft Manufacturer"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedManufacturers.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.manufacturer.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedManufacturers.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.manufacturer.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.aircraftModels.length > 0"
|
v-if="availableOptions.aircraftModels.length > 0"
|
||||||
v-model="selectedAircraftModels"
|
name="aircraftModel"
|
||||||
:items="availableOptions.aircraftModels"
|
v-model="filters.aircraftModel"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.aircraftModels"
|
||||||
label="Aircraft Model"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Aircraft Model"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedAircraftModels.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.aircraftModel.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAircraftModels.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.aircraftModel.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.engineTypes.length > 0"
|
v-if="availableOptions.engineTypes.length > 0"
|
||||||
v-model="selectedEngineTypes"
|
name="engineType"
|
||||||
:items="availableOptions.engineTypes"
|
v-model="filters.engineType"
|
||||||
item-title="name" item-value="name"
|
:items="availableOptions.engineTypes"
|
||||||
label="Engine Type"
|
item-title="name" item-value="name"
|
||||||
multiple clearable hide-details
|
label="Engine Type"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedEngineTypes.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.engineType.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineTypes.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineType.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.engineCounts.length > 0"
|
v-if="availableOptions.engineCounts.length > 0"
|
||||||
v-model="selectedEngineCounts"
|
name="engineCount"
|
||||||
:items="availableOptions.engineCounts"
|
v-model="filters.engineCount"
|
||||||
item-title="count" item-value="count"
|
:items="availableOptions.engineCounts"
|
||||||
label="Engine Count"
|
item-title="count" item-value="count"
|
||||||
multiple clearable hide-details
|
label="Engine Count"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).count }}<span v-if="index < Math.min(selectedEngineCounts.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).count }}<span v-if="index < Math.min(filters.engineCount.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineCounts.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineCount.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
v-if="availableOptions.crewTypes.length > 0"
|
v-if="availableOptions.crewTypes.length > 0"
|
||||||
v-model="selectedCrewTypes"
|
name="crewType"
|
||||||
:items="availableOptions.crewTypes"
|
v-model="filters.crewType"
|
||||||
item-title="name" item-value="id"
|
:items="availableOptions.crewTypes"
|
||||||
label="Crew Type"
|
item-title="name" item-value="id"
|
||||||
multiple clearable hide-details
|
label="Crew Type"
|
||||||
density="compact" variant="outlined"
|
multiple clearable hide-details
|
||||||
@update:model-value="emitFilters"
|
density="compact" variant="outlined"
|
||||||
>
|
@update:model-value="emitFilters"
|
||||||
<template #selection="{ item, index }">
|
>
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
<template #selection="{ item, index }">
|
||||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedCrewTypes.length, 2) - 1">, </span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</span>
|
{{ (item as any).name }}<span v-if="index < Math.min(filters.crewType.length, 2) - 1">, </span>
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCrewTypes.length - 2 }}</span>
|
</span>
|
||||||
</template>
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.crewType.length - 2 }}</span>
|
||||||
</v-select>
|
</template>
|
||||||
<v-select
|
</v-select>
|
||||||
v-if="availableOptions.otherUsers.length > 0"
|
|
||||||
v-model="selectedOtherUsers"
|
<v-select
|
||||||
:items="availableOptions.otherUsers"
|
v-if="availableOptions.otherUsers.length > 0"
|
||||||
label="Flew With"
|
name="otherUsers"
|
||||||
multiple clearable hide-details
|
v-model="filters.otherUsers"
|
||||||
density="compact" variant="outlined"
|
:items="availableOptions.otherUsers"
|
||||||
@update:model-value="emitFilters"
|
label="Flew With"
|
||||||
>
|
multiple clearable hide-details
|
||||||
<template #selection="{ item, index }">
|
density="compact" variant="outlined"
|
||||||
<span v-if="index < 2" class="v-select__selection-text">
|
@update:model-value="emitFilters"
|
||||||
{{ item }}<span v-if="index < Math.min(selectedOtherUsers.length, 2) - 1">, </span>
|
>
|
||||||
</span>
|
<template #selection="{ item, index }">
|
||||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedOtherUsers.length - 2 }}</span>
|
<span v-if="index < 2" class="v-select__selection-text">
|
||||||
</template>
|
{{ item }}<span v-if="index < Math.min(filters.otherUsers.length, 2) - 1">, </span>
|
||||||
</v-select>
|
</span>
|
||||||
|
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.otherUsers.length - 2 }}</span>
|
||||||
|
</template>
|
||||||
|
</v-select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flight-filters-actions">
|
||||||
|
<v-btn
|
||||||
|
:prepend-icon="linkCopied ? 'mdi-check' : 'mdi-link-variant'"
|
||||||
|
:color="linkCopied ? 'success' : undefined"
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
@click="copyFilterLink"
|
||||||
|
>
|
||||||
|
{{ linkCopied ? 'Copied!' : 'Copy Link to This Page With Filters' }}
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -595,4 +707,8 @@ const countryFlagClass = (code: string) =>
|
|||||||
.flight-filters .v-select {
|
.flight-filters .v-select {
|
||||||
flex: 1 1 160px;
|
flex: 1 1 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flight-filters-actions {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user