Yutaka Kurosaki
5c338e3ae5
Translates the 16-language locale_names block in zh-CN, zh-TW, ko, hi, vi, tr, de, fr, es, pt-BR, ru, uk, it, pl to the target locale's own language (e.g. de file: 'en' => 'Englisch', 'ja' => 'Japanisch'). DocumentEditor blade no longer hardcodes 'en' as the locale_names lookup — falls back to the current UI locale. Test still passes because tests run with default app locale 'en' and the en file maps to "Japanese" / "English" etc. A user editing in ja now sees [English] [日本語 ★] tabs instead of [English] [Japanese ★].
261 lines
13 KiB
PHP
261 lines
13 KiB
PHP
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
<!-- Flash Messages -->
|
|
@if (session()->has('message'))
|
|
<div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
|
|
{{ session('message') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session()->has('error'))
|
|
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Header -->
|
|
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
|
|
{{ $isEditMode ? __('messages.documents.edit_document') : __('messages.documents.new_document') }}
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap gap-2 sm:gap-3">
|
|
@if($isEditMode && $document)
|
|
<a
|
|
href="{{ route('documents.show', $document) }}"
|
|
class="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 flex-1 sm:flex-none"
|
|
>
|
|
{{ __('messages.common.cancel') }}
|
|
</a>
|
|
|
|
<button
|
|
wire:click="delete"
|
|
wire:confirm="{{ __('messages.documents.delete_confirm') }}"
|
|
class="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-red-300 rounded-md text-sm font-medium text-red-700 bg-white hover:bg-red-50 flex-1 sm:flex-none"
|
|
>
|
|
{{ __('messages.documents.delete') }}
|
|
</button>
|
|
@else
|
|
<a
|
|
href="{{ route('documents.show', 'home') }}"
|
|
class="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 flex-1 sm:flex-none"
|
|
>
|
|
{{ __('messages.common.cancel') }}
|
|
</a>
|
|
@endif
|
|
|
|
<button
|
|
wire:click="save"
|
|
class="inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 flex-1 sm:flex-none"
|
|
>
|
|
<svg class="w-4 h-4 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
|
|
</svg>
|
|
<span class="hidden sm:inline">{{ __('messages.documents.save') }}</span>
|
|
<span class="sm:hidden">{{ __('messages.documents.save') }}</span>
|
|
</button>
|
|
</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) }}
|
|
@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) }}
|
|
<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') }}
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Form -->
|
|
<form wire:submit.prevent="save" class="space-y-6">
|
|
<!-- Title -->
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-700 mb-2">
|
|
{{ __('messages.documents.title_label') }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
wire:model="title"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="{{ __('messages.documents.title_placeholder') }}"
|
|
>
|
|
@error('title')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
<p class="mt-1 text-xs text-gray-500">
|
|
{{ __('messages.documents.title_hint') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Markdown Editor -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
{{ __('messages.documents.content_label') }}
|
|
</label>
|
|
<div wire:ignore>
|
|
<div x-data="markdownEditor()" x-init="initEditor()">
|
|
<textarea
|
|
x-ref="editor"
|
|
class="w-full"
|
|
>{{ $content }}</textarea>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" wire:model="content">
|
|
</div>
|
|
@error('content')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
|
|
<!-- Auto-save indicator -->
|
|
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
<div wire:loading wire:target="save" class="flex items-center">
|
|
<svg class="animate-spin h-4 w-4 mr-2 text-indigo-600" 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>
|
|
{{ __('messages.documents.saving') }}
|
|
</div>
|
|
|
|
@if($isEditMode && $document)
|
|
<div>
|
|
{{ __('messages.documents.path') }}: <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ $document->path }}</code>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('markdownEditor', () => ({
|
|
editor: null,
|
|
|
|
initEditor() {
|
|
this.$nextTick(() => {
|
|
const textarea = this.$refs.editor;
|
|
|
|
this.editor = new EasyMDE({
|
|
element: textarea,
|
|
autofocus: true,
|
|
spellChecker: false,
|
|
autosave: {
|
|
enabled: false,
|
|
},
|
|
placeholder: '{{ __("messages.documents.content_placeholder") }}',
|
|
toolbar: [
|
|
'bold', 'italic', 'heading', '|',
|
|
'quote', 'unordered-list', 'ordered-list', '|',
|
|
'link', 'image', '|',
|
|
'preview', 'side-by-side', 'fullscreen', '|',
|
|
'guide'
|
|
],
|
|
status: ['lines', 'words', 'cursor'],
|
|
// Image upload configuration
|
|
uploadImage: true,
|
|
imageMaxSize: 2 * 1024 * 1024, // 2MB
|
|
imageAccept: 'image/png, image/jpeg, image/gif, image/webp',
|
|
imageUploadFunction: (file, onSuccess, onError) => {
|
|
const formData = new FormData();
|
|
formData.append('image', file);
|
|
|
|
fetch('{{ route("images.upload") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: formData,
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(data => {
|
|
throw new Error(data.message || 'Upload failed');
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Insert markdown with alt text directly
|
|
const cm = this.editor.codemirror;
|
|
const altText = data.data.altText || 'image';
|
|
const url = data.data.filePath;
|
|
const markdown = ``;
|
|
cm.replaceSelection(markdown);
|
|
})
|
|
.catch(error => {
|
|
onError(error.message || 'Failed to upload image');
|
|
});
|
|
},
|
|
});
|
|
|
|
this.editor.codemirror.on('change', () => {
|
|
const formElement = this.$el.closest('form');
|
|
const hiddenInput = formElement.querySelector('input[type="hidden"][wire\\:model="content"]');
|
|
if (hiddenInput) {
|
|
hiddenInput.value = this.editor.value();
|
|
hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
@endpush
|