From dd1291d2f1b21fa4c5d88a5be1c73fe150a54a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Thu, 24 Mar 2022 12:25:00 +0100
Subject: [PATCH] Ticket 559: Fix display layout + sort date (reste UTF-8
 elastic)

---
 resources/js/app.js                           |  5 ++-
 .../media-manager/DisplayComponent.vue        |  6 +--
 resources/js/media.js                         | 43 +++++++++++++++----
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index d87a714..827b648 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -70,6 +70,8 @@ moment.locale('fr', {
 
 moment.locale('fr');
 Vue.prototype.moment = moment
+Vue.prototype.$window = window
+Vue.prototype.$displayStatus = 'Grid'
 
 // Vue
 import Vue from 'vue';
@@ -209,7 +211,8 @@ const store = new Vuex.Store({
     }
 });
 
-new Vue({
+// * Make Vue prototype accessible to jquery
+window.Vue = new Vue({
     el: '#vue-app',
     store,
     components: {
diff --git a/resources/js/components/media-manager/DisplayComponent.vue b/resources/js/components/media-manager/DisplayComponent.vue
index add2813..6e1e494 100644
--- a/resources/js/components/media-manager/DisplayComponent.vue
+++ b/resources/js/components/media-manager/DisplayComponent.vue
@@ -3,10 +3,10 @@
         <div v-show="scrollLoader" class="scrollLoader"><div class="animated slideInUp"><i  class="fa fa-circle-notch fa-spin"></i> Chargements des médias</div></div>
         <div class="media_container">
             <div v-show="loader" class="loader"><i  class="fa fa-circle-notch fa-spin"></i></div>
-            <div class="wrapper" v-if="medias.data">
-                <div v-if="showDateSeparators()" class="date-separator">{{formatDate(medias.data[0].updated_at)}}</div>
+            <div :class="'wrapper' + ($displayStatus == 'Grid' ? '' : ' inline')" v-if="medias.data">
+                <div v-if="showDateSeparators()" class="date-separator">Date de {{ dateSorted === 'updated_at' ? 'modification' : 'création' }} : {{formatDate(medias.data[0][dateSorted])}}</div>
                 <template v-for="media,index in medias.data">
-                    <div v-if="showDateSeparators() && !isSameDay(media,medias.data[Math.max(index-1,0)])" class="date-separator">{{formatDate(media[dateSorted])}}</div>
+                    <div v-if="showDateSeparators() && !isSameDay(media,medias.data[Math.max(index-1,0)])" class="date-separator">Date de {{ dateSorted === 'updated_at' ? 'modification' : 'création' }} : {{formatDate(media[dateSorted])}}</div>
                     <div @dragstart="dragStart(media, $event)" v-on:dblclick="edit(media)" @click="select(media)" :class=" isCAQuery && media.id !== lastVersion.id ? 'imageItem not-last-version' : 'imageItem'" :draggable="medias.draggable" :aria-grabbed="storeGrabbed.filter(e => e.id === media.id).length > 0">
                         <div class="etiquette" :style="'background-color:' + media.etiquette.color + '; border-color:' + media.etiquette.color + ';'"  :data-id="media.etiquette.etiquette_id" >{{media.etiquette.libelle}}</div>
 
diff --git a/resources/js/media.js b/resources/js/media.js
index c1537fa..71aaff5 100644
--- a/resources/js/media.js
+++ b/resources/js/media.js
@@ -1,4 +1,31 @@
-$(document).ready(function() {
+let methods = {
+    refreshDisplay() {
+        if (__MEDIAS.displayStatus === 'Grid') {
+            __MEDIAS.methods.displayGrid()
+        } else {
+            __MEDIAS.methods.displayList()
+        }
+    },
+    displayGrid() {
+        Vue.__proto__.$displayStatus = 'Grid'
+        __MEDIAS.displayStatus = 'Grid'
+        $(".action_wrapper .display .fa-th-list").removeClass('selected');
+        $(".media_container .wrapper").removeClass('inline');
+    },
+    displayList() {
+        Vue.__proto__.$displayStatus = 'List'
+        __MEDIAS.displayStatus = 'List'
+        $(".action_wrapper .display .fa-th").removeClass('selected');
+        $(".media_container .wrapper").addClass('inline');
+    }
+};
+
+window.__MEDIAS = {
+    displayStatus: 'Grid',
+    methods: methods
+}
+
+$(document).ready(function () {
 
     $.ajaxSetup({
         headers:
@@ -82,16 +109,14 @@ $(document).ready(function() {
             }
         } else {
             if($(this).hasClass('fa-th')){ // mode mosaique
-                if(!$(this).hasClass('selected')){
-                    $(".action_wrapper .display .fa-th-list").removeClass('selected');
-                    $(this).addClass('selected');
-                    $(".media_container .wrapper").removeClass('inline');
+                if (!$(this).hasClass('selected')) {
+                    $(this).addClass('selected')
+                    methods.displayGrid()
                 }
             }else{ // mode liste
-                if(!$(this).hasClass('selected')){
-                    $(".action_wrapper .display .fa-th").removeClass('selected');
-                    $(this).addClass('selected');
-                    $(".media_container .wrapper").addClass('inline');
+                if (!$(this).hasClass('selected')) {
+                    $(this).addClass('selected')
+                    methods.displayList()
                 }
             }
         }