Initial commit
This commit is contained in:
Ronald Huynen
236
resources/views/livewire/main-page/skills-card-full.blade.php
Normal file
236
resources/views/livewire/main-page/skills-card-full.blade.php
Normal file
@@ -0,0 +1,236 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user