From eb6f096d605953dc3a17befe17a3958216791d36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 19 Dec 2023 09:21:45 +0100
Subject: [PATCH 1/2] update bo vue components with base project

---
 .../BelongsToManyDropdownComponent.vue        |  6 +-
 .../ts/bo/components/ImageInputComponent.vue  | 91 +++++++++++--------
 .../bo/components/InputTextAutoComponent.vue  |  3 +-
 .../ts/bo/components/PasswordVisibility.vue   | 40 +++++---
 .../ts/bo/components/WordCounterComponent.vue |  3 +-
 5 files changed, 88 insertions(+), 55 deletions(-)

diff --git a/resources/ts/bo/components/BelongsToManyDropdownComponent.vue b/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
index bda8283..c4ae5dd 100644
--- a/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
+++ b/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
@@ -67,9 +67,9 @@ import type VueTagsInput from "@sipec/vue3-tags-input";
 import { VueTagsInput as VueTagsInputCls } from "@sipec/vue3-tags-input";
 import slugify from "slugify";
 import { defineComponent } from "vue";
-import parseLaravelErrorMessages from "../../modules/parseLaravelErrorMessages";
-import route from "../../modules/route";
-import trans from "../../modules/trans";
+import parseLaravelErrorMessages from "./../../modules/parseLaravelErrorMessages";
+import route from "./../../modules/route";
+import trans from "./../../modules/trans";
 
 export default defineComponent({
   name: "BelongsToManyDropdownComponent",
diff --git a/resources/ts/bo/components/ImageInputComponent.vue b/resources/ts/bo/components/ImageInputComponent.vue
index 95a7b1d..2a22063 100644
--- a/resources/ts/bo/components/ImageInputComponent.vue
+++ b/resources/ts/bo/components/ImageInputComponent.vue
@@ -7,7 +7,7 @@
           :for="intId"
           class="col-form-label"
         >
-          <b>{{ __("vue.ImageInputComponent.choose_a_file") }}<span v-if="intRequired"> *</span></b>
+          <b>{{ __("vue.ImageInputComponent.choose_a_file") }}</b>
         </label>
         <div class="input-group">
           <button
@@ -380,6 +380,7 @@
                     class="form-text text-body-secondary d-block"
                   >{{ __("vue.ImageInputComponent.preview_picture") }}</small>
                   <img
+                    v-if="intValue"
                     class="img-fluid"
                     :src="intValue"
                     :alt="__('Image placeholder')"
@@ -399,8 +400,8 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import Cropper from "cropperjs";
 import { defineComponent } from "vue";
-import bsTooltips from "../../modules/bsTooltips";
-import trans from "../../modules/trans";
+import bsTooltips from "./../../modules/bsTooltips";
+import trans from "./../../modules/trans";
 
 const UNITS = [
   "byte",
@@ -431,6 +432,7 @@ export default defineComponent({
   mounted() {
     const json = String(this.$attrs.json ?? "");
     this.initTooltips();
+
     if (json.length) {
       // * Init uppon Laravel Blade
       const data = JSON.parse(json);
@@ -453,6 +455,10 @@ export default defineComponent({
       if (data.browseEvent !== undefined) {
         this.intBrowseEvent = data.browseEvent ? true : false;
       }
+      this.intHasImage = false;
+      if (this.intValue.length) {
+        this.fetchPictureFromPath(`${this.intValue}`);
+      }
     } else {
       // * Init Uppon Vue component
       this.intId = this.id;
@@ -469,7 +475,6 @@ export default defineComponent({
       this.intRequired = this.required;
       this.intBrowseEvent = this.browseEvent;
     }
-    this.intHasImage = false;
   },
   props: {
     id: {
@@ -603,7 +608,7 @@ export default defineComponent({
     },
   },
   watch: {
-    intRotationValue(value) {
+    intRotationValue(value: number) {
       if (!this.intCropper) {
         return;
       }
@@ -628,37 +633,15 @@ export default defineComponent({
         } else {
           this.intHasImage = true;
         }
-        // * Using browse event, If user changed imagem recompile blob (File Upload storage strategy)
-        if (this.inTbrowseEvent && this.inThasImage) {
-          const actualImage = this.$refs.actualImage as HTMLInputElement,
-                container = new DataTransfer();
-          this.$nextTick(() => {
-            this.intValue = value.replace(/^\/|^/, "/");
-            this.intValueFileName = value.replace(/^\/|^/, "");
-            fetch(this.intValue)
-              .then((response) => {
-                this.intOriginalFileName = decodeURI(response.url.substring(
-                  response.url.lastIndexOf("/") + 1
-                ));
-                return response.blob();
-              })
-              .then((blob: Blob) => {
-                if (!actualImage.files) {
-                  throw new Error("3- missing files list");
-                }
-                this.fetchDataUrlImageSizes(this.inTvalue);
-                const file = new File([blob], this.inTvalueFileName, {
-                  type: "image/png",
-                  lastModified: new Date().getTime(),
-                });
-                this.intHasImage = true;
-                this.intOriginalFile = file;
-                this.$emit("imageFile", file);
-                container.items.add(file);
-                actualImage.files = container.files;
-                this.changedImage();
-              });
-          });
+        // * Using browse event, If user changed image recompile blob (File Upload storage strategy)
+        if (this.browseEvent && this.intHasImage) {
+          this.$nextTick(() => this.fetchPictureFromPath(value));
+        } else {
+          this.intValue = value;
+          if (this.intValue.length) {
+            this.intValueFileName = this.intValue.replace(/^\/|^/, "");
+            this.intValue = this.intValue.replace(/^\/|^/, "/");
+          }
         }
       },
     },
@@ -761,6 +744,42 @@ export default defineComponent({
       this.$nextTick(() => (this.intHasImage = false));
       this.$emit("imageFile", null);
     },
+    fetchPictureFromPath(value: string): void {
+      const actualImage: HTMLInputElement = this.$refs.actualImage as HTMLInputElement,
+            container: DataTransfer = new DataTransfer();
+
+      this.$nextTick(() => {
+        const stringValue: string = value.replace(/^\/|^/, "/"),
+              stringFileName: string = stringValue.substring(stringValue.lastIndexOf("/")).replace(/^\/|^/, "");
+
+        fetch(stringValue)
+          .then((response) => {
+            this.intOriginalFileName = decodeURI(response.url.substring(
+              response.url.lastIndexOf("/") + 1
+            ));
+            return response.blob();
+          })
+          .then((blob: Blob) => {
+            if (!actualImage.files) {
+              throw new Error("3- missing files list");
+            }
+            this.fetchDataUrlImageSizes(stringValue);
+            const file = new File([blob], stringFileName, {
+              type: "image/png",
+              lastModified: new Date().getTime(),
+            });
+
+            this.intValue = stringValue;
+            this.intValueFileName = stringFileName;
+            this.intHasImage = true;
+            this.intOriginalFile = file;
+            this.$emit("imageFile", file);
+            container.items.add(file);
+            actualImage.files = container.files;
+            this.changedImage();
+          });
+      });
+    },
     changedImage() {
       const reader = new FileReader(),
             actualImage = this.$refs.actualImage as HTMLInputElement;
diff --git a/resources/ts/bo/components/InputTextAutoComponent.vue b/resources/ts/bo/components/InputTextAutoComponent.vue
index 92deebb..8bc83b0 100644
--- a/resources/ts/bo/components/InputTextAutoComponent.vue
+++ b/resources/ts/bo/components/InputTextAutoComponent.vue
@@ -19,12 +19,13 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import trans from "../../modules/trans";
+import trans from "./../../modules/trans";
 import WordCounter from "./WordCounterComponent.vue";
 
 const textarea = ref<HTMLTextAreaElement | null>(null);
 
 export default defineComponent({
+  name: "InputTextAutoComponent",
   inheritAttrs: false,
   mixins: [trans],
   components: {
diff --git a/resources/ts/bo/components/PasswordVisibility.vue b/resources/ts/bo/components/PasswordVisibility.vue
index 47fad99..2a43515 100644
--- a/resources/ts/bo/components/PasswordVisibility.vue
+++ b/resources/ts/bo/components/PasswordVisibility.vue
@@ -1,32 +1,31 @@
 <template>
-  <div :class="`password-visibility-${inputId} h-100`">
+  <button
+    @click.prevent="toggleVisibility()"
+    @keydown="keydown"
+    :class="`btn btn-primary rounded-0 rounded-end password-visibility-${inputId} h-100`"
+    :aria-pressed="visible"
+  >
     <span
-      v-if="visible"
       class="text-bg-primary reveal d-flex justify-content-center align-items-center h-100"
-      @click.prevent="toggleVisibility()"
+
       type="button"
-      :title="__('vue.PasswordVisibility.hide')"
+      :title="visible ? __('vue.PasswordVisibility.hide') : __('vue.PasswordVisibility.show')"
       data-bs="tooltip"
     >
       <FontAwesomeIcon
+
+        v-if="visible"
         icon="fas fa-eye-slash"
         :aria-hidden="true"
       />
-    </span>
-    <span
-      v-else
-      class="text-bg-primary reveal d-flex justify-content-center align-items-center h-100"
-      @click.prevent="toggleVisibility()"
-      type="button"
-      :title="__('vue.PasswordVisibility.show')"
-      data-bs="tooltip"
-    >
+
       <FontAwesomeIcon
+        v-else
         icon="fas fa-eye"
         :aria-hidden="true"
       />
     </span>
-  </div>
+  </button>
 </template>
 
 <script lang="ts">
@@ -73,6 +72,19 @@ export default defineComponent({
     });
   },
   methods: {
+    keydown(e:KeyboardEvent):void {
+      if (
+        e.key === " " ||
+        e.code === "Space" ||
+        e.keyCode === 32 ||
+        e.key === "Enter" ||
+        e.code === "Enter" ||
+        e.keyCode === 13
+      ) {
+        this.toggleVisibility();
+        e.preventDefault();
+      }
+    },
     /**
      * Update password status (visible, hidden).
      */
diff --git a/resources/ts/bo/components/WordCounterComponent.vue b/resources/ts/bo/components/WordCounterComponent.vue
index c5b908e..6b66f89 100644
--- a/resources/ts/bo/components/WordCounterComponent.vue
+++ b/resources/ts/bo/components/WordCounterComponent.vue
@@ -11,9 +11,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import trans from "../../modules/trans";
+import trans from "./../../modules/trans";
 
 export default defineComponent({
+  name: "WordCounterComponent",
   mixins: [trans],
   mounted() {
     const json = String(this.$attrs.json ?? "{}");

From 9c739e06e19073fd8c415422531c6c0ac1cea8e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 19 Dec 2023 09:47:33 +0100
Subject: [PATCH 2/2] Fix for pivot belogn to many component

---
 .../views/bo/partials/inputs/pivot-belongsToMany.blade.php | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/views/bo/partials/inputs/pivot-belongsToMany.blade.php b/resources/views/bo/partials/inputs/pivot-belongsToMany.blade.php
index 2f8adbe..2a13441 100644
--- a/resources/views/bo/partials/inputs/pivot-belongsToMany.blade.php
+++ b/resources/views/bo/partials/inputs/pivot-belongsToMany.blade.php
@@ -11,9 +11,14 @@
 --}}
 
 @php
+    $value = old($name) ?? ($model->{$name} ?? []);
+    if (is_object($value) and $value instanceof \Illuminate\Support\Collection) {
+        // * Force beeing an array
+        $value = $value->all();
+    }
     $data = [
         'name' => $name,
-        'value' => Arr::wrap(old($name) ?? ($model->{$name} ?? [])),
+        'value' => Arr::wrap($value),
         'placeholder' => $placeholder,
         'itemsList' => $itemsList,
         'itemLimit' => $itemLimit ?? null,