1. Go to this page and download the library: Download jaocero/activity-timeline library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
jaocero / activity-timeline example snippets
public function activityTimelineInfolist(Infolist $infolist): Infolist
{
return $infolist
->state([
'activities' => [
[
'title' => "Published Article 🔥 - <span class='italic font-normal dark:text-success-400 text-success-600'>Published with Laravel Filament and Tailwind CSS</span>",
'description' => "<span>Approved and published. Here is the <a href='#' class='font-bold hover:underline dark:text-orange-300'>link.</a></span>",
'status' => 'published',
'created_at' => now()->addDays(8),
],
[
'title' => 'Reviewing Article - Final Touches',
'description' => "<span class='italic'>Reviewing the article and making it ready for publication.</span>",
'status' => '',
'created_at' => now()->addDays(5),
],
[
'title' => "Drafting Article - <span class='text-sm italic font-normal text-purple-800 dark:text-purple-300'>Make it ready for review</span>",
'description' => 'Drafting the article and making it ready for review.',
'status' => 'drafting',
'created_at' => now()->addDays(2),
],
[
'title' => 'Ideation - Looking for Ideas 🤯',
'description' => 'Idea for my article.',
'status' => 'ideation',
'created_at' => now()->subDays(7),
]
]
])
->schema([
/*
You should enclose the entire components within a personalized "ActivitySection" entry.
This section functions identically to the repeater entry; you simply have to provide the array state's key.
*/
ActivitySection::make('activities')
->label('My Activities')
->description('These are the activities that have been recorded.')
->schema([
ActivityTitle::make('title')
->placeholder('No title is set')
->allowHtml(), // Be aware that you will need to ensure that the HTML is safe to render, otherwise your application will be vulnerable to XSS attacks.
ActivityDescription::make('description')
->placeholder('No description is set')
->allowHtml(),
ActivityDate::make('created_at')
->date('F j, Y', 'Asia/Manila')
->placeholder('No date is set.'),
ActivityIcon::make('status')
->icon(fn (string | null $state): string | null => match ($state) {
'ideation' => 'heroicon-m-light-bulb',
'drafting' => 'heroicon-m-bolt',
'reviewing' => 'heroicon-m-document-magnifying-glass',
'published' => 'heroicon-m-rocket-launch',
default => null,
})
->color(fn (string | null $state): string | null => match ($state) {
'ideation' => 'purple',
'drafting' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
}),
])
->showItemsCount(2) // Show up to 2 items
->showItemsLabel('View Old') // Show "View Old" as link label
->showItemsIcon('heroicon-m-chevron-down') // Show button icon
->showItemsColor('gray') // Show button color and it supports all colors
->aside(true)
->headingVisible(true) // make heading visible or not
->extraAttributes(['class'=>'my-new-class']) // add extra class
]);
}
protected $activities;
public function __construct()
{
$this->activities = User::query()->with('activities')->where('id', auth()->user()->id)->first();
}
public function activityTimelineInfolist(Infolist $infolist): Infolist
{
return $infolist
->record($this->activities)
// ... remaining code
}
public function activityTimelineInfolist(Infolist $infolist): Infolist
{
return $infolist
->state([
'activities' => []
)]
->schema([
ActivitySection::make('activities')
// ... other code
->emptyStateHeading('No activities yet.')
->emptyStateDescription('Check back later for activities that have been recorded.')
->emptyStateIcon('heroicon-o-bolt-slash')
])
}
use App\Filament\Resources\OrderResource;
use JaOcero\ActivityTimeline\Pages\ActivityTimelinePage;
class ViewOrderActivities extends ActivityTimelinePage
{
protected static string $resource = OrderResource::class;
}
use App\Filament\Resources\OrderResource;
use JaOcero\ActivityTimeline\Pages\ActivityTimelinePage;
class ViewOrderActivities extends ActivityTimelinePage
{
protected static string $resource = OrderResource::class;
protected function configuration(): array
{
return [
'activity_section' => [
'label' => 'Activities', // label for the section
'description' => 'These are the activities that have been recorded.', // description for the section
'show_items_count' => 0, // show the number of items to be shown
'show_items_label' => 'Show more', // show button label
'show_items_icon' => 'heroicon-o-chevron-down', // show button icon,
'show_items_color' => 'gray', // show button color,
'aside' => true, // show the section in the aside
'empty_state_heading' => 'No activities yet', // heading for the empty state
'empty_state_description' => 'Check back later for activities that have been recorded.', // description for the empty state
'empty_state_icon' => 'heroicon-o-bolt-slash', // icon for the empty state
'heading_visible' => true, // show the heading
'extra_attributes' => [], // extra attributes
],
'activity_title' => [
'placeholder' => 'No title is set', // this will show when there is no title
'allow_html' => true, // set true to allow html in the title
/**
* You are free to adjust the state before displaying it on your page.
* Take note that the state returns these data below:
* [
* 'log_name' => $activity->log_name,
* 'description' => $activity->description,
* 'subject' => $activity->subject,
* 'event' => $activity->event,
* 'causer' => $activity->causer,
* 'properties' => json_decode($activity->properties, true),
* 'batch_uuid' => $activity->batch_uuid,
* ]
* If you wish to make modifications, please refer to the default code in the HasSetting trait.
*/
// 'modify_state' => function (array $state) {
//
// }
],
'activity_description' => [
'placeholder' => 'No description is set', // this will show when there is no description
'allow_html' => true, // set true to allow html in the description
/**
* You are free to adjust the state before displaying it on your page.
* Take note that the state returns these data below:
* [
* 'log_name' => $activity->log_name,
* 'description' => $activity->description,
* 'subject' => $activity->subject,
* 'event' => $activity->event,
* 'causer' => $activity->causer,
* 'properties' => json_decode($activity->properties, true),
* 'batch_uuid' => $activity->batch_uuid,
* ]
* If you wish to make modifications, please refer to the default code in the HasSetting trait.
*/
// 'modify_state' => function (array $state) {
//
// }
],
'activity_date' => [
'name' => 'created_at', // or updated_at
'date' => 'F j, Y g:i A', // date format
'placeholder' => 'No date is set', // this will show when there is no date
],
'activity_icon' => [
'icon' => fn (string | null $state): string | null => match ($state) {
/**
* 'event_name' => 'heroicon-o-calendar',
* ... and more
*/
default => null
},
'color' => fn (string | null $state): string | null => match ($state) {
/**
* 'event_name' => 'primary',
* ... and more
*/
default => null
},
]
];
}
}