Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add file attachment functionality to ticket messages

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-07 06:44:36 -05:00
parent 355f435fa1
commit 16c61494c8
5 changed files with 163 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
themes/lucentui/views/tickets/show.blade.php
View File

@@ -25,6 +25,26 @@
<div class="mt-2 prose dark:prose-invert max-w-none text-color-base">
{!! Str::markdown(nl2br(e($message->message)), ['allow_unsafe_links' => false]) !!}
</div>
{{-- Display Attachments --}}
@if($message->attachments && count($message->attachments) > 0)
<div class="mt-4 pt-4 border-t border-neutral/20">
<p class="text-sm font-medium text-neutral-400 mb-2">
<x-ri-attachment-2 class="inline size-4 mr-1" />
{{ __('ticket.attachments') ?? 'Attachments' }} ({{ count($message->attachments) }})
</p>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
@foreach($message->attachments as $attachment)
<a href="{{ $attachment['url'] }}" target="_blank" class="group block">
<div class="aspect-square rounded-lg overflow-hidden border border-neutral/30 bg-background/50 hover:border-primary/50 transition-colors">
<img src="{{ $attachment['url'] }}" alt="{{ $attachment['name'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
</div>
<p class="mt-1 text-xs text-neutral-400 truncate group-hover:text-primary transition-colors">{{ $attachment['name'] }}</p>
</a>
@endforeach
</div>
</div>
@endif
</div>
@endforeach
</div>
@@ -37,6 +57,57 @@
</div>
<x-easymde-editor />
<!-- File Upload Section -->
<div class="mt-4">
<label class="block text-sm font-medium text-color-base mb-2">
<x-ri-attachment-2 class="inline size-4 mr-1" />
{{ __('ticket.attachments') ?? 'Attachments' }}
</label>
<div class="flex items-center justify-center w-full">
<label for="attachments" class="flex flex-col items-center justify-center w-full h-32 border-2 border-neutral border-dashed rounded-lg cursor-pointer bg-background/50 hover:bg-background/80 transition-colors">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<x-ri-upload-cloud-2-line class="size-8 mb-2 text-neutral-400" />
<p class="mb-2 text-sm text-neutral-400">
<span class="font-semibold">{{ __('ticket.click_to_upload') ?? 'Click to upload' }}</span> {{ __('ticket.or_drag_drop') ?? 'or drag and drop' }}
</p>
<p class="text-xs text-neutral-500">{{ __('ticket.image_formats') ?? 'PNG, JPG, GIF up to 5MB' }}</p>
</div>
<input id="attachments" type="file" class="hidden" wire:model="attachments" multiple accept="image/*" />
</label>
</div>
<!-- Upload Progress -->
<div wire:loading wire:target="attachments" class="mt-2">
<div class="flex items-center gap-2 text-sm text-primary">
<x-ri-loader-4-line class="size-4 animate-spin" />
{{ __('ticket.uploading') ?? 'Uploading...' }}
</div>
</div>
<!-- Preview Uploaded Files -->
@if(count($attachments) > 0)
<div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
@foreach($attachments as $index => $attachment)
<div class="relative group">
<div class="aspect-square rounded-lg overflow-hidden border border-neutral bg-background">
<img src="{{ $attachment->temporaryUrl() }}" alt="Preview" class="w-full h-full object-cover">
</div>
<button type="button" wire:click="removeAttachment({{ $index }})"
class="absolute -top-2 -right-2 bg-error text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-error/80">
<x-ri-close-line class="size-4" />
</button>
<p class="mt-1 text-xs text-neutral-400 truncate">{{ $attachment->getClientOriginalName() }}</p>
</div>
@endforeach
</div>
@endif
@error('attachments.*')
<p class="mt-2 text-sm text-error">{{ $message }}</p>
@enderror
</div>
<div class="flex justify-end mt-4">
<x-button.primary class="py-3 text-base font-bold transition-all transform rounded-lg shadow-lg hover:bg-primary focus:outline-none focus:ring-4 focus:ring-primary-500 hover:-translate-y-0.5">
{{ __('ticket.reply') }}