Add Toast and tooltip

app/Http/Middleware/HandleInertiaRequests.php

@@ -3,7 +3,7 @@
 namespace App\Http\Middleware;
 
 use App\Http\Resources\UserResource;
-use App\Module\ModuleSettings;
+use Modules\Module\ModuleSettings;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Session;
 use Inertia\Middleware;

app/Providers/BaseServiceProvider.php

@@ -23,6 +23,7 @@ class BaseServiceProvider extends ServiceProvider
     {
         Blade::componentNamespace('App\\View\\Ui', 'ui');
         Blade::componentNamespace('App\\View\\Page', 'page');
+        Blade::componentNamespace('App\\View\\Form', 'form');
 
         app(DashboardFactory::class)->register(AgeGroupCountBlock::class);
         app(DashboardFactory::class)->register(MemberPaymentBlock::class);

app/Setting/Actions/StoreAction.php

@@ -7,6 +7,7 @@ use Illuminate\Http\RedirectResponse;
 use Lorisleiva\Actions\ActionRequest;
 use Lorisleiva\Actions\Concerns\AsAction;
 
+/** @deprecated */
 class StoreAction
 {
     use AsAction;

app/Setting/Actions/ViewAction.php

@@ -8,6 +8,7 @@ use Inertia\Inertia;
 use Inertia\Response;
 use Lorisleiva\Actions\Concerns\AsAction;
 
+/** @deprecated */
 class ViewAction
 {
     use AsAction;

app/Setting/LocalSettings.php

@@ -10,7 +10,7 @@ abstract class LocalSettings extends Settings
 
     public function url(): string
     {
-        return route('setting.view', ['settingGroup' => $this->group()]);
+        return url('setting/' . $this->group());
     }
 
     /**

app/Setting/SettingFactory.php

@@ -2,9 +2,8 @@
 
 namespace App\Setting;
 
-use App\Invoice\InvoiceSettings;
-use App\Setting\Contracts\Storeable;
 use Illuminate\Routing\Router;
+use Illuminate\Support\Collection;
 
 class SettingFactory
 {
@@ -26,16 +25,11 @@ class SettingFactory
     }
 
     /**
-     * @return array<int, array{url: string, is_active: bool}>
+     * @return Collection<int, LocalSettings>
      */
-    public function getShare(): array
+    public function all(): Collection
     {
-        return collect($this->settings)->map(fn ($setting) => [
-            'url' => (new $setting)->url(),
-            'is_active' => url(request()->path()) === (new $setting)->url(),
-            'title' => $setting::title(),
-        ])
-            ->toArray();
+        return collect($this->settings)->map(fn ($setting) => new $setting);
     }
 
     public function resolveGroupName(string $name): LocalSettings

app/Setting/SettingServiceProvider.php

@@ -6,10 +6,8 @@ use App\Fileshare\FileshareSettings;
 use App\Form\FormSettings;
 use App\Invoice\InvoiceSettings;
 use App\Mailgateway\MailgatewaySettings;
-use App\Module\ModuleSettings;
+use Modules\Module\ModuleSettings;
 use App\Prevention\PreventionSettings;
-use App\Setting\Actions\StoreAction;
-use App\Setting\Actions\ViewAction;
 use Illuminate\Routing\Router;
 use Illuminate\Support\ServiceProvider;
 
@@ -24,9 +22,6 @@ class SettingServiceProvider extends ServiceProvider
     {
         app()->singleton(SettingFactory::class, fn () => new SettingFactory());
         app(Router::class)->bind('settingGroup', fn ($param) => app(SettingFactory::class)->resolveGroupName($param));
-        app(Router::class)->middleware(['web', 'auth:web'])->name('setting.view')->get('/setting/{settingGroup}', ViewAction::class);
-        app(Router::class)->middleware(['web', 'auth:web'])->name('setting.data')->get('/setting/{settingGroup}/data', ViewAction::class);
-        app(Router::class)->middleware(['web', 'auth:web'])->name('setting.store')->post('/setting/{settingGroup}', StoreAction::class);
     }
 
     /**

app/View/Form/Hint.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Form;
+
+use App\View\Traits\HasFormDimensions;
+use Illuminate\View\Component;
+
+class Hint extends Component
+{
+
+    use HasFormDimensions;
+
+    public function __construct(
+        public bool $required = false,
+    ) {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <div class="h-full items-center flex absolute top-0 right-0">
+                <div x-tooltip.raw="{{$slot}}" class="mr-2">
+                    <x-ui::sprite src="info-button" class="w-5 h-5 text-primary-700"></x-ui::sprite>
+                </div>
+            </div>
+        HTML;
+    }
+}

app/View/Form/Label.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Form;
+
+use App\View\Traits\HasFormDimensions;
+use Illuminate\View\Component;
+
+class Label extends Component
+{
+
+    use HasFormDimensions;
+
+    public function __construct(
+        public bool $required = false,
+    ) {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <span class="font-semibold leading-none text-gray-400 group-[.size-default]:text-sm group-[.size-sm]:text-xs">
+                {{ $slot }}
+                @if ($required)
+                <span x-if="required" class="text-red-800">&nbsp;*</span>
+                @endif
+            </span>
+        HTML;
+    }
+}

app/View/Form/Lever.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\View\Form;
+
+use App\View\Traits\HasFormDimensions;
+use Illuminate\View\Component;
+
+class Lever extends Component
+{
+
+    use HasFormDimensions;
+
+    public string $id;
+
+    public function __construct(
+        public string $name,
+        public string $size = 'default',
+        public $value = null,
+        public ?string $hint = null,
+        public bool $disabled = false,
+        public bool $required = false,
+        public string $label = '',
+    ) {
+        $this->id = str()->uuid()->toString();
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <label class="flex flex-col items-start group {{$heightClass}} " for="{{$id}}" style="{{$heightVars}}">
+                @if ($label)
+                <x-form::label :required="$required">{{$label}}</x-form::label>
+                @endif
+                <span class="relative flex-none flex h-[var(--height)] @if($hint) pr-8 @endif">
+                    <input id="{{$id}}" type="checkbox" name="{{$name}}" value="{{$value}}" @if($disabled) disabled="disabled" @endif class="absolute peer opacity-0" {{ $attributes }} />
+                    <span class="relative cursor-pointer h-full w-[calc(var(--height)*2)] rounded peer-focus:bg-red-500 duration-300 bg-gray-700 peer-checked:bg-primary-700"></span>
+                    <span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
+                        <x-ui::sprite
+                            class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
+                            src="check"
+                        ></x-ui::sprite>
+                    </span>
+                    <span class="absolute h-full top-0 left-[var(--height)] flex-none flex justify-center items-center aspect-square">
+                        <x-ui::sprite
+                            class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
+                            src="close"
+                        ></x-ui::sprite>
+                    </span>
+                    <var class="absolute duration-300 bg-gray-400 rounded
+                        top-[var(--padding)] left-[var(--padding)]
+                        size-[calc(var(--height)-var(--padding)*2)] peer-checked:left-[calc(var(--height)+var(--padding))]"
+                    ></var>
+                    @if($hint)
+                    <x-form::hint>{{$hint}}</x-form::hint>
+                    @endif
+                </span>
+            </label>
+        HTML;
+    }
+}

app/View/Form/SaveButton.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\View\Form;
+
+use Illuminate\View\Component;
+
+class SaveButton extends Component
+{
+
+    public function __construct(public string $form = '')
+    {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <button @if($form) form="{{$form}}" @endif type="submit" class="flex items-center transition-all justify-center w-8 h-8 bg-primary-700 hover:bg-primary-600 rounded" x-tooltip="`speichern`">
+                <x-ui::sprite class="w-4 h-4 text-white" src="save"></x-ui::sprite>
+            </button>
+        HTML;
+    }
+}

app/View/Page/SettingLayout.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\View\Page;
+
+use App\Setting\SettingFactory;
+use Illuminate\View\Component;
+
+class SettingLayout extends Component
+{
+
+    public array $entries;
+
+    public function __construct(public string $active)
+    {
+        $this->entries = app(SettingFactory::class)->all()
+            ->map(fn ($setting) => [
+                'url' => $setting->url(),
+                'is_active' => get_class($setting) === $active,
+                'title' => $setting->title(),
+            ])->toArray();
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <x-page::layout>
+                <x-slot:right>
+                    {{ $right }}
+                </x-slot:right>
+                <div class="flex grow relative">
+                    <x-ui::menulist :entries="$entries"></x-ui::menulist>
+                    {{ $slot }}
+                </div>
+            </x-page::layout>
+        HTML;
+    }
+}

app/View/Traits/HasFormDimensions.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\View\Traits;
+
+trait HasFormDimensions
+{
+
+    public function heightVars(): string
+    {
+        return data_get([
+            'default' => '--height: 35px; --padding: 3px;',
+            'sm' => '--height: 23px; --padding: 2px;',
+        ], $this->size);
+    }
+
+    public function heightClass(): string
+    {
+        return data_get([
+            'default' => 'size-default',
+            'sm' => 'size-sm',
+        ], $this->size);
+    }
+}

app/View/Ui/Menulist.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\View\Ui;
+
+use Illuminate\View\Component;
+
+class Menulist extends Component
+{
+
+    public function __construct(public array $entries)
+    {
+    }
+
+    public function activeClass($entry): string
+    {
+        return $entry['is_active'] ? 'bg-gray-600' : '';
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
+                <div class="grid gap-1">
+                    @foreach($entries as $entry)
+                    <a href="{{$entry['url']}}" class="rounded py-1 px-3 text-gray-400 duration-200 hover:bg-gray-600 {{$activeClass($entry)}}" @if($entry['is_active']) data-active @endif>
+                        {{$entry['title']}}
+                    </a>
+                    @endforeach
+                </div>
+                <slot name="bottom"></slot>
+            </div>
+        HTML;
+    }
+}

config/app.php

@@ -178,6 +178,7 @@ return [
         // App\Dashboard\DashboardServiceProvider::class,
         App\Providers\PluginServiceProvider::class,
         Modules\Dashboard\DashboardServiceProvider::class,
+        Modules\Module\ModuleServiceProvider::class,
         App\Providers\BaseServiceProvider::class,
     ],
 

modules/Module/Components/SettingView.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Modules\Module\Components;
+
+use App\Module\Module;
+use Illuminate\Validation\Rule;
+use Livewire\Component;
+use Modules\Module\ModuleSettings;
+
+class SettingView extends Component
+{
+
+    public array $modules;
+    public array $all;
+    public $settingClass = ModuleSettings::class;
+
+    public function rules(): array
+    {
+        return [
+            'modules' => 'present|array',
+            'modules.*' => ['string', Rule::in(Module::values())],
+        ];
+    }
+
+    public function mount(): void
+    {
+        $this->modules = app(ModuleSettings::class)->modules;
+        $this->all = Module::forSelect();
+    }
+
+    public function save(): void
+    {
+        app(ModuleSettings::class)->fill($this->validate())->save();
+        $this->dispatch('success', 'Einstellungen gespeichert.');
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <x-page::setting-layout :active="$settingClass">
+                <x-slot:right>
+                    <x-form::save-button form="modulesettingform"></x-form::save-button>
+                </x-slot:right>
+                <form id="modulesettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start"
+                    wire:submit.prevent="save">
+                    <div class="col-span-full text-gray-100 mb-3">
+                        <p class="text-sm">Hier kannst du Funktionen innerhalb von Adrema (Module) aktivieren oder deaktivieren
+                            und so den Funktionsumfang auf deine Bedürfnisse anpassen.</p>
+                    </div>
+                    @foreach ($all as $module)
+                    <x-form::lever wire:model="modules" hint="lala" :value="$module['id']" name="modules" size="sm" :label="$module['name']"></x-form::lever>
+                    @endforeach
+                </form>
+            </x-page::setting-layout>
+        HTML;
+    }
+}

modules/Module/ModuleServiceProvider.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Modules\Module;
+
+use Illuminate\Routing\Router;
+use Illuminate\Support\ServiceProvider;
+use Modules\Module\Components\SettingView;
+
+class ModuleServiceProvider extends ServiceProvider
+{
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+    }
+
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        app(Router::class)->middleware(['web', 'auth:web'])->group(function ($router) {
+            $router->get('/setting/module', SettingView::class)->name('setting.module');
+        });
+    }
+}

modules/Module/ModuleSettingTest.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Modules\Module;
+
+use App\View\Setting;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Livewire\Livewire;
+use Modules\Module\Components\SettingView;
+use Tests\TestCase;
+
+uses(TestCase::class);
+uses(DatabaseTransactions::class);
+
+it('it renders page', function () {
+    test()->withoutExceptionHandling()->login()->loginNami();
+
+    test()->get('/setting/module')->assertSeeLivewire(SettingView::class);
+});
+
+it('it displays acive modules', function () {
+    test()->withoutExceptionHandling()->login()->loginNami();
+    app(ModuleSettings::class)->fill(['modules' => ['bill']])->save();
+
+    Livewire::test(SettingView::class)
+        ->assertSee('Module')
+        ->assertSee('Ausbildung')
+        ->assertSet('modules', fn ($modules) => $modules === ['bill'])
+        ->assertSeeHtml('data-active');
+});
+
+it('it saves modules', function () {
+    test()->withoutExceptionHandling()->login()->loginNami();
+    app(ModuleSettings::class)->fill(['modules' => ['bill']])->save();
+
+    Livewire::test(SettingView::class)
+        ->set('modules', ['bill', 'course'])
+        ->call('save')
+        ->assertDispatched('success', 'Einstellungen gespeichert.');
+
+    test()->assertEquals(['bill', 'course'], app(ModuleSettings::class)->modules);
+});
+
+it('test module must exist', function () {
+    test()->withoutExceptionHandling()->login()->loginNami();
+    app(ModuleSettings::class)->fill(['modules' => ['bill']])->save();
+
+    Livewire::test(SettingView::class)
+        ->set('modules', ['bill', 'lala'])
+        ->call('save')
+        ->assertHasErrors('modules.1');
+});

modules/Module/ModuleSettings.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Module;
+namespace Modules\Module;
 
 use App\Setting\Contracts\Storeable;
 use App\Setting\LocalSettings;

package.json

@@ -29,21 +29,26 @@
         "@editorjs/nested-list": "^1.4.2",
         "@editorjs/paragraph": "^2.11.3",
         "@inertiajs/vue3": "^1.0.14",
+        "@ryangjchandler/alpine-tooltip": "^2.0.1",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "@vitejs/plugin-vue": "^4.6.2",
         "change-case": "^4.1.2",
         "editorjs-alert": "^1.1.3",
         "floating-vue": "^2.0.0",
+        "install": "^0.13.0",
         "laravel-echo": "^1.15.3",
         "laravel-vite-plugin": "^0.7.8",
         "lodash": "^4.17.21",
         "merge": "^2.1.1",
+        "npm": "^10.9.0",
         "pinia": "^2.1.7",
         "postcss-import": "^14.1.0",
         "prettier": "^2.8.8",
         "pusher-js": "^8.3.0",
         "svg-sprite": "^2.0.2",
+        "tippy.js": "^6.3.7",
+        "toastify-js": "^1.12.0",
         "vite": "^4.5.2",
         "vue": "^3.3.4",
         "vue-toastification": "^2.0.0-rc.5",

resources/css/tooltip.css

@@ -1,6 +1,21 @@
-.v-popper--theme-tooltip .v-popper__inner {
-    @apply bg-primary-400 text-primary-800 px-3 py-1 text-sm;
+.tippy-box[data-theme~='primary'] {
+    @apply bg-primary-800 text-primary-100 shadow-lg;
 }
-.v-popper--theme-tooltip .v-popper__arrow-outer {
-    @apply border-primary-400;
+.tippy-box[data-theme~='primary'][data-placement^='top'] > .tippy-arrow:before {
+    border-top-color: theme('colors.primary.800');
+}
+.tippy-box[data-theme~='primary'][data-placement^='bottom'] > .tippy-arrow:before {
+    border-bottom-color: theme('colors.primary.800');
+}
+.tippy-box[data-theme~='primary'][data-placement^='left'] > .tippy-arrow:before {
+    border-left-color: theme('colors.primary.800');
+}
+.tippy-box[data-theme~='primary'][data-placement^='right'] > .tippy-arrow:before {
+    border-right-color: theme('colors.primary.800');
+}
+.tippy-box[data-theme~='primary'] > .tippy-backdrop {
+    background-color: theme('colors.primary.800');
+}
+.tippy-box[data-theme~='primary'] > .tippy-svg-arrow {
+    fill: theme('colors.primary.800');
 }

resources/js/components/form/Hint.vue

@@ -1,16 +0,0 @@
-<template>
-    <div class="h-full items-center flex absolute top-0 right-0">
-        <div v-tooltip="value" class="mr-2">
-            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
-        </div>
-    </div>
-</template>
-
-<script setup>
-const props = defineProps({
-    value: {
-        type: String,
-        required: true,
-    },
-});
-</script>

resources/js/components/form/Label.vue

@@ -1,19 +0,0 @@
-<template>
-    <span class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
-        {{ value }}
-        <span v-show="required" class="text-red-800">&nbsp;*</span>
-    </span>
-</template>
-
-<script setup>
-const props = defineProps({
-    value: {
-        type: String,
-        required: true,
-    },
-    required: {
-        type: Boolean,
-        required: true,
-    },
-});
-</script>

resources/js/components/form/Switch.vue

@@ -1,102 +0,0 @@
-<template>
-    <label class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
-        <f-label v-if="label" :required="false" :value="label"></f-label>
-        <span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
-            <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer opacity-0" @keypress="$emit('keypress', $event)" />
-            <span
-                class="relative cursor-pointer h-full rounded peer-focus:bg-red-500 transition-all duration-300 group-[.field-base]:w-[70px] group-[.field-sm]:w-[46px] bg-gray-700 peer-checked:bg-primary-700"
-            ></span>
-            <span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
-                <ui-sprite
-                    class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
-                    src="check"
-                ></ui-sprite
-            ></span>
-            <span class="absolute h-full top-0 group-[.field-base]:left-[35px] group-[.field-sm]:left-[23px] flex-none flex justify-center items-center aspect-square">
-                <ui-sprite
-                    class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
-                    src="close"
-                ></ui-sprite
-            ></span>
-            <var
-                class="absolute transition-all duration-300 bg-gray-400 rounded group-[.field-base]:top-[3px] group-[.field-base]:left-[3px] group-[.field-sm]:top-[2px] group-[.field-sm]:left-[2px] group-[.field-base]:w-[29px] group-[.field-sm]:w-[19px] group-[.field-base]:h-[29px] group-[.field-sm]:h-[19px] group-[.field-base]:peer-checked:left-[37px] group-[.field-sm]:peer-checked:left-[25px]"
-            ></var>
-            <f-hint v-if="hint" :value="hint"></f-hint>
-        </span>
-    </label>
-</template>
-
-<script setup>
-import {computed} from 'vue';
-import useFieldSize from '../../composables/useFieldSize.js';
-
-const {sizeClass, fieldHeight} = useFieldSize();
-
-const emit = defineEmits(['update:modelValue', 'keypress']);
-
-const props = defineProps({
-    hint: {
-        type: String,
-        default: () => '',
-    },
-    size: {
-        type: String,
-        default: () => 'base',
-    },
-    id: {
-        type: String,
-        required: true,
-    },
-    name: {
-        required: true,
-        type: String,
-    },
-    disabled: {
-        type: Boolean,
-        default: () => false,
-    },
-    value: {
-        validator: (v) => true,
-        default: () => undefined,
-    },
-    label: {
-        type: String,
-        default: () => '',
-    },
-    modelValue: {
-        validator: (v) => true,
-        default: () => undefined,
-    },
-});
-
-const v = computed({
-    set: (v) => {
-        if (props.disabled === true) {
-            return;
-        }
-
-        if (typeof props.modelValue === 'boolean') {
-            emit('update:modelValue', v);
-            return;
-        }
-
-        var a = props.modelValue.filter((i) => i !== props.value);
-        if (v) {
-            a.push(props.value);
-        }
-
-        emit('update:modelValue', a);
-    },
-    get() {
-        if (typeof props.modelValue === 'boolean') {
-            return props.modelValue;
-        }
-
-        if (typeof props.modelValue === 'undefined') {
-            return emit('update:modelValue', false);
-        }
-
-        return props.modelValue.indexOf(props.value) !== -1;
-    },
-});
-</script>

resources/js/components/ui/Menulist.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
-        <div class="grid gap-1">
-            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded py-1 px-3 text-gray-400"
-                :class="index === modelValue ? `bg-gray-600` : ''" @click.prevent="openMenu(index)" v-text="item.title"></a>
-        </div>
-        <slot name="bottom"></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        modelValue: {},
-        entries: {},
-    },
-    methods: {
-        openMenu(index) {
-            this.$emit('update:modelValue', index);
-        },
-    },
-};
-</script>

resources/js/views/setting/Layout.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="flex grow relative">
-        <ui-menulist v-model="active" :entries="$page.props.setting_menu"></ui-menulist>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    data: function () {
-        return {
-            innerActive: this.$page.props.setting_menu.findIndex((menu) => menu.is_active),
-        };
-    },
-    computed: {
-        active: {
-            get() {
-                return this.innerActive;
-            },
-            set(v) {
-                var _self = this;
-                this.$inertia.visit(this.$page.props.setting_menu[v].url, {
-                    onSuccess() {
-                        _self.innerActive = v;
-                    },
-                });
-            },
-        },
-    },
-};
-</script>

resources/livewire-js/app.js

@@ -1 +1,19 @@
+import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
+import Tooltip from '@ryangjchandler/alpine-tooltip';
+
 import '../css/app.css';
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/shift-toward.css';
+import '../css/tooltip.css';
+import {error, success} from './toastify.js';
+
+Alpine.plugin(
+    Tooltip.defaultProps({
+        theme: 'primary',
+        animation: 'shift-toward',
+    })
+);
+
+window.addEventListener('success', (event) => success(event.detail[0]));
+
+Livewire.start();

resources/livewire-js/toastify.js

@@ -0,0 +1,27 @@
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+const defaultToast = {
+    duration: 3000,
+    gravity: 'bottom', // `top` or `bottom`
+    position: 'right', // `left`, `center` or `right`
+    style: {
+        background: 'none',
+    },
+};
+
+export function success(message) {
+    Toastify({
+        ...defaultToast,
+        text: message,
+        className: '!bg-green-700 !text-green-100',
+    }).showToast();
+}
+
+export function error(message) {
+    Toastify({
+        ...defaultToast,
+        text: message,
+        className: '!bg-red-700 !text-red-100',
+    }).showToast();
+}

resources/views/components/layouts/app.blade.php

@@ -16,5 +16,6 @@
         <livewire:page.sidebar />
         {{ $slot }}
         <page-search-modal v-if="searchVisible" @close="searchVisible = false"></page-search-modal>
+        @livewireScriptConfig
     </body>
 </html>

tailwind.config.js

@@ -1,7 +1,7 @@
 const {colors} = require('tailwindcss/defaultTheme');
 
 module.exports = {
-    content: ['app/View/**/*.php', 'resources/views/**/*.blade.php', 'modules/**/*.php'],
+    content: ['app/View/**/*.php', 'resources/views/**/*.blade.php', 'modules/**/*.php', './resources/livewire-js/**/*.js'],
     theme: {
         extend: {
             colors: {

tests/Feature/ModuleTest.php

@@ -1,63 +0,0 @@
-<?php
-
-namespace Tests\Feature;
-
-use App\Module\Module;
-use App\Module\ModuleSettings;
-use Illuminate\Foundation\Testing\DatabaseTransactions;
-use Tests\TestCase;
-
-class ModuleTest extends TestCase
-{
-
-    use DatabaseTransactions;
-
-    public function testItGetsModuleSettings(): void
-    {
-        $this->login()->loginNami();
-        ModuleSettings::fake(['modules' => ['bill']]);
-
-        $response = $this->get('/setting/module');
-
-        $response->assertOk();
-        $this->assertCount(count(Module::cases()), $this->inertia($response, 'data.meta.modules'));
-        $this->assertInertiaHas([
-            'name' => 'Zahlungs-Management',
-            'id' => 'bill',
-        ], $response, 'data.meta.modules.0');
-        $this->assertEquals(['bill'], $this->inertia($response, 'data.data.modules'));
-    }
-
-    public function testItSavesSettings(): void
-    {
-        $this->login()->loginNami();
-
-        $response = $this->from('/setting/module')->post('/setting/module', [
-            'modules' => ['bill'],
-        ]);
-
-        $response->assertRedirect('/setting/module');
-        $this->assertEquals(['bill'], app(ModuleSettings::class)->modules);
-    }
-
-    public function testModuleMustExists(): void
-    {
-        $this->login()->loginNami();
-
-        $response = $this->from('/setting/module')->post('/setting/module', [
-            'modules' => ['lalala'],
-        ]);
-
-        $response->assertSessionHasErrors('modules.0');
-    }
-
-    public function testItReturnsModulesOnEveryPage(): void
-    {
-        $this->login()->loginNami();
-        ModuleSettings::fake(['modules' => ['bill']]);
-
-        $response = $this->get('/');
-
-        $this->assertEquals(['bill'], $this->inertia($response, 'settings.modules'));
-    }
-}