Feat: Toast Notice

app/Livewire/Card/CardComponent.php

@@ -10,9 +10,12 @@
 use Domain\Timelog\Actions\CreateTimelogAction;
 use Illuminate\Contracts\View\View;
 use Livewire\Component;
+use Support\Helpers\Concerns\UseNotice;
 
 class CardComponent extends Component
 {
+    use UseNotice;
+
     public Card $card;
 
     protected $listeners = [
@@ -30,6 +33,7 @@ public function start(): void
         }
 
         $this->refreshCard($currentCard);
+        $this->success('Task started successfully.');
     }
 
     public function stop(): void
@@ -41,6 +45,7 @@ public function stop(): void
         CreateTimelogAction::run($currentCard);
 
         $this->refreshCard($currentCard);
+        $this->success('Task Stoped successfully.');
     }
 
     public function delete(): void
@@ -50,6 +55,7 @@ public function delete(): void
         $this->card->delete();
 
         $this->dispatch("bucket-$bucketId-updated");
+        $this->success('Task Deleted successfully.');
     }
 
     public function render(): View

resources/assets/js/app.js

@@ -8,3 +8,7 @@ window.addEventListener('refresh.preline.dropdown', () => {
 
 	setTimeout(() => HSDropdown.autoInit(), 1000);
 });
+
+window.addEventListener('notice.add', (event) => {
+	Livewire.dispatch('notice', event.detail[0]);
+});

resources/views/components/icons/close.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->twMerge('size-6') }} xmlns="http://www.w3.org/2000/svg" fill="fillColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

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

@@ -20,7 +20,9 @@
 	<div class="flex flex-grow w-full overflow-y-hidden">
 		{{ $slot }}
 	</div>
+	<x-utils.notice />
 	@livewire('wire-elements-modal')
 	@vite('resources/assets/js/app.js')
+	@stack('javascript')
 </body>
 </html>

resources/views/components/utils/notice.blade.php

@@ -0,0 +1,66 @@
+{{-- @see https://codepen.io/KevinBatdorf/pen/JjGKbMa?editors=1010 --}}
+<div>
+	<div
+		x-data="noticesHandler()"
+		class="fixed right-0 left-auto inset-0 flex flex-col-reverse items-end justify-start p-4 space-y-4 h-screen w-0"
+		@notice.window="add($event.detail)"
+		style="pointer-events:none">
+		<template x-for="notice of notices" :key="notice.id">
+			<div
+					x-show="visible.includes(notice)"
+					x-transition:enter="transition ease-in duration-200"
+					x-transition:enter-start="transform opacity-0 translate-y-2"
+					x-transition:enter-end="transform opacity-100"
+					x-transition:leave="transition ease-out duration-500"
+					x-transition:leave-start="transform translate-x-0 opacity-100"
+					x-transition:leave-end="transform translate-x-full opacity-0"
+					class="max-wxs min-w-80 text-sm text-white rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-teal-label"
+					:class="{
+							'bg-teal-500': notice.type === 'success',
+							'bg-blue-500': notice.type === 'info',
+							'bg-orange-500': notice.type === 'warning',
+							'bg-red-500': notice.type === 'error',
+						}"
+					style="pointer-events:all"
+			>
+				<div class="flex px-4 pt-4 pb-2 items-start">
+					<p x-text="notice.text" class="text-pretty"></p>
+					<div class="ms-auto">
+						<button @click="remove(notice.id)" type="button" class="inline-flex shrink-0 justify-center items-center rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100" aria-label="Close">
+							<span class="sr-only">Close</span>
+							<x-icons.close></x-icons.close>
+						</button>
+					</div>
+				</div>
+			</div>
+		</template>
+	</div>
+</div>
+
+@push('javascript')
+	<script>
+		function noticesHandler() {
+			return {
+				notices: [],
+				visible: [],
+				add(notice) {
+					notice.id = Date.now();
+					this.notices.push(notice);
+					this.fire(notice.id);
+				},
+				fire(id) {
+					this.visible.push(this.notices.find(notice => notice.id === id));
+					const timeShown = 5000 * this.visible.length;
+					setTimeout(() => {
+						this.remove(id)
+					}, timeShown);
+				},
+				remove(id) {
+					const notice = this.visible.find(notice => notice.id === id);
+					const index = this.visible.indexOf(notice);
+					this.visible.splice(index, 1);
+				},
+			}
+		}
+	</script>
+@endpush

src/Support/Helpers/Concerns/UseNotice.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Support\Helpers\Concerns;
+
+trait UseNotice
+{
+    public function info(string $message): void
+    {
+        $this->notice('info', $message,);
+    }
+
+    public function success(string $message): void
+    {
+        $this->notice('success', $message,);
+    }
+
+    public function warning(string $message): void
+    {
+        $this->notice('warning', $message,);
+    }
+
+    public function error(string $message): void
+    {
+        $this->notice('error', $message,);
+    }
+
+    public function notice(string $type, string $message): void
+    {
+        $this->dispatch(
+            'notice.add',
+            [
+                'type' => $type,
+                'text' => $message,
+            ]
+        );
+    }
+}