From 75396b99c64e4da873347cc4480304f6f92d5229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Wed, 29 Jun 2022 17:05:02 +0200
Subject: [PATCH] Fix slider issues + text position on sliders

---
 ...Position.php => SliderElementPosition.php} |  2 +-
 app/Http/Middleware/Authenticate.php          |  2 +-
 .../Bo/Sliders/StoreSliderRequest.php         | 19 ++++---
 app/Models/Slider.php                         |  9 ++--
 database/factories/SliderFactory.php          |  5 +-
 ...2022_06_02_163424_create_sliders_table.php |  6 +--
 ..._105128_set_colors_nullable_to_sliders.php |  4 ++
 ..._06_29_150122_text_position_on_sliders.php | 38 ++++++++++++++
 .../ts/components/bo/ColorPickerComponent.vue | 50 +++++++++++++------
 resources/views/back/sliders/form.blade.php   | 44 ++++++++++------
 10 files changed, 132 insertions(+), 47 deletions(-)
 rename app/Enums/Sliders/{SliderPosition.php => SliderElementPosition.php} (92%)
 create mode 100644 database/migrations/2022_06_29_150122_text_position_on_sliders.php

diff --git a/app/Enums/Sliders/SliderPosition.php b/app/Enums/Sliders/SliderElementPosition.php
similarity index 92%
rename from app/Enums/Sliders/SliderPosition.php
rename to app/Enums/Sliders/SliderElementPosition.php
index d6bede4..1719e3d 100644
--- a/app/Enums/Sliders/SliderPosition.php
+++ b/app/Enums/Sliders/SliderElementPosition.php
@@ -9,7 +9,7 @@ use Kwaadpepper\Enum\BaseEnum;
  * @method static self center()
  * @method static self right()
  */
-final class SliderPosition extends BaseEnum
+final class SliderElementPosition extends BaseEnum
 {
     /**
      * Enum values
diff --git a/app/Http/Middleware/Authenticate.php b/app/Http/Middleware/Authenticate.php
index dc501f6..5f92d81 100644
--- a/app/Http/Middleware/Authenticate.php
+++ b/app/Http/Middleware/Authenticate.php
@@ -31,7 +31,7 @@ class Authenticate extends Middleware
                     }
                 }
             }
-            return route('login');
+            return collect($logins)->first() ?? '/';
         }
         abort(401);
     }
diff --git a/app/Http/Requests/Bo/Sliders/StoreSliderRequest.php b/app/Http/Requests/Bo/Sliders/StoreSliderRequest.php
index be4e725..73ed815 100644
--- a/app/Http/Requests/Bo/Sliders/StoreSliderRequest.php
+++ b/app/Http/Requests/Bo/Sliders/StoreSliderRequest.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Requests\Bo\Sliders;
 
-use App\Enums\Sliders\SliderPosition;
+use App\Enums\Sliders\SliderElementPosition;
 use App\Enums\Sliders\SliderType;
 use App\Traits\Requests\HasPicture;
 use Illuminate\Foundation\Http\FormRequest;
@@ -45,15 +45,15 @@ class StoreSliderRequest extends FormRequest
      */
     public function rules()
     {
-        return \array_merge([
+        $rules = [
             'title' => 'required|min:3|max:255',
             'title_color' => 'nullable|color_rgba',
             'title_color_bg' => 'nullable|color_rgba',
             'subtitle' => 'required|min:3|max:255',
             'subtitle_color' => 'nullable|color_rgba',
             'subtitle_color_bg' => 'nullable|color_rgba',
-            'type' => ['required', new EnumIsValidRule(SliderType::class)],
-            'position' => ['required', new EnumIsValidRule(SliderPosition::class)],
+            'text_position_desktop' => ['required', new EnumIsValidRule(SliderElementPosition::class)],
+            'picture_position_mobile' => ['required', new EnumIsValidRule(SliderElementPosition::class)],
             'link' => 'required|url',
             'link_title' => 'required|min:3|max:255',
             'link_color' => 'nullable|color_rgba',
@@ -64,7 +64,12 @@ class StoreSliderRequest extends FormRequest
             'status' => 'required|boolean',
             'publish_at' => 'nullable|date_format:Y-m-d H:i',
             'unpublish_at' => 'nullable|date_format:Y-m-d H:i',
-        ], $this->pictureRules(1400, 630, 1400, 630));
+        ];
+
+        if (!$this->slider) {
+            $rules['type'] = ['required', new EnumIsValidRule(SliderType::class)];
+        }
+        return \array_merge($rules, $this->pictureRules(1400, 630, 1400, 630));
     }
 
     /**
@@ -78,13 +83,15 @@ class StoreSliderRequest extends FormRequest
             'title' => trans('title'),
             'title_color' => trans('couleur de titre'),
             'title_color_bg' => trans('couleur de fond du titre'),
-            'position' => trans('position de centrage de l\'image'),
+            'picture_position_mobile' => trans('position de centrage de l\'image en mobile'),
+            'text_position_desktop' => trans('position de centrage du texte en desktop'),
             'link' => trans('lien'),
             'link_title' => trans('titre du lien'),
             'link_color' => trans('couleur du lien'),
             'link_color_bg' => trans('couleur de fond du lien'),
             'link_new_tab' => trans('nouvel onglet'),
             'status' => trans('publication'),
+            'picture' => trans('image'),
         ];
     }
 }
diff --git a/app/Models/Slider.php b/app/Models/Slider.php
index 1974dae..a27bb7f 100644
--- a/app/Models/Slider.php
+++ b/app/Models/Slider.php
@@ -3,7 +3,7 @@
 namespace App\Models;
 
 use App\Casts\RgbaColorNullable;
-use App\Enums\Sliders\SliderPosition;
+use App\Enums\Sliders\SliderElementPosition;
 use App\Enums\Sliders\SliderType;
 use App\Lib\ToolboxHelper;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -28,8 +28,8 @@ class Slider extends Model
         'subtitle',
         'subtitle_color',
         'subtitle_color_bg',
-        'position',
-        'type',
+        'text_position_desktop',
+        'picture_position_mobile',
         'picture',
         'link',
         'link_title',
@@ -50,7 +50,8 @@ class Slider extends Model
      * @var array
      */
     protected $enumCasts = [
-        'position' => SliderPosition::class,
+        'text_position_desktop' => SliderElementPosition::class,
+        'picture_position_mobile' => SliderElementPosition::class,
         'type' => SliderType::class
     ];
 
diff --git a/database/factories/SliderFactory.php b/database/factories/SliderFactory.php
index 07320d9..38acaae 100644
--- a/database/factories/SliderFactory.php
+++ b/database/factories/SliderFactory.php
@@ -2,7 +2,7 @@
 
 namespace Database\Factories;
 
-use App\Enums\Sliders\SliderPosition;
+use App\Enums\Sliders\SliderElementPosition;
 use App\Enums\Sliders\SliderType;
 use App\Models\Slider;
 use Illuminate\Database\Eloquent\Factories\Factory;
@@ -34,7 +34,8 @@ class SliderFactory extends Factory
         $subtitle = $this->faker->unique()->words(rand(8, 10), true);
         return [
             'type' => Collect(SliderType::toArray())->random(),
-            'position' => Collect(SliderPosition::toArray())->random(),
+            'text_position_desktop' => Collect(SliderElementPosition::toArray())->random(),
+            'picture_position_mobile' => Collect(SliderElementPosition::toArray())->random(),
             'title' => $title,
             'title_color' => $this->faker->hexColor(),
             'title_color_bg' => $this->faker->hexColor(),
diff --git a/database/migrations/2022_06_02_163424_create_sliders_table.php b/database/migrations/2022_06_02_163424_create_sliders_table.php
index 1b2037e..327af6e 100644
--- a/database/migrations/2022_06_02_163424_create_sliders_table.php
+++ b/database/migrations/2022_06_02_163424_create_sliders_table.php
@@ -1,6 +1,6 @@
 <?php
 
-use App\Enums\Sliders\SliderPosition;
+use App\Enums\Sliders\SliderElementPosition;
 use App\Enums\Sliders\SliderType;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
@@ -20,8 +20,8 @@ class CreateSlidersTable extends Migration
 
             $table->unsignedTinyInteger('type')->default(SliderType::home())
                 ->comment('Enums\\SliderType type de slider');
-            $table->unsignedTinyInteger('position')->default(SliderPosition::center())
-                ->comment('Enums\\SliderPosition slider centrage du slider en responsive');
+            $table->unsignedTinyInteger('position')->default(SliderElementPosition::center())
+                ->comment('Enums\\SliderElementPosition slider centrage du slider en responsive');
 
             $table->string('title')->comment('Titre du slider');
             $table->unsignedInteger('title_color')->comment('Couleur du titre');
diff --git a/database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php b/database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php
index 47a21cb..9c684c1 100644
--- a/database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php
+++ b/database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php
@@ -19,7 +19,11 @@ class SetColorsNullableToSliders extends Migration
             $table->unsignedInteger('subtitle_color')->nullable()->comment('Couleur du soustitre')->change();
             $table->unsignedInteger('subtitle_color_bg')->nullable()->comment('Couleur de fond du soustitre')->change();
             $table->unsignedInteger('link_color')->nullable()->comment('Couleur du lien')->change();
+            $table->unsignedInteger('link_color_hover')->nullable()
+            ->comment('Couleur de fond du lien (au survol)')->change();
             $table->unsignedInteger('link_color_bg')->nullable()->comment('Couleur de fond du lien')->change();
+            $table->unsignedInteger('link_color_bg_hover')->nullable()
+            ->comment('Couleur de fond du lien (au survol)')->change();
         });
     }
 
diff --git a/database/migrations/2022_06_29_150122_text_position_on_sliders.php b/database/migrations/2022_06_29_150122_text_position_on_sliders.php
new file mode 100644
index 0000000..8da7bd6
--- /dev/null
+++ b/database/migrations/2022_06_29_150122_text_position_on_sliders.php
@@ -0,0 +1,38 @@
+<?php
+
+use App\Enums\Sliders\SliderElementPosition;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class TextPositionOnSliders extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('sliders', function (Blueprint $table) {
+            $table->renameColumn('position', 'picture_position_mobile');
+            $table->unsignedTinyInteger('text_position_desktop')
+                ->after('subtitle_color_bg')
+                ->default(SliderElementPosition::right())
+                ->comment('Enums\\SliderElementPosition postionnement du texte en desktop');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('sliders', function (Blueprint $table) {
+            $table->renameColumn('picture_position_mobile', 'position');
+            $table->dropColumn('text_position_desktop');
+        });
+    }
+}
diff --git a/resources/ts/components/bo/ColorPickerComponent.vue b/resources/ts/components/bo/ColorPickerComponent.vue
index c458778..df14d19 100644
--- a/resources/ts/components/bo/ColorPickerComponent.vue
+++ b/resources/ts/components/bo/ColorPickerComponent.vue
@@ -36,6 +36,7 @@
           type="checkbox"
           data-bs-toggle="tooltip"
           :title="__('Rendre la couleur transparente ?')"
+          :checked="_value === null ? true : false"
           v-on:change="updateValue"
         />
         <label class="form-check-label user-select-none mt-3" :for="`checkbox${_id}`">
@@ -50,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 // @ts-ignore
 import { Chrome } from "@ckpack/vue-color";
 import trans from "../../modules/trans";
@@ -69,7 +70,7 @@ export default defineComponent({
 
     const json = String(this.$attrs.json ?? "{}"),
       data = JSON.parse(json);
-    this._id = this.id ? String(this.id) : data.id;
+    this._id = this.id ? this.id : data.id;
     this._name = this.name ? this.name : data.name;
     this._value = this.value ? this.value : data.value;
     this._title = this.title ? this.title : data.title;
@@ -80,7 +81,15 @@ export default defineComponent({
     this._nullable = this.nullable ? this.nullable : data.nullable ? true : false;
     this._rgbaMode = this.rgbaMode ? this.rgbaMode : data.rgbaMode ? true : false;
 
-    this._internalValue = this._value;
+    if (!this._nullable) {
+      this._internalValue = this._value
+        ? this._value
+        : this._rgbaMode
+        ? "rgba(0,0,0,0)"
+        : "#000000";
+    } else {
+      this._internalValue = this._value ?? "";
+    }
     this.$nextTick(() => {
       this._internalHex = this.__picker.$data.val.hex;
     });
@@ -89,36 +98,37 @@ export default defineComponent({
   },
   props: {
     id: {
-      type: String,
+      type: String as PropType<string | null>,
       default: null,
     },
     name: {
-      type: String,
+      type: String as PropType<string | undefined>,
     },
     value: {
-      type: String,
+      type: String as PropType<string | null>,
+      default: null,
     },
     title: {
-      type: String,
+      type: String as PropType<string | undefined>,
     },
     label: {
-      type: String,
+      type: String as PropType<string | undefined>,
     },
     nullable: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | undefined>,
     },
     rgbaMode: {
-      type: Boolean,
+      type: Boolean as PropType<boolean>,
       default: false,
     },
     ariaDescribedby: {
-      type: String,
+      type: String as PropType<string | undefined>,
     },
   },
   data(): {
     _id: string;
     _name: string;
-    _value: string;
+    _value: string | null;
     _title: string;
     _label: string;
     _nullable: boolean;
@@ -178,11 +188,21 @@ export default defineComponent({
       }
       const isNull = this.__nullableInput?.checked ? true : false;
       if (this._rgbaMode) {
-        const rgba = this._internalValue.rgba;
-        this._value = !isNull ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : "";
+        const rgba = this._internalValue?.rgba;
+        this._value =
+          !isNull && rgba
+            ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+            : this._nullable
+            ? null
+            : "";
         return;
       }
-      this._value = !isNull ? this._internalValue.hex : "";
+      this._value =
+        !isNull && this._internalValue
+          ? this._internalValue.hex
+          : this._nullable
+          ? null
+          : "";
     },
     showPicker() {
       document.addEventListener("click", this.documentClick);
diff --git a/resources/views/back/sliders/form.blade.php b/resources/views/back/sliders/form.blade.php
index 3fedbd4..0680988 100644
--- a/resources/views/back/sliders/form.blade.php
+++ b/resources/views/back/sliders/form.blade.php
@@ -1,4 +1,4 @@
-@if(!isset($slider) and count(App\Enums\Sliders\SliderType::toArray()) > 1)
+@if(!isset($slider))
 <div class="row">
     <div class="col">
         <fieldset class="border p-3 mb-3">
@@ -41,7 +41,7 @@
                         $data = [
                             'id' => 'sliderTitleColor',
                             'name' => 'title_color',
-                            'value' => old('title_color', $slider->title_color ?? ''),
+                            'value' => old('title_color', optional($slider ?? null)->title_color),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur du titre'),
                             'rgbaMode' => true,
@@ -59,7 +59,7 @@
                         $data = [
                             'id' => 'sliderTitleBgColor',
                             'name' => 'title_color_bg',
-                            'value' => old('title_color_bg', $slider->title_color_bg ?? ''),
+                            'value' => old('title_color_bg', optional($slider ?? null)->title_color_bg),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur de fond du titre'),
                             'rgbaMode' => true,
@@ -77,7 +77,7 @@
                     <div class="form-group">
                         <label for="sliderSubTitle"><b>{{ __('Sous-titre') }}</b></label>
                         <div class="word-counter" data-json='@json(['id' => 'sliderSubTitle'])'></div>
-                        <input name="subtitle" type="text" value="{{ old('subtitle', $slider->subtitle ?? '') }}" class="form-control"
+                        <input name="subtitle" type="text" value="{{ old('subtitle', optional($slider ?? null)->subtitle ?? '') }}" class="form-control"
                             id="sliderSubTitle" aria-describedby="sliderSubTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
                         @include('back.modules.input-error', [
                             'inputName' => 'subtitle', 'helperId' => 'sliderSubTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
@@ -90,7 +90,7 @@
                         $data = [
                             'id' => 'sliderSubTitleColor',
                             'name' => 'subtitle_color',
-                            'value' => old('subtitle_color', $slider->subtitle_color ?? ''),
+                            'value' => old('subtitle_color', optional($slider ?? null)->subtitle_color),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur du sous-titre'),
                             'rgbaMode' => true,
@@ -108,7 +108,7 @@
                         $data = [
                             'id' => 'sliderSubTitleBgColor',
                             'name' => 'subtitle_color_bg',
-                            'value' => old('subtitle_color_bg', $slider->subtitle_color_bg ?? ''),
+                            'value' => old('subtitle_color_bg', optional($slider ?? null)->subtitle_color_bg),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur de fond du sous-titre'),
                             'rgbaMode' => true,
@@ -121,6 +121,20 @@
                     </div>
                 </div>
             </div>
+            <div class="row mb-3">
+                <div class="col-12 col-md-6 form-group">
+                    <label for="sliderTextPosition" class="col-form-label"><b>{{ __('Position des textes') }}</b></label>
+                    <select id="sliderTextPosition" class="form-select" name="text_position_desktop" aria-describedby="sliderTextPositionHelp" required>
+                        <option value="" @if(is_null(old('text_position_desktop', $slider->text_position_desktop ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
+                        @foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
+                        <option value="{{ $status->value }}" @if(old('text_position_desktop', optional($slider->text_position_desktop ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
+                        @endforeach
+                    </select>
+                    @include('back.modules.input-error', [
+                        'inputName' => 'text_position_desktop', 'helperId' => 'sliderTextPositionHelp' , 'helper' => __('Positionnement du titre/sous-titre et bouton sur l\'image (en desktop)')
+                    ])
+                </div>
+            </div>
         </fieldset>
     </div>
 </div>
@@ -169,14 +183,14 @@
             <div class="row mb-3">
                 <div class="col-12 col-md-6 form-group">
                     <label for="sliderPicturePosition" class="col-form-label"><b>{{ __('Position de centrage') }}</b></label>
-                    <select id="sliderPicturePosition" class="form-select" name="position" aria-describedby="sliderPicturePositionHelp" required>
-                        <option value="" @if(is_null(old('position', $slider->position ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
-                        @foreach(App\Enums\Sliders\SliderPosition::toArray() as $status)
-                        <option value="{{ $status->value }}" @if(old('published', optional($slider->position ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
+                    <select id="sliderPicturePosition" class="form-select" name="picture_position_mobile" aria-describedby="sliderPicturePositionHelp" required>
+                        <option value="" @if(is_null(old('picture_position_mobile', $slider->picture_position_mobile ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
+                        @foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
+                        <option value="{{ $status->value }}" @if(old('picture_position_mobile', optional($slider->picture_position_mobile ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
                         @endforeach
                     </select>
                     @include('back.modules.input-error', [
-                        'inputName' => 'published', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
+                        'inputName' => 'picture_position_mobile', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
                     ])
                 </div>
 
@@ -234,7 +248,7 @@
                         $data = [
                             'id' => 'sliderLinkColor',
                             'name' => 'link_color',
-                            'value' => old('link_color', $slider->link_color ?? ''),
+                            'value' => old('link_color', optional($slider ?? null)->link_color),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur du lien'),
                             'rgbaMode' => true,
@@ -252,7 +266,7 @@
                         $data = [
                             'id' => 'sliderLinkBGColor',
                             'name' => 'link_color_bg',
-                            'value' => old('link_color_bg', $slider->link_color_bg ?? ''),
+                            'value' => old('link_color_bg', optional($slider ?? null)->link_color_bg),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur de fond du lien'),
                             'rgbaMode' => true,
@@ -270,7 +284,7 @@
                         $data = [
                             'id' => 'sliderLinkHoverColor',
                             'name' => 'link_color_hover',
-                            'value' => old('link_color_hover', $slider->link_color_hover ?? ''),
+                            'value' => old('link_color_hover', optional($slider ?? null)->link_color_hover),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur du lien (au survol)'),
                             'rgbaMode' => true,
@@ -288,7 +302,7 @@
                         $data = [
                             'id' => 'sliderLinkBGHoverColor',
                             'name' => 'link_color_bg_hover',
-                            'value' => old('link_color_bg_hover', $slider->link_color_bg_hover ?? ''),
+                            'value' => old('link_color_bg_hover', optional($slider ?? null)->link_color_bg_hover),
                             'title' => __('Choisi ta couleur'),
                             'label' => __('Couleur de fond du lien (au survol)'),
                             'rgbaMode' => true,