feat(projects): enhance project form with improved input handling

- Refactor project form view for better input management - Implement consistent old value handling for all form fields - Improve readability and maintainability of form template - Ensure proper display of existing project data during edit - Add fallback for old input values in case of validation errors Changes: - Use old() helper consistently across all input fields - Maintain existing project data when editing - Preserve user input after failed validation - Improve form layout and code structure
Abdoulrachard · Nov 15, 2024 · 738f80d · 738f80d
1 parent 35eb817
commit 738f80d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 51 deletions.
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
@@ -1,7 +1,7 @@
 <div>
     <label for="{{ $name }}"
         class="block mb-2 text-sm font-medium text-gray-900">{{ $label }}</label>
-    <input type="{{ $type ?? 'text' }}" id="{{ $name }}" name="{{ $name }}" value="{!! $attributes->get('value') !!}" placeholder
+    <input type="{{ $type ?? 'text' }}" id="{{ $name }}" name="{{ $name }}" value="{{ old($name, $value ?? '') }}" placeholder
         class="block w-full p-2 border rounded-lg focus:outline-none focus:ring-2 {{ $errors->has($name) ? 'ring-red-500 border-red-500 placeholder-red-700 text-black' : 'ring-blue-500 border-gray-300 placeholder-gray-400 text-black' }} dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
         {{ isset($multiple) ? 'multiple' : '' }} >
     <p class="mt-2 text-sm {{ $errors->has($name) ? 'text-red-600 dark:text-red-500' : 'text-gray-600' }}">

diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
@@ -1,8 +1,42 @@
 <div>
     <label for="{{ $name }}"
         class="block mb-2 text-sm font-medium text-gray-900">{{ $label }}</label>
-    <textarea id="myeditorinstance" name="{{ $name }}"
-        class="@error($name) bg-red-50 p-2 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500 @else block w-full p-2 text-black border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 @enderror">{{ old($name, $value) }}</textarea>
+    <textarea 
+        id="{{ $name }}" 
+        name="{{ $name }}"
+        class="@error($name) 
+            bg-red-50 
+            border border-red-500 
+            text-red-900 
+            placeholder-red-700 
+            text-sm 
+            rounded-lg 
+            focus:ring-red-500 
+            dark:bg-gray-700 
+            focus:border-red-500 
+            block w-full p-2.5 
+            dark:text-red-500 
+            dark:placeholder-red-500 
+            dark:border-red-500 
+        @else 
+            block w-full 
+            p-2 
+            text-black 
+            border border-gray-300 
+            rounded-lg 
+            bg-gray-50 
+            text-base 
+            focus:ring-blue-500 
+            focus:border-blue-500 
+            dark:bg-gray-700 
+            dark:border-gray-600 
+            dark:placeholder-gray-400 
+            dark:text-white 
+            dark:focus:ring-blue-500 
+            dark:focus:border-blue-500 
+        @enderror"
+    >{{ old($name, $value ?? '') }}</textarea>
+
     <p class="mt-2 text-sm {{ $errors->has($name) ? 'text-red-600 dark:text-red-500' : 'text-gray-600 dark:text-gray-400' }}">
         <span class="font-medium">
             @error($name)

diff --git a/resources/views/projects/form.blade.php b/resources/views/projects/form.blade.php
@@ -12,89 +12,85 @@
 
         <form class="vstack gap-2" enctype="multipart/form-data"
             action="{{ route($project->exists ? 'project.update' : 'project.store', $project) }}" method="POST">
-            {{-- @php 
-                dd($project)
-            @endphp --}}
             @csrf
-
             @method($project->exists ? 'PUT' : 'POST')
+
             <div class="row">
                 <div class="col-md-6">
-                    <x-forms.input name='year' :value="$project->year" label='Année :' />
+                    <x-forms.input name="year" value="{{ old('year', $project->year) }}" label="Année :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='title' :value="$project->title" label='Titre :' />
+                    <x-forms.input name="title" value="{{ old('title', $project->title) }}" label="Titre :" />
                 </div>
 
                 <div class="col-md-6">
-                    <x-forms.input name='project_name' :value="$project->project_name" label='Nom du Projet :' />
+                    <x-forms.input name="project_name" value="{{ old('project_name', $project->project_name) }}" label="Nom du Projet :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='city' :value="$project->city" label='Ville :' />
+                    <x-forms.input name="city" value="{{ old('city', $project->city) }}" label="Ville :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='developer' :value="$project->developer" label='Dévelloper par :' />
+                    <x-forms.input name="developer" value="{{ old('developer', $project->developer) }}" label="Développé par :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='maitre_ouvre' :value="$project->maitre_ouvre" label="Maitre D'oeuvre  :"  />
+                    <x-forms.input name="maitre_ouvre" value="{{ old('maitre_ouvre', $project->maitre_ouvre) }}" label="Maître d'Œuvre :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='typologie' :value="$project->typologie" label="Typology  :"  />
+                    <x-forms.input name="typologie" value="{{ old('typologie', $project->typologie) }}" label="Typology :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='programme' :value="$project->programme" label="Programme  :"  />
+                    <x-forms.input name="programme" value="{{ old('programme', $project->programme) }}" label="Programme :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='procedure' :value="$project->procedure" label="Procedure  :"  />
+                    <x-forms.input name="procedure" value="{{ old('procedure', $project->procedure) }}" label="Procédure :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='signaletique' :value="$project->signaletique" label="Signaletique  :"  />
+                    <x-forms.input name="signaletique" value="{{ old('signaletique', $project->signaletique) }}" label="Signalétique :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='surface' :value="$project->surface" label="Surface  :"  />
+                    <x-forms.input name="surface" value="{{ old('surface', $project->surface) }}" label="Surface :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='realisation' :value="$project->realisation" label="Réalisation  :"  />
+                    <x-forms.input name="realisation" value="{{ old('realisation', $project->realisation) }}" label="Réalisation :" />
                 </div>
                 <div class="col-md-6">
-                    <x-forms.input name='volume' :value="$project->volume" label="Volume  :"  />
-                </div>
-            <div class="col-md-6">
-                <x-forms.inputfile type="file"  name='cover' :value="$project->cover_path" label='Importez une image(Couverture)' />
-                @if ($project->cover_path)
-                    <div class="mt-2 w-20 h-20 overflow-hidden rounded-lg border border-gray-300"style="display: flex; justify-content: center;">
-                        <img src="{{ asset("/storage/projects/covers/" . $project->cover_path) }}" alt="Image actuelle"
-                            class="w-full h-full object-cover" style="width: 100%; height: auto;">
-                    </div>
-                @endif
-            </div>
-            <div class="col-md-6">
-                <x-forms.inputfile type="file" name='additional_images[]' label='Importez des images(Supplementaire)' multiple="true" />
-                <div class="row gap-2">
-                    @if ($project->galleries())
-                    @foreach ($project->galleries as $gallery)
-                        <div class="mt-2 w-20 h-20 overflow-hidden rounded-lg border border-gray-300" style="display: flex; align-items:center; ">
-                            <img src="{{ asset("/storage/projects/additional_images/" . $gallery->path) }}" alt="Image supplémentaire"
+                    <x-forms.input name="volume" value="{{ old('volume', $project->volume) }}" label="Volume :" />
+                </div>
+
+                <div class="col-md-6">
+                    <x-forms.inputfile type="file" name="cover" label="Importez une image (Couverture)" />
+                    @if ($project->cover_path)
+                        <div class="mt-2 w-20 h-20 overflow-hidden rounded-lg border border-gray-300" style="display: flex; justify-content: center;">
+                            <img src="{{ asset("/storage/projects/covers/" . $project->cover_path) }}" alt="Image actuelle"
                                 class="w-full h-full object-cover" style="width: 100%; height: auto;">
                         </div>
-                    @endforeach
-                @endif
-            </div>
-            </div>
-                <div class="col-md-12 ">
-                    <x-forms.textarea name='descriptions' :value="$project->descriptions" label='Descriptions' />
+                    @endif
+                </div>
+
+                <div class="col-md-6">
+                    <x-forms.inputfile type="file" name="additional_images[]" label="Importez des images (Supplémentaires)" multiple="true" />
+                    <div class="row gap-2">
+                        @if ($project->galleries && $project->galleries->count() > 0)
+                            @foreach ($project->galleries as $gallery)
+                                <div class="mt-2 w-20 h-20 overflow-hidden rounded-lg border border-gray-300" style="display: flex; align-items:center;">
+                                    <img src="{{ asset("/storage/projects/additional_images/" . $gallery->path) }}" alt="Image supplémentaire"
+                                        class="w-full h-full object-cover" style="width: 100%; height: auto;">
+                                </div>
+                            @endforeach
+                        @endif
+                    </div>
+                </div>
+
+                <div class="col-md-12">
+                    <x-forms.textarea name="descriptions" value="{{ old('descriptions', $project->descriptions) }}" label="Descriptions" />
                 </div>
             </div>
-            <div class="text-center mt-5  " style="    padding-bottom: 50px; ">
-                <button class="btn btn-primary w-25 ">
-                    @if ($project->exists)
-                        Modifier
-                    @else
-                        Créer
-                    @endif
+
+            <div class="text-center mt-5" style="padding-bottom: 50px;">
+                <button class="btn btn-primary w-25">
+                    {{ $project->exists ? 'Modifier' : 'Créer' }}
                 </button>
             </div>
-        </div>
         </form>
     </div>
 </x-app-layout>