Ehrenamt/ff-operation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enhanced loading

Browse source
This commit is contained in:
Julian Krauser 2025-04-08 09:37:38 +02:00
parent 9f7ef03ffd
commit 9006a46a1c
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/views/admin/operation/mission/MissionList.vue
View file

@ -15,7 +15,12 @@
<div class="flex flex-col w-full h-full gap-2 justify-center px-7"> <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<div class="flex flex-col gap-2 grow overflow-y-scroll" @scrollend="reachedEnd"> <div class="flex flex-col gap-2 grow overflow-y-scroll" @scrollend="reachedEnd">
<MissionListItem v-for="mission in missions" :key="mission.id" :mission="mission" /> <MissionListItem v-for="mission in missions" :key="mission.id" :mission="mission" />
<br />
<Spinner v-if="loading == 'loading'" class="mt-auto mx-auto" /> <Spinner v-if="loading == 'loading'" class="mt-auto mx-auto" />
<p v-if="!hasReachedEnd" class="mt-auto mx-auto text-sm cursor-pointer select-none" @click="reachedEnd">
mehr laden?
</p>
<p v-else class="mt-auto mx-auto text-sm select-none">Ende der Liste!</p>
</div> </div>
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
@ -64,8 +69,10 @@ export default defineComponent({
methods: { methods: {
...mapActions(useMissionStore, ["fetchMissions", "createMission"]), ...mapActions(useMissionStore, ["fetchMissions", "createMission"]),
reachedEnd() { reachedEnd() {
this.hasReachedEnd = true; if (!this.hasReachedEnd) {
this.fetchMissions(this.missions.length); this.hasReachedEnd = true;
this.fetchMissions(this.missions.length);
}
}, },
createNewMission() { createNewMission() {
this.createMission() this.createMission()