From 941a83720ea619073a3ee8929dfc06352b6f4408 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 6 Jan 2022 16:55:01 +0100
Subject: [PATCH] wait #5004 @2

---
 app/Models/Asset.php                          |  2 +-
 .../media-library/filter-interface.blade.php  | 24 +----
 .../media-library/filter-list.blade.php       | 27 +-----
 .../components/media-library/index.blade.php  | 94 ++++++++++---------
 resources/views/front/media-library.blade.php |  2 +-
 5 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/app/Models/Asset.php b/app/Models/Asset.php
index 10ab0fc..bea3180 100644
--- a/app/Models/Asset.php
+++ b/app/Models/Asset.php
@@ -47,7 +47,7 @@ class Asset extends CubistMagicAbstractModel
             ]);
         $this->addField('file_upload', Files::class, 'Fichier', ['maxFiles' => 100]);
         $this->addField('file_thumb', Files::class, 'Miniature', ['when' => ['type' => ['audio', 'video', 'pdf']], 'hint' => 'Image utilisée sur la page "Médiathèque" ou "Resources"']);
-        $this->addField('theme', SelectFromModel::class, 'Thème', ['when' => ['type' => ['audio', 'video']], 'optionsmodel' => AssetTheme::class, 'allows_null' => true, 'column' => true, 'hint' => 'Choisir un thème pour ajouter à la page "Médiathèque"']);
+        $this->addField('theme', SelectFromModel::class, 'Chapitres', ['when' => ['type' => ['audio', 'video']], 'optionsmodel' => AssetTheme::class, 'allows_null' => true, 'allows_multiple' => true, 'column' => true, 'hint' => 'Choisir un thème pour ajouter à la page "Médiathèque"']);
         $this->addField('keywords', Tags::class, 'Mots-clé', ['column' => true]);
     }
 
diff --git a/resources/views/components/media-library/filter-interface.blade.php b/resources/views/components/media-library/filter-interface.blade.php
index cfd5224..2cc9411 100644
--- a/resources/views/components/media-library/filter-interface.blade.php
+++ b/resources/views/components/media-library/filter-interface.blade.php
@@ -24,31 +24,9 @@
 
         {{-- Filter Options --}}
         <div class="flex flex-col lg:flex-row mt-15">
-            {{-- Media Type Filters --}}
-            <div class="lg:w-1/3">
-                <h3 class="font-medium text-4xl mb-5">Média</h3>
-                <div class="grid grid-cols-1 gap-5">
-                    @foreach($types as $type_id => $type)
-                        <label>
-                            <input type="checkbox"
-                                   value="media-{{ $type_id }}"
-                                   x-model="activeTypeFilters"
-                                   class="peer sr-only">
-                            <span class="inline-block cursor-pointer
-                                         font-secondary font-medium
-                                         py-2.5 px-5 rounded-full border
-                                         peer-checked:bg-white peer-checked:text-black
-                                         transition">
-                                    {{ $type }}
-                                </span>
-                        </label>
-                    @endforeach
-                </div>
-            </div>
-
             {{-- Theme Filters --}}
             <div class="mt-15 lg:mt-0 lg:w-2/3">
-                <h3 class="font-medium text-4xl mb-5">Thème</h3>
+                <h3 class="font-medium text-4xl mb-5">Chapitres</h3>
                 <div class="grid grid-cols-2 gap-5">
                     @foreach($themes as $theme_id => $theme)
                         <label>
diff --git a/resources/views/components/media-library/filter-list.blade.php b/resources/views/components/media-library/filter-list.blade.php
index 9fdcd02..0efaf71 100644
--- a/resources/views/components/media-library/filter-list.blade.php
+++ b/resources/views/components/media-library/filter-list.blade.php
@@ -14,31 +14,6 @@
         Filtrer
     </a>
 
-    {{-- ACTIVE [MEDIA TYPE] FILTERS (JS) --}}
-    {{-- Media types must be filtered separately from themes --}}
-    <template x-for="activeTypeFilter in activeTypeFilters">
-        <div class="relative inline-flex
-                            py-4 pl-4 pr-12
-                            rounded-full border border-grey-200
-                            leading-none
-                            font-secondary font-medium text-black">
-            <span x-text="filters[activeTypeFilter]" class="whitespace-nowrap"></span>
-            {{-- REMOVE (X) ICON --}}
-            <a href="#"
-               @click.prevent="removeTypeFilter(activeTypeFilter)"
-               class="absolute w-7 h-7 right-2 top-1/2 transform -translate-y-1/2
-                              flex items-center justify-center
-                              rounded-full bg-grey-200 text-current">
-                <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 10.828 10.828">
-                    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                        <path d="m1.414 9.414 8-8"/>
-                        <path data-name="Path 46" d="m1.414 1.414 8 8"/>
-                    </g>
-                </svg>
-            </a>
-        </div>
-    </template>
-
     {{-- ACTIVE [THEME] FILTERS (JS) --}}
     <template x-for="activeThemeFilter in activeThemeFilters">
         <div class="relative inline-flex
@@ -46,7 +21,7 @@
                             rounded-full border border-grey-200
                             leading-none
                             font-secondary font-medium text-black">
-            <span x-text="filters[activeThemeFilter]" class="whitespace-nowrap"></span>
+            <span x-text="filters[activeThemeFilter]['name']" class="whitespace-nowrap"></span>
             {{-- REMOVE (X) ICON --}}
             <a href="#"
                @click.prevent="removeThemeFilter(activeThemeFilter)"
diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php
index 8c46975..b8f3338 100644
--- a/resources/views/components/media-library/index.blade.php
+++ b/resources/views/components/media-library/index.blade.php
@@ -10,7 +10,7 @@
         return ["media-$key" => $item];
     });
     $theme_filters = collect($themes)->mapWithKeys(function($item, $key) {
-        return ["theme-$key" => $item];
+        return ["theme-$key" => ['name'=>$item['name']]];
     });
     $filters = array_merge($media_filters->toArray(), $theme_filters->toArray());
 
@@ -23,7 +23,7 @@
 {{-- See media_library() definition in resources/js/media-library.js --}}
 <div x-data="media_library({ filters: {{ json_encode($filters) }} })">
 
-    <x-media-library.filter-list />
+    <x-media-library.filter-list/>
 
     {{-- MEDIA LIBRARY GRID --}}
     {{-- Negative margins applied here to offset margins used in Isotope grid --}}
@@ -31,7 +31,14 @@
         @foreach ($media as $item)
 
             @php
-                $theme=$themes[$item['theme']];
+                $filters=[];
+                if(!is_array($item['theme'])){
+                    $item['theme']=[$item['theme']];
+                }
+                foreach ($item['theme'] as $t){
+                    $filters[]='theme-'.$t;
+                }
+                $theme=$themes[$item['theme'][0]];
                 $player_data = [
                     'ID' => $item['id'],
                     'player' => [
@@ -53,51 +60,52 @@
                  data-player='{{ json_encode($player_data) }}'
                  class="media-item group cursor-pointer
                         {{-- Width is 25% minus the gutters (2 * 0.625rem that comes from mx-2.5) --}}
-                        float-left w-[calc(100%/2-1.25rem)] md:w-[calc(100%/3-1.25rem)] lg:w-[calc(100%/4-1.25rem)] mx-2.5 mb-16
-                        media-{{ $item['type'] }}
-                        theme-{{ $item['theme'] }}"
-            >
-                <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-color:#ddd;background-image:url({{ $item['image'] }})">
+                     float-left w-[calc(100%/2-1.25rem)] md:w-[calc(100%/3-1.25rem)] lg:w-[calc(100%/4-1.25rem)] mx-2.5 mb-16
+                     {{ implode(' ',$filters) }}
+                     ">
+                         <div class=" media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]"
+            style="background-color:#ddd;background-image:url({{ $item['image'] }})">
 
-                    {{-- Play Icon --}}
-                    <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition group-hover:scale-110"
-                         xmlns="http://www.w3.org/2000/svg" width="22.47%" viewBox="0 0 59.999 59.999">
-                        {{-- Icon BG --}}
-                        <path d="M0 29.999a30 30 0 1 0 30-30 30 30 0 0 0-30 30Z" fill="#0725e2"/>
+            {{-- Play Icon --}}
+            <svg
+                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition group-hover:scale-110"
+                xmlns="http://www.w3.org/2000/svg" width="22.47%" viewBox="0 0 59.999 59.999">
+                {{-- Icon BG --}}
+                <path d="M0 29.999a30 30 0 1 0 30-30 30 30 0 0 0-30 30Z" fill="#0725e2"/>
 
-                        <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                            @if ($item['type'] === 'audio')
-                                {{-- Audio Play Icon --}}
-                                <path d="M15.999 25.324h5.324v9.317h-5.324Z"/>
-                                <path d="M35.321 24.635a7.561 7.561 0 0 1 0 10.693 7.523 7.523 0 0 0 0-10.693Z"/>
-                                <path d="M39.644 21.627a11.815 11.815 0 0 1 0 16.709 11.756 11.756 0 0 0 0-16.709Z"/>
-                                <path d="M21.323 25.324 30.64 20v19.966l-9.317-5.325Z"/>
-                            @else
-                                {{-- Video Play Icon --}}
-                                <path d="m26.5 38.5 12-8-12-8Z" />
-                            @endif
-                        </g>
-                    </svg>
+                <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                    @if ($item['type'] === 'audio')
+                        {{-- Audio Play Icon --}}
+                        <path d="M15.999 25.324h5.324v9.317h-5.324Z"/>
+                        <path d="M35.321 24.635a7.561 7.561 0 0 1 0 10.693 7.523 7.523 0 0 0 0-10.693Z"/>
+                        <path d="M39.644 21.627a11.815 11.815 0 0 1 0 16.709 11.756 11.756 0 0 0 0-16.709Z"/>
+                        <path d="M21.323 25.324 30.64 20v19.966l-9.317-5.325Z"/>
+                    @else
+                        {{-- Video Play Icon --}}
+                        <path d="m26.5 38.5 12-8-12-8Z"/>
+                    @endif
+                </g>
+            </svg>
 
-                    <x-duration class="absolute bottom-2 right-2 font-secondary text-white"
-                                style="text-shadow: rgb(0 0 0 / 50%) 0 0.1em 0.2em">
-                        {{ $item['duration'] }}
-                    </x-duration>
-                </div>
-                {{-- THEME LABEL --}}
-                <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $theme['color'] }}">
-                    {{ $theme['name'] }}
-                </div>
-                {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}}
-                <div class="mt-1.5 font-semibold leading-snug min-h-[2.75em]">
-                    {{ $item['title'] }}
-                </div>
-            </div>
-        @endforeach
+            <x-duration class="absolute bottom-2 right-2 font-secondary text-white"
+                        style="text-shadow: rgb(0 0 0 / 50%) 0 0.1em 0.2em">
+                {{ $item['duration'] }}
+            </x-duration>
     </div>
+    {{-- THEME LABEL --}}
+    <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $theme['color'] }}">
+        {{ $theme['name'] }}
+    </div>
+    {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}}
+    <div class="mt-1.5 font-semibold leading-snug min-h-[2.75em]">
+        {{ $item['title'] }}
+    </div>
+</div>
+@endforeach
+</div>
 
-    <x-media-library.player />
+<x-media-library.player/>
 
-    <x-media-library.filter-interface />
+<x-media-library.filter-interface/>
 
 </div>
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php
index cb51066..055762c 100644
--- a/resources/views/front/media-library.blade.php
+++ b/resources/views/front/media-library.blade.php
@@ -54,7 +54,7 @@
     </div>
 
     {{-- Media library (components/media-library/index.blade.php) --}}
-    <x-media-library :themes="$themes" :types="$media_types" :media="$media"></x-media-library>
+    <x-media-library :themes="$themes" :media="$media"></x-media-library>
 
 @endsection
 
-- 
2.39.5