Add Notes Section with Markdown support and export functionality
This commit is contained in:
@@ -860,6 +860,176 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Notes Section -->
|
||||
<div id="notes-section" class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-xl p-6 flex flex-col" x-data="{ showExportErrorModal: false }" x-cloak>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h2 class="text-lg font-semibold break-words">Notes</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-file-text-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Notes
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Store custom notes and documentation about this virtual machine. Notes support Markdown formatting for rich text editing.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Markdown Support:</span> Use Markdown syntax for formatting including headers, lists, links, and code blocks.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Persistence:</span> Notes are stored in the database and persist across sessions. However, notes are deleted when the server is reinstalled.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Use Cases:</span> Document server configuration, installation steps, important IP addresses, credentials (stored securely), or any other information relevant to this VPS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-md font-semibold text-base/60 mt-1">Store notes about this server, Markdown is supported. <small>(These do not persist reinstalls)</small></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button"
|
||||
@click="exportNotesToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export notes to text file">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Error Modal -->
|
||||
<div x-show="showExportErrorModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showExportErrorModal = false"
|
||||
@keydown.escape.window="showExportErrorModal = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<div x-show="showExportErrorModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="showExportErrorModal = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="showExportErrorModal = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-error/10">
|
||||
<x-ri-error-warning-line class="size-5 text-error" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Export Error
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
No notes available to export.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<x-button.secondary type="button" @click="showExportErrorModal = false">
|
||||
Close
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 flex-1">
|
||||
@if($isEditingNotes)
|
||||
<div class="space-y-3 flex-1 flex flex-col">
|
||||
<textarea wire:model="notes"
|
||||
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full resize-y flex-1 focus:outline-none focus:ring-2 focus:ring-secondary"
|
||||
placeholder="Enter your notes here..."></textarea>
|
||||
@if($notesError)
|
||||
<div class="text-sm text-error">{{ $notesError }}</div>
|
||||
@endif
|
||||
<div class="flex gap-2">
|
||||
<x-button.primary wire:click="saveNotes" wire:loading.attr="disabled">
|
||||
<x-loading target="saveNotes" />
|
||||
<div wire:loading.remove wire:target="saveNotes">Save</div>
|
||||
<div wire:loading wire:target="saveNotes">Saving...</div>
|
||||
</x-button.primary>
|
||||
<x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">
|
||||
Cancel
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-3 flex-1 flex flex-col">
|
||||
<div class="bg-background border border-neutral rounded-md px-3 py-2 text-sm flex-1 overflow-auto prose prose-sm dark:prose-invert max-w-none text-base/80">
|
||||
@if($notes)
|
||||
{!! \Illuminate\Support\Str::markdown(e($notes), [
|
||||
'allow_unsafe_links' => false,
|
||||
'renderer' => [
|
||||
'soft_break' => "<br>"
|
||||
]
|
||||
]) !!}
|
||||
@else
|
||||
<p class="text-base/60">No notes stored. Click Edit to add notes.</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-button.secondary wire:click="startEditingNotes" wire:loading.attr="disabled" wire:target="startEditingNotes">
|
||||
<x-ri-hourglass-fill wire:loading wire:target="startEditingNotes" class="size-4 animate-pulse" />
|
||||
<x-ri-edit-fill wire:loading.remove wire:target="startEditingNotes" class="size-4" />
|
||||
Edit
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: 100%; height: 5.5vh;" class="flex flex-col p-4 rounded-t-lg border-t border-x border-neutral "></div>
|
||||
<div class="flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border-x border-neutral p-4 ">
|
||||
<div class="flex flex-col gap-2">
|
||||
@@ -1163,176 +1333,6 @@
|
||||
</div>
|
||||
|
||||
@endif
|
||||
|
||||
<!-- Notes Section -->
|
||||
<div id="notes-section" class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-xl p-6 flex flex-col mt-6" x-data="{ showExportErrorModal: false }" x-cloak>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h2 class="text-lg font-semibold break-words">Notes</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-file-text-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Notes
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Store custom notes and documentation about this virtual machine. Notes support Markdown formatting for rich text editing.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Markdown Support:</span> Use Markdown syntax for formatting including headers, lists, links, and code blocks.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Persistence:</span> Notes are stored in the database and persist across sessions. However, notes are deleted when the server is reinstalled.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Use Cases:</span> Document server configuration, installation steps, important IP addresses, credentials (stored securely), or any other information relevant to this VPS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-md font-semibold text-base/60 mt-1">Store notes about this server, Markdown is supported. <small>(These do not persist reinstalls)</small></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button"
|
||||
@click="exportNotesToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export notes to text file">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Error Modal -->
|
||||
<div x-show="showExportErrorModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showExportErrorModal = false"
|
||||
@keydown.escape.window="showExportErrorModal = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<div x-show="showExportErrorModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="showExportErrorModal = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="showExportErrorModal = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-error/10">
|
||||
<x-ri-error-warning-line class="size-5 text-error" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Export Error
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
No notes available to export.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<x-button.secondary type="button" @click="showExportErrorModal = false">
|
||||
Close
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 flex-1">
|
||||
@if($isEditingNotes)
|
||||
<div class="space-y-3 flex-1 flex flex-col">
|
||||
<textarea wire:model="notes"
|
||||
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full resize-y flex-1 focus:outline-none focus:ring-2 focus:ring-secondary"
|
||||
placeholder="Enter your notes here..."></textarea>
|
||||
@if($notesError)
|
||||
<div class="text-sm text-error">{{ $notesError }}</div>
|
||||
@endif
|
||||
<div class="flex gap-2">
|
||||
<x-button.primary wire:click="saveNotes" wire:loading.attr="disabled">
|
||||
<x-loading target="saveNotes" />
|
||||
<div wire:loading.remove wire:target="saveNotes">Save</div>
|
||||
<div wire:loading wire:target="saveNotes">Saving...</div>
|
||||
</x-button.primary>
|
||||
<x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">
|
||||
Cancel
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-3 flex-1 flex flex-col">
|
||||
<div class="bg-background border border-neutral rounded-md px-3 py-2 text-sm flex-1 overflow-auto prose prose-sm dark:prose-invert max-w-none text-base/80">
|
||||
@if($notes)
|
||||
{!! \Illuminate\Support\Str::markdown(e($notes), [
|
||||
'allow_unsafe_links' => false,
|
||||
'renderer' => [
|
||||
'soft_break' => "<br>"
|
||||
]
|
||||
]) !!}
|
||||
@else
|
||||
<p class="text-base/60">No notes stored. Click Edit to add notes.</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-button.secondary wire:click="startEditingNotes" wire:loading.attr="disabled" wire:target="startEditingNotes">
|
||||
<x-ri-hourglass-fill wire:loading wire:target="startEditingNotes" class="size-4 animate-pulse" />
|
||||
<x-ri-edit-fill wire:loading.remove wire:target="startEditingNotes" class="size-4" />
|
||||
Edit
|
||||
</x-button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user