opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Notifications docs

Browse Source
This commit is contained in:
Dan Harrin
2023-04-10 20:15:12 +01:00
parent 52407e44f6
commit 13f7e3704d
17 changed files with 209 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/actions/docs/01-installation.md
+4 -4
View File
@@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after
```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus]
import laravel, { refreshPaths } from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [ // [tl! focus:start]
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
], // [tl! focus:end]
],
}),
],
})
@@ -134,7 +134,7 @@ const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```
packages/app/docs/02-getting-started.md
+35 -35
View File
@@ -149,7 +149,7 @@ public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name'), // [tl! ++]
Forms\Components\TextInput::make('name'),
]);
}
```
@@ -162,8 +162,8 @@ This field is required in the database, and has a maximum length of 255 characte
use Filament\Forms;
Forms\Components\TextInput::make('name')
->required() // [tl! ++]
->maxLength(255) // [tl! ++]
->required()
->maxLength(255)
```
Attempt to submit the form to create a new patient without a name, and observe that a message is displayed informing you that the name field is required.
@@ -183,12 +183,12 @@ public static function form(Form $form): Form
Forms\Components\TextInput::make('name')
->required()
->maxLength(255),
Forms\Components\Select::make('type') // [tl! add:start]
Forms\Components\Select::make('type')
->options([
'cat' => 'Cat',
'dog' => 'Dog',
'rabbit' => 'Rabbit',
]), // [tl! add:end]
]),
]);
}
```
@@ -206,7 +206,7 @@ Forms\Components\Select::make('type')
'dog' => 'Dog',
'rabbit' => 'Rabbit',
])
->required() // [tl! ++]
->required()
```
#### "Date of birth" picker
@@ -231,9 +231,9 @@ public static function form(Form $form): Form
'rabbit' => 'Rabbit',
])
->required(),
Forms\Components\DatePicker::make('date_of_birth') // [tl! add:start]
Forms\Components\DatePicker::make('date_of_birth')
->required()
->maxDate(now()), // [tl! add:end]
->maxDate(now()),
]);
}
```
@@ -265,9 +265,9 @@ public static function form(Form $form): Form
Forms\Components\DatePicker::make('date_of_birth')
->required()
->maxDate(now()),
Forms\Components\Select::make('owner_id') // [tl! add:start]
Forms\Components\Select::make('owner_id')
->relationship('owner', 'name')
->required(), // [tl! add:end]
->required(),
]);
}
```
@@ -281,8 +281,8 @@ use Filament\Forms;
Forms\Components\Select::make('owner_id')
->relationship('owner', 'name')
->searchable() // [tl! ++]
->preload() // [tl! ++]
->searchable()
->preload()
->required()
```
@@ -297,7 +297,7 @@ Forms\Components\Select::make('owner_id')
->relationship('owner', 'name')
->searchable()
->preload()
->createOptionForm([ // [tl! add:start]
->createOptionForm([
Forms\Components\TextInput::make('name')
->required()
->maxLength(255),
@@ -310,7 +310,7 @@ Forms\Components\Select::make('owner_id')
->label('Phone number')
->tel()
->required(),
]) // [tl! add:end]
])
->required()
```
@@ -340,10 +340,10 @@ public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('name'), // [tl! add:start]
Tables\Columns\TextColumn::make('name'),
Tables\Columns\TextColumn::make('type'),
Tables\Columns\TextColumn::make('date_of_birth'),
Tables\Columns\TextColumn::make('owner.name'), // [tl! add:end]
Tables\Columns\TextColumn::make('owner.name'),
]);
}
```
@@ -363,11 +363,11 @@ public static function table(Table $table): Table
return $table
->columns([
Tables\Columns\TextColumn::make('name')
->searchable(), // [tl! ++]
->searchable(),
Tables\Columns\TextColumn::make('type'),
Tables\Columns\TextColumn::make('date_of_birth'),
Tables\Columns\TextColumn::make('owner.name')
->searchable(), // [tl! ++]
->searchable(),
]);
}
```
@@ -390,7 +390,7 @@ public static function table(Table $table): Table
->searchable(),
Tables\Columns\TextColumn::make('type'),
Tables\Columns\TextColumn::make('date_of_birth')
->sortable(), // [tl! ++]
->sortable(),
Tables\Columns\TextColumn::make('owner.name')
->searchable(),
]);
@@ -416,12 +416,12 @@ public static function table(Table $table): Table
// ...
])
->filters([
Tables\Filters\SelectFilter::make('type') // [tl! add:start]
Tables\Filters\SelectFilter::make('type')
->options([
'cat' => 'Cat',
'dog' => 'Dog',
'rabbit' => 'Rabbit',
]), // [tl! add:end]
]),
]);
}
```
@@ -456,7 +456,7 @@ use App\Filament\PatientResource\RelationManagers;
public static function getRelations(): array
{
return [
RelationManagers\TreatmentsRelationManager::class, // [tl! ++]
RelationManagers\TreatmentsRelationManager::class,
];
}
```
@@ -500,7 +500,7 @@ use Filament\Forms;
Forms\Components\TextInput::make('description')
->required()
->maxLength(255)
->columnSpan('full') // [tl! ++]
->columnSpan('full')
```
Let's add a `notes` field, which can be used to add more information about the treatment. We can use a [textarea](../forms/fields/textarea) for this:
@@ -517,9 +517,9 @@ public function form(Form $form): Form
->required()
->maxLength(255)
->columnSpan('full'),
Forms\Components\Textarea::make('notes') // [tl! add:start]
Forms\Components\Textarea::make('notes')
->maxLength(65535)
->columnSpan('full'), // [tl! add:end]
->columnSpan('full'),
]);
}
```
@@ -543,10 +543,10 @@ public function form(Form $form): Form
Forms\Components\Textarea::make('notes')
->maxLength(65535)
->columnSpan('full'),
Forms\Components\TextInput::make('price') // [tl! add:start]
Forms\Components\TextInput::make('price')
->numeric()
->prefix('$')
->maxValue(42949672.95), // [tl! add:end]
->maxValue(42949672.95),
]);
}
```
@@ -565,13 +565,13 @@ Inside the new `app/Casts/MoneyCast.php` file, update the `get()` and `set()` me
public function get($model, string $key, $value, array $attributes): float
{
// Transform the integer stored in the database into a float.
return round(floatval($value) / 100, precision: 2); // [tl! ++]
return round(floatval($value) / 100, precision: 2);
}
public function set($model, string $key, $value, array $attributes): float
{
// Transform the float into an integer for storage.
return round(floatval($value) * 100); // [tl! ++]
return round(floatval($value) * 100);
}
```
@@ -583,9 +583,9 @@ use Illuminate\Database\Eloquent\Model;
class Treatment extends Model
{
protected $casts = [ // [tl! add:start]
protected $casts = [
'price' => MoneyCast::class,
]; // [tl! add:end]
];
// ...
}
@@ -606,9 +606,9 @@ public function table(Table $table): Table
return $table
->columns([
Tables\Columns\TextColumn::make('description'),
Tables\Columns\TextColumn::make('price') // [tl! add:start]
Tables\Columns\TextColumn::make('price')
->money('usd')
->sortable(), // [tl! add:end]
->sortable(),
]);
}
```
@@ -627,8 +627,8 @@ public function table(Table $table): Table
Tables\Columns\TextColumn::make('price')
->money('usd')
->sortable(),
Tables\Columns\TextColumn::make('created_at') // [tl! add:start]
->dateTime(), // [tl! add:end]
Tables\Columns\TextColumn::make('created_at')
->dateTime(),
]);
}
```
packages/app/docs/07-notifications.md
+2 -2
View File
@@ -27,7 +27,7 @@ public function context(Context $context): Context
}
```
You may also control [polling](../notifications/database-notifications#polling):
You may also control [polling](../notifications/database-notifications#polling-for-new-database-notifications):
```php
use Filament\Context;
@@ -43,7 +43,7 @@ public function context(Context $context): Context
## Echo
Some features of the notifications package, including [receiving real-time database notifications](../notifications/database-notifications#echo) and [broadcast notifications](../notifications/broadcast-notifications), require Laravel Echo to be installed.
Some features of the notifications package, including [receiving real-time database notifications](../notifications/database-notifications#using-echo-to-receive-new-database-notifications-with-websockets) and [broadcast notifications](../notifications/broadcast-notifications), require Laravel Echo to be installed.
Firstly, you must set up a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher.
packages/app/docs/11-themes.md
+1 -1
View File
@@ -151,7 +151,7 @@ Or if you're using Laravel Mix instead of Vite, in your `webpack.mix.js` file, r
const mix = require('laravel-mix')
mix.postCss('resources/css/filament.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```
packages/forms/docs/01-installation.md
+4 -4
View File
@@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after
```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus]
import laravel, { refreshPaths } from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [ // [tl! focus:start]
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
], // [tl! focus:end]
],
}),
],
})
@@ -134,7 +134,7 @@ const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```
packages/forms/docs/02-getting-started.md
+6 -6
View File
@@ -28,11 +28,11 @@ use Filament\Forms\Form;
public function form(Form $form): Form
{
return $form
->schema([ // [tl! focus:start]
->schema([
TextInput::make('title'),
TextInput::make('slug'),
RichEditor::make('content'),
]); // [tl! focus:end]
]);
}
```
@@ -76,11 +76,11 @@ use Filament\Forms\Components\TextInput;
TextInput::make('slug'),
RichEditor::make('content')
->columnSpan(2),
Section::make('Publishing') // [tl! focus:start]
Section::make('Publishing')
->description('Settings for publishing this post.')
->schema([
// ...
]), // [tl! focus:end]
]),
]
```
@@ -93,7 +93,7 @@ use Filament\Forms\Components\Select;
Section::make('Publishing')
->description('Settings for publishing this post.')
->schema([ // [tl! focus:start]
->schema([
Select::make('status')
->options([
'draft' => 'Draft',
@@ -101,7 +101,7 @@ Section::make('Publishing')
'published' => 'Published',
]),
DateTimePicker::make('published_at'),
]) // [tl! focus:end]
])
```
This section now contains a [`Select` field](fields/select) and a [`DateTimePicker` field](fields/date-time-picker). You can learn more about those fields and their functionalities on the respective docs pages.
packages/forms/docs/06-adding-a-form-to-a-livewire-component.md
+4 -4
View File
@@ -49,9 +49,9 @@ use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class CreatePost extends Component implements HasForms // [tl! focus]
class CreatePost extends Component implements HasForms
{
use InteractsWithForms; // [tl! focus:start]
use InteractsWithForms;
public ?array $data = [];
@@ -75,7 +75,7 @@ class CreatePost extends Component implements HasForms // [tl! focus]
public function create(): void
{
dd($this->form->getState());
} // [tl! focus:start]
}
public function render(): View
{
@@ -113,7 +113,7 @@ use App\Models\Post;
public function create(): void
{
Post::create($this->form->getState()); // [tl! focus]
Post::create($this->form->getState());
}
```
packages/notifications/docs/01-installation.md
+4 -4
View File
@@ -106,16 +106,16 @@ You may also want to update your `vite.config.js` file to refresh the page after
```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus]
import laravel, { refreshPaths } from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [ // [tl! focus:start]
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
], // [tl! focus:end]
],
}),
],
})
@@ -132,7 +132,7 @@ const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```
packages/notifications/docs/02-sending-notifications.md
+115 -112
View File
@@ -2,6 +2,8 @@
title: Sending notifications
---
## Overview
> To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere.
Notifications are sent using a `Notification` object that's constructed through a fluent API. Calling the `send()` method on the `Notification` object will dispatch the notification and display it in your application. As the session is used to flash notifications, they can be sent from anywhere in your code, including JavaScript, not just Livewire components.
@@ -11,7 +13,7 @@ Notifications are sent using a `Notification` object that's constructed through
namespace App\Http\Livewire;
use Filament\Notifications\Notification; // [tl! focus]
use Filament\Notifications\Notification;
use Livewire\Component;
class EditPost extends Component
@@ -20,49 +22,25 @@ class EditPost extends Component
{
// ...
Notification::make() // [tl! focus:start]
Notification::make()
->title('Saved successfully')
->success()
->send(); // [tl! focus:end]
->send();
}
}
```
![Notification](https://user-images.githubusercontent.com/44533235/180995786-c9d6ac68-959a-45d2-8f05-e09ff2b9abd9.png)
## Title
## Setting a title
The main message of the notification is shown in the title. You can set the title as follows:
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully') // [tl! focus]
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully') // [tl! focus]
.send()
```
Markdown text will automatically be rendered if passed to the title.
## Icon
Optionally, a notification can have an icon that's displayed in front of its content. You may also set a color for the icon, which defaults to the `secondary` color specified in your `tailwind.config.js` file. The icon can be the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->icon('heroicon-o-document-text') // [tl! focus:start]
->iconColor('success') // [tl! focus:end]
->send();
```
@@ -71,8 +49,32 @@ Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.icon('heroicon-o-document-text') // [tl! focus:start]
.iconColor('success') // [tl! focus:end]
.send()
```
Markdown text will automatically be rendered if passed to the title.
## Setting an icon
Optionally, a notification can have an icon that's displayed in front of its content. You may also set a color for the icon, which defaults to the `secondary` color specified in your `tailwind.config.js` file. The icon can be the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->icon('heroicon-o-document-text')
->iconColor('success')
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.icon('heroicon-o-document-text')
.iconColor('success')
.send()
```
@@ -83,34 +85,9 @@ Notifications often have a status like `success`, `warning` or `danger`. Instead
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success() // [tl! focus]
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.success() // [tl! focus]
.send()
```
![Success, warning and danger notifications](https://user-images.githubusercontent.com/44533235/180995801-3e706ca6-773b-47a0-9fc6-3e28900a9ea9.png)
## Duration
By default, notifications are shown for 6 seconds before they're automatically closed. You may specify a custom duration value in milliseconds as follows:
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->duration(5000) // [tl! focus]
->send();
```
@@ -120,7 +97,32 @@ Or with JavaScript:
new Notification()
.title('Saved successfully')
.success()
.duration(5000) // [tl! focus]
.send()
```
![Success, warning and danger notifications](https://user-images.githubusercontent.com/44533235/180995801-3e706ca6-773b-47a0-9fc6-3e28900a9ea9.png)
## Setting a duration
By default, notifications are shown for 6 seconds before they're automatically closed. You may specify a custom duration value in milliseconds as follows:
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->duration(5000)
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.success()
.duration(5000)
.send()
```
@@ -132,7 +134,7 @@ use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->seconds(5) // [tl! focus]
->seconds(5)
->send();
```
@@ -142,7 +144,7 @@ Or with JavaScript:
new Notification()
.title('Saved successfully')
.success()
.seconds(5) // [tl! focus]
.seconds(5)
.send()
```
@@ -154,7 +156,7 @@ use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->persistent() // [tl! focus]
->persistent()
->send();
```
@@ -164,54 +166,21 @@ Or with JavaScript:
new Notification()
.title('Saved successfully')
.success()
.persistent() // [tl! focus]
.persistent()
.send()
```
## Body
## Setting body text
Additional notification text can be shown in the body. Similar to the title, it supports Markdown:
```php
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.') // [tl! focus]
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.') // [tl! focus]
.send()
```
![Notification with Markdown body](https://user-images.githubusercontent.com/44533235/180995813-ce93e747-0f66-4fc5-becb-7e535fb80e46.png)
## Actions
Notifications support actions, which are buttons that render below the content of the notification. They can open a URL or emit a Livewire event. Actions can be defined as follows:
```php
use Filament\Notifications\Actions\Action; // [tl! focus]
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([ // [tl! focus:start]
Action::make('view')
->button(),
Action::make('undo')
->color('gray'),
]) // [tl! focus:end]
->send();
```
@@ -222,12 +191,45 @@ new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([ // [tl! focus:start]
.send()
```
![Notification with Markdown body](https://user-images.githubusercontent.com/44533235/180995813-ce93e747-0f66-4fc5-becb-7e535fb80e46.png)
## Adding notification actions
Notifications support [actions](../actions/trigger-button), which are buttons that render below the content of the notification. They can open a URL or emit a Livewire event. Actions can be defined as follows:
```php
use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button(),
Action::make('undo')
->color('gray'),
])
->send();
```
Or with JavaScript:
```js
new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button(),
new NotificationAction('undo')
.color('gray'),
]) // [tl! focus:end]
])
.send()
```
@@ -235,7 +237,7 @@ new Notification()
You can learn more about how to style action buttons [here](../actions/trigger-button).
### Opening URLs from actions
### Opening URLs from notification actions
You can open a URL, optionally in a new tab, when clicking on an action:
@@ -250,7 +252,7 @@ Notification::make()
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true) // [tl! focus]
->url(route('posts.show', $post), shouldOpenInNewTab: true)
Action::make('undo')
->color('gray'),
])
@@ -267,15 +269,15 @@ new Notification()
.actions([
new NotificationAction('view')
.button()
.url('/view') // [tl! focus:start]
.openUrlInNewTab(), // [tl! focus:end]
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('gray'),
])
.send()
```
### Emitting Livewire events from actions
### Emitting Livewire events from notification actions
Sometimes you want to execute additional code when a notification action is clicked. This can be achieved by setting a Livewire event which should be emitted on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:
@@ -293,7 +295,7 @@ Notification::make()
->url(route('posts.show', $post), shouldOpenInNewTab: true),
Action::make('undo')
->color('gray')
->emit('undoEditingPost', [$post->id]), // [tl! focus]
->emit('undoEditingPost', [$post->id]),
])
->send();
```
@@ -303,15 +305,15 @@ You can also `emitSelf`, `emitUp` and `emitTo`:
```php
Action::make('undo')
->color('secondary')
->emitSelf('undoEditingPost', [$post->id]) // [tl! focus]
->emitSelf('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitUp('undoEditingPost', [$post->id]) // [tl! focus]
->emitUp('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitTo('another_component', 'undoEditingPost', [$post->id]) // [tl! focus]
->emitTo('another_component', 'undoEditingPost', [$post->id])
```
Or with JavaScript:
@@ -328,7 +330,7 @@ new Notification()
.openUrlInNewTab(),
new NotificationAction('undo')
.color('gray')
.emit('undoEditingPost'), // [tl! focus]
.emit('undoEditingPost'),
])
.send()
```
@@ -338,17 +340,18 @@ Similarly, `emitSelf`, `emitUp` and `emitTo` are also available:
```js
new NotificationAction('undo')
.color('secondary')
.emitSelf('undoEditingPost') // [tl! focus]
.emitSelf('undoEditingPost')
new NotificationAction('undo')
.color('secondary')
.emitUp('undoEditingPost') // [tl! focus]
.emitUp('undoEditingPost')
new NotificationAction('undo')
.color('secondary')
.emitTo('another_component', 'undoEditingPost') // [tl! focus]
.emitTo('another_component', 'undoEditingPost')
```
### Closing notifications
### Closing notifications from actions
After opening a URL or emitting an event from your action, you may want to close the notification right away:
@@ -367,7 +370,7 @@ Notification::make()
Action::make('undo')
->color('gray')
->emit('undoEditingPost', [$post->id])
->close(), // [tl! focus]
->close(),
])
->send();
```
@@ -387,7 +390,7 @@ new Notification()
new NotificationAction('undo')
.color('gray')
.emit('undoEditingPost')
.close(), // [tl! focus]
.close(),
])
.send()
```
packages/notifications/docs/03-database-notifications.md
+7 -5
View File
@@ -2,6 +2,8 @@
title: Database notifications
---
## Overview
> To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere.
Before we start, make sure that the [Laravel notifications table](https://laravel.com/docs/notifications#database-prerequisites) is added to your database:
@@ -43,7 +45,7 @@ Notifications::databaseNotificationsTrigger('filament-notifications.database-not
Now, simply move the `@livewire('notifications')` component to the position in your HTML that you wish to render the database notifications trigger button. It should appear, and open the database notifications modal when clicked!
## Sending notifications
## Sending database notifications
There are several ways to send database notifications, depending on which one suits you best.
@@ -87,11 +89,11 @@ public function toDatabase(User $notifiable): array
}
```
## Receiving notifications
## Receiving database notifications
Without any setup, new database notifications will only be received when the page is first loaded.
### Polling
### Polling for new database notifications
Polling is the practice of periodically making a request to the server to check for new notifications. This is a good approach as the setup is simple, but some may say that it is not a scalable solution as it increases server load.
@@ -113,7 +115,7 @@ Notifications::databaseNotifications();
Notifications::databaseNotificationsPollingInterval(null);
```
### Echo
### Using Echo to receive new database notifications with websockets
Alternatively, the package has a native integration with [Laravel Echo](https://laravel.com/docs/broadcasting#client-side-installation). Make sure Echo is installed, as well as a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher.
@@ -132,7 +134,7 @@ Notification::make()
event(new DatabaseNotificationsSent($recipient));
```
## Opening the notifications modal
## Opening the database notifications modal
Instead of rendering the trigger button as described above, you can always open the database notifications modal from anywhere by dispatching an `open-modal` browser event:
packages/notifications/docs/04-broadcast-notifications.md
+3 -1
View File
@@ -2,13 +2,15 @@
title: Broadcast notifications
---
## Overview
> To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere.
By default, Filament will send flash notifications via the Laravel session. However, you may wish that your notifications are "broadcast" to a user in real-time, instead. This could be used to send a temporary success notification from a queued job after it has finished processing.
We have a native integration with [Laravel Echo](https://laravel.com/docs/broadcasting#client-side-installation). Make sure Echo is installed, as well as a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher.
## Sending notifications
## Sending broadcast notifications
There are several ways to send broadcast notifications, depending on which one suits you best.
packages/notifications/docs/05-customizing-notifications.md
+4 -2
View File
@@ -2,6 +2,8 @@
title: Customizing notifications
---
## Overview
Notifications come fully styled out of the box. However, if you want to apply your own styling or use a custom view to render notifications, there's multiple options.
## Styling notifications
@@ -17,7 +19,7 @@ Notifications have dedicated CSS classes you can hook into to apply your own sty
- `filament-notifications-body`
- `filament-notifications-actions`
## Custom notification view
## Using a custom notification view
If your desired customization can't be achieved using the CSS classes above, you can create a custom view to render the notification. To configure the notification view, call the static `configureUsing()` method inside a service provider's `boot()` method and specify the view to use:
@@ -64,7 +66,7 @@ Getters for all notification properties will be available in the view. So, a cus
</x-filament-notifications::notification>
```
## Custom notification object
## Using a custom notification object
Maybe your notifications require additional functionality that's not defined in the package's `Notification` class. Then you can create your own `Notification` class, which extends the package's `Notification` class. For example, your notification design might need a size property.
packages/notifications/docs/06-testing.md
+3 -1
View File
@@ -2,9 +2,11 @@
title: Testing
---
## Overview
All examples in this guide will be written using [Pest](https://pestphp.com). However, you can easily adapt this to PHPUnit.
## Session notifications
## Testing session notifications
To check if a notification was sent using the session, use the `assertNotified()` helper:
packages/tables/docs/01-installation.md
+4 -4
View File
@@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after
```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus]
import laravel, { refreshPaths } from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [ // [tl! focus:start]
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
], // [tl! focus:end]
],
}),
],
})
@@ -134,7 +134,7 @@ const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```
packages/tables/docs/02-getting-started.md
+6 -6
View File
@@ -22,12 +22,12 @@ use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([ // [tl! focus:start]
->columns([
TextColumn::make('title'),
TextColumn::make('slug'),
IconColumn::make('is_featured')
->boolean(),
]); // [tl! focus:end]
]);
}
```
@@ -82,7 +82,7 @@ public function table(Table $table): Table
->schema([
// ...
])
->filters([ // [tl! focus:start]
->filters([
Filter::make('is_featured'),
SelectFilter::make('status')
->options([
@@ -90,7 +90,7 @@ public function table(Table $table): Table
'reviewing' => 'Reviewing',
'published' => 'Published',
]),
]); // [tl! focus:end]
]);
}
```
@@ -116,7 +116,7 @@ public function table(Table $table): Table
->schema([
// ...
])
->actions([ // [tl! focus:start]
->actions([
Action::make('feature')
->action(function (Post $record) {
$record->is_featured = true;
@@ -132,7 +132,7 @@ public function table(Table $table): Table
])
->bulkActions([
DeleteBulkAction::make(),
]); // [tl! focus:end]
]);
}
```
packages/tables/docs/08-adding-a-table-to-a-livewire-component.md
+3 -3
View File
@@ -47,9 +47,9 @@ use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class ListProducts extends Component implements HasTable // [tl! focus]
class ListProducts extends Component implements HasTable
{
use InteractsWithTable; // [tl! focus]
use InteractsWithTable;
public function table(Table $table): Table
{
@@ -67,7 +67,7 @@ class ListProducts extends Component implements HasTable // [tl! focus]
->bulkActions([
// ...
]);
} // [tl! focus:start]
}
public function render(): View
{
packages/widgets/docs/01-installation.md
+4 -4
View File
@@ -106,16 +106,16 @@ You may also want to update your `vite.config.js` file to refresh the page after
```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus]
import laravel, { refreshPaths } from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [ // [tl! focus:start]
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
], // [tl! focus:end]
],
}),
],
})
@@ -132,7 +132,7 @@ const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
require('tailwindcss'),
])
```