library with grid

This commit is contained in:
Benjamin Takats
2023-01-20 16:01:49 +01:00
parent a1e7a16ef1
commit ef13ddbd85
9 changed files with 140 additions and 32 deletions

View File

@@ -3,17 +3,20 @@
namespace App\Http\Livewire\Library; namespace App\Http\Livewire\Library;
use App\Models\Country; use App\Models\Country;
use App\Models\LibraryItem;
use Livewire\Component; use Livewire\Component;
use RalphJSmit\Laravel\SEO\Support\SEOData; use RalphJSmit\Laravel\SEO\Support\SEOData;
class LibraryTable extends Component class LibraryTable extends Component
{ {
public Country $country; public Country $country;
public array $filters = [];
public $currentTab = '*'; public $currentTab = '*';
protected $queryString = [ protected $queryString = [
'currentTab' => ['except' => '*'], 'currentTab' => ['except' => '*'],
'filters' => ['except' => ''],
]; ];
public function render() public function render()
@@ -43,6 +46,16 @@ class LibraryTable extends Component
return view('livewire.library.library-table', [ return view('livewire.library.library-table', [
'libraries' => $tabs, 'libraries' => $tabs,
'libraryItems' => LibraryItem::query()
->with([
'lecturer',
'tags',
])
->when(count($this->filters) > 0, fn($query) => $query->whereHas('tags',
fn($query) => $query->whereIn('tags.id', $this->filters)))
->whereHas('libraries',
fn($query) => $query->where('libraries.is_public', $shouldBePublic))
->get(),
])->layout('layouts.app', [ ])->layout('layouts.app', [
'SEOData' => new SEOData( 'SEOData' => new SEOData(
title: __('Library'), title: __('Library'),

View File

@@ -8,10 +8,10 @@ use Livewire\Component;
class SearchByTagComponent extends Component class SearchByTagComponent extends Component
{ {
public string $country = 'de'; public string $country = 'de';
public ?array $library_items = []; public array $filters = [];
protected $queryString = [ protected $queryString = [
'library_items', 'filters' => ['except' => ''],
]; ];
public function render() public function render()

View File

@@ -11,13 +11,6 @@ class InternArticleView extends Component
{ {
public LibraryItem $libraryItem; public LibraryItem $libraryItem;
public function mount()
{
if (!$this->libraryItem->createdBy->hasRole('news-editor')) {
abort(403, 'This article is not available for viewing.');
}
}
public function render() public function render()
{ {
return view('livewire.news.intern-article-view')->layout('layouts.app', [ return view('livewire.news.intern-article-view')->layout('layouts.app', [

View File

@@ -37,8 +37,8 @@ class LibraryItemObserver
if ($libraryItem->type !== 'markdown_article') { if ($libraryItem->type !== 'markdown_article') {
$text = sprintf("Es gibt was Neues zum Anschauen oder Anhören:\n\n%s\n\n%s\n\n#Bitcoin #Event #Einundzwanzig #gesundesgeld", $text = sprintf("Es gibt was Neues zum Anschauen oder Anhören:\n\n%s\n\n%s\n\n#Bitcoin #Event #Einundzwanzig #gesundesgeld",
$libraryItemName, $libraryItemName,
url()->route('library.table.libraryItems', url()->route('article.view',
['country' => 'de', 'library_items' => ['filters' => ['id' => $libraryItem->id]]]), ['libraryItem' => $libraryItem->slug]),
); );
} else { } else {
$text = sprintf("Ein neuer News-Artikel wurde verfasst:\n\n%s\n\n%s\n\n#Bitcoin #News #Einundzwanzig #gesundesgeld", $text = sprintf("Ein neuer News-Artikel wurde verfasst:\n\n%s\n\n%s\n\n#Bitcoin #News #Einundzwanzig #gesundesgeld",

View File

@@ -678,7 +678,7 @@
"Main image caption": "Hauptbildunterschrift", "Main image caption": "Hauptbildunterschrift",
"Time to read": "Zeit zum Lesen", "Time to read": "Zeit zum Lesen",
"How many minutes to read?": "Wie viele Minuten zum Lesen?", "How many minutes to read?": "Wie viele Minuten zum Lesen?",
"Read": "Lesedauer", "Read": "Lesen",
"News": "", "News": "",
"Dezentral News": "", "Dezentral News": "",
"min read": "Minuten Lesedauer", "min read": "Minuten Lesedauer",

View File

@@ -43,7 +43,58 @@
<livewire:library.search-by-tag-component/> <livewire:library.search-by-tag-component/>
<div class="my-12"> <div class="my-12">
<livewire:tables.library-item-table :currentTab="$currentTab"/> <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
@foreach($libraryItems as $libraryItem)
<div wire:key="library_item_{{ $libraryItem->id }}"
class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-sm">
<div class="flex-shrink-0">
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
<img class="h-48 w-full object-cover"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt="{{ $libraryItem->name }}">
</a>
</div>
<div class="flex flex-1 flex-col justify-between bg-21gray p-6">
<div class="flex-1">
<p class="text-sm font-medium text-amber-600">
<div
class="text-amber-500">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
</p>
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
class="mt-2 block">
<p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
<p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<div>
<span class="sr-only text-gray-200">{{ $libraryItem->lecturer->name }}</span>
<img class="h-10 w-10 rounded-full"
src="{{ $libraryItem->lecturer->getFirstMediaUrl('avatar') }}"
alt="{{ $libraryItem->lecturer->name }}">
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-200">
<div class="text-gray-200">{{ $libraryItem->lecturer->name }}</div>
</p>
<div class="flex space-x-1 text-sm text-gray-400">
<time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time>
@if($libraryItem->read_time)
<span aria-hidden="true">&middot;</span>
<span>{{ $libraryItem->read_time }} {{ __('min read') }}</span>
@endif
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div> </div>
</div> </div>
</section> </section>

View File

@@ -8,12 +8,12 @@
style="font-size: 128%; background-position: 0px center; list-style: outside;" style="font-size: 128%; background-position: 0px center; list-style: outside;"
> >
@php @php
$isActive = collect($library_items)->pluck('tag')->collapse()->contains($tag->name); $isActive = in_array($tag->id, $filters['tag'] ?? [], false);
$activeClass = $isActive ? 'text-amber-500 bg-amber-500' : 'bg-blue-50 text-white hover:text-amber-500'; $activeClass = $isActive ? 'text-amber-500 bg-amber-500' : 'bg-blue-50 text-white hover:text-amber-500';
@endphp @endphp
<a <a
class="{{ $activeClass }} flex relative flex-col flex-shrink-0 justify-between py-1 px-3 w-full h-20 border-0 border-solid duration-300 ease-in-out cursor-pointer bg-opacity-[0.07]" class="{{ $activeClass }} flex relative flex-col flex-shrink-0 justify-between py-1 px-3 w-full h-20 border-0 border-solid duration-300 ease-in-out cursor-pointer bg-opacity-[0.07]"
href="{{ route(request()->route()->getName(), ['country' => $country, 'library_items' => ['filters' => ['tag' => [$tag->id]]]]) }}" href="{{ route(request()->route()->getName(), ['country' => $country, 'filters' => ['tag' => [$tag->id]]]) }}"
> >
<div <div
class="flex flex-1 items-center p-0 m-0 text-center align-baseline border-0 border-solid" class="flex flex-1 items-center p-0 m-0 text-center align-baseline border-0 border-solid"

View File

@@ -12,7 +12,7 @@
@foreach($libraryItems as $libraryItem) @foreach($libraryItems as $libraryItem)
<div wire:key="library_item_{{ $libraryItem->id }}" <div wire:key="library_item_{{ $libraryItem->id }}"
class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-lg"> class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-sm">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"> <a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
<img class="h-48 w-full object-cover" <img class="h-48 w-full object-cover"
@@ -20,30 +20,30 @@
alt="{{ $libraryItem->name }}"> alt="{{ $libraryItem->name }}">
</a> </a>
</div> </div>
<div class="flex flex-1 flex-col justify-between bg-white p-6"> <div class="flex flex-1 flex-col justify-between bg-21gray p-6">
<div class="flex-1"> <div class="flex-1">
<p class="text-sm font-medium text-indigo-600"> <p class="text-sm font-medium text-amber-600">
<div <div
class="">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div> class="text-amber-500">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
</p> </p>
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}" <a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
class="mt-2 block"> class="mt-2 block">
<p class="text-xl font-semibold text-gray-900">{{ $libraryItem->name }}</p> <p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
<p class="mt-3 text-base text-gray-500">{{ $libraryItem->excerpt }}</p> <p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
</a> </a>
</div> </div>
<div class="mt-6 flex items-center"> <div class="mt-6 flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div> <div>
<span class="sr-only">{{ $libraryItem->lecturer->name }}</span> <span class="sr-only text-gray-200">{{ $libraryItem->lecturer->name }}</span>
<img class="h-10 w-10 rounded-full" <img class="h-10 w-10 rounded-full"
src="{{ $libraryItem->lecturer->getFirstMediaUrl('avatar') }}" src="{{ $libraryItem->lecturer->getFirstMediaUrl('avatar') }}"
alt="{{ $libraryItem->lecturer->name }}"> alt="{{ $libraryItem->lecturer->name }}">
</div> </div>
</div> </div>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium text-gray-900"> <p class="text-sm font-medium text-gray-200">
<div class="">{{ $libraryItem->lecturer->name }}</div> <div class="text-gray-200">{{ $libraryItem->lecturer->name }}</div>
</p> </p>
<div class="flex space-x-1 text-sm text-gray-500"> <div class="flex space-x-1 text-sm text-gray-500">
<time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time> <time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time>

View File

@@ -2,10 +2,17 @@
<div class="bg-21gray"> <div class="bg-21gray">
<div class="mx-auto max-w-7xl py-4 px-6 lg:px-8 overflow-hidden"> <div class="mx-auto max-w-7xl py-4 px-6 lg:px-8 overflow-hidden">
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
@if($libraryItem->type === 'markdown_article')
<x-button lg :href="route('article.overview')"> <x-button lg :href="route('article.overview')">
<i class="fa-thin fa-arrow-left"></i> <i class="fa-thin fa-arrow-left"></i>
{{ __('Back to overview') }} {{ __('Back to overview') }}
</x-button> </x-button>
@else
<x-button lg :href="route('library.table.libraryItems', ['country' => 'de'])">
<i class="fa-thin fa-arrow-left"></i>
{{ __('Back to overview') }}
</x-button>
@endif
</div> </div>
</div> </div>
@@ -55,9 +62,53 @@
</div> </div>
<div <div
class="prose prose-invert mx-auto mt-5 text-gray-100 lg:col-start-1 lg:row-start-1 lg:max-w-none"> class="prose prose-invert mx-auto mt-5 text-gray-100 lg:col-start-1 lg:row-start-1 lg:max-w-none">
<div class="flex flex-col space-y-1">
@if(str($libraryItem->value)->contains('http'))
<x-button lg amber :href="$libraryItem->value" target="_blank">
<i class="fa fa-thin fa-book-open mr-2"></i>
{{ __('Open') }}
</x-button>
@endif
@if($libraryItem->type === 'downloadable_file')
<x-button lg amber :href="$row->getFirstMediaUrl('single_file')" target="_blank">
<i class="fa fa-thin fa-download mr-2"></i>
{{ __('Download') }}
</x-button>
@endif
@if($libraryItem->type === 'podcast_episode')
<x-button lg amber :href="$libraryItem->episode->data['enclosureUrl']" target="_blank">
<i class="fa fa-thin fa-headphones mr-2"></i>
{{ __('Listen') }}
</x-button>
@endif
@if($libraryItem->type !== 'markdown_article')
<x-button
x-data="{
textToCopy: '{{ url()->route('library.table.libraryItems', ['country' => 'de', 'table' => ['filters' => ['id' => $libraryItem->id]]]) }}',
}"
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Share url copied!') }}',icon:'success'});"
lg black>
<i class="fa fa-thin fa-copy mr-2"></i>
{{ __('Share link') }}
</x-button>
@else
<x-button
x-data="{
textToCopy: '{{ url()->route('library.table.libraryItems', ['country' => 'de', 'table' => ['filters' => ['id' => $libraryItem->id]]]) }}',
}"
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Share url copied!') }}',icon:'success'});"
xs black>
<i class="fa fa-thin fa-copy mr-2"></i>
{{ __('Share link') }}
</x-button>
@endif
</div>
@if($libraryItem->type === 'markdown_article')
<x-markdown> <x-markdown>
{!! $libraryItem->value !!} {!! $libraryItem->value !!}
</x-markdown> </x-markdown>
@endif
</div> </div>
</div> </div>
</div> </div>