From 5d69546de52f0a584641bd3547ea754a7ac4fafe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Mon, 4 Apr 2022 18:28:55 +0200
Subject: [PATCH 1/4] Ticket 552: Delete files reactivation (except locked
 ones)

---
 app/Http/Controllers/MediaController.php      | 41 +++++-----
 .../Requests/Bo/AjaxDeleteMediaRequest.php    | 31 ++++++++
 resources/js/app.js                           |  3 +-
 .../media-manager/ActionsComponent.vue        | 79 +++++++++++++++++--
 .../media-manager/DisplayComponent.vue        |  8 +-
 .../media-editor/EditComponents.vue           |  2 +-
 .../media-editor/tabs/EditComponent.vue       | 63 +++++++++++++--
 resources/js/media.js                         | 54 -------------
 8 files changed, 191 insertions(+), 90 deletions(-)
 create mode 100644 app/Http/Requests/Bo/AjaxDeleteMediaRequest.php

diff --git a/app/Http/Controllers/MediaController.php b/app/Http/Controllers/MediaController.php
index 294659d..11cf952 100644
--- a/app/Http/Controllers/MediaController.php
+++ b/app/Http/Controllers/MediaController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\Bo\AjaxDeleteMediaRequest;
 use App\Http\Traits\ArcadiaLink;
 use Elasticquent\ElasticquentTrait;
 use Illuminate\Support\Facades\Auth;
@@ -643,41 +644,45 @@ class MediaController extends Controller
     /**
      * supprimer des médias
      *
+     * @param AjaxDeleteMediaRequest $request
+     * @return \Illuminate\Http\JsonResponse
      */
-    public function removeMedia(Request $request)
+    public function removeMedia(AjaxDeleteMediaRequest $request)
     {
-        $deletedMediasList = array();
-        Auth::user()->authorizeRoles([config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]);
-        $user_id = Auth::user()->id;
-        $deleteMedias = $request->input('medias');
+        $deletedMediasList = [];
 
-        if (Auth::user()->hasRole(config('roles.const.ADMIN'))){
-            $medias = Media::whereIn('id', $deleteMedias)->get();
-        }else{
-            $medias = Media::whereIn('id', $deleteMedias)->whereNull('arcadia_id')->get();
+        /** @var \App\User $user */
+        $user = auth()->user();
+        $user->authorizeRoles([config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]);
+        $user_id = Auth::user()->id;
+
+        if ($user->hasRole(config('roles.const.ADMIN'))) {
+            $medias = Media::whereIn('id', $request->medias)->get();
+        } else {
+            $medias = Media::whereIn('id', $request->medias)->whereNull('arcadia_id')->get();
         }
 
         foreach ($medias as $media) {
             $deletedMediasList[] = $media->id;
 
-            // Historique des actions
-            $historique = new historique();
-            $historique->user_id = $user_id;
-            $historique->media_id = $media->id;
-            $historique->type = "Suppression";
-            $historique->description = "Le média a été supprimé";
+            // * Historique des actions
+            $historique              = new Historique();
+            $historique->user_id     = $user->id;
+            $historique->media_id    = $media->id;
+            $historique->type        = 'Suppression';
+            $historique->description = 'Le média a été supprimé';
             $historique->save();
 
-            // Elasticsearch
+            // * Elasticsearch
             $media->removeFromIndex();
 
             $media->delete();
 
-            // Lien Arcadia
+            // * Lien Arcadia
             ArcadiaLink::delete($media);
         }
 
-        return json_encode($deletedMediasList);
+        return response()->json($deletedMediasList);
     }
 
     /**
diff --git a/app/Http/Requests/Bo/AjaxDeleteMediaRequest.php b/app/Http/Requests/Bo/AjaxDeleteMediaRequest.php
new file mode 100644
index 0000000..180a389
--- /dev/null
+++ b/app/Http/Requests/Bo/AjaxDeleteMediaRequest.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Requests\Bo;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class AjaxDeleteMediaRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return boolean
+     */
+    public function authorize()
+    {
+        return auth()->check();
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'medias' => 'required|array',
+            'medias.*' => 'exists:medias,id,deleted_at,NULL'
+        ];
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 8a8e67d..2589641 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -302,6 +302,7 @@ $.fancyMessage = function( opts ) {
         title: 'Are you sure?',
         message: '',
         type: '',
+        callback: $.noop
     }, opts || {})
 
     return $.fancybox.open({
@@ -317,7 +318,7 @@ $.fancyMessage = function( opts ) {
             '</p>' +
             '</div>',
         opts: {
-            afterClose: opts.afterClose,
+            afterClose: opts.callback,
             animationDuration: 350,
             animationEffect: 'material',
             modal: false,
diff --git a/resources/js/components/media-manager/ActionsComponent.vue b/resources/js/components/media-manager/ActionsComponent.vue
index 1381c7f..21edef4 100644
--- a/resources/js/components/media-manager/ActionsComponent.vue
+++ b/resources/js/components/media-manager/ActionsComponent.vue
@@ -1,11 +1,10 @@
 <template>
     <div>
-        <a v-if="storeRole !== 2" @click="openUploadFrom" href="#" class="action_add_media"><i class="fas fa-file-upload"></i> Ajouter un média</a>
-        <a href="#" @click="download" class="action_download_media"><i class="fas fa-file-download"></i> Télécharger</a>
-        <!--<a v-if="storeRole === 1 || storeRole === 4" href="#" class="action_delete_media"><i class="fas fa-trash-alt"></i> Supprimer</a>-->
-        <a v-if="storeRole !== 2" @click="duplicateMedia" href="#" class="action_duplicate_media"><i
-            class="fa fa-copy"></i> Dupliquer</a>
-        <a v-if="storeRole !== 2" @click="applySticker" href="#" class="action_tag_media"><i class="fas fa-tags"></i>
+        <a v-if="storeRole !== 2" v-on:click.prevent="openUploadFrom" href="#" class="action_add_media"><i class="fas fa-file-upload"></i> Ajouter un média</a>
+        <a href="#" v-on:click.prevent="download" class="action_download_media"><i class="fas fa-file-download"></i> Télécharger</a>
+        <a v-if="(storeRole === 1 || storeRole === 4) && !selectionContainsLockedMedias" v-on:click.prevent="deleteMedias" class="action_delete_media"><i class="fas fa-trash-alt"></i> Supprimer</a>
+        <a v-if="storeRole !== 2 && !selectionContainsLockedMedias" v-on:click.prevent="duplicateMedia" href="#" class="action_duplicate_media"><i class="fa fa-copy"></i> Dupliquer</a>
+        <a v-if="storeRole !== 2" v-on:click.prevent="applySticker" href="#" class="action_tag_media"><i class="fas fa-tags"></i>
             Etiquette</a>
 
         <div id="form_etiquette" style="display: none;">
@@ -112,7 +111,8 @@
         data: function () {
             return {
                 files: [],
-                uploadedFiles: []
+                uploadedFiles: [],
+                selectionContainsLockedMedias : true
             }
         },
         methods: {
@@ -159,6 +159,58 @@
                     });
                 }
             },
+            deleteMedias() {
+                let self = this, medias = this.storeGrabbed
+                if (Object.keys(medias).length === 0) {
+                    $.fancyMessage({
+                        title: "Supprimer un média",
+                        message: "Veuillez sélectionner un média.",
+                        type: "info"
+                    });
+                } else {
+                    $.fancyConfirm({
+                        title: "Suppression de panier",
+                        message: 'Etes-vous sûr de vouloir supprimer ces média ?',
+                        okButton: 'Supprimer',
+                        noButton: 'Annuler',
+                        callback: function (value) {
+                            if(!value) {
+                                return;
+                            }
+                            $.ajax({
+                                url: '/ajax/remove-media',
+                                method: 'POST',
+                                dataType : 'json',
+                                data: {
+                                    medias: medias.map(function(obj) { return obj.id })
+                                },
+                                success: function(result) {
+                                    let reload = function() {
+                                        self.$store.commit({
+                                            type: 'Reload',
+                                            reload: Math.random()
+                                        })
+                                    }
+                                    if(result.length != medias.length) {
+                                        $.fancybox.close()
+                                        if(medias.length == 1) {
+                                            $.fancyMessage({title : "Attention", message : "Ce média est lié à Arcadia. Suppression refusée. ", type : "error"})
+                                        }else{
+                                            $.fancyMessage({title : "Attention", message : "Votre sélection contient des médias liés à Arcadia. Ces médias ne seront pas supprimés.", type : "info", callback: reload})
+                                        }
+                                    } else {
+                                        $.fancyMessage({title : "Suppression de média", message : "Le média a été supprimé.", type : "info", callback: reload})
+                                    }
+                                },
+                                error: function(jqXHR, textStatus, errorThrown) {
+                                    $.fancybox.close()
+                                    $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"})
+                                }
+                            })
+                        }
+                    })
+                }
+            },
             applySticker() {
                 if (Object.keys(this.storeGrabbed).length === 0) {
                     $.fancyMessage({
@@ -375,6 +427,19 @@
                         }
                     });
                 }
+            },
+            storeGrabbed() {
+                let self = this
+                self.selectionContainsLockedMedias = false
+                this.storeGrabbed.map((obj) => {
+                    if(obj.isLocked) {
+                        self.selectionContainsLockedMedias = true
+                    }
+                })
+                if(!this.storeGrabbed.length) {
+                    // * Hide if empty selection
+                    self.selectionContainsLockedMedias = true
+                }
             }
         },
     }
diff --git a/resources/js/components/media-manager/DisplayComponent.vue b/resources/js/components/media-manager/DisplayComponent.vue
index 23f3352..5f0eae4 100644
--- a/resources/js/components/media-manager/DisplayComponent.vue
+++ b/resources/js/components/media-manager/DisplayComponent.vue
@@ -161,13 +161,14 @@
                     }else{
                         if (response.data.data.length){
                             this.medias.data.push(...response.data.data);
-                            $state.loaded();
+                            console.log($state)
+                            $state.loaded()
                             this.$store.commit({
                                 type: 'updateRole',
                                 role: response.data.role
                             });
                         }else{
-                            $state.complete();
+                            $state.complete()
                         }
                         this.scrollLoader = false;
                     }
@@ -189,6 +190,7 @@
                     this.offset = this.offset + this.limit;
                 })
                 .catch(function (error) {
+                    console.log(error)
                     if(error.response.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
@@ -197,7 +199,7 @@
                 });
             },
             infiniteScroll($state) {
-                this.loadMedias($state);
+                this.loadMedias($state)
             },
             resetInfiniteScroll() {
                 this.infiniteId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
diff --git a/resources/js/components/media-manager/media-editor/EditComponents.vue b/resources/js/components/media-manager/media-editor/EditComponents.vue
index c8b8b6c..984081f 100644
--- a/resources/js/components/media-manager/media-editor/EditComponents.vue
+++ b/resources/js/components/media-manager/media-editor/EditComponents.vue
@@ -16,7 +16,7 @@
         </header>
         <div class="main_content">
             <mm-me-tab-preview :currentTab="currentTab"></mm-me-tab-preview>
-            <mm-me-tab-edit :currentTab="currentTab" :typemedias="typemedias" :langues="langues" :societes="societes" :marques="marques" :etiquettes="etiquettes" :copyrights="copyrights"></mm-me-tab-edit>
+            <mm-me-tab-edit :currentTab="currentTab" :typemedias="typemedias" :langues="langues" :societes="societes" :marques="marques" :etiquettes="etiquettes" :copyrights="copyrights" @closeEdit="close"></mm-me-tab-edit>
             <mm-me-tab-links :currentTab="currentTab"></mm-me-tab-links>
             <mm-me-tab-history :currentTab="currentTab"></mm-me-tab-history>
         </div>
diff --git a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
index c03508b..16e3c8f 100644
--- a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
+++ b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
@@ -196,9 +196,8 @@
             </div>
         </div>
         <div class="button_bar">
-            <!--<button v-if="this.storeMedia.role === 1 || this.storeMedia.role === 3" class="btn btn-red btn_tab_edit_delete"  type="button" name="button" :disabled="this.oMedia.isLocked === 1">Supprimer</button>-->
-            <button @click="CheckForm" v-if="storeRole !== 2" class="btn btn_tab_edit_save" type="button" name="button"
-                    :disabled="this.oMedia.isLocked === 1">Sauvegarder
+            <button v-if="this.storeRole === 1 || this.storeRole === 3" class="btn btn-red btn_tab_edit_delete" v-on:click.prevent="DeleteMedia" type="button" name="button" :disabled="oMedia.isLocked === 1">Supprimer</button>
+            <button @click="CheckForm" v-if="storeRole !== 2" class="btn btn_tab_edit_save" type="button" name="button" :disabled="oMedia.isLocked === 1">Sauvegarder
             </button>
             <!-- <a href="#" class="btn btn-black mr-10 btn_tab_edit_cancel">Fermer</a>-->
         </div>
@@ -415,6 +414,48 @@
                     console.log(error);
                 });
             },
+            DeleteMedia() {
+                let self = this
+                $.fancyConfirm({
+                    title: "Suppression de panier",
+                    message: 'Etes-vous sûr de vouloir supprimer ce média ? ' + (self.oMedia.arcadia_id ? '(Lié à Arcadia)' : ''),
+                    okButton: 'Supprimer',
+                    noButton: 'Annuler',
+                    callback: function (value) {
+                        if(!value) {
+                            return;
+                        }
+                        $.ajax({
+                            url: '/ajax/remove-media',
+                            method: 'POST',
+                            dataType : 'json',
+                            data: {
+                                medias: [self.oMedia.id]
+                            },
+                            success: function(result){
+                                if(result.length != 1) {
+                                    $.fancybox.close()
+                                    if(medias.length == 1) {
+                                        $.fancyMessage({title : "Attention", message : "Ce média est lié à Arcadia. Suppression refusée. ", type : "error"})
+                                    }else{
+                                        $.fancyMessage({title : "Attention", message : "Votre sélection contient des médias liés à Arcadia. Ces médias ne seront pas supprimés.", type : "info"})
+                                    }
+                                } else {
+                                    self.$emit('closeEdit')
+                                    $.fancyMessage({title : "Suppression de média", message : "Le média a été supprimé.", type : "info"})
+                                    $.each(result, function (index, value) {
+                                        self.DeleteArticles(value)
+                                    })
+                                }
+                            },
+                            error: function(jqXHR, textStatus, errorThrown) {
+                                $.fancybox.close()
+                                $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"})
+                            }
+                        })
+                    }
+                })
+            },
             AddArticles() {
                 if (this.oMedia.isLocked === 1)
                     return;
@@ -474,8 +515,9 @@
                 });
             },
             DeleteArticles(article_id) {
-                if (this.oMedia.isLocked === 1)
+                if (this.oMedia.isLocked === 1) {
                     return;
+                }
                 this.oMedia.articles = this.oMedia.articles.filter(e => e.id !== article_id);
             },
             AddMarques(marque) {
@@ -504,6 +546,15 @@
     }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.main_content {
+    button:disabled,
+    button:disabled:hover,
+    button[disabled],
+    button[disabled]:hover {
+        border: 1px solid #999999 !important;
+        background-color: #cccccc !important;
+        color: #666666 !important;
+    }
+}
 </style>
diff --git a/resources/js/media.js b/resources/js/media.js
index 71aaff5..5dc7448 100644
--- a/resources/js/media.js
+++ b/resources/js/media.js
@@ -153,60 +153,6 @@ $(document).ready(function () {
 		removeMedias(medias);
 	});
 
-    // Suppression d'un média
-    $(".btn_tab_edit_delete").on("click", function (event) {
-        event.preventDefault();
-
-        if ($(".tab_edit #arcadia_id").val().length) {
-            var r = confirm("Etes-vous sûr de vouloir supprimer ce média ? (Lié à Arcadia)");
-        } else {
-            var r = confirm("Etes-vous sûr de vouloir supprimer ce média ?");
-        }
-
-        if (r == true) {
-            var medias = [$(window).data('current_edit_media')];
-            $.ajax({
-                url: '/ajax/remove-media',
-                method: 'POST',
-                dataType : 'json',
-                data: {
-                    medias: medias
-                },
-                success: function(result){
-                    $.each(result, function (index, value) {
-                        $(".media_container .imageItem[data-id='"+value+"']").remove();
-                    });
-
-                    // ---- MAJ du nb de média dans le dossier
-                    var currentFolder = $(window).data('currentFolder');
-                    if(currentFolder == 0 || currentFolder == ""){
-                        var count = $(".folder_container .root_folder .count");
-                    }else{
-                        var count =  $(".folder_container .dd3-item[data-id='"+currentFolder+"'] > .dd3-content .count");
-                    }
-                    count.html(parseInt(count.html())-result.length);
-
-                    if(result.length != medias.length){
-                        $.fancybox.close();
-                        if(medias.length == 1){
-                            $.fancyMessage({title : "Attention", message : "Ce média est lié à Arcadia. Suppression refusée. ", type : "error"});
-                        }else{
-                            $.fancyMessage({title : "Attention", message : "Votre sélection contient des médias liés à Arcadia. Ces médias ne seront pas supprimés.", type : "info"});
-                        }
-                    }else{
-                        $(".form_media_close").trigger('click');
-                        $.fancyMessage({title : "Suppression de média", message : "Le média a été supprimé.", type : "info"});
-                    }
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    $.fancybox.close();
-                    $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"});
-                }
-            });
-        }
-    });
-
-
 	// ---- gestion des onglets de la popup d'édition
 	$("#form_media .tabbtn").on("click" , function(event) {
 	    return;

From 7d90eab8ecab5030e26d4a41fd446f11e3e107fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Wed, 13 Apr 2022 12:51:42 +0200
Subject: [PATCH 2/4] Fix check error response nullable

---
 .../js/components/media-manager/ActionsComponent.vue |  4 ++--
 .../js/components/media-manager/BasketComponent.vue  | 12 ++++++------
 .../js/components/media-manager/DisplayComponent.vue |  2 +-
 .../js/components/media-manager/FolderComponent.vue  |  6 +++---
 .../components/media-manager/SideHeaderComponent.vue |  2 +-
 .../media-manager/media-editor/EditComponents.vue    |  4 ++--
 .../media-editor/tabs/HistoryComponent.vue           |  2 +-
 .../media-editor/tabs/LinksComponent.vue             |  2 +-
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/media-manager/ActionsComponent.vue b/resources/js/components/media-manager/ActionsComponent.vue
index 21edef4..755381a 100644
--- a/resources/js/components/media-manager/ActionsComponent.vue
+++ b/resources/js/components/media-manager/ActionsComponent.vue
@@ -149,7 +149,7 @@
                             $.fancyMessage({title: "Dupliquer un média", message: response.data.error, type: "error"});
                         }
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
@@ -244,7 +244,7 @@
                     $.fancybox.close();
                 }).catch(error => {
                     $.fancybox.close();
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
diff --git a/resources/js/components/media-manager/BasketComponent.vue b/resources/js/components/media-manager/BasketComponent.vue
index 4fb720d..b0ae453 100644
--- a/resources/js/components/media-manager/BasketComponent.vue
+++ b/resources/js/components/media-manager/BasketComponent.vue
@@ -109,7 +109,7 @@
                             }
                         }
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
@@ -161,7 +161,7 @@
                             type: "info"
                         });
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
@@ -205,7 +205,7 @@
                                         type: "info"
                                     });
                                 }).catch(error => {
-                                    if(error.response.status === 419) {
+                                    if(error?.response?.status === 419) {
                                         __DAM.methods.sessionTimedOut()
                                         return;
                                     }
@@ -242,7 +242,7 @@
                             type: "info"
                         });
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
@@ -282,7 +282,7 @@
                         $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"});
                     }
                 }).catch(error => {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
@@ -313,7 +313,7 @@
                             });
                             _this2.$loading.hide();
                         }).catch(error => {
-                            if(error.response.status === 419) {
+                            if(error?.response?.status === 419) {
                                 __DAM.methods.sessionTimedOut()
                                 return;
                             }
diff --git a/resources/js/components/media-manager/DisplayComponent.vue b/resources/js/components/media-manager/DisplayComponent.vue
index 5f0eae4..b44125b 100644
--- a/resources/js/components/media-manager/DisplayComponent.vue
+++ b/resources/js/components/media-manager/DisplayComponent.vue
@@ -191,7 +191,7 @@
                 })
                 .catch(function (error) {
                     console.log(error)
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
diff --git a/resources/js/components/media-manager/FolderComponent.vue b/resources/js/components/media-manager/FolderComponent.vue
index 1f84537..d7a5d4c 100644
--- a/resources/js/components/media-manager/FolderComponent.vue
+++ b/resources/js/components/media-manager/FolderComponent.vue
@@ -113,7 +113,7 @@
                         this.$store.state.folder = -1
                     }
                 }).catch(function (error) {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
@@ -167,7 +167,7 @@
                 }).then(response => {
                     _this2.initFolders();
                 }).catch(error => {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
@@ -202,7 +202,7 @@
                             _this2.$loading.hide();
                         }, 1000);
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
diff --git a/resources/js/components/media-manager/SideHeaderComponent.vue b/resources/js/components/media-manager/SideHeaderComponent.vue
index f528ca2..f558702 100644
--- a/resources/js/components/media-manager/SideHeaderComponent.vue
+++ b/resources/js/components/media-manager/SideHeaderComponent.vue
@@ -49,7 +49,7 @@
                         formats: response.data.formats
                     });
                 }).catch(function (error) {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
diff --git a/resources/js/components/media-manager/media-editor/EditComponents.vue b/resources/js/components/media-manager/media-editor/EditComponents.vue
index 984081f..c7a099f 100644
--- a/resources/js/components/media-manager/media-editor/EditComponents.vue
+++ b/resources/js/components/media-manager/media-editor/EditComponents.vue
@@ -197,7 +197,7 @@
                         }
                     }
                 }).catch(function (error) {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
@@ -231,7 +231,7 @@
                         $.fancyMessage({title: "Sauvegarde d'un média", message: response.data.error, type: "error"});
                     }
                 }).catch(function (error) {
-                    if(error.response.status === 419) {
+                    if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
diff --git a/resources/js/components/media-manager/media-editor/tabs/HistoryComponent.vue b/resources/js/components/media-manager/media-editor/tabs/HistoryComponent.vue
index 817f4bf..480a2a0 100644
--- a/resources/js/components/media-manager/media-editor/tabs/HistoryComponent.vue
+++ b/resources/js/components/media-manager/media-editor/tabs/HistoryComponent.vue
@@ -56,7 +56,7 @@
                     }).then(response => {
                         _this2.history = response.data.history;
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }
diff --git a/resources/js/components/media-manager/media-editor/tabs/LinksComponent.vue b/resources/js/components/media-manager/media-editor/tabs/LinksComponent.vue
index 43c1dba..e087027 100644
--- a/resources/js/components/media-manager/media-editor/tabs/LinksComponent.vue
+++ b/resources/js/components/media-manager/media-editor/tabs/LinksComponent.vue
@@ -63,7 +63,7 @@
                     }).then(response => {
                         _this2.links = response.data.vignettes;
                     }).catch(error => {
-                        if(error.response.status === 419) {
+                        if(error?.response?.status === 419) {
                             __DAM.methods.sessionTimedOut()
                             return;
                         }

From dd0c611845b891aa9d3e3b195434a07258dceefa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Thu, 14 Apr 2022 17:00:56 +0200
Subject: [PATCH 3/4] Reload FolderComponent + enchainement sur reload
 DisplayComponent + loader sur Delete fiche

---
 resources/js/app.js                           |  4 ++
 .../media-manager/DisplayComponent.vue        | 45 ++++++++---------
 .../media-manager/FolderComponent.vue         | 49 ++++++++++++++++---
 .../media-editor/tabs/EditComponent.vue       | 24 +++++++--
 4 files changed, 88 insertions(+), 34 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 2589641..d1cec4f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -158,6 +158,7 @@ Vue.use(Dialog, {
 
 const store = new Vuex.Store({
     state: {
+        loading: false,
         reload: '',
         sujet: 0,
         folder: -1,
@@ -172,6 +173,9 @@ const store = new Vuex.Store({
         mediaTab: 'preview'
     },
     mutations: {
+        Loading(state, payload) {
+            state.loading = payload.loading;
+        },
         Reload (state, payload) {
             state.reload = payload.reload;
         },
diff --git a/resources/js/components/media-manager/DisplayComponent.vue b/resources/js/components/media-manager/DisplayComponent.vue
index b44125b..85609f8 100644
--- a/resources/js/components/media-manager/DisplayComponent.vue
+++ b/resources/js/components/media-manager/DisplayComponent.vue
@@ -58,8 +58,8 @@
             storeGrabbed () {
                 return this.$store.state.grabbed;
             },
-            storeReload () {
-                return this.$store.state.reload;
+            storeLoading () {
+                return this.$store.state.loading;
             }
         },
         mounted() {
@@ -86,6 +86,9 @@
             storeFilters() {
                 this.init();
             },
+            storeLoading() {
+                this.loader = this.$store.state.loading
+            },
             storeMedia() {
                 if (Object.keys(this.storeMedia).length > 0) {
                     if (this.storeMedia.close !== undefined && this.storeMedia.close === true) {
@@ -102,9 +105,6 @@
                         });
                     }
                 }
-            },
-            storeReload() {
-                this.init();
             }
         },
         methods: {
@@ -116,7 +116,7 @@
                     type: 'updateGrabbed',
                     grabbed: []
                 });
-                this.loadMedias(this.$store.state);
+                this.loadMedias()
                 //set dateSorted
                 this.dateSorted = false;
                 const _that = this;
@@ -136,7 +136,8 @@
                     $(".action_wrapper .display i.fa-calendar-check").show();
                 }
             },
-            loadMedias($state) {
+            loadMedias($state = null) {
+                let self = this
                 if (this.offset === 0){
                     this.medias = [];
                     this.loader = true;
@@ -151,26 +152,27 @@
                     limit: this.limit,
                     saveSearch: 0
                 }).then(response => {
-                    if (this.offset === 0){
-                        this.medias = response.data;
-                        this.loader = false;
-                        this.$store.commit({
+                    if (self.offset === 0){
+                        self.medias = response.data;
+                        self.loader = false;
+                        self.$store.commit({
                             type: 'updateRole',
                             role: response.data.role
                         });
                     }else{
                         if (response.data.data.length){
-                            this.medias.data.push(...response.data.data);
-                            console.log($state)
-                            $state.loaded()
-                            this.$store.commit({
+                            self.medias.data.push(...response.data.data);
+                            if($state) {
+                                $state.loaded()
+                            }
+                            self.$store.commit({
                                 type: 'updateRole',
                                 role: response.data.role
                             });
-                        }else{
+                        }else if($state) {
                             $state.complete()
                         }
-                        this.scrollLoader = false;
+                        self.scrollLoader = false;
                     }
 
                     // Si requete CA alors on cherche la version la plus récente plus griser les autres
@@ -187,15 +189,14 @@
                         this.isCAQuery = false;
                     }
 
-                    this.offset = this.offset + this.limit;
-                })
-                .catch(function (error) {
-                    console.log(error)
+                    self.offset = self.offset + self.limit;
+                }).catch(function (error) {
+                    console.error(error)
                     if(error?.response?.status === 419) {
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
-                    console.log(error);
+                    console.error(error);
                 });
             },
             infiniteScroll($state) {
diff --git a/resources/js/components/media-manager/FolderComponent.vue b/resources/js/components/media-manager/FolderComponent.vue
index d7a5d4c..b89c7b5 100644
--- a/resources/js/components/media-manager/FolderComponent.vue
+++ b/resources/js/components/media-manager/FolderComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="folder_container">
+    <div ref="folder_container" class="folder_container">
         <div :style="isLoading === true ? 'display:block' : 'display:none;'" class="loader">
             <i class="fa fa-circle-notch fa-spin"></i>
         </div>
@@ -9,7 +9,8 @@
             <ol class="dd-list dd3-list root">
                 <li v-for="item in folders"
                     :class="item.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
-                    :data-id="item.id">
+                    :data-id="item.id"
+                    :id="'_li'+item.id">
                     <div :class="handleClass(item)" @click="toggle(item)"></div>
                     <div @click="selectFolder(item)" @drop="moveMedia($event, item)" @dragover.prevent @dragenter.prevent
                          :class="item.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
@@ -22,7 +23,8 @@
                     <ol v-if="item.sousdossiers.length > 0" class='dd-list' :parent-id="item.id">
                         <li v-for="item2 in item.sousdossiers"
                             :class="item2.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
-                            :data-id="item2.id">
+                            :data-id="item2.id"
+                            :id="'_li'+item2.id">
                             <div :class="handleClass(item2)" @click="toggle(item2)"></div>
                             <div @click="selectFolder(item2)" @drop="moveMedia($event, item2)" @dragover.prevent @dragenter.prevent
                                  :class="item2.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
@@ -36,7 +38,8 @@
                             <ol v-if="item2.sousdossiers.length > 0" class='dd-list' :parent-id="item2.id">
                                 <li v-for="item3 in item2.sousdossiers"
                                     :class="item3.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
-                                    :data-id="item3.id">
+                                    :data-id="item3.id"
+                                    :id="'_li'+item3.id">
                                     <div
                                         :class="item3.parent_id === null ? 'dd-handle dd3-handle no-handle' : 'dd-handle dd3-handle'"></div>
                                     <div @click="selectFolder(item3)" @drop="moveMedia($event, item3)" @dragover.prevent @dragenter.prevent
@@ -77,9 +80,13 @@
             storeGrabbed() {
                 return this.$store.state.grabbed
             },
+            storeReload () {
+                return this.$store.state.reload;
+            }
         },
         data() {
             return {
+                'selectedFolder' : false,
                 'isLoading': true,
                 'oFolders': [],
                 'racineCount': 0,
@@ -89,9 +96,28 @@
         watch: {
             storeSujet() {
                 this.initFolders();
+            },
+            storeReload() {
+                this.reload()
+            },
+            isLoading() {
+                this.$store.commit({
+                    type: 'Loading',
+                    loading: this.isLoading
+                })
             }
         },
         methods: {
+            scrollToContent(item, headerOffset = 0) {
+                let element = document.getElementById('_li' + item.id);
+                let elementPosition = element.getBoundingClientRect().top;
+                let offsetPosition = this.$refs.folder_container.pageYOffset + elementPosition - headerOffset;
+
+                this.$refs.folder_container.scrollTo({
+                    top: offsetPosition,
+                    behavior: "smooth"
+                })
+            },
             initFolders(toSelectFolder = false) {
                 this.isLoading = true;
                 this.folders = [];
@@ -107,7 +133,10 @@
                     this.isLoading = false;
 
                     if (toSelectFolder !== false){
-                        this.selectFolder(toSelectFolder);
+                        this.selectFolder(toSelectFolder)
+                        this.$nextTick(() => {
+                            this.scrollToContent(toSelectFolder)
+                        })
                     } else {
                         // ! Reset Current folder to none selected
                         this.$store.state.folder = -1
@@ -117,9 +146,12 @@
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
-                    console.log(error);
+                    console.error(error);
                 });
             },
+            reload() {
+                this.initFolders(this.selectedFolder)
+            },
             renderItems() {
                 const favs = this.oFolders.filter(item => item.favoris === true),
                     self = this
@@ -139,6 +171,7 @@
                 })
             },
             selectFolder(item) {
+                this.selectedFolder = item
                 let filter = this.storeFilters.findIndex(e => e.type === 'dossier_id');
                 if (filter !== -1) {
                     this.$delete(this.storeFilters, filter);
@@ -176,7 +209,7 @@
                         message: "Une erreur est survenue, veuillez recharger la page (Ctrl + F5).",
                         type: "error"
                     });
-                    console.log(error);
+                    console.error(error);
                 });
             },
             moveMedia(evt, folder) {
@@ -207,7 +240,7 @@
                             return;
                         }
                         _this2.$loading.hide();
-                        console.log(error);
+                        console.error(error);
                         $.fancybox.close();
                         $.fancyMessage({title : "Attention", message : "Erreur lors du déplacement, merci d'actualiser la page.", type : "error"});
                     });
diff --git a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
index 16e3c8f..ef97e4d 100644
--- a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
+++ b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
@@ -317,7 +317,7 @@
                         __DAM.methods.sessionTimedOut()
                         return;
                     }
-                    console.log(error);
+                    console.error(error);
                     $.fancybox.close();
                     $.fancyMessage({
                         title: "Erreur",
@@ -357,7 +357,7 @@
                         message: "Erreur lors de l'opération, merci d'actualiser la page.",
                         type: "error"
                     });
-                    console.log(error);
+                    console.error(error);
                 });
             },
             CheckForm() {
@@ -411,7 +411,7 @@
                         message: "Erreur lors de l'opération, merci d'actualiser la page.",
                         type: "error"
                     });
-                    console.log(error);
+                    console.error(error);
                 });
             },
             DeleteMedia() {
@@ -425,6 +425,10 @@
                         if(!value) {
                             return;
                         }
+                        self.$store.commit({
+                            type: 'Loading',
+                            reload: true
+                        });
                         $.ajax({
                             url: '/ajax/remove-media',
                             method: 'POST',
@@ -433,6 +437,10 @@
                                 medias: [self.oMedia.id]
                             },
                             success: function(result){
+                                self.$store.commit({
+                                    type: 'Loading',
+                                    reload: false
+                                })
                                 if(result.length != 1) {
                                     $.fancybox.close()
                                     if(medias.length == 1) {
@@ -449,6 +457,10 @@
                                 }
                             },
                             error: function(jqXHR, textStatus, errorThrown) {
+                                self.$store.commit({
+                                    type: 'Loading',
+                                    reload: false
+                                })
                                 $.fancybox.close()
                                 $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"})
                             }
@@ -511,7 +523,7 @@
                         message: "Erreur lors de l'opération, merci d'actualiser la page.",
                         type: "error"
                     });
-                    console.log(error);
+                    console.error(error);
                 });
             },
             DeleteArticles(article_id) {
@@ -519,6 +531,10 @@
                     return;
                 }
                 this.oMedia.articles = this.oMedia.articles.filter(e => e.id !== article_id);
+                this.$store.commit({
+                    type: 'Reload',
+                    reload: Math.random()
+                });
             },
             AddMarques(marque) {
                 const index = this.oMedia.marques.find(e => e.codMarq === marque.codMarq);

From c8eaa0cc3fd8133376bfccdb685bbcb631cf534e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 19 Apr 2022 17:30:21 +0200
Subject: [PATCH 4/4] Fix component loader

---
 .../js/components/media-manager/ActionsComponent.vue | 12 ++++++++++++
 .../media-editor/tabs/EditComponent.vue              |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/media-manager/ActionsComponent.vue b/resources/js/components/media-manager/ActionsComponent.vue
index 755381a..034d277 100644
--- a/resources/js/components/media-manager/ActionsComponent.vue
+++ b/resources/js/components/media-manager/ActionsComponent.vue
@@ -177,6 +177,10 @@
                             if(!value) {
                                 return;
                             }
+                            self.$store.commit({
+                                type: 'Loading',
+                                loading: true
+                            })
                             $.ajax({
                                 url: '/ajax/remove-media',
                                 method: 'POST',
@@ -185,6 +189,10 @@
                                     medias: medias.map(function(obj) { return obj.id })
                                 },
                                 success: function(result) {
+                                    self.$store.commit({
+                                        type: 'Loading',
+                                        loading: false
+                                    })
                                     let reload = function() {
                                         self.$store.commit({
                                             type: 'Reload',
@@ -203,6 +211,10 @@
                                     }
                                 },
                                 error: function(jqXHR, textStatus, errorThrown) {
+                                    self.$store.commit({
+                                        type: 'Loading',
+                                        loading: false
+                                    })
                                     $.fancybox.close()
                                     $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"})
                                 }
diff --git a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
index ef97e4d..32bc6a1 100644
--- a/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
+++ b/resources/js/components/media-manager/media-editor/tabs/EditComponent.vue
@@ -427,8 +427,8 @@
                         }
                         self.$store.commit({
                             type: 'Loading',
-                            reload: true
-                        });
+                            loading: true
+                        })
                         $.ajax({
                             url: '/ajax/remove-media',
                             method: 'POST',
@@ -439,7 +439,7 @@
                             success: function(result){
                                 self.$store.commit({
                                     type: 'Loading',
-                                    reload: false
+                                    loading: false
                                 })
                                 if(result.length != 1) {
                                     $.fancybox.close()
@@ -459,7 +459,7 @@
                             error: function(jqXHR, textStatus, errorThrown) {
                                 self.$store.commit({
                                     type: 'Loading',
-                                    reload: false
+                                    loading: false
                                 })
                                 $.fancybox.close()
                                 $.fancyMessage({title : "Attention", message : "Erreur lors de la suppression du média, merci d'actualiser la page.", type : "error"})