Reduce modal size. Order canteens alphabetically. Refactoring

betagouv · Oct 18, 2024 · c367a39 · c367a39
1 parent 5e05a1b
commit c367a39
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/frontend/src/components/ResourceActionDialog.vue b/frontend/src/components/ResourceActionDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="isOpen" id="resource-action-dialog">
+  <v-dialog v-model="isOpen" id="resource-action-dialog" width="500">
     <v-card class="pa-6">
       <div class="mt-n6 mx-n6 mb-4 pa-4 d-flex" style="background-color: #F5F5F5">
         <v-spacer></v-spacer>
@@ -51,9 +51,10 @@ export default {
       type: Array,
       required: true,
     },
-    actionsDone: {
+    actionCanteensDone: {
       type: Array,
       required: true,
+      example: [{ id: 1, name: "Cantine 1" }],
     },
   },
   data() {
@@ -62,9 +63,9 @@ export default {
     }
   },
   mounted() {
-    // Get the canteens that have already done the action
+    // Pre-select the canteens that have already done the action
     this.chosenCanteenIds = this.userCanteens
-      .filter((canteen) => this.actionsDone.find((actionCanteen) => actionCanteen.id === canteen.id))
+      .filter((canteen) => this.actionCanteensDone.find((actionCanteen) => actionCanteen.id === canteen.id))
       .map((canteen) => canteen.id)
   },
   computed: {
@@ -90,11 +91,11 @@ export default {
       const actionChanges = []
       // Compare the chosen canteens with the actions done (new & removed)
       this.chosenCanteenIds.forEach((canteenId) => {
-        if (!this.actionsDone.find((actionCanteen) => actionCanteen.id === canteenId)) {
+        if (!this.actionCanteensDone.find((actionCanteen) => actionCanteen.id === canteenId)) {
           actionChanges.push(this.createOrUpdateResourceAction(canteenId, true))
         }
       })
-      this.actionsDone.forEach((actionCanteen) => {
+      this.actionCanteensDone.forEach((actionCanteen) => {
         if (!this.chosenCanteenIds.includes(actionCanteen.id)) {
           actionChanges.push(this.createOrUpdateResourceAction(actionCanteen.id, false))
         }

diff --git a/frontend/src/views/WasteActionsPage/WasteActionPage.vue b/frontend/src/views/WasteActionsPage/WasteActionPage.vue
@@ -34,8 +34,8 @@
         <v-col v-if="loggedUser" cols="12" class="d-flex flex-column align-start mt-8" sm="2">
           <p class="mb-2">Mis en place</p>
           <DsfrTagGroup
-            v-if="hasActionsDone"
-            :tags="actionsDone"
+            v-if="actionCanteensDone.length"
+            :tags="actionCanteensDoneTags"
             :closeable="false"
             :small="true"
             :clickable="false"
@@ -59,7 +59,7 @@
         v-model="actionDialog"
         :resourceId="id"
         :userCanteens="userCanteens"
-        :actionsDone="actionsDone"
+        :actionCanteensDone="actionCanteensDone"
         @close="closeActionDialog($event)"
       />
     </div>
@@ -72,6 +72,7 @@ import DsfrTagGroup from "@/components/DsfrTagGroup"
 import DsfrTag from "@/components/DsfrTag"
 import ResourceActionDialog from "@/components/ResourceActionDialog"
 import Constants from "@/constants"
+import { normaliseText } from "@/utils"
 
 export default {
   components: { BreadcrumbsNav, BackLink, DsfrTagGroup, DsfrTag, ResourceActionDialog },
@@ -125,7 +126,10 @@ export default {
     },
     userCanteens() {
       if (!this.loggedUser) return []
-      return this.$store.state.userCanteenPreviews
+      const canteens = this.$store.state.userCanteenPreviews
+      return canteens.sort((a, b) => {
+        return normaliseText(a.name) > normaliseText(b.name) ? 1 : 0
+      })
     },
     effort() {
       return (
@@ -146,18 +150,21 @@ export default {
         }
       })
     },
-    hasActionsDone() {
-      return this.wasteAction?.actions?.filter((action) => action.isDone).length > 0
+    actionCanteensDone() {
+      if (!this.wasteAction.actions) return []
+      return this.userCanteens.filter((canteen) =>
+        this.wasteAction.actions.find(
+          (actionCanteen) => actionCanteen.canteen.id === canteen.id && actionCanteen.isDone
+        )
+      )
     },
-    actionsDone() {
-      return this.wasteAction.actions
-        .filter((action) => action.isDone)
-        .map((action) => {
-          return {
-            id: action.canteen.id,
-            text: action.canteen.name,
-          }
-        })
+    actionCanteensDoneTags() {
+      return this.actionCanteensDone.map((canteen) => {
+        return {
+          id: canteen.id,
+          text: canteen.name,
+        }
+      })
     },
   },
   mounted() {