Add locale tabs to DocumentEditor
Editor accepts a locale URL parameter, loads the corresponding translation (or empty form for new locales), and exposes addTranslation/setDefaultLocale/deleteTranslation actions. Tab bar shows existing locales with default-locale star and a + dropdown for missing locales. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -56,6 +56,65 @@ class="inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-indigo-600 b
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($isEditMode && $document)
|
||||
<div class="mb-4 border-b border-gray-200" role="tablist" aria-label="{{ __('messages.documents.translation_tabs_label') }}">
|
||||
<nav class="-mb-px flex flex-wrap gap-x-2">
|
||||
@php $allLocales = \App\Http\Middleware\SetLocale::SUPPORTED_LOCALES; @endphp
|
||||
@foreach($availableLocales as $loc)
|
||||
@php $isActive = ($loc === $editingLocale); @endphp
|
||||
<a href="{{ route('documents.translations.edit', ['document' => $document, 'locale' => $loc]) }}"
|
||||
class="px-3 py-2 text-sm font-medium border-b-2 {{ $isActive ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
|
||||
{{ __('messages.locale_names.' . $loc, [], 'en') }}
|
||||
@if($loc === $document->default_locale)
|
||||
<span class="ml-1 text-xs text-gray-400">★</span>
|
||||
@endif
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
@if($isNewLocale && $editingLocale)
|
||||
<span class="px-3 py-2 text-sm font-medium border-b-2 border-indigo-500 text-indigo-600">
|
||||
{{ __('messages.locale_names.' . $editingLocale, [], 'en') }}
|
||||
<span class="ml-1 text-xs text-gray-400">({{ __('messages.documents.new_document') }})</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@php $missingLocales = array_diff(array_keys($allLocales), $availableLocales, $isNewLocale ? [$editingLocale] : []); @endphp
|
||||
@if(!empty($missingLocales))
|
||||
<div x-data="{ open: false }" class="relative">
|
||||
<button type="button" @click="open = !open"
|
||||
class="px-3 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
||||
+ {{ __('messages.documents.add_translation') }}
|
||||
</button>
|
||||
<div x-show="open" @click.outside="open = false" x-cloak
|
||||
class="absolute right-0 z-10 mt-2 w-48 max-h-64 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg">
|
||||
@foreach($missingLocales as $loc)
|
||||
<a href="{{ route('documents.translations.edit', ['document' => $document, 'locale' => $loc]) }}"
|
||||
class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
|
||||
{{ $allLocales[$loc] }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</nav>
|
||||
|
||||
@if($editingLocale !== $document->default_locale && !$isNewLocale)
|
||||
<div class="mt-2 flex gap-2">
|
||||
<button wire:click="setAsDefault" type="button"
|
||||
class="px-2 py-1 text-xs text-indigo-600 border border-indigo-300 rounded hover:bg-indigo-50">
|
||||
{{ __('messages.documents.set_as_default') }}
|
||||
</button>
|
||||
<button wire:click="deleteTranslation"
|
||||
wire:confirm="{{ __('messages.documents.delete_confirm') }}"
|
||||
type="button"
|
||||
class="px-2 py-1 text-xs text-red-600 border border-red-300 rounded hover:bg-red-50">
|
||||
{{ __('messages.documents.delete_translation') ?? __('messages.documents.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Form -->
|
||||
<form wire:submit.prevent="save" class="space-y-6">
|
||||
<!-- Title -->
|
||||
|
||||
Reference in New Issue
Block a user