STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

updates

Browse Source
This commit is contained in:
James Collins
2024-05-04 13:48:21 +10:00
parent 28aebcfe58
commit e4d5307dfe
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/views/components/ui/filelist.blade.php
View File

@@ -8,10 +8,10 @@
@endphp @endphp
@if($value !== '' || $editor === true) @if($value !== '' || $editor === true)
<div x-data class="{{ twMerge(['mb-4'], $attributes->get('class')) }}" x-show="$store.files-{{ $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> <h3 class="text-xl font-semibold">{{ $label }}</h3>
<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"> <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.files-{{ $name }}" :key="file.name"> <template x-for="file in $store.filelist-{{ $name }}" :key="file.name">
<li class="flex items-center min-h-10"> <li class="flex items-center min-h-10">
<img class="w-10 mr-2" :src="file.thumbnail" /> <img class="w-10 mr-2" :src="file.thumbnail" />
<div class="flex flex-grow flex-col"> <div class="flex flex-grow flex-col">
@@ -30,7 +30,7 @@
</ul> </ul>
@if($editor) @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-{{ $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="console.log(Alpine.store('filelist-{{ $name }}'));SMMediaPicker.open(Alpine.store('filelist-{{ $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> <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="hidden" type="text" id="{{ $name }}" name="{{ $name }}" value="{{ $value }}"/>
@endif @endif
@@ -41,9 +41,9 @@
<script> <script>
function removeFile(fileName) { function removeFile(fileName) {
const fileList = Alpine.store('files-{{ $name }}').filter(f => f.name !== fileName); const fileList = Alpine.store('filelist-{{ $name }}').filter(f => f.name !== fileName);
Alpine.store('files-{{ $name }}', fileList); Alpine.store('filelist-{{ $name }}', fileList);
const elem = document.getElementById('{{ $name }}'); const elem = document.getElementById('{{ $name }}');
if(elem) { if(elem) {
@@ -53,20 +53,20 @@
function updateFiles(result) { function updateFiles(result) {
const fileNames = []; const fileNames = [];
Alpine.store('files-{{ $name }}', []); Alpine.store('filelist-{{ $name }}', []);
// Check if each item in result is a string or an object // Check if each item in result is a string or an object
result.forEach(item => { result.forEach(item => {
if (typeof item === 'string') { if (typeof item === 'string') {
// If item is a string, get file details // If item is a string, get file details
SM.mediaDetails(item, (details) => { SM.mediaDetails(item, (details) => {
Alpine.store('files-{{ $name }}', [...Alpine.store('files-{{ $name }}'), details]); Alpine.store('filelist-{{ $name }}', [...Alpine.store('filelist-{{ $name }}'), details]);
}); });
fileNames.push(item); fileNames.push(item);
} else { } else {
// If item is an object, directly place it in the store // If item is an object, directly place it in the store
Alpine.store('files-{{ $name }}', [...Alpine.store('files-{{ $name }}'), item]); Alpine.store('filelist-{{ $name }}', [...Alpine.store('filelist-{{ $name }}'), item]);
fileNames.push(item.name); fileNames.push(item.name);
} }
}); });