Ajout l'état lorsque l'établissement est sélectionné

betagouv · Mar 4, 2025 · 3c8e336 · 3c8e336
1 parent a47c267
commit 3c8e336
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/2024-frontend/src/components/CanteenCreationResult.vue b/2024-frontend/src/components/CanteenCreationResult.vue
@@ -4,8 +4,11 @@ defineProps(["name", "siret", "city", "department", "status"])
 
 <template>
   <div class="fr-card fr-p-3v">
-    <div class="fr-grid-row fr-grid-row--top fr-grid-row--left fr-mb-1w">
-      <p class="fr-h6 fr-mb-0 fr-col-5">{{ name }}</p>
+    <div class="fr-grid-row fr-grid-row--top fr-grid-row--left">
+      <div class="fr-col-5">
+        <p class="fr-h6 fr-mb-1v">{{ name }}</p>
+        <DsfrBadge v-if="status === 'selected'" type="success" label="sélectionné" small />
+      </div>
       <div class="fr-col-offset-1"></div>
       <ul class="ma-cantine--unstyled-list fr-my-0 fr-col-6">
         <li>
@@ -16,7 +19,7 @@ defineProps(["name", "siret", "city", "department", "status"])
         </li>
       </ul>
     </div>
-    <div v-if="status === 'can-be-created'" class="fr-grid-row fr-grid-row--center">
+    <div v-if="status === 'can-be-created'" class="fr-grid-row fr-grid-row--center fr-mt-1w">
       <DsfrButton
         label="Sélectionner cet établissement"
         icon="fr-icon-add-circle-fill"

diff --git a/2024-frontend/src/components/CanteenCreationSiret.vue b/2024-frontend/src/components/CanteenCreationSiret.vue
@@ -5,6 +5,8 @@ import CanteenCreationResult from "@/components/CanteenCreationResult.vue"
 
 const search = ref()
 const canteen = reactive({})
+const hasSelected = ref(false)
+const emit = defineEmits(["select"])
 
 const searchSiret = () => {
   verifySiret(search.value)
@@ -30,10 +32,16 @@ const saveCanteenInfos = (response) => {
   canteen.postalCode = response.postalCode
   canteen.department = response.postalCode.slice(0, 2)
 }
+
+const selectCanteen = () => {
+  hasSelected.value = true
+  canteen.status = "selected"
+  emit("select", canteen)
+}
 </script>
 
 <template>
-  <div>
+  <div class="canteen-creation-siret">
     <p class="fr-mb-0">Mon établissement</p>
     <p class="fr-hint-text">
       Nous utilisons le site
@@ -55,7 +63,8 @@ const saveCanteenInfos = (response) => {
       :city="canteen.city"
       :department="canteen.department"
       :status="canteen.status"
-      @select="$emit('select', canteen)"
+      @select="selectCanteen()"
+    />
     />
   </div>
 </template>