fix: 🐛 correct the search by text for recipes

app/Http/Controllers/Fo/RecipeController.php

@@ -146,7 +146,8 @@ class RecipeController extends Controller
         /** @var \Illuminate\Database\Eloquent\Builder $recipeModels */
         $recipeModels = Recipe::query()
             ->with(['products', 'products.submeats', 'consumptionMoment'])
-            ->where('published', true);
+            ->where('published', true)
+            ->orderBy('slug');
 
         /** @var string $search Search field */
         $search = $request->input('words');

resources/ts/bo/components/SearchBelongsToDropdownComponent.vue

@@ -7,17 +7,17 @@
     <VueSelect
       :id="id"
       :loading="loading"
-      v-model="modelParameters.selected"
+      v-model="modelSelected"
       :multiple="selectParameters.multiple"
       :clearable="!selectParameters.required"
       :label="selectParameters.fieldName"
       @search="search"
       :options="modelParameters.list"
       :selectable="(option: VselectOption) =>
-        (modelParameters.selected !== null)
-          ? (Array.isArray(modelParameters.selected))
-            ? !modelParameters.selected.includes(option)
-            : modelParameters.selected.id !== option.id
+        (modelSelected !== null)
+          ? (Array.isArray(modelSelected))
+            ? !modelSelected.includes(option)
+            : modelSelected.id !== option.id
           : true"
       :filterable="true"
       :required="selectParameters.required"
@@ -89,10 +89,10 @@
     </VueSelect>
     <!-- OUTPUT HTML INPUT -->
     <template
-      v-if="Array.isArray(modelParameters.selected) && modelParameters.selected !== null"
+      v-if="Array.isArray(modelSelected) && modelSelected !== null"
     >
       <input
-        v-for="(selectedId, selectedIndex) in modelParameters.selected"
+        v-for="(selectedId, selectedIndex) in modelSelected"
         :key="selectedIndex"
         :value="selectedId.id"
         :name="name + '[][id]'"
@@ -101,7 +101,7 @@
     </template>
     <input
       v-else
-      :value="modelParameters.selected?.id"
+      :value="modelSelected?.id"
       :name="name"
       type="hidden"
     >
@@ -212,11 +212,9 @@ const allErrors = ref<LaravelValidationErrors>(props.errors);
 const modelParameters = reactive<{
   targetClass: string,
   list: LaravelModelList,
-  selected: VselectOption|VselectOption[]|null,
 }>({
   targetClass: props.modeltarget,
   list: props.modellistpaginate.data,
-  selected: props.modelselected,
 });
 /** Exclude from modelParameters to emit an event on update */
 const modelSelected = ref<VselectOption|VselectOption[]|null>(props.modelselected);
@@ -264,7 +262,7 @@ onMounted(() => {
     modelParameters.targetClass = data.targetClass;
     modelParameters.list = data.modelListPaginate.data;
     nextTick(() => {
-      modelParameters.selected = data.modelSelected;
+      modelSelected.value = data.modelSelected;
     });
     /** Select parameters. */
     selectParameters.multiple = Boolean(data.multiple);

resources/ts/fo/components/SearchModelComponent.vue

@@ -16,7 +16,7 @@
       >
         <!-- TEXT FILTER -->
         <div class="col-12 mb-3 z-1">
-          <div class="search-custom bg-white bottom-left-shadow">
+          <div class="search-custom bottom-left-shadow">
             <SearchBelongsToDropdownComponent
               name="words"
               :multiple="true"
@@ -763,6 +763,7 @@ function ajaxErrorHandler(e: any): void {
       border: 0;
       border-radius: 0;
       padding: 0.75rem 1.12rem !important;
+      background-color: var(--bs-white) !important;
     }
     .vs__dropdown-menu {
       background-color: var(--bs-white);

resources/views/fo/pages/recipes/index.blade.php

@@ -59,8 +59,8 @@
                         ],
                     ],
                     [
-                        'id'     => str(__('type de consommation'))->slug()->value(),
-                        'title'  => __('type de consommation'),
+                        'id'     => str(__('moment de consommation'))->slug()->value(),
+                        'title'  => __('moment de consommation'),
                         'models' => $consumptionMomentModels,
                         'route'  => 'fo.recipes.search.consumption-moments',
                     ],