From b5581a614232c1629dc27e5e22a8cb75811b8681 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 23 Sep 2024 23:49:17 +0200
Subject: [PATCH] Add livewire components

---
 app/Providers/LivewireServiceProvider.php | 46 +++++++++++++++++++++++
 app/View/Page/MenuEntry.php               | 28 ++++++++++++++
 app/View/Page/Sidebar.php                 | 43 +++++++++++++++++++++
 app/View/Ui/Box.php                       | 38 +++++++++++++++++++
 app/View/Ui/Sprite.php                    | 21 +++++++++++
 config/app.php                            |  5 ++-
 vite.config.js                            |  2 +-
 7 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 app/Providers/LivewireServiceProvider.php
 create mode 100644 app/View/Page/MenuEntry.php
 create mode 100644 app/View/Page/Sidebar.php
 create mode 100644 app/View/Ui/Box.php
 create mode 100644 app/View/Ui/Sprite.php

diff --git a/app/Providers/LivewireServiceProvider.php b/app/Providers/LivewireServiceProvider.php
new file mode 100644
index 00000000..880ad376
--- /dev/null
+++ b/app/Providers/LivewireServiceProvider.php
@@ -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
+    {
+        //
+    }
+}
diff --git a/app/View/Page/MenuEntry.php b/app/View/Page/MenuEntry.php
new file mode 100644
index 00000000..260fc395
--- /dev/null
+++ b/app/View/Page/MenuEntry.php
@@ -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;
+    }
+}
diff --git a/app/View/Page/Sidebar.php b/app/View/Page/Sidebar.php
new file mode 100644
index 00000000..946c8f2f
--- /dev/null
+++ b/app/View/Page/Sidebar.php
@@ -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;
+    }
+}
diff --git a/app/View/Ui/Box.php b/app/View/Ui/Box.php
new file mode 100644
index 00000000..03e51808
--- /dev/null
+++ b/app/View/Ui/Box.php
@@ -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;
+    }
+}
diff --git a/app/View/Ui/Sprite.php b/app/View/Ui/Sprite.php
new file mode 100644
index 00000000..679eaf18
--- /dev/null
+++ b/app/View/Ui/Sprite.php
@@ -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;
+    }
+}
diff --git a/config/app.php b/config/app.php
index 5f2a4bbd..a763ad6e 100644
--- a/config/app.php
+++ b/config/app.php
@@ -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,
     ],
 
     /*
diff --git a/vite.config.js b/vite.config.js
index c7d9e4c1..17dc260c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -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: {