mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new ataxchments preview code

Browse Source
This commit is contained in:
Mark Gregory
2026-06-24 10:40:19 +01:00
parent a42b5787b9
commit c44b362710
17 changed files with 1071 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/attachments/source-preview.blade.php
+60
View File
@@ -0,0 +1,60 @@
@php
$lines = preg_split('/\r\n|\r|\n/', $contents);
$downloadUrl = route('helpdesk.attachments.download', $attachment->id);
@endphp
@extends('helpdesk::layouts.master')
@section('content')
<div class="min-h-screen bg-zinc-950 px-4 py-6 text-zinc-100 sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl space-y-4">
<header class="rounded-2xl border border-zinc-700 bg-zinc-900 p-5 shadow-sm">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="min-w-0">
<p class="text-xs font-black uppercase tracking-[0.18em] text-blue-300">Read-only source viewer</p>
<h1 class="mt-1 truncate text-2xl font-black text-white">{{ $attachment->original_name ?? 'Attachment' }}</h1>
<p class="mt-2 text-sm text-zinc-400">
Language: <span class="font-semibold text-zinc-200">{{ strtoupper($language) }}</span>
<span class="mx-2 text-zinc-600">•</span>
Size: <span class="font-semibold text-zinc-200">{{ Number::fileSize($attachment->size) }}</span>
</p>
</div>
<div class="flex flex-wrap gap-2">
<a href="{{ $downloadUrl }}"
class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">
<i class="fa-solid fa-download" aria-hidden="true"></i>
Download
</a>
<button type="button" data-helpdesk-copy-source
class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-4 py-2 text-sm font-bold text-white hover:bg-green-700">
<i class="fa-regular fa-copy" aria-hidden="true"></i>
Copy code
</button>
</div>
</div>
</header>
<section class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-950 shadow-sm">
<div class="overflow-auto">
<table class="min-w-full border-collapse font-mono text-xs leading-6">
<tbody>
@foreach ($lines as $index => $line)
<tr class="group hover:bg-zinc-900/80">
<td class="select-none border-r border-zinc-800 bg-zinc-900 px-4 text-right text-zinc-500">{{ $index + 1 }}</td>
<td class="whitespace-pre px-4 text-zinc-100"><code>{{ $line }}</code></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</section>
</div>
</div>
<script>
document.querySelector('[data-helpdesk-copy-source]')?.addEventListener('click', async () => {
await navigator.clipboard.writeText(@js($contents));
});
</script>
@endsection
Modules/Helpdesk/Resources/views/components/html-editor.blade.php
+19 -2
View File
@@ -39,6 +39,21 @@
document.execCommand(action, false, value);
this.syncToHiddenInput();
},
insertCodeBlock() {
this.$refs.editor.focus();
document.execCommand('formatBlock', false, 'pre');
this.syncToHiddenInput();
},
handlePaste(event) {
const files = Array.from(event.clipboardData?.files || []);
const images = files.filter((file) => file.type.startsWith('image/'));
if (images.length > 0) {
window.dispatchEvent(new CustomEvent('helpdesk-editor-files-pasted', { detail: { files: images } }));
}
this.$nextTick(() => this.syncToHiddenInput());
},
clear() {
this.value = '';
this.$refs.editor.innerHTML = '';
@@ -80,6 +95,8 @@
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">1. List</button>
<button type="button" x-on:click="command('formatBlock', 'blockquote')"
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Quote</button>
<button type="button" x-on:click="insertCodeBlock()"
class="rounded-lg px-2 py-1 text-sm font-mono hover:bg-zinc-200 dark:hover:bg-zinc-800">Code</button>
<button type="button" x-on:click="const url = prompt('URL'); if (url) command('createLink', url)"
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Link</button>
<button type="button" x-on:click="command('removeFormat')"
@@ -88,13 +105,13 @@
<div x-ref="editor" contenteditable="true" spellcheck="true" lang="en-GB" autocapitalize="sentences" autocorrect="on" autocomplete="off" inputmode="text"
@if ($editorDusk) data-dusk="{{ $editorDusk }}" dusk="{{ $editorDusk }}" @endif
x-on:paste="$nextTick(() => syncToHiddenInput())" x-on:blur="syncToHiddenInput()"
x-on:paste="handlePaste($event)" x-on:blur="syncToHiddenInput()"
class="helpdesk-rich-editor prose prose-sm min-h-[{{ (int) $rows * 28 }}px] max-w-none bg-white p-4 text-sm text-zinc-900 outline-none dark:prose-invert dark:bg-zinc-950 dark:text-zinc-100"
data-placeholder="{{ $placeholder }}"></div>
</div>
<p class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
Browser spellcheck is enabled for this rich editor. Misspelled words are checked by the browser/operating system while typing.
Browser spellcheck is enabled. Use Code for snippets, and paste screenshots directly into the editor to attach them to the ticket.
</p>
@if ($model)
Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+94 -9
View File
@@ -259,7 +259,16 @@
</div>
<div class="lg:col-span-3 xl:col-span-6">
<div class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
<div class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4"
x-data="helpdeskAttachmentDropzone('attachments')"
x-on:dragover.prevent="dragging = true"
x-on:dragleave.prevent="dragging = false"
x-on:drop.prevent="dropFiles($event)"
x-on:livewire-upload-start="uploading = true; progress = 0"
x-on:livewire-upload-progress="progress = $event.detail.progress"
x-on:livewire-upload-finish="uploading = false; progress = 100"
x-on:livewire-upload-error="uploading = false"
x-bind:class="dragging ? 'border-blue-400 bg-blue-500/10' : ''">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<label class="block text-sm font-semibold text-zinc-200" for="attachments">
@@ -267,7 +276,7 @@
</label>
<p class="mt-1 text-sm text-zinc-500">
Add screenshots, documents, logs or supporting files to help resolve the ticket.
Drag and drop screenshots, PDFs, logs, source files or documents. PHP, JS, RPG/RPGLE, CLLE and other source files are accepted.
</p>
</div>
@@ -278,12 +287,38 @@
</label>
</div>
<input id="attachments" type="file" wire:model="attachments" multiple accept="{{ $helpdeskAttachmentAccept }}" class="sr-only">
<label for="attachments"
class="mt-4 flex cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-700 bg-zinc-900/70 px-4 py-8 text-center transition hover:border-blue-500 hover:bg-zinc-900"
x-bind:class="dragging ? 'border-blue-400 bg-blue-500/10' : ''">
<i class="fa-solid fa-cloud-arrow-up text-2xl text-blue-300" aria-hidden="true"></i>
<span class="mt-3 text-sm font-bold text-zinc-100">Drop files here or click to browse</span>
<span class="mt-1 text-xs text-zinc-500">Maximum {{ (int) config('helpdesk.max_upload_kb', 10240) }} KB per file.</span>
</label>
<div wire:loading.flex wire:target="attachments"
class="mt-4 items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200">
<i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
Uploading attachments...
<input id="attachments" type="file" wire:model="attachments" multiple accept="{{ $helpdeskAttachmentAccept }}" class="sr-only"
x-ref="input" x-on:change="refreshSelectedFiles()">
<template x-if="selectedFiles.length > 0">
<div class="mt-4 grid gap-2 sm:grid-cols-2">
<template x-for="file in selectedFiles" :key="file.name + file.size">
<div class="flex items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs text-zinc-300">
<i class="fa-regular fa-file-lines text-blue-300" aria-hidden="true"></i>
<span class="min-w-0 flex-1 truncate" x-text="file.name"></span>
<span class="shrink-0 text-zinc-500" x-text="formatSize(file.size)"></span>
</div>
</template>
</div>
</template>
<div x-show="uploading" x-cloak
class="mt-4 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200">
<div class="flex items-center justify-between gap-3">
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>Uploading attachments...</span>
<span x-text="progress + '%'"></span>
</div>
<div class="mt-3 h-2 overflow-hidden rounded-full bg-zinc-800">
<div class="h-full rounded-full bg-blue-500 transition-all" x-bind:style="`width: ${progress}%`"></div>
</div>
</div>
@error('attachments')
@@ -295,8 +330,6 @@
@enderror
</div>
</div>
</div>
<div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">
<button type="button" wire:click="clearForm" wire:loading.attr="disabled" wire:target="clearForm"
class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
@@ -324,13 +357,65 @@
</form>
<script>
(() => {
window.helpdeskAttachmentDropzone = window.helpdeskAttachmentDropzone || function (inputId) {
return {
dragging: false,
uploading: false,
progress: 0,
selectedFiles: [],
dropFiles(event) {
this.dragging = false;
const input = this.$refs.input || document.getElementById(inputId);
if (!input || !event.dataTransfer?.files?.length) {
return;
}
input.files = event.dataTransfer.files;
input.dispatchEvent(new Event('change', { bubbles: true }));
this.refreshSelectedFiles();
},
refreshSelectedFiles() {
const input = this.$refs.input || document.getElementById(inputId);
this.selectedFiles = input?.files ? Array.from(input.files) : [];
},
formatSize(bytes) {
if (!bytes) {
return '0 B';
}
const units = ['B', 'KB', 'MB', 'GB'];
const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
return `${(bytes / Math.pow(1024, index)).toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
},
};
};
const resetTicketCreateFiles = () => {
document.querySelectorAll('.helpdesk-ticket-form #attachments').forEach((input) => {
input.value = '';
input.dispatchEvent(new Event('change', { bubbles: true }));
});
};
const appendPastedFiles = (event) => {
const files = Array.from(event.detail?.files || []);
const input = document.querySelector('.helpdesk-ticket-form #attachments');
if (!input || files.length === 0) {
return;
}
const transfer = new DataTransfer();
Array.from(input.files || []).forEach((file) => transfer.items.add(file));
files.forEach((file) => transfer.items.add(file));
input.files = transfer.files;
input.dispatchEvent(new Event('change', { bubbles: true }));
};
document.addEventListener('helpdesk-form-cleared', resetTicketCreateFiles);
document.addEventListener('helpdesk-editor-files-pasted', appendPastedFiles);
if (window.Livewire?.on) {
window.Livewire.on('helpdesk-form-cleared', resetTicketCreateFiles);
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+64 -18
View File
@@ -170,30 +170,76 @@
</form>
@endcan
@if ($ticket->attachments->isEmpty())
@php
$visibleAttachments = $ticket->attachments->filter(fn ($attachment) => ! $attachment->isDeletedAttachment());
@endphp
@if ($visibleAttachments->isEmpty())
<div
class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-xs font-semibold text-zinc-500 dark:border-zinc-700">
No supporting files have been attached yet.
</div>
@else
<div class="grid gap-2 sm:grid-cols-2">
@foreach ($ticket->attachments as $attachment)
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank"
class="group/file flex items-center justify-between gap-3 rounded-lg border border-zinc-200 px-3 py-2 text-xs transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
<span class="min-w-0">
<span class="block truncate font-bold text-zinc-900 dark:text-zinc-100">
{{ $attachment->original_name ?? ($attachment->original_filename ?? ($attachment->filename ?? ($attachment->file_name ?? basename($attachment->path ?? ($attachment->file_path ?? ''))))) }}
</span>
<span class="block text-[0.7rem] text-zinc-500">
{{ Number::fileSize($attachment->size ?? ($attachment->size_bytes ?? 0)) }}
</span>
</span>
<div class="grid gap-3 sm:grid-cols-2">
@foreach ($visibleAttachments as $attachment)
<article
class="group/file overflow-hidden rounded-xl border border-zinc-200 bg-white text-xs shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-900">
@if ($attachment->isImage())
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
class="block aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-900">
<img src="{{ route('helpdesk.attachments.preview', $attachment->id) }}" alt="{{ $attachment->displayName() }}"
class="h-full w-full object-cover transition group-hover/file:scale-[1.02]">
</a>
@endif
<span
class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-zinc-700 transition group-hover/file:bg-blue-600 group-hover/file:text-white dark:bg-zinc-800 dark:text-zinc-200">
<i class="fa-solid fa-download text-xs" aria-hidden="true"></i>
</span>
</a>
<div class="flex items-start gap-3 p-3">
<span
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
<i class="{{ $attachment->icon() }} text-sm" aria-hidden="true"></i>
</span>
<div class="min-w-0 flex-1">
<p class="truncate font-bold text-zinc-900 dark:text-zinc-100">
{{ $attachment->displayName() }}
</p>
<p class="mt-1 text-[0.7rem] font-semibold uppercase tracking-wide text-zinc-500">
{{ strtoupper($attachment->language()) }} · {{ Number::fileSize($attachment->byteSize()) }}
@if ($attachment->downloadCount() > 0)
· {{ $attachment->downloadCount() }} download{{ $attachment->downloadCount() === 1 ? '' : 's' }}
@endif
</p>
<div class="mt-3 flex flex-wrap gap-2">
@if ($attachment->canPreview())
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
class="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-green-700">
<i class="fa-regular fa-eye" aria-hidden="true"></i>
Preview
</a>
@endif
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank"
class="inline-flex items-center gap-1 rounded-lg bg-blue-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-blue-700">
<i class="fa-solid fa-download" aria-hidden="true"></i>
Download
</a>
@can('update', $ticket)
<form method="POST" action="{{ route('helpdesk.attachments.destroy', $attachment->id) }}"
onsubmit="return confirm('Remove this attachment from the ticket?');">
@csrf
@method('DELETE')
<button type="submit"
class="inline-flex items-center gap-1 rounded-lg bg-red-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-red-700">
<i class="fa-regular fa-trash-can" aria-hidden="true"></i>
Remove
</button>
</form>
@endcan
</div>
</div>
</div>
</article>
@endforeach
</div>
@endif