From 8a28d31e5f8f21c8ecad6e46b6506ea5bcd84fa8 Mon Sep 17 00:00:00 2001
From: Abdel LAMRANI <mohammed-abdelwadoud.lamrani@ldc.fr>
Date: Thu, 24 Sep 2026 12:37:43 +0200
Subject: [PATCH] bug: :bug: fix filter and show objectives

---
 .../Fo/Pro/DashboardController.php            | 10 +-
 .../ts/fo/components/ObjectivesComponent.vue  | 92 +++++++++++--------
 .../views/fo/pro/dashboard/index.blade.php    | 46 ++++------
 3 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/app/Http/Controllers/Fo/Pro/DashboardController.php b/app/Http/Controllers/Fo/Pro/DashboardController.php
index 7ff8a8f..9964178 100644
--- a/app/Http/Controllers/Fo/Pro/DashboardController.php
+++ b/app/Http/Controllers/Fo/Pro/DashboardController.php
@@ -92,15 +92,17 @@ class DashboardController extends Controller
             ['status', 1],
             ['category_id', 2]
         ])->orderBy('created_at', 'ASC')->paginate(4);
-
+        $objectivesData = [
+            'dbobjectif'     => $dbobjectif,
+            'dbmyObjectives' => $dbmyObjectives,
+            'formEnums'      => $formEnums,
+        ];
         return view(
             'fo.pro.dashboard.index',
             compact(
                 'cotations',
                 'mps',
-                'dbobjectif',
-                'dbmyObjectives',
-                'formEnums',
+                'objectivesData',
                 'pdfsAnalyse',
                 'pdfsMarches',
                 'dateMajCotations',
diff --git a/resources/ts/fo/components/ObjectivesComponent.vue b/resources/ts/fo/components/ObjectivesComponent.vue
index a0b01e6..311b1cb 100644
--- a/resources/ts/fo/components/ObjectivesComponent.vue
+++ b/resources/ts/fo/components/ObjectivesComponent.vue
@@ -25,48 +25,66 @@
             </transition>
 
             <form>
-                <div class="flex row">
-                    <select name="produit" id="produit" v-model="objectif.produit" @change="populate">
-                        <option value="--">Selectionner un produit*</option>
-                        <option v-for="produit in enums.produit" :key="produit.value" :value="produit.value">
-                            {{ produit.value }}
-                        </option>
-                    </select>
+    <div class="flex row">
+        <select name="produit" id="produit" v-model="objectif.produit" @change="populate">
+            <option value="--">Selectionner un produit*</option>
+            <option v-for="produit in enums.produit" :key="produit.value" :value="produit.value">
+                {{ produit.value }}
+            </option>
+        </select>
 
-                    <select name="qualite" v-model="objectif.qualite">
-                        <option value="--">Qualité</option>
-                        <option v-for="qualite in qualiteEnums" :key="qualite.value" :value="qualite.value">
-                            {{ qualite.value }}
-                        </option>
-                    </select>
-                </div>
+        <select name="qualite" v-model="objectif.qualite">
+            <option value="--">Qualité*</option>
+            <option v-for="qualite in qualiteEnums" :key="qualite.value" :value="qualite.value">
+                {{ qualite.value }}
+            </option>
+        </select>
+    </div>
 
-                <div class="validate">
-                    <button class="first-btn" @click.prevent="saveData" :disabled="processing">
-                        Enregistrer l'objectif
-                    </button>
-                </div>
-            </form>
+    <div class="flex row">
+        <select name="campagne" v-model="objectif.campagne" @change="populate">
+            <option value="--">Campagne*</option>
+            <option v-for="campagne in campagneEnums" :key="campagne.value" :value="campagne.value">
+                {{ campagne.value }}
+            </option>
+        </select>
+
+        <select name="echeance" v-model="objectif.echeance">
+            <option value="--">Échéance*</option>
+            <option v-for="echeance in echeanceEnums" :key="echeance.value" :value="echeance.value">
+                {{ echeance.value }}
+            </option>
+        </select>
+    </div>
+
+    <div class="flex row">
+        <input type="number" name="quantite" v-model.number="objectif.quantite" min="0" placeholder="Quantité*">
+        <input type="number" name="prix" v-model.number="objectif.prix" min="0" step="0.01" placeholder="Prix (€)*">
+    </div>
+
+    <div class="validate">
+        <button class="first-btn" @click.prevent="saveData" :disabled="processing">
+            Enregistrer l'objectif
+        </button>
+    </div>
+</form>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref } from "vue"
 import axios from "axios"
 
-interface Props {
-    name: string
-    dbobjectif: string
-    dbmyObjectives: string
-    formEnums: string
-}
+const props = defineProps<{ json: string }>()
 
-const props = defineProps<Props>()
+const initial = JSON.parse(props.json)
 
-const objectif = ref<any>({})
-const myobjectives = ref<any[]>([])
-const enums = ref<any>({})
+initial.dbobjectif.quantite = null
+
+const objectif = ref<any>(structuredClone(initial.dbobjectif))
+const myobjectives = ref<any[]>(initial.dbmyObjectives)
+const enums = ref<any>(initial.formEnums)
 const qualiteEnums = ref<any[]>([])
 const campagneEnums = ref<any[]>([])
 const echeanceEnums = ref<any[]>([])
@@ -76,12 +94,6 @@ const success = ref(false)
 const errors = ref<string[]>([])
 const response = ref("")
 
-onMounted(() => {
-    console.log("Objectives Component mounted.")
-    enums.value = JSON.parse(props.formEnums)
-    objectif.value = JSON.parse(props.dbobjectif)
-    myobjectives.value = JSON.parse(props.dbmyObjectives)
-})
 
 function populate(event: Event) {
     const target = event.target as HTMLSelectElement
@@ -175,10 +187,14 @@ function saveData() {
             objectif: objectif.value,
         })
         .then((res) => {
-            objectif.value = JSON.parse(props.dbobjectif)
             success.value = true
             response.value = "Sauvegarde terminée !"
             myobjectives.value.push(res.data)
+            objectif.value = structuredClone(initial.dbobjectif)
+            qualiteEnums.value = []
+            campagneEnums.value = []
+            echeanceEnums.value = []
+            setTimeout(() => (success.value = false), 3000)
         })
         .catch(() => {
             errors.value.push("Erreur lors de la sauvegarde.")
diff --git a/resources/views/fo/pro/dashboard/index.blade.php b/resources/views/fo/pro/dashboard/index.blade.php
index b480dc4..1ccc65a 100644
--- a/resources/views/fo/pro/dashboard/index.blade.php
+++ b/resources/views/fo/pro/dashboard/index.blade.php
@@ -92,8 +92,8 @@
                     <p>Ces cotations n'ont pas de valeurs contractuelles</p>
                 </div>
             </div>
-
-            <objectives dbobjectif='@json($dbobjectif)' dbmy-objectives='@json($dbmyObjectives)' form-enums='@json($formEnums)'></objectives>
+            
+            <div id="objectives" data-json='@json($objectivesData)'></div>
 
             <div class="pro--analyse">
                 <h2 class="post-title">Analyse technique</h2>
@@ -154,30 +154,24 @@
 @endsection
 
 @push('scripts')
-    <script>
-        function setMpSelector() {
-            var selectMP = $('select[name=mps]');
-            $('.mp--bloc:visible:first').find('.mp--bloc--header .cotations--mp span').hide();
-            $('.mp--bloc:visible:first').find('.mp--bloc--header .cotations--mp').append(selectMP);
-        }
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const select = document.querySelector('select[name=mps]');
+        const blocs = document.querySelectorAll('.cotations--grid .mp--bloc');
 
-        $(document).ready(function() {
-            setMpSelector();
-
-            $('select[name=mps]').change(function (){
-                if($(this).val() == 'All') {
-                    $('select[name=mps]')[0].selectedIndex = 0;
-                    $('.mp--bloc .mp--bloc--header .cotations--mp span').show();
-                    $('.mp--bloc').removeClass('final');
-                    $('.mp--bloc').show();
-                } else {
-                    $('.mp--bloc').hide();
-                    $('.mp--bloc.'+$(this).val()).addClass('final');
-                    $('.mp--bloc.'+$(this).val()).show();
-                }
-                setMpSelector();
-                //restore
+        const filtrer = () => {
+            const val = select.value;
+            blocs.forEach(b => {
+                const visible = val === 'All' || b.classList.contains(val);
+                b.style.display = visible ? '' : 'none';
+                b.classList.toggle('final', val !== 'All' && visible);
             });
-        });
-    </script>
+        };
+
+        select.value = 'All';
+        filtrer();
+
+        select.addEventListener('change', filtrer);
+    });
+</script>
 @endpush