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:
@@ -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()
|
||||||
@@ -42,7 +45,17 @@ 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'),
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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', [
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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">·</span>
|
||||||
|
<span>{{ $libraryItem->read_time }} {{ __('min read') }}</span>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
<x-button lg :href="route('article.overview')">
|
@if($libraryItem->type === 'markdown_article')
|
||||||
<i class="fa-thin fa-arrow-left"></i>
|
<x-button lg :href="route('article.overview')">
|
||||||
{{ __('Back to overview') }}
|
<i class="fa-thin fa-arrow-left"></i>
|
||||||
</x-button>
|
{{ __('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>
|
||||||
</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">
|
||||||
<x-markdown>
|
<div class="flex flex-col space-y-1">
|
||||||
{!! $libraryItem->value !!}
|
@if(str($libraryItem->value)->contains('http'))
|
||||||
</x-markdown>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user