Skip to content

refactor: restructure alert system for default integration and Livewire compatibility #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ser-tec wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor: restructure alert system for default integration and Livewire compatibility #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions config/tablar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,28 @@
*/
'display_alert' => false,

'alerts' => [
'default_position' => [
'top' => '10px',
'right' => '10px',
],
'positions_by_layout' => [
'boxed' => ['top' => '10px', 'right' => '10px'],
'combo' => ['top' => '80px', 'right' => '20px'],
'condensed' => ['top' => '10px', 'right' => '10px'],
'fluid' => ['top' => '10px', 'right' => '10px'],
'horizontal' => ['top' => '10px', 'right' => '10px'],
'navbar-overlap' => ['top' => '10px', 'right' => '10px'],
'navbar-sticky' => ['top' => '10px', 'right' => '10px'],
'rtl' => ['top' => '20px', 'right' => 'unset', 'left' => '20px'],
'vertical' => ['top' => '10px', 'right' => '10px'],
'vertical-right' => ['top' => '10px', 'right' => '10px'],
'vertical-transparent' => ['top' => '10px', 'right' => '10px'],
],
'default_duration' => 5,
'dismissible' => true,
],

/*
|--------------------------------------------------------------------------
| Menu Items
Expand Down
20 changes: 0 additions & 20 deletions resources/views/common/alert.blade.php
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions resources/views/page.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
@section('classes_body', $layoutHelper->makeBodyClasses())

@section('layout')
@if(config('tablar','display_alert'))
Copy link
Owner

@takielias takielias Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should have resolved 2 conditions.

  1. when display_alert = true
  2. when livewire = true

It's all about livewire, right?

Copy link
Contributor Author

@ser-tec ser-tec Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @takielias,

Thanks for your feedback! The changes I made are not just about Livewire. I’ve also modified the normal (non-Livewire) usage of alerts to ensure they are always included as an overlay, making them more dynamic and consistent across all use cases.

This means:

When display_alert = true, the alert container will always be rendered, regardless of whether Livewire is being used or not.
For normal (non-Livewire) alerts, they now behave dynamically with improved configuration options (e.g., duration, dismissibility).
For Livewire, the alerts integrate seamlessly using JavaScript events.

If you'd prefer, I can create a separate, more focused PR that resolves the Livewire compatibility issue without modifying the normal alert behavior.

Let me know if this approach works better for you, and I’ll be happy to make the adjustments.

Copy link
Owner

@takielias takielias Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ser-tec Thanks for the detailed explanation! For better maintainability and extensibility, would it make sense to keep the concerns separated? I think having a dedicated PR for the Livewire integration would help keep the codebase cleaner. Let me know what you think.

@include('tablar::partials.common.alerts-container')
Copy link
Owner

@takielias takielias Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great if you make it common.livewire-alert

@endif
@if(isset($layout))
@includeIf('tablar::layouts.' . $layout)
@else
Expand Down
170 changes: 170 additions & 0 deletions resources/views/partials/common/alerts-container.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<style>
#alerts-container .alert {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
animation: slide-in 0.3s ease-out;
}

#alerts-container .alert .btn-close {
margin-left: 10px;
}

@keyframes slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
</style>

@php
$layout = config('tablar.layout');
$defaultPosition = config('tablar.alerts.default_position');
$layoutPositions = config("tablar.alerts.positions_by_layout.$layout", $defaultPosition);

$positionTop = $layoutPositions['top'] ?? '10px';
$positionRight = $layoutPositions['right'] ?? '10px';
$positionLeft = $layoutPositions['left'] ?? null; // Only for RTL

$defaultDuration = config('tablar.alerts.default_duration', 5);
$defaultDismissible = config('tablar.alerts.dismissible', true);
@endphp

<div id="alerts-container" style="
position: fixed;
top: {{ $positionTop }};
@if(isset($positionLeft))
left: {{ $positionLeft }};
@else
right: {{ $positionRight }};
@endif
z-index: 1050;
max-width: 300px;
display: flex;
flex-direction: column;
gap: 10px;">
@if (Session::has('message'))
@php
$messageData = Session::get('message');
$messageText = is_array($messageData) ? $messageData['message'] : $messageData; // Compatibility with string or array
$messageDismissible = is_array($messageData) ? ($messageData['dismissible'] ?? true) : true;
@endphp
<div class="alert alert-info shadow" role="alert" data-dismissible="{{ $messageDismissible }}">
<span>{{ $messageText }}</span>
@if ($messageDismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>
@endif

@if (Session::has('success'))
@php
$successData = Session::get('success');
$successMessage = is_array($successData) ? $successData['message'] : $successData;
$successDismissible = is_array($successData) ? ($successData['dismissible'] ?? true) : true;
@endphp
<div class="alert alert-success shadow" role="alert" data-dismissible="{{ $successDismissible }}">
<span>{{ $successMessage }}</span>
@if ($successDismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>
@endif

@if (Session::has('info'))
@php
$infoData = Session::get('info');
$infoMessage = is_array($infoData) ? $infoData['message'] : $infoData;
$infoDismissible = is_array($infoData) ? ($infoData['dismissible'] ?? true) : true;
@endphp
<div class="alert alert-info shadow" role="alert" data-dismissible="{{ $infoDismissible }}">
<span>{{ $infoMessage }}</span>
@if ($infoDismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>
@endif

@if (Session::has('error'))
@php
$errorData = Session::get('error');
$errorMessage = is_array($errorData) ? $errorData['message'] : $errorData;
$errorDismissible = is_array($errorData) ? ($errorData['dismissible'] ?? true) : true;
@endphp
<div class="alert alert-danger shadow" role="alert" data-dismissible="{{ $errorDismissible }}">
<span>{{ $errorMessage }}</span>
@if ($errorDismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>
@endif

@if (Session::has('warning'))
@php
$warningData = Session::get('warning');
$warningMessage = is_array($warningData) ? $warningData['message'] : $warningData;
$warningDismissible = is_array($warningData) ? ($warningData['dismissible'] ?? true) : true;
@endphp
<div class="alert alert-warning shadow" role="alert" data-dismissible="{{ $warningDismissible }}">
<span>{{ $warningMessage }}</span>
@if ($warningDismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>
@endif

@if ($errors->any())
@foreach ($errors->all() as $error)
<div class="alert alert-danger shadow" role="alert" data-dismissible="true">
<span>{{ $error }}</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endforeach
@endif
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('alert', event => {
const detail = Array.isArray(event.detail) ? event.detail[0] : event.detail;
const type = detail.type || 'info';
const message = detail.message || '';
const duration = (detail.duration || 5) * 1000;
const dismissible = detail.dismissible !== false;

const alertContainer = document.getElementById('alerts-container');

const alert = document.createElement('div');
alert.className = `alert alert-${type} shadow d-flex align-items-center justify-content-between`;
alert.role = 'alert';
alert.innerHTML = `<span>${message}</span>`;

if (dismissible) {
const closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.className = 'btn-close';
closeButton.setAttribute('data-bs-dismiss', 'alert');
closeButton.setAttribute('aria-label', 'Close');
alert.appendChild(closeButton);
}

alertContainer.appendChild(alert);

if (duration > 0) {
setTimeout(() => alert.remove(), duration);
}
});
document.querySelectorAll('#alerts-container .alert').forEach(alert => {
const duration = alert.dataset.duration || 5000; // Duration in milliseconds
if (duration > 0) {
setTimeout(() => alert.remove(), duration);
}
});
});
</script>