From 3e891912b0c5528ba06f83ecf48936f1de595d47 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sat, 4 May 2024 14:18:17 +1000
Subject: [PATCH] fix issues with scripts rendering

---
 resources/views/components/layout.blade.php   |  1 +
 .../views/components/ui/filelist.blade.php    | 60 ++++++++++---------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 28c7d47..5d1e8fa 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -30,6 +30,7 @@
         SM.alert('{{ session('message-title') }}', '{{ session('message') }}', '{{ session('message-type') }}');
     </script>
 @endif
+@stack('scripts')
 @livewireScripts
 </body>
 </html>
diff --git a/resources/views/components/ui/filelist.blade.php b/resources/views/components/ui/filelist.blade.php
index 627d17c..c0f7d8c 100644
--- a/resources/views/components/ui/filelist.blade.php
+++ b/resources/views/components/ui/filelist.blade.php
@@ -8,10 +8,10 @@
 @endphp
 
 @if($value !== '' || $editor === true)
-<div x-data class="{{ twMerge(['mb-4'], $attributes->get('class')) }}" x-show="$store.filelist-{{ $name }}.length > 0 || {{ $editor === true ? 'true' : 'false' }}">
+<div x-data class="{{ twMerge(['mb-4'], $attributes->get('class')) }}" x-show="$store['filelist-{{ $name }}'].length > 0 || {{ $editor === true ? 'true' : 'false' }}">
     <h3 class="text-xl font-semibold">{{ $label }}</h3>
-    <ul x-show="$store.filelist-{{ $name }}.length > 0" class="flex flex-col bg-white p-4 border border-gray-300 rounded-lg gap-4 mt-2 overflow-hidden">
-        <template x-for="file in $store.filelist-{{ $name }}" :key="file.name">
+    <ul x-show="$store['filelist-{{ $name }}'].length > 0" class="flex flex-col bg-white p-4 border border-gray-300 rounded-lg gap-4 mt-2 overflow-hidden">
+        <template x-for="file in $store['filelist-{{ $name }}']" :key="file.name">
             <li class="flex items-center min-h-10">
                 <img class="w-10 mr-2" :src="file.thumbnail" />
                 <div class="flex flex-grow flex-col">
@@ -23,71 +23,75 @@
                 </div>
                 <a class="flex-shrink-0 cursor-pointer text-gray-400 w-7 text-center hover:text-primary-color" :href="file.url + '?download=1'"><i class="fa-solid fa-download"></i></a>
                 @if($editor)
-                    <i class="flex-shrink-0 text-gray-400 w-7 text-center fa-solid fa-trash hover:text-red-500 cursor-pointer" x-on:click.prevent="removeFile(file.name)"></i>
+                    <i class="flex-shrink-0 text-gray-400 w-7 text-center fa-solid fa-trash hover:text-red-500 cursor-pointer" x-on:click.prevent="removeFile('{{ $name }}', file.name)"></i>
                 @endif
             </li>
         </template>
     </ul>
 
     @if($editor)
-        <button class="mt-4 bg-white border border-gray-300 hover:bg-gray-300 justify-center rounded-md text-gray-700 px-8 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition" x-on:click.prevent="SMMediaPicker.open(Alpine.store('filelist-{{ $name }}').map(file => file.name), {allow_multiple:true,allow_uploads:true}, (result)=>updateFiles(result))">Add File</button>
+        <button class="mt-4 bg-white border border-gray-300 hover:bg-gray-300 justify-center rounded-md text-gray-700 px-8 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition" x-on:click.prevent="SMMediaPicker.open(Alpine.store('filelist-{{ $name }}').map(file => file.name), {allow_multiple:true,allow_uploads:true}, (result)=>updateFiles('{{ $name }}', result))">Add File</button>
         <div class="text-xs text-gray-500 mb-4 mt-1">Max upload size: {{ \App\Helpers::bytesToString(\App\Helpers::getMaxUploadSize()) }}</div>
-        <input class="hidden" type="text" id="{{ $name }}" name="{{ $name }}" value="{{ $value }}"/>
+        <input class="xhidden" type="text" id="{{ $name }}" name="{{ $name }}" value="{{ $value }}"/>
     @endif
     @if(isset($info) && $info !== '')
         <div class="text-xs text-gray-500 ml-2 mt-1">{{ $info }}</div>
     @endif
 </div>
 
+@pushonce('scripts')
 <script>
-    function removeFile(fileName) {
-        const fileList = Alpine.store('filelist-{{ $name }}').filter(f => f.name !== fileName);
+    function removeFile(name, fileName) {
+        const fileList = Alpine.store('filelist-' + name).filter(f => f.name !== fileName);
 
-        Alpine.store('filelist-{{ $name }}', fileList);
+        Alpine.store('filelist-' + name, fileList);
 
-        const elem = document.getElementById('{{ $name }}');
+        const elem = document.getElementById(name);
         if(elem) {
             elem.value = fileList.map(f => f.name).join(',');
         }
     }
 
-    function updateFiles(result) {
+    function updateFiles(name, result) {
         const fileNames = [];
-        Alpine.store('filelist-{{ $name }}', []);
+        Alpine.store('filelist-' + name, []);
 
         // Check if each item in result is a string or an object
         result.forEach(item => {
             if (typeof item === 'string') {
                 // If item is a string, get file details
                 SM.mediaDetails(item, (details) => {
-                    Alpine.store('filelist-{{ $name }}', [...Alpine.store('filelist-{{ $name }}'), details]);
+                    Alpine.store('filelist-' + name, [...Alpine.store('filelist-' + name), details]);
                 });
 
                 fileNames.push(item);
             } else {
                 // If item is an object, directly place it in the store
-                Alpine.store('filelist-{{ $name }}', [...Alpine.store('filelist-{{ $name }}'), item]);
+                Alpine.store('filelist-' + name, [...Alpine.store('filelist-' + name), item]);
                 fileNames.push(item.name);
             }
         });
 
-        const elem = document.getElementById('{{ $name }}');
+        const elem = document.getElementById(name);
         if(elem) {
             elem.value = fileNames.join(',');
         }
     }
-
-    document.addEventListener('alpine:init', () => {
-        const files = '{!! addslashes($value) !!}';
-        let fileData = [];
-        try {
-            fileData = JSON.parse(files);
-        } catch {
-
-        }
-
-        console.log('{{$name}}', files, fileData);
-        updateFiles(fileData);
-    });
 </script>
+@endpushonce
+@push('scripts')
+<script>
+document.addEventListener('alpine:init', () => {
+    const files = '{!! addslashes($value) !!}';
+    let fileData = [];
+    try {
+        fileData = JSON.parse(files);
+    } catch {
+
+    }
+
+    updateFiles('{{ $name }}', fileData);
+});
+</script>
+@endpush
 @endif