Initial commit
This commit is contained in:
Ronald Huynen
366
resources/views/livewire/profile-organization/show.blade.php
Normal file
366
resources/views/livewire/profile-organization/show.blade.php
Normal file
@@ -0,0 +1,366 @@
|
||||
<div class="py-12">
|
||||
@if ($inactive === false)
|
||||
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
|
||||
<section>
|
||||
|
||||
<div class="relative rounded-lg border-theme-secondary bg-theme-brand border-1 px-12 py-16 shadow-xl dark:border-theme-primary">
|
||||
|
||||
<div class="mt-3 flex justify-between">
|
||||
@if ($isOnline)
|
||||
<img class="h-60 w-60 flex-shrink-0 rounded-full profile-photo object-cover ring-4 ring-green-400 sm:mx-4" src="{{ Storage::url($org->profile_photo_path) }}" alt="{{ $org->name }}">
|
||||
@elseif ($isAway)
|
||||
<img class="h-60 w-60 flex-shrink-0 rounded-full profile-photo object-cover ring-4 ring-sky-400 sm:mx-4" src="{{ Storage::url($org->profile_photo_path) }}" alt="{{ $org->name }}">
|
||||
@else
|
||||
<img class="h-60 w-60 flex-shrink-0 rounded-full profile-photo object-cover ring-4 ring-gray-300 sm:mx-4" src="{{ Storage::url($org->profile_photo_path) }}" alt="{{ $org->name }}">
|
||||
@endif
|
||||
<div class="pl-4 sm:mx-4 sm:mt-0">
|
||||
|
||||
<div class="flex justify-between">
|
||||
<h1 class="text-4xl font-extrabold text-gray-100 group-hover:text-white dark:text-white ">
|
||||
{{ $org->name }}
|
||||
</h1>
|
||||
<!--- Online status -->
|
||||
@if ($isOnline)
|
||||
<span class="flex justify-between">
|
||||
<span class="rounded bg-theme-brand border-green-400 border-2 px-3 py-1 mt-2 mr-2 h-7 font-extrabold text-green-300 text-2xs">{{ __('Online') }}</span>
|
||||
@elseif ($isAway)
|
||||
<span class="flex justify-between">
|
||||
<span class="rounded bg-theme-brand border-sky-400 border-2 px-3 py-1 mt-2 mr-2 h-7 font-extrabold text-sky-300 text-2xs">{{ __('Online') }}</span>
|
||||
@endif
|
||||
|
||||
<!--- Like button -->
|
||||
@livewire('like-button', ['model' => $org, 'reactionCounter' => $org->reactionCounter, 'typeName' => 'Star'])
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 class="mt-2 text-2xl text-theme-muted group-hover:text-gray-100 dark:text-theme-muted">
|
||||
{{ $org->motivation }}</h3>
|
||||
|
||||
<div class="mt-4 grid grid-cols-3 gap-1 text-theme-muted dark:text-gray-200 md:grid-cols-3 xl:grid-cols-3">
|
||||
|
||||
<div class="">
|
||||
<a class="text-lg font-bold text-theme-muted underline hover:text-gray-100 dark:text-theme-muted" href="{{ $location['link'] }}">
|
||||
<svg aria-label="location pin icon" class="h-8 w-8 fill-current pr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z" />
|
||||
</svg>
|
||||
{{ $location['name'] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if ($friend && $phone)
|
||||
<div class="">
|
||||
<a class="text-lg font-bold text-theme-muted underline hover:text-gray-100 dark:text-theme-muted" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8 w-8 pr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
|
||||
</svg>
|
||||
{{ $phone }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Friend request buttons only visible if the active profile is not the model -->
|
||||
@if (session('activeProfileType') === $org::class && session('activeProfileId') !== $org->id || session('activeProfileType') !== $this->org::class)
|
||||
|
||||
<div class="">
|
||||
@if (count($friend) < 1 && count($pendingFriend) < 1) <!-- Not a friend -->
|
||||
<a wire:click="friendRequest" class="text-lg font-bold text-theme-muted underline hover:text-gray-100 dark:text-theme-muted" onclick="FriendsManager.action({dropdown : true, provider_id : '{{$org->id}}', action : 'add', provider_alias : 'user'});
|
||||
return false;" href="#"><i class="fas fa-user-plus"></i><br />
|
||||
{{ __('Friend request') }}</a>
|
||||
@elseif (count($pendingFriend) > 0 )
|
||||
<!-- Pending friend -->
|
||||
<a wire:click="cancelFriendRequest" class="text-lg font-bold text-theme-muted underline hover:text-gray-100 dark:text-theme-muted" onclick="FriendsManager.action({dropdown : true, provider_id : '{{$org->id}}', action : 'cancel', sent_friend_id : '{{ $pendingFriend->first()->id }}', provider_alias : 'user'}); return false;" href="#"><i class="fas fa-ban"></i>
|
||||
<br />
|
||||
{{ __('Cancel friend request') }}</a>
|
||||
@else
|
||||
<!-- Is a friend -->
|
||||
<a wire:click="cancelFriendRequest" class="text-lg font-bold text-theme-muted underline hover:text-gray-100 dark:text-theme-muted" onclick="FriendsManager.action({dropdown : true, provider_id : '{{$org->id}}', action : 'remove', friend_id : '{{ $friend->first()->id }}', provider_alias : 'user'}); return false;" href="#"><i class="fas fa-user-times"></i>
|
||||
<br />
|
||||
{{ __('Remove as Friend') }}</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About -->
|
||||
<!-- Note that we need Alpine to show/hide the full text as Livewire 2 loses track of trans() keys in subsequent request. These are uses to translate the $languages properties -->
|
||||
|
||||
@if ($org->about && strlen($org->about) > 300 )
|
||||
<div x-data="{ showAboutFullText: false }">
|
||||
<p class="mt-4 text-theme-muted group-hover:text-gray-100 dark:text-theme-muted">
|
||||
<span x-show="!showAboutFullText">
|
||||
{{ Illuminate\Support\Str::limit($org->about ?? '', 300) }}
|
||||
</span>
|
||||
<span x-show="showAboutFullText">
|
||||
{{ $org->about ?? '' }}
|
||||
</span>
|
||||
<a href="#" @click.prevent="showAboutFullText = !showAboutFullText" class="text-sm text-theme-muted underline transition-colors duration-100 hover:text-gray-100 hover:underline dark:text-theme-muted dark:hover:text-gray-100">
|
||||
|
||||
<span x-show="!showAboutFullText" class="underline inline-flex items-center">{{__('Read more')}}...
|
||||
<svg class="mx-1 h-4 w-4 rtl:-scale-x-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span x-show="showAboutFullText" class="underline inline-flex items-center">
|
||||
<svg class="mx-1 h-4 w-4 transform scale-x-[-1]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{__('Show less')}}...
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@else
|
||||
<div>
|
||||
<p class="mt-4 text-theme-muted group-hover:text-gray-100 dark:text-theme-muted">
|
||||
{{ $org->about ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<!--- Languages -->
|
||||
<div class="mt-6 flex items-center text-theme-muted dark:text-gray-200">
|
||||
@foreach($org->languages as $language)
|
||||
<p class="pr-2">{{ $language['flag'] }}</p>
|
||||
<p class="pr-2">{{ trans($language['name']) }}, {{ trans($language->competence_name) }}</p>
|
||||
@if (!$loop->last)
|
||||
<p class="pr-2">|</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@if($org->lang_preference)
|
||||
<div class="-mt-4 flex items-center text-theme-muted dark:text-gray-200">
|
||||
{{ trans($org->lang_preference) }} {{ __('is preferred') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!--- Skills -->
|
||||
<div class="mt-2 flex-wrap gap-2 sm:flex">
|
||||
@foreach($skills->sortBy('category_color') as $skill)
|
||||
<span class="flex-shrink-0 rounded bg-{{ $skill['category_color'] . '-300' }} px-2 py-1 text-theme-primary lg:block" title="{{ $skill['category_path'] }}" style="cursor: default;">{{ $skill['name'] }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
<!--- Account & transfer info -->
|
||||
<div class="mt-6 flex items-center text-xl text-theme-muted group-hover:text-gray-100 dark:text-theme-muted">
|
||||
@if(timebank_config('account_info.account_totals.sumBalances_public'))
|
||||
<p class="mr-12">{{ tbFormat($accountsTotals['sumBalances']) }} {{ __('available') }}</p>
|
||||
@endif
|
||||
|
||||
@if(timebank_config('account_info.account_totals.countTransfers_public'))
|
||||
@if(!timebank_config('account_info.account_totals.sumBalances_public'))
|
||||
<div class=" text-theme-muted text-sm">
|
||||
<p class="-mr-24 pb-1">{{ __('Exchanges') }}</p><br><br>
|
||||
</div>
|
||||
@endif
|
||||
@if(timebank_config('account_info.account_totals.countTransfersReceived_public'))
|
||||
@if ($accountsTotals['transfersReceived'] === 1)
|
||||
<p class="mr-12">{{ $accountsTotals['transfersReceived'] }} {{__('× received') . ' ' . trans((timebank_config('account_info.account_totals.countTransfersSince_humanReadable'))) }}</p>
|
||||
@else
|
||||
<p class="mr-12">{{ $accountsTotals['transfersReceived'] }} {{__('× received') . ' ' . trans((timebank_config('account_info.account_totals.countTransfersSince_humanReadable'))) }}</p>
|
||||
@endif
|
||||
@endif
|
||||
@if(timebank_config('account_info.account_totals.countTransfersGiven_public'))
|
||||
@if($accountsTotals['transfersGiven'] === 1)
|
||||
<p class="mr-12">{{ $accountsTotals['transfersGiven'] }} {{__('× given') . ' ' . trans((timebank_config('account_info.account_totals.countTransfersSince_humanReadable'))) }}</p>
|
||||
@else
|
||||
<p class="mr-12">{{ $accountsTotals['transfersGiven'] }} {{__('× given') . ' ' . trans((timebank_config('account_info.account_totals.countTransfersSince_humanReadable'))) }}</p>
|
||||
@endif
|
||||
@endif
|
||||
@if(!timebank_config('account_info.account_totals.countTransfersReceived_public') && !timebank_config('account_info.account_totals.countTransfersGiven_public'))
|
||||
<p class="mr-12">{{ $accountsTotals['transfersReceived'] + $accountsTotals['transfersGiven'] }} {{__('×') . ' ' . trans((timebank_config('account_info.account_totals.countTransfersSince_humanReadable'))) }}</p>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
<!--- Last login, last exchange, registered since -->
|
||||
<div class="text-theme-muted">
|
||||
@if ($lastLoginAt)
|
||||
<div>
|
||||
{{ __('Last login') . ': ' . $lastLoginAt }}
|
||||
</div>
|
||||
@else
|
||||
<div>
|
||||
<div>
|
||||
@endif
|
||||
@if ($lastExchangeAt)
|
||||
<div>
|
||||
{{ __('Last exchange') . ': ' . $lastExchangeAt }}
|
||||
</div>
|
||||
@endif
|
||||
<div>{{ __('Registered since') . ': ' . $registeredSince }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--- Social media -->
|
||||
@if($socials && count($socials) > 0)
|
||||
<div class="mt-6 flex items-center text-theme-muted dark:text-gray-200">
|
||||
{{ __('Social media accounts') }}
|
||||
</div>
|
||||
<div class="mt-2 flex-wrap sm:flex">
|
||||
@foreach($socials as $value)
|
||||
<a href="{{ (str_starts_with($value->pivot->user_on_social, 'https://') ? $value->pivot->user_on_social :
|
||||
str_replace('#', $value->pivot->server_of_social, $value->url_structure) . $value->pivot->user_on_social )}}" target="_blank" class="mx-2 text-theme-muted hover:text-gray-100 group-hover:text-white dark:text-theme-muted dark:hover:text-theme-muted" aria-label="{{ $value->name }}">
|
||||
<img
|
||||
src="{{ Storage::url($value->icon) }}"
|
||||
alt="{{ $value->name }}"
|
||||
title="{{ $org->name . ' on ' . $value->name }}"
|
||||
class="h-8 w-8 invert opacity-75 hover:opacity-100" />
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="">
|
||||
<div class="bg-gray-white flex items-center justify-end gap-8 py-3 text-right">
|
||||
<button class="items-center rounded-md border border-transparent bg-theme-secondary px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition hover:bg-theme-primary focus:border-theme-primary focus:outline-none focus:ring focus:ring-gray-300 active:bg-theme-primary disabled:opacity-25"
|
||||
wire:click="payButton" {{ canActiveProfileCreatePayments() ? '' : 'disabled' }}>
|
||||
{{ __('Pay') }}
|
||||
</button>
|
||||
<button wire:click="startMessenger" class="transition0 items-center rounded-md border border-transparent bg-theme-secondary px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white hover:bg-theme-primary focus:border-theme-primary focus:outline-none focus:ring focus:ring-gray-300 active:bg-theme-primary disabled:opacity-25">
|
||||
{{ __('Send Message') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
{{--
|
||||
<!--- Skill color examples, uncomment for Laravel Mix to compile all skill colors! -->
|
||||
<div class="mt-24"></div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<!-- Red -->
|
||||
<div class="w-1/2 bg-red-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Red-200</div>
|
||||
|
||||
<!-- Orange -->
|
||||
<div class="w-1/2 bg-orange-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Orange-200</div>
|
||||
|
||||
<!-- Yellow -->
|
||||
<div class="w-1/2 bg-amber-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Amber-200</div>
|
||||
|
||||
<!-- Green -->
|
||||
<div class="w-1/2 bg-yellow-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Yellow-200</div>
|
||||
|
||||
<!-- Teal -->
|
||||
<div class="w-1/2 bg-lime-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Lime-200</div>
|
||||
|
||||
<!-- Blue -->
|
||||
<div class="w-1/2 bg-green-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Green-200</div>
|
||||
|
||||
<!-- gray -->
|
||||
<div class="w-1/2 bg-emerald-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Emerald-200</div>
|
||||
|
||||
<!-- Purple -->
|
||||
<div class="w-1/2 bg-teal-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Teal-200</div>
|
||||
|
||||
<!-- Pink -->
|
||||
<div class="w-1/2 bg-cyan-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Cyan-200</div>
|
||||
|
||||
<!-- Red-200 -->
|
||||
<div class="w-1/2 bg-sky-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Sky-200</div>
|
||||
|
||||
<!-- Orange-200 -->
|
||||
<div class="w-1/2 bg-blue-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Blue-200</div>
|
||||
|
||||
<!-- Yellow-200 -->
|
||||
<div class="w-1/2 bg-gray-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">gray-200</div>
|
||||
|
||||
<!-- Green-200 -->
|
||||
<div class="w-1/2 bg-violet-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Violet-200</div>
|
||||
|
||||
<!-- Teal-200 -->
|
||||
<div class="w-1/2 bg-purple-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Purple-200</div>
|
||||
|
||||
<!-- Blue-200 -->
|
||||
<div class="w-1/2 bg-fuchsia-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Fuchsia-200</div>
|
||||
|
||||
<!-- gray-200 -->
|
||||
<div class="w-1/2 bg-pink-200 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Pink-200</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<!-- Red -->
|
||||
<div class="w-1/2 bg-red-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Red-300</div>
|
||||
|
||||
<!-- Orange -->
|
||||
<div class="w-1/2 bg-orange-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Orange-300</div>
|
||||
|
||||
<!-- Yellow -->
|
||||
<div class="w-1/2 bg-amber-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Amber-300</div>
|
||||
|
||||
<!-- Green -->
|
||||
<div class="w-1/2 bg-yellow-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Yellow-300</div>
|
||||
|
||||
<!-- Teal -->
|
||||
<div class="w-1/2 bg-lime-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Lime-300</div>
|
||||
|
||||
<!-- Blue -->
|
||||
<div class="w-1/2 bg-green-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Green-300</div>
|
||||
|
||||
<!-- gray -->
|
||||
<div class="w-1/2 bg-emerald-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Emerald-300</div>
|
||||
|
||||
<!-- Purple -->
|
||||
<div class="w-1/2 bg-teal-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Teal-300</div>
|
||||
|
||||
<!-- Pink -->
|
||||
<div class="w-1/2 bg-cyan-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Cyan-300</div>
|
||||
|
||||
<!-- Red-300 -->
|
||||
<div class="w-1/2 bg-sky-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Sky-300</div>
|
||||
|
||||
<!-- Orange-300 -->
|
||||
<div class="w-1/2 bg-blue-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Blue-300</div>
|
||||
|
||||
<!-- Yellow-300 -->
|
||||
<div class="w-1/2 bg-gray-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">gray-300</div>
|
||||
|
||||
<!-- Green-300 -->
|
||||
<div class="w-1/2 bg-violet-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Violet-300</div>
|
||||
|
||||
<!-- Teal-300 -->
|
||||
<div class="w-1/2 bg-purple-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Purple-300</div>
|
||||
|
||||
<!-- Blue-300 -->
|
||||
<div class="w-1/2 bg-fuchsia-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Fuchsia-300</div>
|
||||
|
||||
<!-- gray-300 -->
|
||||
<div class="w-1/2 bg-pink-300 p-4 text-theme-primary sm:w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/6">Pink-300</div>
|
||||
|
||||
</div> --}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@else
|
||||
<!-- Organization is inactive -->
|
||||
<script>
|
||||
window.location.href = "{{ route('main') }}";
|
||||
</script>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,129 @@
|
||||
<x-jetstream.form-section submit="updateProfilePersonalForm">
|
||||
<x-slot name="title">
|
||||
{{ __('Organization info') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
{{ __('A comprehensive profile makes it easier for others to connect with your organization. Adding a photo, an introduction, a motivation for working with Timebank, and the languages your organization uses gives a clearer picture of who you are and why you use ' . platform_name() . '.') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="form">
|
||||
<!-- Profile Photo -->
|
||||
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
|
||||
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
|
||||
<!-- Profile Photo File Input -->
|
||||
<input type="file" class="hidden"
|
||||
wire:model.live="photo"
|
||||
x-ref="photo"
|
||||
x-on:change="
|
||||
photoName = $refs.photo.files[0].name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
photoPreview = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL($refs.photo.files[0]);
|
||||
" />
|
||||
|
||||
<x-jetstream.label for="photo" value="{{ __('Profile Photo') }}" />
|
||||
|
||||
<!-- Current Profile Photo -->
|
||||
<div class="mt-3 mb-3" x-show="! photoPreview">
|
||||
<img src="{{ $this->profilePhotoUrl }}" alt="{{ $this->organization->name }}" class="rounded-full profile-photo h-20 w-20 object-cover outline outline-1 outline-offset-1 outline-gray-500">
|
||||
</div>
|
||||
|
||||
<!-- New Profile Photo Preview -->
|
||||
<div class="mt-3 mb-3" x-show="photoPreview" style="display: none;">
|
||||
<span class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
|
||||
x-bind:style="'background-image: url(\'' + photoPreview + '\');'">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<x-jetstream.secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
|
||||
{{ __('Change Photo') }}
|
||||
</x-jetstream.secondary-button>
|
||||
|
||||
@if ($this->organization->profile_photo_path)
|
||||
<x-jetstream.secondary-button type="button" class="mt-2" wire:click="deleteProfilePhoto" x-on:click.prevent="">
|
||||
{{ __('Delete Photo') }}
|
||||
</x-jetstream.secondary-button>
|
||||
@endif
|
||||
|
||||
<x-jetstream.input-error for="photo" class="mt-2" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- About field -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<x-textarea
|
||||
wire:model.live.debounce.800ms="state.about"
|
||||
label="{{ $this->aboutLabel }}"
|
||||
placeholder="{{ __('What does your organization do? And why?') }}"
|
||||
class="placeholder-gray-300"
|
||||
rows="14"
|
||||
maxlength="{{ timebank_config('rules.profile_organization.about_max_input') }}" />
|
||||
<x-jetstream.input-error for="about" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- About short field -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<x-textarea
|
||||
wire:model.live.debounce.500ms="state.about_short"
|
||||
label="{{ $this->aboutShortLabel }}"
|
||||
placeholder="{{ __('I.e. your goal or slogan') }}"
|
||||
class="placeholder-gray-300"
|
||||
rows="3"
|
||||
maxlength="{{ timebank_config('rules.profile_organization.about_short_max_input') }}" />
|
||||
<x-jetstream.input-error for="about_short" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Motivation -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<x-textarea
|
||||
wire:model.live.debounce.800ms="state.motivation"
|
||||
label="{{ $this->motivationLabel }}"
|
||||
placeholder="{{__('Reaching out to a new community or serious about a new value system?')}}"
|
||||
class="placeholder-gray-300"
|
||||
rows="5"
|
||||
maxlength="{{ timebank_config('rules.profile_organization.motivation_max_input') }}" />
|
||||
<x-jetstream.input-error for="motivation" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!--- Languages -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
@livewire('profile.languages-dropdown', ['languages' => $languages])
|
||||
<x-jetstream.input-error for="languages" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!--- Social media -->
|
||||
<div class="grid col-span-6 sm:col-span-4">
|
||||
@livewire('profile.socials-form')
|
||||
<x-jetstream.input-error for="socials" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="grid col-span-6 sm:col-span-4">
|
||||
<x-jetstream.label for="website" value="{{ __('Organization website') }}" />
|
||||
<x-jetstream.input
|
||||
placeholder="website.org"
|
||||
wire:model.blur="website"
|
||||
class="placeholder-gray-300"
|
||||
/>
|
||||
<x-jetstream.input-error for="website" class="mt-2" />
|
||||
</div>
|
||||
|
||||
</x-slot>
|
||||
|
||||
<!-- List of validation errors -->
|
||||
<x-errors />
|
||||
|
||||
<x-slot name="actions">
|
||||
<x-jetstream.action-message class="mr-3" on="saved">
|
||||
{{ __('Saved') }}
|
||||
</x-jetstream.action-message>
|
||||
|
||||
<x-jetstream.button wire:loading.attr="disabled" wire:target="photo">
|
||||
{{ __('Save') }}
|
||||
</x-jetstream.button>
|
||||
</x-slot>
|
||||
</x-jetstream.form-section>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<x-jetstream.form-section submit="update">
|
||||
<x-slot name="title">
|
||||
{{ __('Social media and website') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
{{ __('Add links to your social media profiles to provide more context about your organization') }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="form">
|
||||
|
||||
<!--- Social media -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
@livewire('socials-form')
|
||||
<x-jetstream.input-error for="socials" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<x-jetstream.label for="website" value="{{ __('Organization Website') }}" />
|
||||
<x-jetstream.input
|
||||
placeholder="website.org"
|
||||
wire:model.blur="website"
|
||||
class="placeholder-gray-300"
|
||||
/>
|
||||
<x-jetstream.input-error for="website" class="mt-2" />
|
||||
</div>
|
||||
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="actions">
|
||||
<x-jetstream.action-message class="mr-3" on="saved">
|
||||
{{ __('Saved') }}
|
||||
</x-jetstream.action-message>
|
||||
|
||||
<x-jetstream.button wire:loading.attr="disabled">
|
||||
{{ __('Save') }}
|
||||
</x-jetstream.button>
|
||||
</x-slot>
|
||||
</x-jetstream.form-section>
|
||||
|
||||
Reference in New Issue
Block a user