Make folders selectable and downloadable with item count and sharing status.
Deploy Ladill Transfer / deploy (push) Successful in 35s
Deploy Ladill Transfer / deploy (push) Successful in 35s
Folder rows match the file table layout, support zip download, and participate in bulk selection, share, and copy-link actions. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -17,12 +17,24 @@
|
||||
'downloadUrl' => route('transfer.files.download', $file),
|
||||
'shared' => $file->transfer->recipient_email !== null || $file->downloads_total > 0,
|
||||
])->values();
|
||||
$folderRows = $folders->map(fn ($folder) => [
|
||||
'id' => $folder->id,
|
||||
'name' => $folder->title,
|
||||
'itemCount' => (int) $folder->files_count,
|
||||
'modified' => $folder->updated_at?->format('M j, Y') ?? '—',
|
||||
'shareUrl' => $folder->qrCode?->publicUrl() ?? '',
|
||||
'downloadUrl' => route('transfer.files.folders.download', $folder),
|
||||
'openUrl' => route('transfer.files.index', ['folder' => $folder->id]),
|
||||
'shared' => $folder->recipient_email !== null || $folder->downloads_total > 0,
|
||||
])->values();
|
||||
@endphp
|
||||
|
||||
<div class="space-y-4"
|
||||
x-data="filesManager(@js([
|
||||
'fileIds' => $fileRows->pluck('id')->all(),
|
||||
'files' => $fileRows->all(),
|
||||
'folderIds' => $folderTransfer || $search !== '' ? [] : $folderRows->pluck('id')->all(),
|
||||
'folders' => $folderTransfer || $search !== '' ? [] : $folderRows->all(),
|
||||
'csrf' => csrf_token(),
|
||||
'currentFolderId' => $folderTransfer?->id,
|
||||
'routes' => [
|
||||
@@ -95,7 +107,7 @@
|
||||
{{-- Action toolbar + file list --}}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="flex flex-wrap items-center gap-2 border-b border-slate-100 px-4 py-2.5">
|
||||
<template x-if="selected.length === 0">
|
||||
<template x-if="selectedCount === 0">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm">
|
||||
<button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Download</button>
|
||||
<button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Share</button>
|
||||
@@ -105,7 +117,7 @@
|
||||
<button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Open in email</button>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="selected.length > 0">
|
||||
<template x-if="selectedCount > 0">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm">
|
||||
<button type="button" @click="downloadSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Download</button>
|
||||
<button type="button" @click="shareSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Share</button>
|
||||
@@ -113,7 +125,7 @@
|
||||
<button type="button" @click="deleteSelected()" class="rounded-lg px-3 py-1.5 font-medium text-red-700 hover:bg-red-50">Delete</button>
|
||||
<button type="button" @click="moveModalOpen = true" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Move to</button>
|
||||
<button type="button" @click="openInEmail()" class="rounded-lg bg-indigo-600 px-3 py-1.5 font-medium text-white hover:bg-indigo-700">Open in email</button>
|
||||
<span class="ml-2 text-xs text-slate-500" x-text="`${selected.length} selected`"></span>
|
||||
<span class="ml-2 text-xs text-slate-500" x-text="`${selectedCount} selected`"></span>
|
||||
<button type="button" @click="clearSelection()" class="text-xs text-slate-400 hover:text-slate-600">Clear</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -163,16 +175,33 @@
|
||||
{{-- User-created folders (root only) --}}
|
||||
@if(! $folderTransfer && $search === '')
|
||||
@foreach($folders as $folder)
|
||||
<tr class="hover:bg-slate-50/80">
|
||||
<td class="px-4 py-3"></td>
|
||||
<td class="px-4 py-3" colspan="4">
|
||||
<a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}" class="flex items-center gap-3">
|
||||
@include('transfer.files.partials.folder-list-icon', ['size' => 'xs'])
|
||||
<div>
|
||||
<p class="font-medium text-slate-900">{{ $folder->title }}</p>
|
||||
<p class="text-xs text-slate-500">{{ $folder->files_count }} item{{ $folder->files_count === 1 ? '' : 's' }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<tr class="transition"
|
||||
:class="selectedFolderIds.includes({{ $folder->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
|
||||
<td class="px-4 py-3">
|
||||
<input type="checkbox" value="{{ $folder->id }}" x-model.number="selectedFolderIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}" class="flex min-w-0 flex-1 items-center gap-3">
|
||||
@include('transfer.files.partials.folder-list-icon', ['size' => 'xs'])
|
||||
<p class="truncate font-medium text-slate-900">{{ $folder->title }}</p>
|
||||
</a>
|
||||
<a href="{{ route('transfer.files.folders.download', $folder) }}" class="ml-auto rounded p-1 text-slate-400 hover:text-indigo-600" title="Download folder">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 7.5 12 3m0 0L7.5 7.5M12 3v13.5"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 text-slate-600 sm:table-cell">{{ $folder->updated_at?->format('M j, Y') ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $folder->files_count }} item{{ $folder->files_count === 1 ? '' : 's' }}</td>
|
||||
<td class="hidden px-4 py-3 md:table-cell">
|
||||
@if($folder->recipient_email || $folder->downloads_total > 0)
|
||||
<span class="inline-flex items-center gap-1 text-xs text-slate-600">
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
|
||||
Shared
|
||||
</span>
|
||||
@else
|
||||
<span class="text-xs text-slate-400">Private</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
@@ -180,9 +209,9 @@
|
||||
|
||||
@foreach($files as $file)
|
||||
<tr class="transition"
|
||||
:class="selected.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
|
||||
:class="selectedFileIds.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
|
||||
<td class="px-4 py-3">
|
||||
<input type="checkbox" value="{{ $file->id }}" x-model.number="selected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
<input type="checkbox" value="{{ $file->id }}" x-model.number="selectedFileIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -326,7 +355,7 @@
|
||||
<p class="mt-1 text-sm text-slate-500">Group selected files into a folder you created.</p>
|
||||
<form method="post" action="{{ route('transfer.files.move') }}" class="mt-4 space-y-4">
|
||||
@csrf
|
||||
<template x-for="id in selected" :key="id">
|
||||
<template x-for="id in selectedFileIds" :key="id">
|
||||
<input type="hidden" name="files[]" :value="id">
|
||||
</template>
|
||||
<select name="destination" required class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
|
||||
|
||||
Reference in New Issue
Block a user