mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
library with grid
This commit is contained in:
Benjamin Takats
@@ -3,17 +3,20 @@
|
||||
namespace App\Http\Livewire\Library;
|
||||
|
||||
use App\Models\Country;
|
||||
use App\Models\LibraryItem;
|
||||
use Livewire\Component;
|
||||
use RalphJSmit\Laravel\SEO\Support\SEOData;
|
||||
|
||||
class LibraryTable extends Component
|
||||
{
|
||||
public Country $country;
|
||||
public array $filters = [];
|
||||
|
||||
public $currentTab = '*';
|
||||
|
||||
protected $queryString = [
|
||||
'currentTab' => ['except' => '*'],
|
||||
'filters' => ['except' => ''],
|
||||
];
|
||||
|
||||
public function render()
|
||||
@@ -43,6 +46,16 @@ class LibraryTable extends Component
|
||||
|
||||
return view('livewire.library.library-table', [
|
||||
'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', [
|
||||
'SEOData' => new SEOData(
|
||||
title: __('Library'),
|
||||
|
||||
@@ -8,10 +8,10 @@ use Livewire\Component;
|
||||
class SearchByTagComponent extends Component
|
||||
{
|
||||
public string $country = 'de';
|
||||
public ?array $library_items = [];
|
||||
public array $filters = [];
|
||||
|
||||
protected $queryString = [
|
||||
'library_items',
|
||||
'filters' => ['except' => ''],
|
||||
];
|
||||
|
||||
public function render()
|
||||
|
||||
@@ -11,13 +11,6 @@ class InternArticleView extends Component
|
||||
{
|
||||
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()
|
||||
{
|
||||
return view('livewire.news.intern-article-view')->layout('layouts.app', [
|
||||
|
||||
@@ -37,8 +37,8 @@ class LibraryItemObserver
|
||||
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",
|
||||
$libraryItemName,
|
||||
url()->route('library.table.libraryItems',
|
||||
['country' => 'de', 'library_items' => ['filters' => ['id' => $libraryItem->id]]]),
|
||||
url()->route('article.view',
|
||||
['libraryItem' => $libraryItem->slug]),
|
||||
);
|
||||
} else {
|
||||
$text = sprintf("Ein neuer News-Artikel wurde verfasst:\n\n%s\n\n%s\n\n#Bitcoin #News #Einundzwanzig #gesundesgeld",
|
||||
|
||||
@@ -678,7 +678,7 @@
|
||||
"Main image caption": "Hauptbildunterschrift",
|
||||
"Time to read": "Zeit zum Lesen",
|
||||
"How many minutes to read?": "Wie viele Minuten zum Lesen?",
|
||||
"Read": "Lesedauer",
|
||||
"Read": "Lesen",
|
||||
"News": "",
|
||||
"Dezentral News": "",
|
||||
"min read": "Minuten Lesedauer",
|
||||
|
||||
@@ -43,7 +43,58 @@
|
||||
<livewire:library.search-by-tag-component/>
|
||||
<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">·</span>
|
||||
<span>{{ $libraryItem->read_time }} {{ __('min read') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
style="font-size: 128%; background-position: 0px center; list-style: outside;"
|
||||
>
|
||||
@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';
|
||||
@endphp
|
||||
<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]"
|
||||
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
|
||||
class="flex flex-1 items-center p-0 m-0 text-center align-baseline border-0 border-solid"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
@foreach($libraryItems as $libraryItem)
|
||||
<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">
|
||||
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
|
||||
<img class="h-48 w-full object-cover"
|
||||
@@ -20,30 +20,30 @@
|
||||
alt="{{ $libraryItem->name }}">
|
||||
</a>
|
||||
</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">
|
||||
<p class="text-sm font-medium text-indigo-600">
|
||||
<p class="text-sm font-medium text-amber-600">
|
||||
<div
|
||||
class="">{{ $libraryItem->tags->pluck('name')->join(', ') }}</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-900">{{ $libraryItem->name }}</p>
|
||||
<p class="mt-3 text-base text-gray-500">{{ $libraryItem->excerpt }}</p>
|
||||
<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">{{ $libraryItem->lecturer->name }}</span>
|
||||
<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-900">
|
||||
<div class="">{{ $libraryItem->lecturer->name }}</div>
|
||||
<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-500">
|
||||
<time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time>
|
||||
|
||||
@@ -2,10 +2,17 @@
|
||||
<div class="bg-21gray">
|
||||
<div class="mx-auto max-w-7xl py-4 px-6 lg:px-8 overflow-hidden">
|
||||
<div class="flex items-center justify-end">
|
||||
@if($libraryItem->type === 'markdown_article')
|
||||
<x-button lg :href="route('article.overview')">
|
||||
<i class="fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back to overview') }}
|
||||
</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>
|
||||
|
||||
@@ -55,9 +62,53 @@
|
||||
</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">
|
||||
<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>
|
||||
{!! $libraryItem->value !!}
|
||||
</x-markdown>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user