Adding Create Model and Toast

app/Http/Livewire/Admin/Menu/Level.php

@@ -52,6 +52,7 @@ public function submit(){
        $this->resetForm();
         $this->resetInput();
        $this->dispatchBrowserEvent('FirstModel',['show'=>false]);
+       $this->dispatchBrowserEvent('Toast',['show'=>true,'type'=>'success','message'=>"'".$level->name."'".' was added to Menu Level!']);
     }
 
     public function render()

app/View/Components/Item/Toast.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Toast extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.toast');
+    }
+}

app/View/Components/Svg/CheckedCircle.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class CheckedCircle extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.checked-circle');
+    }
+}

app/View/Components/Svg/CrossCircle.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class CrossCircle extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.cross-circle');
+    }
+}

app/View/Components/Svg/ExclamationCircle.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class ExclamationCircle extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.exclamation-circle');
+    }
+}

app/View/Components/Svg/Information.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Information extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.information');
+    }
+}

database/migrations/2022_11_10_005851_create_menu_levels_table.php

@@ -15,8 +15,8 @@ public function up()
     {
         Schema::create('menu_levels', function (Blueprint $table) {
             $table->id();
-            $table->timestamps();
             $table->string('name');
+            $table->timestamps();
         });
     }
 

resources/js/components/main.js

@@ -9,6 +9,7 @@ export function Main(data) {
     return {
         darkMode: data.darkMode,
         isSidebarOpen: false,
+        toast:{'show':false,'type':'normal','message':'Some message!'},
         isFirstModelButtonClicked: false,
 
         init() {
@@ -18,13 +19,33 @@ export function Main(data) {
                 console.log(this.isFirstModelButtonClicked);
             });
         },
+
+        toastNotification() {
+            if(this.toast.show === true){
+                setTimeout(() => {
+                    this.toast.show = false
+                }, 5000)
+            }
+        },
+
         eventToListen() {
-            console.log('hello');
+
+            // First Model
             window.addEventListener('FirstModel', event => {
                 if (event.detail.show === false) {
                     this.isFirstModelButtonClicked = false
                 }
             });
+
+            // Toast
+            window.addEventListener('Toast', event => {
+                if (event.detail.show === true) {
+                    this.toast.show=true
+                    this.toast.type=event.detail.type;
+                    this.toast.message=event.detail.message;
+                    this.toastNotification();
+                }
+            });
         }
     }
 }

resources/views/components/item/toast.blade.php

@@ -0,0 +1,67 @@
+
+<div class="absolute bottom-10 right-10"
+     x-show="toast.show"
+     x-transition:enter="transition ease-out duration-300"
+     x-transition:enter-start="opacity-0"
+     x-transition:enter-end="opacity-100"
+     x-transition:leave="transition ease-in duration-300"
+     x-transition:leave-start="opacity-100"
+     x-transition:leave-end="opacity-0"
+>
+    {{--    Normal Message  --}}
+    <template x-if="toast.type==='normal'">
+
+        <div x-show="toast.type==='normal'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+            <div class="flex p-4">
+                <div class="flex-shrink-0">
+                    <x-svg.information class="h-4 w-4 text-blue-500 mt-0.5"></x-svg.information>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-gray-700 dark:text-gray-400" x-text="toast.message"> </p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    {{--    Success Message  --}}
+    <template x-if="toast.type==='success'">
+        <div x-show="toast.type==='success'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+            <div class="flex p-4">
+                <div class="flex-shrink-0">
+                    <x-svg.checked-circle class="h-4 w-4 text-green-500 mt-0.5"></x-svg.checked-circle>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-gray-700 dark:text-gray-400" x-text="toast.message"></p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    {{--    Error Message  --}}
+    <template x-if="toast.type==='error'">
+        <div x-show="toast.type==='error'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+            <div class="flex p-4">
+                <div class="flex-shrink-0">
+                    <x-svg.cross-circle class="h-4 w-4 text-red-500 mt-0.5"></x-svg.cross-circle>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-gray-700 dark:text-gray-400" x-text="toast.message"></p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+        {{--    Warning Message  --}}
+    <template x-if="toast.type==='warning'">
+        <div x-show="toast.type==='warning'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+            <div class="flex p-4">
+                <div class="flex-shrink-0">
+                    <x-svg.cross-circle class="h-4 w-4 text-orange-500 mt-0.5"></x-svg.cross-circle>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-gray-700 dark:text-gray-400" x-text="toast.message"></p>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>

resources/views/components/svg/checked-circle.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+</svg>

resources/views/components/svg/cross-circle.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+</svg>

resources/views/components/svg/exclamation-circle.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16"
+     height="16" fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+</svg>

resources/views/components/svg/information.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+</svg>

resources/views/layouts/app.blade.php

@@ -25,13 +25,22 @@
 
 <div class="flex flex-col min-h-screen bg-gray-white dark:bg-oblue-600 transition-all duration-300 ">
     {{$slot}}
+
+
 </div>
 
 @stack('modals')
+
+
+
+
+
+<x-item.toast></x-item.toast>
+
 @livewireScripts
 
-<div  @click="isFirstModelButtonClicked = false" data-hs-overlay-backdrop-template id="modalBackdrop"
-:class="{ 'transition-all duration-300 fixed inset-0 z-[70] backdrop-blur-sm bg-gray-900 dark:bg-oblue-900 bg-opacity-50 dark:bg-opacity-40' : isFirstModelButtonClicked === true, ' transition-all duration-300 fixed inset-0 z-[-10] bg-gray-900 dark:bg-oblue-900 bg-opacity-0 dark:bg-opacity-0' : isFirstModelButtonClicked === false }"
+<div @click="isFirstModelButtonClicked = false" data-hs-overlay-backdrop-template id="modalBackdrop"
+     :class="{ 'transition-all duration-300 fixed inset-0 z-[70] backdrop-blur-sm bg-gray-900 dark:bg-oblue-900 bg-opacity-50 dark:bg-opacity-40' : isFirstModelButtonClicked === true, ' transition-all duration-300 fixed inset-0 z-[-10] bg-gray-900 dark:bg-oblue-900 bg-opacity-0 dark:bg-opacity-0' : isFirstModelButtonClicked === false }"
 ></div>
 </body>
 </html>

resources/views/livewire/admin/menu/level.blade.php

@@ -6,7 +6,8 @@
 
     <!-- PAGE CONTENT -->
     <x-layout.content>
-        <!-- Menu create -->
+
+        <!-- Menu Model create -->
         <x-item.modal buttonName="Create" size="small" type="add" modalHeader="Create Menu Level">
             <x-item.form method="POST">
                 <div class="grid grid-cols-1 gap-4">
@@ -15,5 +16,13 @@
                     <x-item.form-submit name="Add"></x-item.form-submit>
             </x-item.form>
         </x-item.modal>
+
+        <!-- menu Table -->
+
+
     </x-layout.content>
+
+
+
+
 </div>