Files
timebank-cc-public/resources/views/livewire/calls/call-skill-input.blade.php
Ronald Huynen 2547717edb Initial commit
2026-03-23 21:37:59 +01:00

181 lines
11 KiB
PHP

<div>
{{-- Tagify single-tag picker --}}
<div x-data="callTagPicker">
<label class="block text-sm text-theme-primary mb-2">
{{ __('Requested activity or skill') }}
</label>
<div wire:ignore>
<input x-ref="callTagsInput"
type="text"
data-suggestions='@json($suggestions)'
placeholder="{{ __('Select or create a new tag title') }}"
class="w-full" />
</div>
</div>
{{-- New Tag Creation Modal --}}
@if ($modalVisible)
<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
<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
$translationLang = \App\Models\Language::where('lang_code', $selectTranslationLanguage)->first()?->name ?? $selectTranslationLanguage;
@endphp
<hr class="border-t border-theme-primary" />
<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="true"
:options="[['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>
<hr class="border-t border-theme-primary" />
<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">
@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
@endif
</div>
@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>
@error('newTagCategory')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
@endif
<div class="pt-10 my-3 grid grid-cols-1">
<x-skill-tag-warning />
</div>
</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
</div>