feat(Accueil gestionnaire): rendre le tableau actions plus trouvable …

…(affichage liste) (#4746)

frontend/src/utils.js

@@ -441,17 +441,31 @@ export const largestId = (objects) => {
   return Math.max(...objects.map((x) => x.id))
 }
 
+const cookieExpirationDate = () => {
+  const expirationDate = new Date()
+  expirationDate.setFullYear(expirationDate.getFullYear() + 1)
+  return expirationDate.toUTCString()
+}
+
 export const bannerCookieName = "lastHiddenCommunityEventId"
 
 export const hideCommunityEventsBanner = (events, store) => {
   if (events.length === 0) return
-  const expirationDate = new Date()
-  expirationDate.setFullYear(expirationDate.getFullYear() + 1)
   const lastEventId = largestId(events)
-  document.cookie = `${bannerCookieName}=${lastEventId};max-age=31536000;path=/;expires=${expirationDate.toUTCString()};SameSite=Strict;`
+  document.cookie = `${bannerCookieName}=${lastEventId};max-age=31536000;path=/;expires=${cookieExpirationDate()};SameSite=Strict;`
   store.dispatch("setShowWebinaireBanner", false)
 }
 
+export const canteenMgmtViewStyleCookieName = "canteenMgmtViewStyle"
+
+export const updateManagerCanteenViewPreference = (listStyle) => {
+  document.cookie = `${canteenMgmtViewStyleCookieName}=${listStyle};max-age=31536000;path=/;expires=${cookieExpirationDate()};SameSite=Strict;`
+}
+
+export const readManagerCanteenViewPreference = () => {
+  return readCookie(canteenMgmtViewStyleCookieName)
+}
+
 export const capitalise = (str) => {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }

frontend/src/views/ManagementPage/index.vue

@@ -42,8 +42,33 @@
       <ActionsBanner v-else />
     </div>
     <div class="mt-4">
-      <h2 class="my-4 text-h5 font-weight-black">Mes cantines</h2>
-      <CanteensPagination v-on:canteen-count="canteenCount = $event" />
+      <v-row class="justify-space-between">
+        <v-col>
+          <h2 class="my-4 text-h5 font-weight-black">Mes cantines</h2>
+        </v-col>
+        <v-col class="flex-shrink-1 flex-grow-0">
+          <DsfrSegmentedControl
+            v-model="viewStyle"
+            legend="Vue"
+            :noLegend="true"
+            :items="viewStyles"
+            @input="updatePreference"
+          />
+        </v-col>
+      </v-row>
+      <div v-if="showListView">
+        <p>Actions en attente en {{ year }}</p>
+        <AnnualActionableCanteensTable v-on:canteen-count="canteenCount = $event" />
+        <v-btn large color="primary" outlined :to="{ name: 'NewCanteen' }">
+          <v-icon class="mr-2">mdi-plus</v-icon>
+          Ajouter une cantine
+        </v-btn>
+        <v-btn large text color="primary" :to="{ name: 'DiagnosticsImporter' }">
+          <v-icon class="mr-2">mdi-file-upload-outline</v-icon>
+          Créer plusieurs cantines depuis un fichier
+        </v-btn>
+      </div>
+      <CanteensPagination v-else v-on:canteen-count="canteenCount = $event" />
     </div>
     <PageSatisfaction v-if="canteenCount" class="my-12" />
     <div class="mt-12 mb-8" v-if="canteenCount > 0">
@@ -83,13 +108,19 @@
 <script>
 import CanteensPagination from "./CanteensPagination.vue"
 import PageSatisfaction from "@/components/PageSatisfaction.vue"
+import DsfrSegmentedControl from "@/components/DsfrSegmentedControl"
 import UserTools from "./UserTools"
 import TeledeclarationBanner from "./TeledeclarationBanner"
 import CanteenCreationDialog from "./CanteenCreationDialog"
 import ActionsBanner from "./ActionsBanner"
 import SuccessBanner from "./SuccessBanner"
 import validators from "@/validators"
 import { lastYear } from "@/utils"
+import AnnualActionableCanteensTable from "@/components/AnnualActionableCanteensTable"
+import { readManagerCanteenViewPreference, updateManagerCanteenViewPreference } from "@/utils"
+
+const LIST_VIEW = "list"
+const CARD_VIEW_DEFAULT_THRESHOLD = 5 // la pagination de cartes est à partir de 5 cantines
 
 export default {
   name: "ManagementPage",
@@ -101,6 +132,8 @@ export default {
     ActionsBanner,
     SuccessBanner,
     CanteenCreationDialog,
+    DsfrSegmentedControl,
+    AnnualActionableCanteensTable,
   },
   data() {
     return {
@@ -160,6 +193,20 @@ export default {
           style: "background-color: #E8EDFF; border: none;", // light / background / contrast-info
         },
       ],
+      viewStyles: [
+        {
+          text: "Vue cartes",
+          icon: "$layout-grid-fill",
+          value: "card",
+        },
+        {
+          text: "Vue liste",
+          icon: "$list-check",
+          value: LIST_VIEW,
+        },
+      ],
+      viewStyle: readManagerCanteenViewPreference(),
+      year: lastYear(),
     }
   },
   computed: {
@@ -169,9 +216,17 @@ export default {
     showSuccessBanner() {
       return !this.actionsLoading && !this.hasActions
     },
+    showListView() {
+      return this.viewStyle === LIST_VIEW
+    },
+  },
+  methods: {
+    updatePreference() {
+      updateManagerCanteenViewPreference(this.viewStyle)
+    },
   },
   mounted() {
-    return fetch(`/api/v1/actionableCanteens/${lastYear()}?limit=1&offset=0`)
+    return fetch(`/api/v1/actionableCanteens/${this.year}?limit=1&offset=0`)
       .then((response) => {
         if (response.status < 200 || response.status >= 400) throw new Error(`Error encountered : ${response}`)
         return response.json()
@@ -185,6 +240,9 @@ export default {
       if (this.loggedUser.mcpOrganizations && count === 0 && this.showCanteenCreationPrompt === null) {
         this.showCanteenCreationPrompt = true
       }
+      if (count > CARD_VIEW_DEFAULT_THRESHOLD && !readManagerCanteenViewPreference()) {
+        this.viewStyle = LIST_VIEW
+      }
     },
   },
 }

frontend/src/views/PendingActions/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import AnnualActionableCanteensTable from "./AnnualActionableCanteensTable"
+import AnnualActionableCanteensTable from "@/components/AnnualActionableCanteensTable"
 import BreadcrumbsNav from "@/components/BreadcrumbsNav"
 import { lastYear } from "@/utils"