remove news sorting (now api side), refact pagination

components/JoinUs/Missions.vue

@@ -46,13 +46,12 @@
 
     <v-row>
       <v-col cols="12">
-        <v-pagination
-          v-if="lastPage"
+        <LayoutPagination
+          v-if="jobCollection && jobCollection.pagination"
           :model-value="page"
-          :length="lastPage"
-          rounded="circle"
-          max="10"
-          @update:model-value="pageUpdated"
+          :pagination="jobCollection.pagination"
+          @update:model-value="onPageUpdated"
+          class="mt-4"
         />
       </v-col>
     </v-row>
@@ -176,13 +175,7 @@ const jobs: ComputedRef<JobPosting[]> = computed(() => {
          []
 })
 
-const lastPage: ComputedRef<number | null> = computed(() => {
-  return jobCollection.value !== null && jobCollection.value.pagination ?
-    jobCollection.value.pagination.last ?? null :
-    null
-})
-
-const pageUpdated = async (newVal: number): Promise<void> => {
+const onPageUpdated = async (newVal: number): Promise<void> => {
   page.value = newVal
 
   pending.value = true

components/Layout/Pagination.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-pagination
+    v-if="pagination.last"
+    :model-value="modelValue"
+    :length="pagination.last"
+    rounded="circle"
+    @update:model-value="onPageUpdated"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ComputedRef } from "vue";
+import { PropType } from "@vue/runtime-core";
+import { Pagination } from "~/types/data";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true
+  },
+  pagination: {
+    type: Object as PropType<Pagination>,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const onPageUpdated = (newPage: number) => {
+  emit('update:modelValue', newPage);
+};
+</script>
+
+<style scoped lang="scss">
+</style>

components/News/List.vue

@@ -12,9 +12,9 @@
     </v-row>
   </div>
 
-  <div>
+  <div v-else>
     <v-row
-      v-for="(newsItem, index) in newsItems"
+      v-for="(newsItem, index) in newsCollection!.items"
       :key="index"
       class="news d-flex align-center mr-10"
     >
@@ -84,14 +84,12 @@
 
     <v-row>
       <v-col cols="12">
-        <v-pagination
-          v-if="lastPage"
+        <LayoutPagination
+          v-if="newsCollection && newsCollection.pagination"
           :model-value="page"
-          :length="lastPage"
-          rounded="circle"
-          max="10"
+          :pagination="newsCollection.pagination"
+          @update:model-value="onPageUpdated"
           class="mt-4"
-          @update:model-value="pageUpdated"
         />
       </v-col>
     </v-row>
@@ -113,77 +111,18 @@ const getImageUrl = (attachment: string) =>
 
 const page: Ref<number> = ref(1);
 
-const updatePage = (newPage: number) => {
-  console.log("updatePage", newPage);
-  page.value = newPage;
-};
-
 const query: ComputedRef<Record<string, string | number>> = computed(() => {
   return {
     page: page.value,
     type: "ENTREPRISE",
+    "startPublication[before]": "now",
+    "endPublication[after]": "now"
   };
 });
 
 const { data: newsCollection, pending, refresh } = fetchCollection(News, null, query)
 
-const filterNews = (items: News[]): News[] => {
-  const results = []
-  const currentDate = new Date();
-
-  for (const item of items) {
-    if (
-      item.startPublication &&
-      currentDate < new Date(item.startPublication)
-    ) {
-      continue
-    }
-    if (
-      item.endPublication &&
-      currentDate > new Date(item.endPublication)
-    ) {
-      continue
-    }
-
-    if (item.type === "ENTREPRISE") {
-      results.push(item)
-    }
-  }
-
-  return results
-}
-
-const sortNews = (items: News[]): News[] => {
-  return items.sort((a, b) => {
-    if (a.featured !== b.featured) {
-      return a.featured ? -1 : 1; // placer les objets "featured" en premier
-    } else {
-      //@ts-ignore
-      return b.id - a.id;
-    }
-  })
-}
-
-// TODO: voir pourquoi on se retrouve obligé de passer par ce computed pour avoir le type TS correct?
-const newsItems: ComputedRef<News[]> = computed(() => {
-  if (newsCollection.value === null) {
-    return [];
-  }
-
-  const items = newsCollection.value.items as News[]
-
-  // TODO: ça va pas, faut faire le tri et le filtre côté api (sinon ça trie et filtre que la page en cours...)
-  return sortNews(filterNews(items))
-})
-
-const lastPage: ComputedRef<number | null> = computed(() => {
-  return newsCollection.value !== null && newsCollection.value.pagination ?
-    newsCollection.value.pagination.last ?? null :
-    null
-})
-
-const pageUpdated = async (newVal: number): Promise<void> => {
-  // TODO: factoriser, puisque on retrouve la même logique dans le component JoinUsMissions
+const onPageUpdated = async (newVal: number): Promise<void> => {
   page.value = newVal
 
   pending.value = true

logo.svg

@@ -0,0 +1,260 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Calque_7"
+   x="0px"
+   y="0px"
+   viewBox="0 0 228.06 226.77"
+   style="enable-background:new 0 0 228.06 226.77;"
+   xml:space="preserve"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs95" /><sodipodi:namedview
+   id="namedview93"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="1.1112424"
+   inkscape:cx="72.44144"
+   inkscape:cy="123.73538"
+   inkscape:window-width="1920"
+   inkscape:window-height="960"
+   inkscape:window-x="1920"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Calque_7" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+	.st5{fill:url(#SVGID_6_);}
+</style>
+<g
+   id="g90"
+   transform="matrix(1.3485169,0,0,1.3485169,-35.411793,-36.577198)">
+	<g
+   id="g22">
+		<linearGradient
+   id="SVGID_1_"
+   gradientUnits="userSpaceOnUse"
+   x1="107.2645"
+   y1="116.7577"
+   x2="44.097698"
+   y2="92.831902">
+			<stop
+   offset="0"
+   style="stop-color:#84CCDA"
+   id="stop4" />
+			<stop
+   offset="0.4597"
+   style="stop-color:#1A92BD"
+   id="stop6" />
+			<stop
+   offset="1"
+   style="stop-color:#005A88"
+   id="stop8" />
+		</linearGradient>
+		<path
+   class="st0"
+   d="m 100.27,125.19 18.03,-21.24 c -0.05,0.05 -0.92,0.45 -14.47,2.51 -2.72,0.41 -5.51,0.57 -8.28,0.45 -6.66,6.79 -11.06,12.23 -13.91,17.11 9.97,3.06 18.63,1.17 18.63,1.17 z"
+   id="path11"
+   style="fill:url(#SVGID_1_)" />
+		<linearGradient
+   id="SVGID_2_"
+   gradientUnits="userSpaceOnUse"
+   x1="50.838402"
+   y1="58.078899"
+   x2="138.2175"
+   y2="97.615501">
+			<stop
+   offset="0"
+   style="stop-color:#84CCDA"
+   id="stop13" />
+			<stop
+   offset="0.4597"
+   style="stop-color:#1A92BD"
+   id="stop15" />
+			<stop
+   offset="1"
+   style="stop-color:#005A88"
+   id="stop17" />
+		</linearGradient>
+		<path
+   class="st1"
+   d="M 134.69,51.71 C 126.16,38.82 111.57,30.3 94.95,30.3 c -26.39,0 -47.78,21.39 -47.78,47.78 0,2.75 0.24,5.44 0.68,8.06 0.07,0.39 0.14,0.78 0.21,1.16 5.04,22.34 20.56,31.89 31.28,35.95 0,0 -16.32,-11.65 -17.23,-29.6 C 61.59,83.31 64.06,75.06 66.88,69.16 70.2,62.23 74,58.53 74,58.53 c 5.23,-5.6 12.68,-9.11 20.95,-9.11 15.83,0 28.66,12.83 28.66,28.66 0,0 0.01,0.12 0.03,0.35 0.08,1.33 0.15,6.29 -2.36,12.35 5.42,-8.1 16.32,-12.51 17.11,-31.53 0.01,-0.28 0.02,-0.55 0.03,-0.84 -1.07,-2.33 -2.32,-4.58 -3.73,-6.7 z M 71.7,61 c 0.08,-0.09 0.13,-0.14 0.13,-0.14 z"
+   id="path20"
+   style="fill:url(#SVGID_2_)" />
+	</g>
+	<g
+   id="g88">
+		<linearGradient
+   id="SVGID_3_"
+   gradientUnits="userSpaceOnUse"
+   x1="92.288101"
+   y1="110.2676"
+   x2="60.0173"
+   y2="72.020798">
+			<stop
+   offset="0"
+   style="stop-color:#84CCDA"
+   id="stop24" />
+			<stop
+   offset="0.4597"
+   style="stop-color:#1A92BD"
+   id="stop26" />
+			<stop
+   offset="1"
+   style="stop-color:#005A88"
+   id="stop28" />
+		</linearGradient>
+		<path
+   class="st2"
+   d="m 91.16,106.49 c 0,0 0.01,0 0,0 -0.24,-0.04 -0.49,-0.08 -0.73,-0.12 -0.86,-0.15 -1.72,-0.32 -2.57,-0.53 -12.4,-3.16 -21.57,-14.39 -21.57,-27.77 0,-7.56 2.93,-14.42 7.71,-19.54 0,0 -3.8,3.69 -7.12,10.63 v 0 c 0,0 0,0 0,0 -0.88,1.83 -1.71,3.88 -2.44,6.16 -0.01,0.02 -0.01,0.04 -0.02,0.06 -0.11,0.33 -0.21,0.67 -0.31,1.01 -0.05,0.16 -0.09,0.31 -0.14,0.47 -0.09,0.3 -0.16,0.6 -0.24,0.9 -0.06,0.21 -0.11,0.42 -0.17,0.64 -0.07,0.28 -0.14,0.57 -0.2,0.86 -0.06,0.25 -0.11,0.49 -0.17,0.74 -0.06,0.28 -0.12,0.56 -0.17,0.84 -0.05,0.27 -0.11,0.54 -0.16,0.82 -0.05,0.27 -0.1,0.55 -0.14,0.83 -0.05,0.29 -0.09,0.59 -0.14,0.89 -0.04,0.27 -0.08,0.55 -0.11,0.83 -0.04,0.31 -0.08,0.63 -0.11,0.95 -0.03,0.27 -0.06,0.55 -0.08,0.82 -0.03,0.34 -0.06,0.68 -0.08,1.03 -0.02,0.27 -0.04,0.54 -0.06,0.81 -0.02,0.37 -0.04,0.75 -0.05,1.12 -0.01,0.26 -0.02,0.51 -0.03,0.77 -0.01,0.42 -0.01,0.86 -0.01,1.29 0,0.22 0,0.44 0,0.66 0.01,0.66 0.03,1.32 0.06,2 0.91,17.95 17.23,29.6 17.23,29.6 0.77,0.29 1.53,0.55 2.29,0.78 2.84,-4.88 7.24,-10.33 13.91,-17.11 -1.47,-0.08 -2.93,-0.22 -4.38,-0.44 z"
+   id="path31"
+   style="fill:url(#SVGID_3_)" />
+		<g
+   id="g69">
+			<g
+   id="g67">
+				<linearGradient
+   id="SVGID_4_"
+   gradientUnits="userSpaceOnUse"
+   x1="106.3171"
+   y1="90.372704"
+   x2="142.42439"
+   y2="189.343">
+					<stop
+   offset="1.241660e-03"
+   style="stop-color:#F9B11A"
+   id="stop33" />
+					<stop
+   offset="0.1147"
+   style="stop-color:#F8AD19"
+   id="stop35" />
+					<stop
+   offset="0.2291"
+   style="stop-color:#F6A116"
+   id="stop37" />
+					<stop
+   offset="0.344"
+   style="stop-color:#F38D11"
+   id="stop39" />
+					<stop
+   offset="0.4586"
+   style="stop-color:#EE710B"
+   id="stop41" />
+					<stop
+   offset="0.56"
+   style="stop-color:#E85103"
+   id="stop43" />
+					<stop
+   offset="1"
+   style="stop-color:#C40D0E"
+   id="stop45" />
+				</linearGradient>
+				<path
+   class="st3"
+   d="m 130.36,191.91 c 21.84,-1.01 27.48,-25.48 28.79,-34.09 0.17,-1.19 0.29,-2.19 0.36,-2.96 -2.86,9.11 -11.08,13.7 -11.09,13.7 -4.45,2.85 -9.74,4.5 -15.42,4.5 -15.83,0 -28.66,-12.83 -28.66,-28.66 0,-24.39 22.91,-22.23 33.4,-45.2 3.52,-7.71 4.9,-14.8 4.87,-21.06 -0.02,-4.75 -0.73,-8.9 -1.56,-12.16 -0.68,-2.61 -1.58,-5.14 -2.67,-7.55 0,0.09 0,0.15 0,0 0,0 0,0 0,0 0,0 0,0.02 0,0 -2.02,24.43 -35.89,49.2 -35.89,49.2 -5.82,4.84 -10.49,11.07 -13.5,18.17 -2.42,5.72 -3.75,12 -3.75,18.6 0,24.96 19.14,45.44 43.54,47.59 0.64,-0.03 1.25,-0.07 1.45,-0.08 0.04,0 0.09,0 0.13,0 z"
+   id="path48"
+   style="fill:url(#SVGID_4_)" />
+				<linearGradient
+   id="SVGID_5_"
+   gradientUnits="userSpaceOnUse"
+   x1="205.9075"
+   y1="164.02679"
+   x2="122.9421"
+   y2="177.5509">
+					<stop
+   offset="1.241660e-03"
+   style="stop-color:#F9B11A"
+   id="stop50" />
+					<stop
+   offset="0.1147"
+   style="stop-color:#F8AD19"
+   id="stop52" />
+					<stop
+   offset="0.2291"
+   style="stop-color:#F6A116"
+   id="stop54" />
+					<stop
+   offset="0.344"
+   style="stop-color:#F38D11"
+   id="stop56" />
+					<stop
+   offset="0.4586"
+   style="stop-color:#EE710B"
+   id="stop58" />
+					<stop
+   offset="0.56"
+   style="stop-color:#E85103"
+   id="stop60" />
+					<stop
+   offset="0.9974"
+   style="stop-color:#C40D0E"
+   id="stop62" />
+				</linearGradient>
+				<path
+   class="st4"
+   d="m 159.52,154.77 c 0,0 -0.03,1.13 -0.36,2.96 -1.89,10.24 -7.74,32.95 -28.79,34.09 -0.05,0 -0.09,0.01 -0.14,0.01 -0.19,0.01 -0.8,0.04 -1.45,0.08 1.4,0.12 2.81,0.19 4.24,0.19 20.14,0 37.37,-12.46 44.4,-30.1 z"
+   id="path65"
+   style="fill:url(#SVGID_5_)" />
+			</g>
+		</g>
+		<linearGradient
+   id="SVGID_6_"
+   gradientUnits="userSpaceOnUse"
+   x1="101.7632"
+   y1="101.1079"
+   x2="195.9982"
+   y2="160.9678">
+			<stop
+   offset="1.241660e-03"
+   style="stop-color:#F9B11A"
+   id="stop71" />
+			<stop
+   offset="0.1147"
+   style="stop-color:#F8AD19"
+   id="stop73" />
+			<stop
+   offset="0.2291"
+   style="stop-color:#F6A116"
+   id="stop75" />
+			<stop
+   offset="0.344"
+   style="stop-color:#F38D11"
+   id="stop77" />
+			<stop
+   offset="0.4586"
+   style="stop-color:#EE710B"
+   id="stop79" />
+			<stop
+   offset="0.56"
+   style="stop-color:#E85103"
+   id="stop81" />
+			<stop
+   offset="1"
+   style="stop-color:#C40D0E"
+   id="stop83" />
+		</linearGradient>
+		<path
+   class="st5"
+   d="m 138.37,119.92 c -9.17,0 -16.28,13.19 -16.28,13.19 h 28.59 c 8.84,0 10.75,-13.19 10.75,-13.19 z"
+   id="path86"
+   style="fill:url(#SVGID_6_)" />
+	</g>
+</g>
+</svg>