236 lines
14 KiB
PHP
236 lines
14 KiB
PHP
<div class="col-span-6">
|
|
<div>
|
|
<!-- Skills -->
|
|
<x-jetstream.label for="tags" value="{{ $label }}"
|
|
wire:loading.remove />
|
|
<x-jetstream.label for="tags" value="{{ __('Loading...') }}" wire:loading />
|
|
<div wire:ignore>
|
|
<input class="w-full" data-suggestions='@json($suggestions)' id="tags"
|
|
placeholder="{{ __('Select or create a new tag title') }}" type="text"
|
|
value="{{ $tagsArray }}" x-data="{ input: @entangle('tagsArray').live }"
|
|
x-ref="input"
|
|
style="color: white;"
|
|
>
|
|
</div>
|
|
|
|
<div class="col-span-6 my-3 flex items-center justify-end px-0 pb-3 text-right">
|
|
|
|
<div class="grid grid-cols-1 gap-6" wire:loading wire:target="tagsArray">
|
|
<x-mini-button flat icon="" primary rounded spinner /> <span>
|
|
</span>
|
|
</div>
|
|
@if ($tagsArrayChanged)
|
|
<div class="text-sm text-theme-primary mr-3">
|
|
{{ __('You have unsaved changes')}}
|
|
</div>
|
|
@endif
|
|
<x-jetstream.action-message class="mr-3" on="saved">
|
|
{{ __('Saved') }}
|
|
</x-jetstream.action-message>
|
|
<x-jetstream.button
|
|
wire:click="saveDisabled === true ? $dispatch('updatedTagsArray') : $dispatch('save')"
|
|
wire:target="save"
|
|
wire:loading.attr="disabled"
|
|
wire:key="saveTagsArrayButton">
|
|
{{ __('Save') }}
|
|
</x-jetstream.button>
|
|
</div>
|
|
</div>
|
|
|
|
<!---- New Tag Modal ---->
|
|
@if ($newTag)
|
|
<form wire:submit.prevent="createTag">
|
|
|
|
<x-jetstream.dialog-modal wire:model.live="modalVisible">
|
|
<x-slot name="title">
|
|
{{ str_replace('@PLATFORM_NAME@', platform_name(), __('Add a new activity or skill to @PLATFORM_NAME@')) }}
|
|
</x-slot>
|
|
|
|
<x-slot name="content">
|
|
<div class='my-3 text-xl'>
|
|
<span
|
|
class="bg-{{ $categoryColor }}-300 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal">
|
|
{{ $newTag['name'] }}
|
|
</span>
|
|
</div>
|
|
<div class="mt-6 grid grid-cols-1 gap-6">
|
|
<x-input label="{{ __('Activity tag (min. 2 words)') }}"
|
|
placeholder="{{ __('Accurate and unique name for this activity, avoid vague or general keywords') }}"
|
|
wire:model.live="newTag.name" />
|
|
</div>
|
|
@if (!$sessionLanguageOk)
|
|
<div class="mt-3 grid grid-cols-1 gap-6">
|
|
@php $locale = app()->getLocale();
|
|
$localeName = \Locale::getDisplayName($locale, $locale);
|
|
@endphp
|
|
<x-checkbox :disabled="$sessionLanguageOk" id="sessionLang-ignore-checkbox"
|
|
label="{{ __('This tag is in :locale.', [
|
|
'locale' => $localeName
|
|
]) }}"
|
|
wire:model.live="sessionLanguageIgnored" />
|
|
</div>
|
|
@endif
|
|
|
|
@if ($translationPossible && $translationAllowed)
|
|
<div class="mt-6 grid grid-cols-1 gap-6 ">
|
|
<x-checkbox id="checkbox"
|
|
label="{{ __('Attach a translation to this tag (recommended)') }}"
|
|
wire:model.live="translationVisible" />
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-1 gap-6" wire:loading wire:target="translationVisible">
|
|
<x-mini-button flat icon="" primary rounded spinner /> <span>
|
|
{{ __('Loading...') }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Tag Translation --->
|
|
|
|
<div>
|
|
@if ($translationVisible)
|
|
|
|
<div class="my-6 grid grid-cols-1 gap-6 pl-8 md:grid-cols-2"
|
|
id='select-translation-language'>
|
|
<x-select :options="$translationLanguages" class="placeholder-theme-light"
|
|
id="translation-language" label="{{__('Translation language')}}" option-label="name"
|
|
option-value="lang_code" placeholder="{{ __('Select a translation language') }}"
|
|
wire:model.live="selectTranslationLanguage"/>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 pl-8" wire:loading wire:target="selectTranslationLanguage">
|
|
<x-mini-button flat icon="" primary rounded spinner /> <span>
|
|
{{ __('Loading...') }}
|
|
</span>
|
|
</div>
|
|
|
|
@if ($selectTranslationLanguage)
|
|
|
|
@php
|
|
if ($selectTranslationLanguage) {
|
|
$translationLang = App\Models\Language::where('lang_code', $selectTranslationLanguage)->first()->name;
|
|
} else {
|
|
$translationLang = "...";
|
|
}
|
|
@endphp
|
|
|
|
<hr class="border-t border-theme-primary" py-12 />
|
|
<x-radio id="radio-select"
|
|
label="{{ str_replace('@LANGUAGE@', $translationLang, __('Select an existing, untranslated activity tag in @LANGUAGE@')) }}"
|
|
value="select" wire:model.live="translateRadioButton" />
|
|
<div class="my-6 grid grid-cols-1 gap-6 pl-8 md:grid-cols-2"
|
|
id='select-translation'>
|
|
@if (count($translationOptions) > 0)
|
|
<x-select
|
|
:disabled="$translateRadioButton === 'input'"
|
|
:options="$translationOptions"
|
|
class="placeholder-theme-light"
|
|
id="translation"
|
|
label=""
|
|
option-label="name"
|
|
option-value="tag_id"
|
|
placeholder="{{ __('Select a translation') }}"
|
|
wire:model.live="selectTagTranslation"
|
|
/>
|
|
@else
|
|
<x-select
|
|
:disabled="count($translationOptions) < 1 || $translateRadioButton === 'input'"
|
|
:options="count($translationOptions) > 0
|
|
? $translationOptions
|
|
: [['tag_id' => '', 'name' => __('No translations available'), 'disabled' => true]]"
|
|
class="placeholder-theme-light"
|
|
id="translation"
|
|
label=""
|
|
option-label="name"
|
|
option-value="tag_id"
|
|
placeholder="{{ __('No existing translation available') }}"
|
|
wire:model.live="selectTagTranslation"
|
|
/>
|
|
@endif
|
|
<div class="mt-6 grid grid-cols-1 gap-6" wire:loading
|
|
wire:target="translationOptions">
|
|
{{ __('Updating...') }}
|
|
</div>
|
|
</div>
|
|
<hr class="border-t border-theme-primary" py-12 />
|
|
<x-radio id="radio-input"
|
|
label="{{ str_replace('@LANGUAGE@', $translationLang, __('Or create a new Activity tag in @LANGUAGE@')) }}"
|
|
value="input" wire:model.live="translateRadioButton" />
|
|
<div id="input-translation">
|
|
<div class="mt-6 grid grid-cols-1 gap-6 pl-8">
|
|
|
|
<x-input :disabled="$translateRadioButton === 'select'"
|
|
label="{{ str_replace('@LANGUAGE@', $translationLang, __('Activity tag in @LANGUAGE@ (min. 2 words)')) }}"
|
|
placeholder="{{ !empty($newTag['name'])
|
|
? '\'' . $newTag['name'] . '\'' . ' ' . __('in') . ' ' . $translationLang
|
|
: __('Activity tag name in') . ' ' . $translationLang }}"
|
|
wire:key="nameInput" wire:model.live="inputTagTranslation.name" />
|
|
@if (!$transLanguageOk)
|
|
<div class="grid grid-cols-1 gap-6 transition-opacity duration-1500 ease-in-out opacity-100">
|
|
@php $localeTranslation = $selectTranslationLanguage ?? '';
|
|
$localeNameTranslation = \Locale::getDisplayName($localeTranslation, $localeTranslation);
|
|
@endphp
|
|
<x-checkbox :disabled="$translateRadioButton === 'select'" id="transLang-ignore-checkbox"
|
|
label="{{ __('This tag is in :localeTranslation.', [
|
|
'localeTranslation' => $localeNameTranslation
|
|
]) }}"
|
|
wire:model.live="transLanguageIgnored"
|
|
/>
|
|
</div>
|
|
@endif
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<x-select :disabled="$translateRadioButton === 'select'" :options="$categoryOptions"
|
|
class="placeholder-theme-light" id="category"
|
|
label="{{ __('Category') }}" option-label="name"
|
|
option-value="category_id"
|
|
placeholder="{{ __('Select a category') }}"
|
|
wire:model.live="newTagCategory" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@if (!$translationVisible || !$translationAllowed)
|
|
<div class="mt-3 grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<x-select :options="$categoryOptions" class="placeholder-theme-light" id="category"
|
|
label="{{ __('Category') }}" option-label="name" option-value="category_id"
|
|
placeholder="{{ __('Select a category') }}"
|
|
wire:model.live="newTagCategory" />
|
|
</div>
|
|
@endif
|
|
<div class="pt-10 my-3 grid grid-cols-1">
|
|
<x-skill-tag-warning />
|
|
</div>
|
|
{{-- <x-errors /> --}}
|
|
</x-slot>
|
|
|
|
<x-slot name="footer">
|
|
<x-jetstream.secondary-button wire:click="cancelCreateTag" wire:loading.attr="disabled">
|
|
{{ __('Cancel') }}
|
|
</x-jetstream.secondary-button>
|
|
|
|
<x-jetstream.secondary-button class="ml-3"
|
|
wire:click="createTag"
|
|
wire:key="createTagButton"
|
|
wire:loading.attr="disabled">
|
|
{{ __('Save') }}
|
|
</x-jetstream.secondary-button>
|
|
</x-slot>
|
|
</x-jetstream.dialog-modal>
|
|
</form>
|
|
@endif
|
|
|
|
<script src="{{ asset('js/skilltags.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('livewire:load', () => {
|
|
// Listener for page reload event
|
|
document.addEventListener('reloadPage', () => {
|
|
window.location.reload();
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|