poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lepsi infinite scroll

Browse Source
This commit is contained in:
Michal Kváček
2026-01-06 22:02:24 +01:00
parent ea88a29750
commit 33e7aa6e36
22 changed files with 381 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FAB.vue
+5 -2
View File
@@ -13,7 +13,6 @@ const props = defineProps({
})
const config = computed(() => {
if (props.mode === "add") {
return {icon: "add", label: "Přidat"};
} else if (props.mode === "edit") {
@@ -26,7 +25,11 @@ const config = computed(() => {
</script>
<template>
<q-page-sticky location="bottom" :offset="[30, 30]">
<q-page-sticky
location="bottom"
:offset="[30, 30]"
v-if="$q.screen.lt.md"
>
<q-fab :icon="config.icon" color="primary" :label="config.label" @click="$router.push(props.routerLink)"/>
</q-page-sticky>
</template>
src/components/ListFilters.vue
+14 -5
View File
@@ -38,14 +38,23 @@ onMounted(() => {
if (search) {
filters.value.search = search;
} else {
filters.value = {};
}
})
</script>
<template>
<q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
<template #prepend>
<q-icon name="search"/>
</template>
</q-input>
<div class="flex">
<div class="col-grow">
<q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
<template #prepend>
<q-icon name="search"/>
</template>
</q-input>
</div>
<div class="flex items-center">
<slot name="append" class="full-height"/>
</div>
</div>
</template>
src/components/LoadMoreList.vue
-41
View File
@@ -1,41 +0,0 @@
<script setup>
const props = defineProps({
totalItemsCount: {
type: Number,
required: true
},
itemsLength: {
type: Number,
required: true,
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
})
const emits = defineEmits(["load-more"]);
const loadMore = () => {
emits("load-more", props.itemsPerPage);
}
</script>
<template>
<div>
<slot name="items"/>
<slot name="skeleton" v-if="isQueryRunning"/>
<div class="text-center q-my-md">
<q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
<slot name="loadMoreText"/>
</q-btn>
</div>
</div>
</template>
src/components/PrimaryAction.vue
+46
View File
@@ -0,0 +1,46 @@
<script setup>
import {computed} from "vue";
const props = defineProps({
mode: {
type: String,
required: true
},
routerLink: {
type: Object,
required: true
}
})
const config = computed(() => {
if (props.mode === "add") {
return {icon: "add", label: "Přidat"};
} else if (props.mode === "edit") {
return {icon: "edit", label: "Upravit"};
}
return {icon: "unknown", label: `Neznámý typ ${props.mode}`}
})
</script>
<template>
<div>
<q-toolbar class="justify-end q-pr-none" v-if="$q.screen.gt.sm">
<q-btn color="primary" size="lg" :icon="config.icon" :to="props.routerLink">{{ config.label }}</q-btn>
</q-toolbar>
<q-page-sticky
location="bottom"
:offset="[30, 30]"
v-else
>
<q-fab
:icon="config.icon"
color="primary"
:label="config.label"
@click="$router.push(props.routerLink)"
/>
</q-page-sticky>
</div>
</template>
src/components/aircrafts/AircraftsList.vue
+41 -56
View File
@@ -1,68 +1,53 @@
<script setup>
import LoadMoreList from "components/LoadMoreList.vue";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {useInfiniteScroll} from "src/composables/pagination";
const props = defineProps({
items: {
type: Array,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
...useInfiniteScroll().propsDef
});
const emits = defineEmits([...useInfiniteScroll().emitsDef])
const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
</script>
<template>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item
clickable
v-ripple
:to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
v-for="aircraft of props.items" :key="aircraft"
>
<q-item-section avatar>
<q-avatar v-if="aircraft.titlePhoto">
<img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar color="teal" text-color="white" icon="flight" v-else/>
</q-item-section>
<q-item-section>
<q-item-label label>
{{ aircraft.callSign }}
</q-item-label>
<q-item-label caption>
{{ aircraft.model }}
<template v-if="aircraft.manufacturer">
({{ aircraft.manufacturer }})
</template>
</q-item-label>
<q-item-label caption v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</template>
<template #skeleton>
<BasicListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Další
</template>
</LoadMoreList>
<q-infinite-scroll
:disable="!hasMoreData"
@load="emitLoadMore"
:offset="250"
>
<q-list bordered separator>
<q-item
clickable
v-ripple
:to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
v-for="aircraft of props.items" :key="aircraft"
>
<q-item-section avatar>
<q-avatar v-if="aircraft.titlePhoto">
<img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar color="teal" text-color="white" icon="flight" v-else/>
</q-item-section>
<q-item-section>
<q-item-label label>
{{ aircraft.callSign }}
</q-item-label>
<q-item-label caption>
{{ aircraft.model }}
<template v-if="aircraft.manufacturer">
({{ aircraft.manufacturer }})
</template>
</q-item-label>
<q-item-label caption v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-infinite-scroll>
</template>
src/components/flightPlans/FlightPlansList.vue
+36 -24
View File
@@ -1,36 +1,48 @@
<script setup>
import {formatDatetime} from "src/composables/datetimeUtils";
import {useInfiniteScroll} from "src/composables/pagination";
const props = defineProps({
items: {
type: Array,
required: true
}
})
},
...useInfiniteScroll().propsDef
});
const emits = defineEmits([...useInfiniteScroll().emitsDef])
const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
</script>
<template>
<q-list bordered separator>
<q-item
clickable
:to="{name: 'editFlightPlan', params: {id: flightPlan.id }}"
v-ripple
v-for="flightPlan of items" :key="flightPlan">
<q-item-section avatar>
<q-avatar icon="flight" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
<q-item-label>
{{ flightPlan.name || "Nepojmenovaný plán" }}
</q-item-label>
<q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
{{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
</q-item-label>
<q-item-label caption v-if="flightPlan.aircraft">
{{ flightPlan.aircraft.callSign }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-infinite-scroll
:disable="!hasMoreData"
@load="emitLoadMore"
:offset="250"
>
<q-list bordered separator>
<q-item
clickable
:to="{name: 'editFlightPlan', params: {id: flightPlan.id }}"
v-ripple
v-for="flightPlan of items" :key="flightPlan">
<q-item-section avatar>
<q-avatar icon="flight" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
<q-item-label>
{{ flightPlan.name || "Nepojmenovaný plán" }}
</q-item-label>
<q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
{{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
</q-item-label>
<q-item-label caption v-if="flightPlan.aircraft">
{{ flightPlan.aircraft.callSign }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-infinite-scroll>
</template>
src/components/flights/FlightsList.vue
+61 -78
View File
@@ -2,10 +2,7 @@
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
import {flightName} from "src/composables/flight";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import {computed} from "vue";
import LoadMoreList from "components/LoadMoreList.vue";
import {pluralize} from "../../composables/utils";
import {useInfiniteScroll} from "src/composables/pagination";
const props = defineProps({
items: {
@@ -16,96 +13,82 @@ const props = defineProps({
type: Boolean,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
...useInfiniteScroll().propsDef
});
const emits = defineEmits([...useInfiniteScroll().emitsDef])
const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
const routeDetail = (flight) => {
if (props.public)
return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
else
return {name: "flightDetail", params: {id: flight.id}}
};
const loadMoreCount = computed(() => {
return Math.min(props.itemsPerPage, props.totalItemsCount - props.items.length);
});
</script>
<template>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item
v-for="flight of items" :key="flight"
ripple
clickable
:to="routeDetail(flight)"
>
<q-item-section avatar>
<AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
<q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
</q-item-section>
<q-item-section>
<div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
<q-infinite-scroll
:disable="!hasMoreData"
@load="emitLoadMore"
:offset="250"
>
<q-list bordered separator>
<q-item
v-for="flight of items" :key="flight"
ripple
clickable
:to="routeDetail(flight)"
>
<q-item-section avatar>
<AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
<q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
</q-item-section>
<q-item-section>
<div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
<div class="text-secondary" v-if="props.public">
<q-icon name="support_agent"/>
@{{ flight.pilot.publicUsername }}
</div>
<div class="text-secondary" v-if="props.public">
<q-icon name="support_agent"/>
@{{ flight.pilot.publicUsername }}
</div>
<div class="text-secondary" v-if="flight.copilots">
<q-icon name="person"/>
{{ flight.pilot.name }}
{{ flight.copilots }}
</div>
<div class="text-secondary" v-if="flight.copilots">
<q-icon name="person"/>
{{ flight.pilot.name }}
{{ flight.copilots }}
</div>
<div class="text-secondary">
<q-icon name="schedule"/>
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
</div>
<div class="text-secondary">
<q-icon name="flight"/>
{{ flight.aircraft.callSign }}
</div>
<div class="text-secondary">
<q-icon name="schedule"/>
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
</div>
<div class="text-secondary">
<q-icon name="flight"/>
{{ flight.aircraft.callSign }}
</div>
<div class="text-secondary" v-if="flight.event">
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</q-item-section>
<div class="text-secondary" v-if="flight.event">
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</q-item-section>
<q-item-section side top v-if="!props.public">
<!-- Zobraz jen v adminu -->
<q-icon name="visibility" v-if="flight.isPublic"/>
<q-item-section side top v-if="!props.public">
<!-- Zobraz jen v adminu -->
<q-icon name="visibility" v-if="flight.isPublic"/>
<q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
<q-tooltip>
Let je sice publikovaný, nemá ale nastavenou URL adresu!
</q-tooltip>
</q-icon>
</q-item-section>
</q-item>
</q-list>
<q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
<q-tooltip>
Let je sice publikovaný, nemá ale nastavenou URL adresu!
</q-tooltip>
</q-icon>
</q-item-section>
</q-item>
</q-list>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px"/>
</div>
</template>
<template #skeleton>
<FlightsListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
</template>
</LoadMoreList>
</q-infinite-scroll>
</template>
src/components/poi/POIList.vue
+31 -45
View File
@@ -1,6 +1,5 @@
<script setup>
import LoadMoreList from "components/LoadMoreList.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {useInfiniteScroll} from "src/composables/pagination";
const props = defineProps({
items: {
@@ -11,20 +10,7 @@ const props = defineProps({
type: Boolean,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
...useInfiniteScroll().propsDef,
});
const getRoute = (item) => {
@@ -33,35 +19,35 @@ const getRoute = (item) => {
else
return {name: "poiDetail", params: {id: item.id}}
};
const emits = defineEmits(useInfiniteScroll().emitsDef)
const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
</script>
<template>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
<q-item-section avatar>
<q-avatar v-if="poi.titlePhoto">
<img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
{{ poi.name }}
<div class="text-secondary" v-if="poi.type">
{{ poi.type.name }}
</div>
</q-item-section>
<q-item-section side top v-if="!props.public && poi.isPublic">
<q-icon name="visibility"></q-icon>
</q-item-section>
</q-item>
</q-list>
</template>
<template #skeleton>
<BasicListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Další
</template>
</LoadMoreList>
<q-infinite-scroll
:disable="!hasMoreData"
@load="emitLoadMore"
:offset="250"
>
<q-list bordered separator>
<q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
<q-item-section avatar>
<q-avatar v-if="poi.titlePhoto">
<img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
{{ poi.name }}
<div class="text-secondary" v-if="poi.type">
{{ poi.type.name }}
</div>
</q-item-section>
<q-item-section side top v-if="!props.public && poi.isPublic">
<q-icon name="visibility"></q-icon>
</q-item-section>
</q-item>
</q-list>
</q-infinite-scroll>
</template>
src/composables/pagination.js
+58 -6
View File
@@ -1,4 +1,4 @@
import {ref} from "vue";
import {computed, ref} from "vue";
export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
@@ -9,19 +9,71 @@ export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
const paginationLimit = ref(itemsPerPage);
const paginationOffset = ref(0);
const filters = ref({});
const hasMoreData = ref(true)
const loadPage = (appendItems) => {
const loadFirstPage = () => {
paginationOffset.value = 0
return fetchFunction({
...filters.value,
limit: paginationLimit.value,
offset: paginationOffset.value,
appendItems
}).then(() => {
offset: 0,
appendItems: false
}).then((data) => {
console.log("first page", data, data.length, paginationLimit.value)
paginationOffset.value += paginationLimit.value;
hasMoreData.value = data.length === paginationLimit.value;
})
}
const loadPage = (index, done) => {
return fetchFunction({
...filters.value,
appendItems: true,
limit: paginationLimit.value,
offset: paginationOffset.value,
}).then((data) => {
console.log("load page", data, data.length, paginationOffset.value, paginationLimit.value)
paginationOffset.value += paginationLimit.value;
hasMoreData.value = data.length === paginationLimit.value;
if (done) done()
})
}
const handleFiltersChanged = (newFilters) => {
filters.value = newFilters;
loadFirstPage()
}
return {
paginationOffset, paginationLimit, filters, loadPage
paginationOffset, paginationLimit, handleFiltersChanged, filters, loadPage, loadFirstPage, hasMoreData
}
}
export const useLoading = (promiseGetter) => {
const loading = ref(false)
const load = () => {
loading.value = true
return promiseGetter().finally(() => loading.value = false)
}
return {loading, load}
}
export const useInfiniteScroll = (emits, props) => {
const emitsDef = ["load-more"]
const propsDef = {
hasMoreData: {
type: Boolean,
required: false,
default: true
}
}
const hasMoreData = computed(() => props.hasMoreData)
const emitLoadMore = (index, done) => emits("load-more", {index, done});
return {emitsDef, propsDef, hasMoreData, emitLoadMore}
}
src/graphql/fragments/flight.js
-1
View File
@@ -30,7 +30,6 @@ fragment flightFullInfo on Flight {
durationMinCalculated
isPublic
flightPlanId
socialImageUrl
titlePhoto {
thumbnailUrl
src/graphql/queries/aircrafts.js
+2 -4
View File
@@ -2,19 +2,17 @@ import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
export const AIRCRAFTS_LIST = gql`
query AircraftsList ($limit: Int!, $offset: Int) {
aircrafts(limit: $limit, offset: $offset) {
query AircraftsList ($search: String, $limit: Int!, $offset: Int) {
aircrafts(search: $search, limit: $limit, offset: $offset) {
totalItemsCount
items {
...aircraftListInfo
}
}
}
${FRAGMENT_AIRCRAFT_LIST_INFO}
`;
export const AIRCRAFT_DETAIL = gql`
query AircraftDetail($id: Int!) {
aircraft(id: $id) {
src/graphql/queries/flightPlan.js
+8 -5
View File
@@ -2,13 +2,16 @@ import gql from "graphql-tag";
import {FRAGMENT_FLIGHT_PLAN_FULL_INFO, FRAGMENT_FLIGHT_PLAN_LIST_INFO} from "src/graphql/fragments/flightPlan";
export const FLIGHT_PLANS_LIST = gql`
query flightPlansList {
flightPlans {
...flightPlanListInfo
query flightPlansList($search: String, $limit: Int!, $offset: Int) {
flightPlans(search: $search, limit: $limit, offset: $offset) {
totalItemsCount
items {
...flightPlanListInfo
}
}
}
}
${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
`;
export const FLIGHT_PLAN_DETAIL = gql`
src/graphql/queries/flights.js
+2 -1
View File
@@ -5,12 +5,13 @@ import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
import {FRAGMENT_COPILOT_PUBLIC_INFO} from "src/graphql/fragments/copilot";
export const FLIGHTS_LIST = gql`
query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $limit: Int!, $offset: Int) {
query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $search: String, $limit: Int!, $offset: Int) {
flights(
eventId: $eventId,
aircraftId: $aircraftId,
copilotId: $copilotId,
pointOfInterestId: $pointOfInterestId,
search: $search,
limit: $limit,
offset: $offset
) {
src/pages/profile/aircraft/AircraftsPage.vue
+13 -15
View File
@@ -1,31 +1,34 @@
<script setup>
import AircraftsList from "components/aircrafts/AircraftsList.vue";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {storeToRefs} from "pinia";
import {useAppStore} from "stores/App";
import {usePagination} from "src/composables/pagination";
import {onMounted} from "vue";
import ListFilters from "components/ListFilters.vue";
import PrimaryAction from "components/PrimaryAction.vue";
useAppStore().setPageTitle("Letadla");
useAppStore().setBreadcrumbs([])
const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useAircraftsStore().fetch});
const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useAircraftsStore().fetch});
onMounted(() => {
loadPage(false);
})
</script>
<template>
<BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
<ListFilters @filters-changed="handleFiltersChanged">
<template #append>
<PrimaryAction mode="add" :router-link="{name: 'addAircraft'}"/>
</template>
</ListFilters>
<BasicListSkeleton :items="5" v-if="isQueryRunning && !totalItemsCount"/>
<BasicInfoBanner
v-if="!isQueryRunning && totalItemsCount === 0"
:route-add="{name: 'addAircraft'}"
label-add="Vytvořit letadlo"
label-add="Přidat letadlo"
>
Aktuálně nemáš přidané žádné letadlo. Přidej se k existující organizaci nebo si sem ulož vlastní letadlo.
<br>
@@ -35,13 +38,8 @@ onMounted(() => {
<AircraftsList
v-else
:items="aircrafts"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
:public="true"
class="q-mb-xl"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
<FAB mode="add" :router-link="{name: 'addAircraft'}"/>
</template>
src/pages/profile/flight/FlightsPage.vue
+13 -14
View File
@@ -1,29 +1,32 @@
<script setup>
import FlightsList from "components/flights/FlightsList.vue";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import FAB from "components/FAB.vue";
import {useAppStore} from "stores/App";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
import {usePagination} from "src/composables/pagination";
import {onMounted} from "vue";
import PrimaryAction from "components/PrimaryAction.vue";
import ListFilters from "components/ListFilters.vue";
useAppStore().setPageTitle("Moje lety");
useAppStore().setBreadcrumbs([]);
const {loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
onMounted(() => {
loadPage(false);
});
const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetch});
const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
</script>
<template>
<ListFilters @filters-changed="handleFiltersChanged">
<template #append>
<PrimaryAction mode="add" :router-link="{name: 'addFlight'}"/>
</template>
</ListFilters>
<FlightsListSkeleton v-if="isQueryRunning && flights.length === 0"/>
<BasicInfoBanner
v-else-if="!isQueryRunning && totalItemsCount === 0"
v-else-if="!isQueryRunning && flights.length === 0"
:route-add="{name: 'addFlight'}"
label-add="Přidat let"
>
@@ -34,11 +37,7 @@ const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore()
v-else
:items="flights"
:public="false"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
:total-items-count="totalItemsCount"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flightPlanner/FlightPlansPage.vue
+18 -7
View File
@@ -1,12 +1,13 @@
<script setup>
import {useFlightPlansStore} from "stores/FlightPlans";
import {storeToRefs} from "pinia";
import {onMounted} from "vue";
import {useAppStore} from "stores/App";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import FAB from "components/FAB.vue";
import FlightPlansList from "components/flightPlans/FlightPlansList.vue";
import ListFilters from "components/ListFilters.vue";
import PrimaryAction from "components/PrimaryAction.vue";
import {usePagination} from "src/composables/pagination";
useAppStore().setPageTitle("Nový plán");
useAppStore().setBreadcrumbs([
@@ -14,14 +15,20 @@ useAppStore().setBreadcrumbs([
{label: "Plánované lety"},
]);
onMounted(() => {
useFlightPlansStore().fetch();
const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
fetchFunction: useFlightPlansStore().fetch,
itemsPerPage: 20
});
const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
</script>
<template>
<ListFilters @filters-changed="handleFiltersChanged">
<template #append>
<PrimaryAction mode="add" :router-link="{name: 'newFlightPlan'}"/>
</template>
</ListFilters>
<BasicListSkeleton :items=5 v-if="isQueryRunning || !flightPlans"/>
<BasicInfoBanner
@@ -31,6 +38,10 @@ const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
Aktuálně nemáš žádné naplánované lety.
</BasicInfoBanner>
<FlightPlansList :items="flightPlans" v-else/>
<FAB :router-link="{name: 'newFlightPlan'}" mode="add"/>
<FlightPlansList
v-else
:items="flightPlans"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
</template>
src/pages/profile/poi/PointsOfInterestPage.vue
+12 -17
View File
@@ -9,27 +9,25 @@ import {storeToRefs} from "pinia";
import {usePagination} from "src/composables/pagination";
import ListFilters from "components/ListFilters.vue";
import {onMounted} from "vue";
import PrimaryAction from "components/PrimaryAction.vue";
useAppStore().setPageTitle("Zajímavá místa");
useAppStore().setBreadcrumbs([]);
const {filters, loadPage, paginationLimit, paginationOffset} = usePagination({
fetchFunction: usePointsOfInterestStore().fetch
const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
fetchFunction: usePointsOfInterestStore().fetch,
itemsPerPage: 20
});
onMounted(() => {
loadPage(false);
})
const handleFiltersChanged = (newFilters) => {
paginationOffset.value = 0;
filters.value = newFilters;
loadPage(false);
}
const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<ListFilters @filters-changed="handleFiltersChanged"/>
<ListFilters @filters-changed="handleFiltersChanged">
<template #append>
<PrimaryAction mode="add" :router-link="{name: 'addPOI'}"/>
</template>
</ListFilters>
<BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
<BasicInfoBanner
@@ -45,10 +43,7 @@ const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePoint
v-else
:public="false"
:items="pointsOfInterest"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
<FAB :router-link="{name: 'addPOI'}" mode="add"/>
</template>
src/pages/public/poi/PointsOfInterestPage.vue
+4 -16
View File
@@ -17,21 +17,11 @@ useMeta(() => metaData({
title: "Místa"
}))
const {filters, loadPage, paginationOffset, paginationLimit} = usePagination({
const {loadPage, paginationLimit, hasMoreData, handleFiltersChanged} = usePagination({
fetchFunction: usePointsOfInterestStore().fetchPublic
});
onMounted(() => {
loadPage(false);
});
const handleFiltersChanged = (newFilters) => {
paginationOffset.value = 0;
filters.value = newFilters;
loadPage(false);
}
const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
@@ -43,10 +33,8 @@ const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePoint
v-else
:public="true"
:items="pointsOfInterest"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
</div>
</template>
src/stores/Aircrafts.js
+4 -3
View File
@@ -29,11 +29,11 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
return item;
});
const fetch = ({appendItems, limit = 100, offset = 0}) => query({
const fetch = ({search, appendItems, limit = 100, offset = 0}) => query({
isQueryRunning,
query: AIRCRAFTS_LIST,
variables: {limit, offset}
}).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
variables: {search, limit, offset}
}).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
const create = (input) => mutate({
isMutationRunning,
@@ -41,6 +41,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
variables: {input}
}).then(item => {
aircrafts.value.push(item);
totalItemsCount.value++;
return item;
})
src/stores/FlightPlans.js
+9 -7
View File
@@ -1,7 +1,7 @@
import {defineStore} from 'pinia'
import {FLIGHT_PLAN_DETAIL, FLIGHT_PLANS_LIST} from "src/graphql/queries/flightPlan";
import {CREATE_FLIGHT_PLAN, EDIT_FLIGHT_PLAN} from "src/graphql/mutations/flightPlan";
import {mutate, query, updateInItems} from "stores/helpers";
import {mutate, query, setItems, updateInItems} from "stores/helpers";
import {ref} from "vue";
export const useFlightPlansStore = defineStore('FlightPlans', () => {
@@ -9,6 +9,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
const flightPlans = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const totalItemsCount = ref(0);
const fetchDetail = (id) => {
return query({
@@ -26,12 +27,12 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
}).then(item => flightPlan.value = item);
}
const fetch = () => {
return query({
isQueryRunning,
query: FLIGHT_PLANS_LIST,
}).then(items => flightPlans.value = items);
}
const fetch = ({search, appendItems, offset, limit}) => query({
isQueryRunning,
query: FLIGHT_PLANS_LIST,
variables: {search, limit, offset}
}).then(data => setItems(data, appendItems, flightPlans, totalItemsCount));
const create = (input) => {
return mutate({
@@ -40,6 +41,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
variables: {input},
}).then(item => {
flightPlans.value.push(item);
totalItemsCount.value++;
return item;
})
}
src/stores/Flights.js
+3
View File
@@ -37,11 +37,13 @@ export const useFlightsStore = defineStore('Flights', () => {
pointOfInterestId,
offset,
limit,
search,
appendItems
}) => query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {
search,
eventId,
aircraftId,
copilotId,
@@ -63,6 +65,7 @@ export const useFlightsStore = defineStore('Flights', () => {
variables: {input},
}).then(item => {
flights.value.push(item);
totalItemsCount.value++;
return item;
})
src/stores/PointsOfInterest.js
+1 -1
View File
@@ -30,7 +30,7 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
return item;
});
const fetch = ({limit = 100, offset = 0, appendItems, search = undefined}) => query({
const fetch = ({limit, offset, appendItems, search = undefined}) => query({
isQueryRunning,
query: POI_LIST,
variables: {limit, offset, search}