From 8e7be69b15057dd82a211e4c3cd4e496dcf83d7e Mon Sep 17 00:00:00 2001
From: Noah Lancien <noah.lancien@ldc.fr>
Date: Wed, 11 Sep 2024 16:25:10 +0200
Subject: [PATCH] fix: Products (sub)ranges/(sub)meats script was blocked by
 CSP

---
 .../views/bo/pages/products/form.blade.php    | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/resources/views/bo/pages/products/form.blade.php b/resources/views/bo/pages/products/form.blade.php
index e5080a70..2c5734d5 100644
--- a/resources/views/bo/pages/products/form.blade.php
+++ b/resources/views/bo/pages/products/form.blade.php
@@ -439,7 +439,7 @@
         </fieldset>
     </div>
     {{-- RANGES/SUBRANGES --}}
-    <div id="rangesTypes" class="col-12 mb-3">
+    <div class="col-12 mb-3" id="rangesTypes">
         <fieldset class="h-100 border p-3">
             <legend>{{ str(__('models.classes.range'))->plural()->ucFirst() }}</legend>
             <div class="row">
@@ -449,8 +449,7 @@
                         <b>{{ __('Sélectionner le type de :model à associer', ['model' => __('models.classes.range')]) }}
                             *</b>
                     </label>
-                    <select id="selectRangeType" class="form-select" onchange="updateRangeTypeInput(this.value)"
-                        role="button">
+                    <select class="form-select" id="selectRangeType" role="button">
                         <option value="range" @selected(old('range_id', !is_null($productModel->range_id) ? true : false))>
                             {{ str(__('models.classes.range'))->ucFirst() }}</option>
                         <option value="subrange" @selected(old('subrange_id', !is_null($productModel->subrange_id) ? true : false))>
@@ -463,7 +462,7 @@
                     </small>
                 </div>
                 {{-- RANGES --}}
-                <div id="range-input" class="col-12 col-lg-6 range-fields d-none">
+                <div class="col-12 col-lg-6 range-fields d-none" id="range-input">
                     @include('bo.partials.inputs.search-belongs-to-dropdown', [
                         'id' => 'productRange',
                         'label' => __(':model associée', [
@@ -488,7 +487,7 @@
                     ])
                 </div>
                 {{-- SUBRANGES --}}
-                <div id="subrange-input" class="col-12 col-lg-6 range-fields d-none">
+                <div class="col-12 col-lg-6 range-fields d-none" id="subrange-input">
                     @include('bo.partials.inputs.search-belongs-to-dropdown', [
                         'id' => 'productSubrange',
                         'label' => __(':model associée', [
@@ -512,11 +511,18 @@
                         ]),
                     ])
                 </div>
-                <script>
+                <script nonce="{{ $nonce }}">
                     setTimeout(() => {
                         updateRangeTypeInput("{{ !is_null($productModel->subrange_id) ? 'subrange' : 'range' }}");
                     }, 1000);
+
+                    const selectRangeType = document.getElementById('selectRangeType');
+                    selectRangeType.addEventListener('change', updateRangeTypeInput);
+
                     function updateRangeTypeInput(val) {
+                        if (typeof val !== 'string') {
+                            val = val.currentTarget.value;
+                        }
                         document.querySelectorAll("#rangesTypes .range-fields").forEach(select => {
                             if (select.id === `${val}-input`) {
                                 select.classList.remove("d-none");
@@ -532,7 +538,7 @@
         </fieldset>
     </div>
     {{-- MEATS/SUBMEATS --}}
-    <div id="meatsTypes" class="col-12 mb-3">
+    <div class="col-12 mb-3" id="meatsTypes">
         <fieldset class="h-100 border p-3">
             <legend>{{ str(__('models.classes.meat'))->plural()->ucFirst() }}</legend>
             <div class="row">
@@ -542,8 +548,7 @@
                         <b>{{ __('Sélectionner le type de :model à associer', ['model' => __('models.classes.meat')]) }}
                             *</b>
                     </label>
-                    <select id="selectMeatType" class="form-select" onchange="updateMeatTypeInput(this.value)"
-                        role="button">
+                    <select class="form-select" id="selectMeatType" role="button">
                         <option value="meat" @selected(old('meat_id', !is_null($productModel->meat_id) ? true : false))>
                             {{ str(__('models.classes.meat'))->ucFirst() }}</option>
                         <option value="submeat" @selected(old('submeat_id', !is_null($productModel->submeat_id) ? true : false))>
@@ -556,7 +561,7 @@
                     </small>
                 </div>
                 {{-- MEATS --}}
-                <div id="meat-input" class="col-12 col-lg-6 meat-fields d-none">
+                <div class="col-12 col-lg-6 meat-fields d-none" id="meat-input">
                     @include('bo.partials.inputs.search-belongs-to-dropdown', [
                         'id' => 'productMeat',
                         'label' => __(':model associée', [
@@ -581,7 +586,7 @@
                     ])
                 </div>
                 {{-- SUBMEATS --}}
-                <div id="submeat-input" class="col-12 col-lg-6 meat-fields d-none">
+                <div class="col-12 col-lg-6 meat-fields d-none" id="submeat-input">
                     @include('bo.partials.inputs.search-belongs-to-dropdown', [
                         'id' => 'productSubmeat',
                         'label' => __(':model associée', [
@@ -605,11 +610,18 @@
                         ]),
                     ])
                 </div>
-                <script>
+                <script nonce="{{ $nonce }}">
                     setTimeout(() => {
                         updateMeatTypeInput("{{ !is_null($productModel->submeat_id) ? 'submeat' : 'meat' }}");
                     }, 1000);
+
+                    const selectMeatType = document.getElementById('selectMeatType');
+                    selectMeatType.addEventListener('change', updateMeatTypeInput);
+
                     function updateMeatTypeInput(val) {
+                        if (typeof val !== 'string') {
+                            val = val.currentTarget.value;
+                        }
                         document.querySelectorAll("#meatsTypes .meat-fields").forEach(select => {
                             if (select.id === `${val}-input`) {
                                 select.classList.remove("d-none");