site_logiciels/pages/nous-rejoindre/index.vue

<template>
  <LayoutNavigation />
  <div v-if="shouldShowStickyMenu" id="sticky-menu">
    <CommonStickyMenu
      :shouldShowStickyMenu="shouldShowStickyMenu"
      :squaresData="squaresData"
    />
  </div>
  <JoinUsBanner />
  <JoinUsMissions />
  <LayoutFooterPrefooter />
  <LayoutFooter id="layout-footer" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
const { apiRequestService } = useMaestroRequestService();

const query = computed(() => {
  const queryParams: { page: number; type?: string; [key: string]: number | string } = {
    page: page.value,
    type: 'ENTREPRISE' 
  };

  return queryParams;
});
// Base URL for API requests
const totalItems = ref(0);
const config = useRuntimeConfig();
const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;

const page: Ref<number> = ref(1);
const itemsPerPage: Ref<number> = ref(10);
const { t } = useI18n();


const {
  data: jobs = [],
  pending,
  refresh,
} = useLazyAsyncData("files", async () => {
  const response = await apiRequestService.get(baseUrl, query.value);
  const collection = response["hydra:member"];

  const currentDate = new Date();

  const filteredJobs = collection.filter(item => {
    const endPublicationDate = new Date(item.endPublication);
    return item.type === 'ENTREPRISE' && endPublicationDate >= currentDate;
  });

  totalItems.value = filteredJobs.length;
  console.log(filteredJobs);
  return filteredJobs;
});


</script>

<style scoped>
#sticky-menu {
  position: sticky;
  top: 20rem;
  z-index: 1;
  margin-bottom: -32rem;
  float: right;
}

@media (max-width: 1800px) {
  #sticky-menu {
    top: 16rem;
    margin-bottom: -28rem;
  }
}
</style>