Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: streamline onboarding modal by removing unnecessary slide preparation logic and enhancing loading state management for improved user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 00:11:26 -05:00
parent a6c8e14db0
commit 5cd9a52668
242 changed files with 59643 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
extensions/Others/Onboarding/resources/views/modal.blade.php
View File

@@ -1,10 +1,5 @@
@php
use Illuminate\Support\Facades\Storage;
$preparedSlides = collect($slides)->map(function ($slide) {
$slide['image_url'] = $slide['image'] ? Storage::url($slide['image']) : null;
return $slide;
})->values();
@endphp
<div>
@@ -12,10 +7,8 @@
<div class="onboarding-modal"
x-data="{
open: @js($showModal),
currentSlide: @js($currentSlide),
slides: @js($preparedSlides),
componentId: @js($this->getId()),
showBackdrop: @js($this->showBackdrop ?? false),
loading: false,
init() {
this.$watch('open', value => {
document.documentElement.style.overflow = value ? 'hidden' : '';
@@ -24,42 +17,39 @@
document.documentElement.style.overflow = 'hidden';
}
},
get activeSlide() {
return this.slides[this.currentSlide] ?? null;
},
primaryActionLabel(index) {
const isLast = index === this.slides.length - 1;
if (isLast) return 'Finish';
return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
},
previous() {
if (this.currentSlide <= 0) return;
this.currentSlide--;
@this.call('previousSlide');
if (this.loading) return;
this.loading = true;
@this.call('previousSlide').then(() => {
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
next() {
if (this.currentSlide >= this.slides.length - 1) {
this.finish();
return;
}
this.currentSlide++;
@this.call('nextSlide');
if (this.loading) return;
this.loading = true;
@this.call('nextSlide').then(() => {
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
finish() {
if (this.loading) return;
this.loading = true;
@this.call('finish');
}
}">
<div x-show="open"
x-transition.opacity
class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
style="display: flex !important;">
class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10">
<div class="absolute inset-0 transition-opacity duration-300"
:class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
@click="finish()"></div>
<div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden min-h-[400px]"
style="display: block !important;"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
@@ -67,26 +57,33 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
<!-- Image Section -->
<div x-show="slides[currentSlide] && slides[currentSlide].image_url"
class="w-full h-56 overflow-hidden">
<img :src="slides[currentSlide]?.image_url || ''"
:alt="slides[currentSlide]?.title || ''"
class="w-full h-full object-cover">
</div>
<!-- Content Section -->
<div class="p-6 space-y-3">
<!-- Show content when slides exist -->
<div x-show="slides.length > 0 && slides[currentSlide]">
<h3 class="text-primary-100 text-xl font-semibold"
x-text="slides[currentSlide]?.title">Loading...</h3>
<p class="text-base/80 text-sm leading-6"
x-text="slides[currentSlide]?.description">Please wait...</p>
<div wire:key="slide-wrapper-{{ $currentSlide }}">
<!-- Image Section -->
@if($slides[$currentSlide]['image'] ?? false)
<div class="w-full h-56 overflow-hidden">
<img src="{{ Storage::url($slides[$currentSlide]['image']) }}"
alt="{{ $slides[$currentSlide]['title'] ?? '' }}"
class="w-full h-full object-cover">
</div>
@endif
<!-- Content Section -->
<div class="p-6 space-y-3">
<!-- Show content when slides exist -->
@if(count($slides) > 0 && isset($slides[$currentSlide]))
<div>
<h3 class="text-primary-100 text-xl font-semibold">
{{ $slides[$currentSlide]['title'] ?? 'Loading...' }}
</h3>
<p class="text-base/80 text-sm leading-6">
{{ $slides[$currentSlide]['description'] ?? 'Please wait...' }}
</p>
</div>
@endif
<!-- Show error message when no slides -->
<div x-show="slides.length === 0" class="text-center py-8">
@if(count($slides) === 0)
<div class="text-center py-8">
<div class="flex flex-col items-center gap-4">
<svg class="w-16 h-16 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
@@ -106,21 +103,27 @@
</div>
</div>
</div>
@endif
</div>
</div>
<!-- Progress Dots -->
<div x-show="slides.length > 0" class="flex justify-center gap-2 px-6 pb-4">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
</template>
@if(count($slides) > 0)
<div class="flex justify-center gap-2 px-6 pb-4">
@foreach($slides as $index => $slide)
<div class="h-1.5 rounded-full transition-all duration-300 {{ $currentSlide === $index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral' }}"
wire:key="dot-{{ $index }}"></div>
@endforeach
</div>
@endif
<!-- Navigation Buttons -->
<div x-show="slides.length > 0" class="flex items-center justify-between px-6 pb-6">
@if(count($slides) > 0)
<div class="flex items-center justify-between px-6 pb-6">
<button @click="previous()"
:disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
wire:loading.attr="disabled"
@disabled($currentSlide === 0)
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 transition-opacity">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
@@ -128,22 +131,31 @@
</button>
<button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="currentSlide === slides.length - 1 ? 'Finish' : 'Next'">Next</span>
<svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
wire:loading.attr="disabled"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
<span>{{ $currentSlide === count($slides) - 1 ? 'Finish' : 'Next' }}</span>
@if($currentSlide !== count($slides) - 1)
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
@endif
<svg wire:loading wire:target="nextSlide,previousSlide" class="animate-spin h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
@endif
<!-- Close button when no slides -->
<div x-show="slides.length === 0" class="flex justify-center px-6 pb-6">
@if(count($slides) === 0)
<div class="flex justify-center px-6 pb-6">
<button @click="finish()"
class="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium text-white bg-error hover:bg-error/90 rounded-md">
Close Setup Message
</button>
</div>
@endif
</div>
</div>
</div>