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

View File

@ -313,9 +313,14 @@ final class AccompanyingCourseApiController extends ApiController
{ {
$this->denyAccessUnlessGranted(AccompanyingPeriodVoter::SEE, $accompanyingPeriod); $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 public function workApi($id, Request $request, string $_format): Response

View File

@ -48,16 +48,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import {onMounted, ref} from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue"; import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue"; import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
import { AccompanyingPeriodWork } from "../../../types"; import {AccompanyingPeriodWork} from "../../../types";
import { import {ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CONFIRM, trans,} from "translator";
trans, import {fetchResults} from "ChillMainAssets/lib/api/apiMethods";
ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
CONFIRM,
} from "translator";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
interface AccompanyingPeriodWorkSelectorModalProps { interface AccompanyingPeriodWorkSelectorModalProps {
accompanyingPeriodId: number; accompanyingPeriodId: number;
@ -79,16 +75,21 @@ onMounted(() => {
console.error("No accompanyingperiod id was given"); 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`; 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) => { .then((response) => {
accompanyingPeriodWorks.value = response; accompanyingPeriodWorks.value = response;
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
}); });*/
}; };
const openModal = () => (showModal.value = true); const openModal = () => (showModal.value = true);