File manager - Edit - /var/www/ratemypay/resources/views/dashboard/job-descriptions/publish.blade.php
Back
{{-- resources/views/dashboard/job-descriptions/publish.blade.php - Step 5: Export & Publish --}} @extends('layouts.dashboard') @section('content') <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20"> <div class="md:max-w-[80%] max-w-[90%] mx-auto px-6"> {{-- Wizard Container --}} <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm"> {{-- Stepper --}} <x-job-descriptions.stepper :currentStep="5" /> {{-- Content --}} <div class="px-6 md:px-10 pb-10" x-data="{ secureExport: false, copied: false, exportingPdf: false, exportingDocx: false, pdfExported: false, docxExported: false, copyLink() { const link = document.getElementById('shareable-link'); navigator.clipboard.writeText(link.value); this.copied = true; setTimeout(() => this.copied = false, 2000); }, async exportPdf() { this.exportingPdf = true; // TODO: Backend developer to implement real export await new Promise(r => setTimeout(r, 1000)); this.exportingPdf = false; this.pdfExported = true; setTimeout(() => this.pdfExported = false, 3000); }, async exportDocx() { this.exportingDocx = true; // TODO: Backend developer to implement real export await new Promise(r => setTimeout(r, 1000)); this.exportingDocx = false; this.docxExported = true; setTimeout(() => this.docxExported = false, 3000); } }"> @php $jd = $jobDescription ?? (object)[ 'id' => 0, 'job_id' => 'JD-006', 'job_title' => 'Software Engineer', 'status' => 'approved', ]; @endphp {{-- Export Notification Toast --}} <div x-show="pdfExported || docxExported" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed top-6 right-6 z-50 bg-white border border-green-200 rounded-xl shadow-lg p-4 max-w-sm"> <div class="flex items-start gap-3"> <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center shrink-0"> <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </div> <div> <p class="text-sm font-semibold text-gray-900" x-text="pdfExported ? 'Job description exported as PDF' : 'Job description exported as DOCX'"></p> <p class="text-xs text-gray-500">Download will begin shortly</p> </div> </div> </div> {{-- Action Buttons --}} <div class="mb-6 flex items-center justify-end gap-4"> <a href="{{ route('dashboard.job-descriptions.index') }}" class="inline-flex items-center justify-center h-11 px-8 rounded-lg font-medium text-[#2F3D7E] bg-white border border-[#2F3D7E] hover:bg-gray-50 transition-colors"> Back to Library </a> </div> {{-- Export Options --}} <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div class="flex gap-4 border border-gray-200 rounded-2xl p-6 text-center"> <div> <div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> </div> </div> <div class="text-left"> <h4 class="text-base font-bold text-gray-900 mb-1">Export as PDF</h4> <p class="text-sm text-gray-500 mb-4">Download a formatted PDF document ready for distribution</p> <button @click="exportPdf()" :disabled="exportingPdf" class="inline-flex items-center justify-center gap-2 w-full h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm disabled:opacity-50"> <template x-if="!exportingPdf"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> </svg> </template> <template x-if="exportingPdf"> <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </template> <span x-text="exportingPdf ? 'Exporting...' : 'Download PDF'"></span> </button> </div> </div> <div class="flex gap-4 border border-gray-200 rounded-2xl p-6 text-center"> <div> <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> </div> </div> <div class="text-left"> <h4 class="text-base font-bold text-gray-900 mb-1">Export as DOCX</h4> <p class="text-sm text-gray-500 mb-4">Download as Microsoft Word document for further editing</p> <button @click="exportDocx()" :disabled="exportingDocx" class="inline-flex items-center justify-center gap-2 w-full h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm disabled:opacity-50"> <template x-if="!exportingDocx"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> </svg> </template> <template x-if="exportingDocx"> <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </template> <span x-text="exportingDocx ? 'Exporting...' : 'Download DOCX'"></span> </button> </div> </div> </div> {{-- Share & Publish --}} <div class="border border-gray-200 rounded-2xl p-6 mb-8"> <div class="flex items-center gap-2 mb-6"> <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> </svg> <h3 class="text-lg font-bold text-gray-900">Share</h3> </div> {{-- Shareable Link --}} <div class="border bg-[#F8FAFC] border-gray-200 rounded-xl p-4 mb-4"> <div class="flex items-end justify-between gap-4"> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> </svg> <h4 class="text-sm font-bold text-gray-900">Public Shareable Link</h4> </div> <p class="text-xs text-gray-500 mb-2">Anyone with this link can view the job description without logging in</p> <input id="shareable-link" type="text" readonly value="{{ url('/job-descriptions/' . ($jd->job_id ?? 'JD-006') . '/' . \Illuminate\Support\Str::slug($jd->job_title ?? 'software-engineer')) }}" class="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs text-gray-600 font-mono"> </div> <button @click="copyLink()" class="inline-flex items-center gap-1.5 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors shrink-0"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> </svg> <span x-text="copied ? 'Copied!' : 'Copy Link'"></span> </button> </div> </div> </div> </div> </div> </div> </div> @endsection
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings