Add livewire components

This commit is contained in:
philipp lang 2024-09-23 23:49:17 +02:00
parent 751ef3891b
commit 22740f8aff
8 changed files with 181 additions and 3 deletions

1
.gitignore vendored
View File

@ -40,3 +40,4 @@ Homestead.json
/public/sprite.svg
/.php-cs-fixer.cache
/groups.sql
/.phpunit.cache/

View File

@ -0,0 +1,46 @@
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
use Illuminate\View\ComponentAttributeBag;
use Livewire\Livewire;
use Modules\Dashboard\DashboardFactory;
use Modules\Invoice\MemberPaymentBlock;
use Modules\Member\AgeGroupCountBlock;
use Modules\Member\TestersBlock;
use Modules\Prevention\EfzPendingBlock;
use Modules\Prevention\PsPendingBlock;
class LivewireServiceProvider extends ServiceProvider
{
/**
* Register services.
*/
public function register(): void
{
Blade::componentNamespace('App\\View\\Ui', 'ui');
Blade::componentNamespace('App\\View\\Page', 'page');
app(DashboardFactory::class)->register(AgeGroupCountBlock::class);
app(DashboardFactory::class)->register(MemberPaymentBlock::class);
app(DashboardFactory::class)->register(TestersBlock::class);
app(DashboardFactory::class)->register(EfzPendingBlock::class);
app(DashboardFactory::class)->register(PsPendingBlock::class);
ComponentAttributeBag::macro('mergeWhen', function ($condition, $key, $attributes) {
/** @var ComponentAttributeBag */
$self = $this;
return $condition ? $self->merge([$key => $attributes]) : $self;
});
}
/**
* Bootstrap services.
*/
public function boot(): void
{
//
}
}

View File

@ -0,0 +1,28 @@
<?php
namespace App\View\Page;
use Illuminate\View\Component;
class MenuEntry extends Component
{
public function __construct(
public string $href,
public string $menu,
public string $icon,
) {
}
public function render()
{
return <<<'HTML'
<a class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600 {{ $menu === session('menu') ? 'bg-gray-700' : '' }}" href="{{$href}}">
<x-ui::sprite class="text-white w-6 h-6 mr-4" src="{{$icon}}"></x-ui::sprite>
<span class="font-semibold">
{{ $slot }}
</span>
</a>
HTML;
}
}

43
app/View/Page/Sidebar.php Normal file
View File

@ -0,0 +1,43 @@
<?php
namespace App\View\Page;
use Livewire\Component;
class Sidebar extends Component
{
public $isShifted = false;
public function render()
{
return <<<'HTML'
<div
class="fixed z-40 bg-gray-800 p-6 w-56 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all {{ $isShifted ? '-left-[14rem]' : 'left-0' }}"
>
<div class="grid gap-2">
<x-page::menu-entry href="/" menu="dashboard" icon="loss">Dashboard</x-page::menu-entry>
<x-page::menu-entry href="/member" menu="member" icon="user">Mitglieder</x-page::menu-entry>
<x-page::menu-entry v-show="hasModule('bill')" href="/subscription" menu="subscription" icon="money">Beiträge</x-page::menu-entry>
<x-page::menu-entry v-show="hasModule('bill')" href="/invoice" menu="invoice" icon="moneypaper">Rechnungen</x-page::menu-entry>
<x-page::menu-entry href="/contribution" menu="contribution" icon="contribution">Zuschüsse</x-page::menu-entry>
<x-page::menu-entry href="/activity" menu="activity" icon="activity">Tätigkeiten</x-page::menu-entry>
<x-page::menu-entry href="/group" menu="group" icon="group">Gruppierungen</x-page::menu-entry>
<x-page::menu-entry v-if="hasModule('event')" href="/form" menu="form" icon="event">Veranstaltungen</x-page::menu-entry>
<x-page::menu-entry href="/maildispatcher" menu="maildispatcher" icon="at">Mail-Verteiler</x-page::menu-entry>
</div>
<div class="grid gap-2">
<a href="#" class="flex w-full px-3 py-2 rounded-xl text-gray-300 bg-gray-700" @click.prevent="searchVisible = true">
<x-ui::sprite class="text-white w-6 h-6 mr-4" src="search"></x-ui::sprite>
<div class="">Suchen</div>
</a>
<x-page::menu-entry href="/setting" menu="setting" icon="setting">Einstellungen</x-page::menu-entry>
<x-page::menu-entry href="/logout" menu="" icon="logout">Abmelden</x-page::menu-entry>
</div>
<a v-if="menuStore.hideable" href="#" class="absolute right-0 top-0 mr-2 mt-2" @click.prevent="menuStore.hide()">
<ui-sprite src="close" class="w-5 h-5 text-gray-300"></ui-sprite>
</a>
</div>
HTML;
}
}

38
app/View/Ui/Box.php Normal file
View File

@ -0,0 +1,38 @@
<?php
namespace App\View\Ui;
use Illuminate\View\Component;
class Box extends Component
{
public function __construct(
public string $containerClass = '',
public bool $second = false,
public string $title = '',
public string $inTitle = '',
) {
}
public function render()
{
return <<<'HTML'
<section {!! $attributes
->mergeWhen($second, 'class', 'bg-gray-700 group-[.is-popup]:bg-zinc-600')
->mergeWhen(!$second, 'class', 'bg-gray-800 group-[.is-popup]:bg-zinc-700')
->mergeWhen(true, 'class', 'p-3 rounded-lg flex flex-col')
!!}>
<div class="flex items-center">
@if($title)
<div class="col-span-full font-semibold text-gray-300 group-[.is-popup]:text-zinc-300">{{$title}}</div>
@endif
{{$inTitle}}
</div>
<main class="{{ $title ? 'mt-2' : '' }} {{ $containerClass }}">
{{ $slot }}
</main>
</section>
HTML;
}
}

21
app/View/Ui/Sprite.php Normal file
View File

@ -0,0 +1,21 @@
<?php
namespace App\View\Ui;
use Illuminate\View\Component;
class Sprite extends Component
{
public function __construct(
public string $src = '',
) {
}
public function render()
{
return <<<'HTML'
<svg {{ $attributes->merge(['class' => 'fill-current']) }}"><use xlink:href="/sprite.svg#{{$src}}" /></svg>
HTML;
}
}

View File

@ -168,7 +168,6 @@ return [
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
// App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\HorizonServiceProvider::class,
App\Providers\RouteServiceProvider::class,
@ -176,8 +175,10 @@ return [
App\Tex\TexServiceProvider::class,
App\Dav\ServiceProvider::class,
App\Setting\SettingServiceProvider::class,
App\Dashboard\DashboardServiceProvider::class,
// App\Dashboard\DashboardServiceProvider::class,
App\Providers\PluginServiceProvider::class,
Modules\Dashboard\DashboardServiceProvider::class,
App\Providers\LivewireServiceProvider::class,
],
/*

2
vite.config.js vendored
View File

@ -5,7 +5,7 @@ import path from 'path';
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
laravel(['resources/js/app.js', 'resources/livewire-js/app.js']),
vue({
template: {
transformAssetUrls: {