Add pizza exports list page

src/components/Navigation.vue

@@ -66,6 +66,13 @@ const burger_menu = ref(false);
         </router-link>
       </div>
       <div v-else>
+        <router-link
+          v-if="user?.groups.includes('Equipe Bouffe')"
+          class="mx-4 font-bold text-white transition duration-150 ease-in-out hover:text-blue-800"
+          to="/admin/pizza/export/list"
+        >
+          Liste des exports
+        </router-link>
         <router-link
           v-if="user?.groups.includes('Equipe Bouffe')"
           class="mx-4 font-bold text-white transition duration-150 ease-in-out hover:text-blue-800"

src/main.ts

@@ -1,11 +1,16 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
   faAngleDown,
-  faAngleUp, faArrowLeft,
+  faAngleUp,
+  faArrowLeft,
   faArrowsRotate,
-  faBolt, faCheck,
-  faChevronDown, faChevronUp,
-  faCircle, faCircleCheck,
+  faBolt,
+  faCaretRight,
+  faCheck,
+  faChevronDown,
+  faChevronUp,
+  faCircle,
+  faCircleCheck,
   faCirclePlus,
   faClock,
   faCrown,
@@ -37,31 +42,32 @@ import './style.css';
 
 /* add icons to the library */
 library.add(
-  faCirclePlus,
-  faPencil,
-  faWarning,
-  faFile,
+  faAngleDown,
+  faAngleUp,
+  faArrowLeft,
   faArrowsRotate,
-  faCircleCheck,
+  faBolt,
+  faCaretRight,
+  faCheck,
+  faChevronDown,
+  faChevronUp,
   faCircle,
+  faCircleCheck,
+  faCirclePlus,
   faClock,
+  faCrown,
+  faDownload,
   faEye,
   faEyeSlash,
-  faChevronDown,
-  faChevronUp,
-  faDownload,
-  faMagnifyingGlass,
-  faTrashCan,
-  faBolt,
-  faArrowLeft,
+  faFile,
   faHammer,
-  faCrown,
+  faMagnifyingGlass,
+  faPencil,
   faPenToSquare,
   faPizzaSlice,
+  faTrashCan,
+  faWarning,
   faXmark,
-  faCheck,
-  faAngleDown,
-  faAngleUp,
 );
 
 axios.defaults.baseURL = import.meta.env.VITE_API_URL;

src/models/timeslot.ts

@@ -24,6 +24,6 @@ export interface AdminTimeslotDeref extends Timeslot {
 
 export interface Export {
   id: number;
-  orders: object;
-  time_slot: number;
+  orders: { [key: string]: number };
+  created_at: string;
 }

src/router/index.ts

@@ -143,6 +143,14 @@ const routes: RouteRecordRaw[] = [
       return (!isConnected || !user.groups.includes('Equipe Bouffe')) ? { path: '/' } : true;
     },
   },
+  {
+    path: '/admin/pizza/export/list',
+    component: () => import('@/views/AdminPizza/AdminPizzaExportList.vue'),
+    beforeEnter: () => {
+      const { isConnected, user } = useUserStore();
+      return (!isConnected || !user.groups.includes('Equipe Bouffe')) ? { path: '/' } : true;
+    },
+  },
   {
     path: '/archives',
     component: () => import('@/views/Archives.vue'),

src/stores/pizza.store.ts

@@ -4,6 +4,7 @@ import { ref } from 'vue';
 import type { Order } from '@/models/order';
 import type { Pizza } from '@/models/pizza';
 import type { AdminTimeslotDeref, Export, Timeslot } from '@/models/timeslot';
+import { frenchFormatFromDate } from '@/utils';
 
 import { useUserStore } from './user.store';
 
@@ -13,6 +14,7 @@ const { csrf } = storeToRefs(useUserStore());
 export const usePizzaStore = defineStore('pizza', () => {
   const pizzaList = ref<Record<number, Pizza>>({});
   const timeslotList = ref<Record<number, Timeslot | AdminTimeslotDeref>>({});
+  const timeslotExportList = ref<Record<number, Export[]>>({});
 
   async function fetchAllPizzas() {
     const res = await axios.get<Pizza[]>('/pizza/pizza/full');
@@ -122,16 +124,32 @@ export const usePizzaStore = defineStore('pizza', () => {
     }
   }
 
-  function frenchFormatFromDate(date: Date): string {
-    const mois: string[] = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
-    const year = date.getFullYear();
-    const dayNumber = date.getDate();
-    const month = mois[date.getMonth()];
-    const weekday = date.toLocaleDateString('fr-FR', { weekday: 'long' });
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
+  async function fetchTimeslotExports() {
+    await Promise.all(Object.values(timeslotList.value).map(async ({ id }) => {
+      const res = await axios.get<Export[]>(`/pizza/timeslot/${id}/export`);
+      timeslotExportList.value[id] = res.data;
+    }));
+  }
+
+  async function deleteExport(exportId: number) {
+    await get_csrf();
+
+    const res = await axios.delete(`/pizza/export/${exportId}`, {
+      withCredentials: true,
+      headers: {
+        'X-CSRFToken': csrf.value,
+      },
+    });
 
-    return `${weekday} ${dayNumber} ${month} ${year} - ${hours}h${minutes}`;
+    if (res.status === 204) {
+      Object.values(timeslotList.value).forEach(({ id }) => {
+        for (let i = 0; i < timeslotExportList.value[id].length; i += 1) {
+          if (timeslotExportList.value[id][i].id === exportId) {
+            timeslotExportList.value[id].splice(i, 1);
+          }
+        }
+      });
+    }
   }
 
   async function exportOrders(timeslotId: number) {
@@ -285,14 +303,16 @@ export const usePizzaStore = defineStore('pizza', () => {
   return {
     pizzaList,
     timeslotList,
+    timeslotExportList,
     fetchAllPizzas,
     fetchNextTimeslots,
-    frenchFormatFromDate,
     fetchAdminDetailTimeslot,
     addOrder,
     patchOrder,
     addTimeslot,
     deleteTimeslot,
+    fetchTimeslotExports,
+    deleteExport,
     exportOrders,
     addPizza,
     patchPizza,

src/utils.ts

@@ -0,0 +1,14 @@
+export function frenchFormatFromDate(date: Date): string {
+  const mois: string[] = [
+    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout',
+    'Septembre', 'Octobre', 'Novembre', 'Décembre',
+  ];
+  const year = date.getFullYear();
+  const dayNumber = date.getDate();
+  const month = mois[date.getMonth()];
+  const weekday = date.toLocaleDateString('fr-FR', { weekday: 'long' });
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  return `${weekday} ${dayNumber} ${month} ${year} - ${hours}h${minutes}`;
+}

src/views/AdminPizza/AdminPizza.vue

@@ -10,14 +10,14 @@ import { type Payment, PAYMENT_METHODS } from '@/models/order';
 import type { AdminTimeslotDeref } from '@/models/timeslot';
 import { useErrorStore } from '@/stores/error.store';
 import { usePizzaStore } from '@/stores/pizza.store';
+import { frenchFormatFromDate } from '@/utils';
 
 const { add_error } = useErrorStore();
 
 const pizzaStore = usePizzaStore();
 const { pizzaList, timeslotList } = storeToRefs(pizzaStore);
 const {
   fetchNextTimeslots,
-  frenchFormatFromDate,
   fetchAdminDetailTimeslot,
   fetchAllPizzas,
   addOrder,

src/views/AdminPizza/AdminPizzaExportList.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+
+import { storeToRefs } from 'pinia';
+import { reactive, ref } from 'vue';
+import Modal from '@/components/Modal.vue';
+import type { Export } from '@/models/timeslot';
+import { usePizzaStore } from '@/stores/pizza.store';
+import { frenchFormatFromDate } from '@/utils';
+
+const pizzaStore = usePizzaStore();
+const { timeslotList, timeslotExportList } = storeToRefs(pizzaStore);
+const {
+  fetchNextTimeslots,
+  fetchAdminDetailTimeslot,
+  fetchTimeslotExports,
+  deleteExport,
+} = pizzaStore;
+
+const timeslotsExpand = reactive<{ [key: number]: boolean }>({});
+const exportToDelete = ref<Export | null>(null);
+
+const closeConfirmDeleteModal = () => {
+  exportToDelete.value = null;
+};
+
+const confirmDeleteExport = async () => {
+  if (exportToDelete.value === null) return;
+
+  await deleteExport(exportToDelete.value.id);
+  closeConfirmDeleteModal();
+};
+
+await fetchNextTimeslots();
+await fetchAdminDetailTimeslot();
+await fetchTimeslotExports();
+
+Object.values(timeslotList.value).forEach((timeslot) => {
+  timeslotsExpand[timeslot.id] = false;
+});
+
+</script>
+
+<template>
+  <h1 class="title">
+    Liste des exports
+  </h1>
+  <div class="mb-6 mt-2 flex flex-col gap-2 px-4">
+    <div v-if="Object.values(timeslotList).length === 0" class="flex justify-center text-2xl">
+      Il n'y a pas de créneau de commande.
+    </div>
+    <div
+      v-for="timeslot in timeslotList"
+      :key="timeslot.id"
+      class="flex flex-col overflow-hidden rounded bg-cyan-900"
+    >
+      <div
+        class="flex select-none items-center gap-2 p-2 hover:cursor-pointer hover:bg-cyan-800"
+        @click="timeslotsExpand[timeslot.id] = !timeslotsExpand[timeslot.id]"
+        @keydown.enter="timeslotsExpand[timeslot.id] = !timeslotsExpand[timeslot.id]"
+      >
+        <div class="flex size-8 items-center justify-center text-2xl">
+          <fa-awesome-icon icon="fa-caret-right" :class="{ 'rotate-90': timeslotsExpand[timeslot.id] }"/>
+        </div>
+        <div class="m-0 grow">
+          Créneau {{ frenchFormatFromDate(new Date(timeslot.delivery_time)) }}
+        </div>
+        <div>
+          Export{{ timeslotExportList[timeslot.id].length > 1 ? 's' : '' }}  : {{ timeslotExportList[timeslot.id].length }}
+        </div>
+      </div>
+      <div
+        v-if="timeslotExportList[timeslot.id].length === 0"
+        class="flex items-center justify-center p-3"
+        :class="{ hidden: !timeslotsExpand[timeslot.id] }"
+      >
+        Aucun export n'a été effectué pour ce créneau.
+      </div>
+      <div
+        v-for="timeslotExport in timeslotExportList[timeslot.id]"
+        :key="timeslotExport.id"
+        class="ml-4 hover:bg-cyan-800"
+        :class="{ hidden: !timeslotsExpand[timeslot.id] }"
+      >
+        <div class="flex select-none items-center gap-2 p-2">
+          <div class="flex size-8 items-center px-3">
+            <fa-awesome-icon icon="fa-file"/>
+          </div>
+          <div class="m-0 grow">
+            Export {{ frenchFormatFromDate(new Date(timeslotExport.created_at)) }}
+          </div>
+          <button
+            type="button"
+            class="size-8 rounded bg-red-600 hover:bg-red-500"
+            title="Supprimer"
+            @click="exportToDelete = timeslotExport"
+          >
+            <fa-awesome-icon icon="fa-trash-can"/>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Modal v-if="exportToDelete">
+    <template #icon>
+      <div/>
+    </template>
+    <template #title>
+      <div/>
+      <h3 id="modal-title" class="text-white-900 text-base font-semibold leading-6">
+        Supprimer un export
+      </h3>
+    </template>
+    <template #body>
+      <p class="mt-2 max-w-sm">
+        Voulez-vous supprimer l'export du <span class="underline">{{ frenchFormatFromDate(new Date(exportToDelete.created_at)) }}</span> ?
+      </p>
+    </template>
+    <template #buttons>
+      <div class="flex w-full justify-center gap-4">
+        <button
+          class="rounded bg-gray-500 p-2 text-sm text-gray-900 hover:bg-gray-300"
+          type="button"
+          @click="closeConfirmDeleteModal"
+        >
+          Annuler
+        </button>
+        <button
+          class="rounded bg-red-600 p-2 text-sm hover:bg-red-500"
+          type="submit"
+          @click="confirmDeleteExport"
+        >
+          Valider
+        </button>
+      </div>
+    </template>
+  </Modal>
+</template>