Add pagination to works by period list api endpoint and use fetchResult in frontend

This commit is contained in:
Julie Lenaerts 2025-05-08 16:03:52 +02:00
parent 7ea6638c3a
commit bfe658d4fd
3 changed files with 23 additions and 17 deletions

View File

@ -2,7 +2,7 @@ import "es6-promise/auto";
import { createStore } from "vuex";
import { postLocation } from "./api";
import prepareLocations from "./store.locations.js";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import {fetchResults, makeFetch} from "ChillMainAssets/lib/api/apiMethods";
const debug = process.env.NODE_ENV !== "production";
//console.log('window.activity', window.activity);
@ -365,11 +365,11 @@ const store = createStore({
const accompanyingPeriodId = state.activity.accompanyingPeriod.id;
const url = `/api/1.0/person/accompanying-course/${accompanyingPeriodId}/works.json`;
try {
const works = await makeFetch("GET", url);
// console.log("works", works);
const works = await fetchResults(url);
// console.log('works', works);
commit("setAccompanyingPeriodWorks", works);
} catch (error) {
console.error("Failed to fetch accompanying period works:", error);
console.error('Failed to fetch works:', error);
}
},
getWhoAmI({ commit }) {

View File

@ -313,9 +313,14 @@ final class AccompanyingCourseApiController extends ApiController
{
$this->denyAccessUnlessGranted(AccompanyingPeriodVoter::SEE, $accompanyingPeriod);
$works = $this->accompanyingPeriodWorkRepository->findBy(['accompanyingPeriod' => $accompanyingPeriod]);
$total = $this->accompanyingPeriodWorkRepository->countByAccompanyingPeriod($accompanyingPeriod);
$paginator = $this->getPaginatorFactory()->create($total);
return $this->json($works, Response::HTTP_OK, [], ['groups' => ['read']]);
$works = $this->accompanyingPeriodWorkRepository->findByAccompanyingPeriod($accompanyingPeriod, null, $paginator->getItemsPerPage(), $paginator->getCurrentPageFirstItemNumber());
$collection = new Collection($works, $paginator);
return $this->json($collection, Response::HTTP_OK, [], ['groups' => ['read']]);
}
public function workApi($id, Request $request, string $_format): Response

View File

@ -48,16 +48,12 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import {onMounted, ref} from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
import {AccompanyingPeriodWork} from "../../../types";
import {
trans,
ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
CONFIRM,
} from "translator";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import {ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CONFIRM, trans,} from "translator";
import {fetchResults} from "ChillMainAssets/lib/api/apiMethods";
interface AccompanyingPeriodWorkSelectorModalProps {
accompanyingPeriodId: number;
@ -79,16 +75,21 @@ onMounted(() => {
console.error("No accompanyingperiod id was given");
}
});
const getAccompanyingPeriodWorks = (periodId: number) => {
const getAccompanyingPeriodWorks = async (periodId: number) => {
const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
try {
accompanyingPeriodWorks.value = await fetchResults(url);
} catch (error) {
console.log(error);
}
/* makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
.then((response) => {
accompanyingPeriodWorks.value = response;
})
.catch((error) => {
console.log(error);
});
});*/
};
const openModal = () => (showModal.value = true);