From cdc5d1e8d361e44f7c0e611890214ce11603e7c1 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sat, 4 May 2024 13:39:55 +1000
Subject: [PATCH] allow multiple components on page

---
 .../views/components/ui/filelist.blade.php     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/views/components/ui/filelist.blade.php b/resources/views/components/ui/filelist.blade.php
index db6d164..d5582f7 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.files.length > 0 || {{ $editor === true ? 'true' : 'false' }}">
+<div x-data class="{{ twMerge(['mb-4'], $attributes->get('class')) }}" x-show="$store.files-{{ $name }}.length > 0 || {{ $editor === true ? 'true' : 'false' }}">
     <h3 class="text-xl font-semibold">{{ $label }}</h3>
-    <ul x-show="$store.files.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.files" :key="file.name">
+    <ul x-show="$store.files-{{ $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.files-{{ $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">
@@ -30,7 +30,7 @@
     </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('files').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('files-{{ $name }}').map(file => file.name), {allow_multiple:true,allow_uploads:true}, (result)=>updateFiles(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 }}"/>
     @endif
@@ -41,9 +41,9 @@
 
 <script>
     function removeFile(fileName) {
-        const fileList = Alpine.store('files').filter(f => f.name !== fileName);
+        const fileList = Alpine.store('files-{{ $name }}').filter(f => f.name !== fileName);
 
-        Alpine.store('files', fileList);
+        Alpine.store('files-{{ $name }}', fileList);
 
         const elem = document.getElementById('{{ $name }}');
         if(elem) {
@@ -53,20 +53,20 @@
 
     function updateFiles(result) {
         const fileNames = [];
-        Alpine.store('files', []);
+        Alpine.store('files-{{ $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('files', [...Alpine.store('files'), details]);
+                    Alpine.store('files-{{ $name }}', [...Alpine.store('files-{{ $name }}'), details]);
                 });
 
                 fileNames.push(item);
             } else {
                 // If item is an object, directly place it in the store
-                Alpine.store('files', [...Alpine.store('files'), item]);
+                Alpine.store('files-{{ $name }}', [...Alpine.store('files-{{ $name }}'), item]);
                 fileNames.push(item.name);
             }
         });