DEV Community: Rupadana

Announcing the Latest Updates to Filament API Service

Rupadana — Sat, 18 Jan 2025 13:19:54 +0000

We’re excited to introduce the latest updates to the Filament API Service, designed to enhance your development experience and streamline API integration. This update brings significant new features and improvements to make your workflow even smoother. Here's what's new:

1. Autogenerated API Documentation Using Scramble
Gone are the days of manually writing API documentation! With the latest update, the Filament API Service now leverages Scramble to automatically generate clear, concise, and comprehensive API documentation.

All your API routes and details are now neatly organized and available at the /docs/api endpoint. This ensures developers can quickly access and understand the structure, parameters, and expected responses of your API. The autogenerated documentation saves time, reduces errors, and helps you maintain consistency across projects.

2. Built-In Authentication API
Starting from version 3.4, the plugin includes built-in authentication routes out of the box, making it easier than ever to implement secure user access.

This built-in functionality eliminates the need for setting up authentication manually, enabling you to focus on building your core features.

3. Seamless Integration with Filament Shield
We understand the importance of robust role-based access control (RBAC) for your applications. That’s why we’ve made it easier than ever to integrate with Filament Shield.

We’re committed to making your development journey more efficient and enjoyable. Let us know what you think of these updates, and feel free to share your feedback or feature requests!

Here you can get started : https://github.com/rupadana/filament-api-service

Filament Tips : Modal View on the Table Action

Rupadana — Tue, 24 Oct 2023 10:07:40 +0000

Introduction

Today, i got question from my sponsors. they ask me how to change filamentphp table row action (default, will be redirect to edit / view page). so, what he wanted is showing a modal slideOver view after click the table row (a record of the list).

Let's Begin

In this case, im using a resource called Example. So, don't be confused.

So, we need set url record to null and add a ViewAction.

public static function table(Table $table): Table
{
    return $table
           ->actions([
               ViewAction::make()->slideOver()
           ])
           ->recordUrl(url: null)
}

it will be look like this

And it don't stop there, he didn't want the view show a disabled from, but a information like infolist.

in filament, i didn't found how to change the form to the infolist.

Then?

Create a custom view, name it example_view.blade.php

Next things is, how we get a record of clicked row.

so, in ListRecord there is a property called cachedMountedTableActionRecord. They cached a clicked row (basically, it can used for an actions of the table).

Next, im add a method called cachedMountedTableActionRecordInfolist to the ListExample page and return a Infolist.

public function cachedMountedTableActionRecordInfolist(Infolist $infolist) : Infolist
    {
        $data = $this->cachedMountedTableActionRecord;

        return $infolist
            ->state($data->toArray())
            ->schema([
                TextEntry::make('name'),
                TextEntry::make('created_at')
            ]);
    }

Next, modify the example_view.blade.php and call the method.

{{$this->cachedMountedTableActionRecordInfolist}}

Last, Change the ViewAction to Action in the ExampleResource.

public static function table(Table $table): Table
{
    return $table
           ->actions([
               Tables\Actions\Action::make('view')
                    ->slideOver()
                    ->modalContent(view('example_view'))
                    ->modalSubmitAction(false)
                    ->modalCancelActionLabel('Close'),
           ])
           ->recordUrl(url: null)
}

Finally looks like this.

Filamentphp 3 : Custom Database Notification Actions

Rupadana — Sat, 07 Oct 2023 13:45:28 +0000

Introduction

In filamentphp there are called Database notification, which is we can notify specify user. Read documentation

What's The problem?

There are a Mark all as read action. How we can override the method of that action?

Solution

First, we need to create a livewire component, let's call it DatabaseCustomNotifications



php artisan make:livewire DatabaseCustomNotifications

That will be create file in app\Livewire\DatabaseCustomNotifications, and looks like this



<?php

namespace App\Livewire;

use Livewire\Component;

class DatabaseCustomNotifications extends Component
{
}

Next, You need change extends to Filament\Livewire\DatabaseNotifications.



<?php

namespace App\Livewire;

use Filament\Livewire\DatabaseNotifications;
use Livewire\Attributes\On;
use Livewire\Component;

class DatabaseCustomNotifications extends DatabaseNotifications
{
}

Next, Use the livewire component in your blade.



@livewire('database-custom-notifications')

Next, let's override markAllNotificationsAsRead method



<?php

namespace App\Livewire;

use Filament\Livewire\DatabaseNotifications;
use Livewire\Attributes\On;
use Livewire\Component;

class DatabaseCustomNotifications extends DatabaseNotifications
{
    public function markAllNotificationsAsRead(): void
    {
        dd("Got it");
        $this->getUnreadNotificationsQuery()->update(['read_at' => now()]);
    }
}

And finally, you can modify that action.

FilamentApiService : Create a custom handler

Rupadana — Tue, 03 Oct 2023 11:26:17 +0000

Introduction

Today, filament-api-service version 1.0.2 already have CreateHandler by default to create a resource. And i'm adding a command to create a custom handler.

Installation

composer require rupadana/filament-api-service

Usage

U can execute this command to create a custom handler.

php artisan make:filament-api-handler BlogResource

By default i'm using CreateHandler method inside custom handler. U need to update it manualy.

Filamentphp 3 : Input Group with Filament Field

Rupadana — Mon, 02 Oct 2023 15:45:09 +0000

Introduction

I know that filamentphp currently not support InputGroup, so i write this. Hope you helped with it.

Installation

You can install the package via composer:

composer require rupadana/filament-custom-forms

Showing Group Label

InputGroup::make(3)
    ->label('Input Group')
    ->schema([
        TextInput::make('first'),
        Select::make('second'),
        ColorPicker::make('third'),
    ])

Hide Group Label & Show Child Label

InputGroup::make(3)
    ->showChildLabel()
    ->schema([
        TextInput::make('first'),
        Select::make('second'),
        ColorPicker::make('third'),
    ])

How to use Filament Api Service Plugin

Rupadana — Fri, 29 Sep 2023 15:09:07 +0000

Installation

You can install the package via composer:

composer require rupadana/filament-api-service

Usage

php artisan make:filament-api-service BlogResource

Add this code to your routes file, example in routes/api.php

...
use App\Filament\Resources\BlogResource\Api;
...

BlogApiService::routes();

and then you will got this routes:

[GET] '/api/blogs' - Return LengthAwarePaginator
[GET] '/api/blogs/1' - Return single resource
[PUT] '/api/blogs/1' - Update resource
[DELETE] '/api/blogs/1' - Delete resource

Im using "spatie/laravel-query-builder": "^5.3" to handle query and filtering. u can see "spatie/laravel-query-builder": "^5.3" https://spatie.be/docs/laravel-query-builder/v5/introduction

You can specified allowedFilters and allowedFields in your model

Example

class User extends Model {
    public static array $allowedFilters = [
        'name'
    ];

    public static array $allowedFields = [
        'name'
    ];
}

Transform API Response

php artisan make:filament-api-transformer Blog

it will be create BlogTransformer in App\Filament\Resources\BlogResource\Api\Transformers

next step you need to edit & add it to your Resource

    use App\Filament\Resources\BlogResource\Api\Transformers\BlogTransformer;

    class BlogResource extends Resource
    {
        ...
        public static function getApiTransformer() 
        { 
            return BlogTransformer::class; 
        }
        ...
    }

Group Name & Prefix

You can edit prefix & group route name as you want, default im use model singular label;

    class BlogApiService extends ApiService
    {
        ...
        protected static string | null $groupRouteName = 'myblog';
        ...
    }

Renew SSL Let’s Encrypt

Rupadana — Fri, 29 Sep 2023 15:06:39 +0000

Renew

To renew SSL Let's Encrypt you can run the following command

Auto Renew

So that you don't have to bother renewing SSL manually, you can create a cron job to renew automatically. Run the command “crontab -e” and add the following command to the last line.

Generate Free SSL Certonly

Rupadana — Fri, 29 Sep 2023 15:03:11 +0000

Generate SSL

Run the following command in your command line

sudo certbot -d rupadana.my. id --manual --preferred-challenges dns certonly

So, next you will be asked to add a DNS TXT Record to your domain

Add TXT Records

Next, you log in to your DNS Zone Editor and add a TXT Record with the name and content provided by certbot

Check DNS Records

After adding the DNS Text Record, now check https://dnschecker.org

Generate Success

You have successfully generated a certificate file from Let's Encrypt. Next, you only need to configure your web server / proxy

Place the certificate

You can access the certificate that you generated in the /etc/letsencrypt/live/domain.com directory domain.com

Install and Manage Supervisor for Laravel Queue

Rupadana — Fri, 29 Sep 2023 14:52:41 +0000

Introduction

In this post im using ubuntu 22.04, read the installation step below

Installation

Begin by updating your package sources and installing Supervisor:

sudo apt update && sudo apt install supervisor

The supervisor service runs automatically after installation. You can check its status:

sudo systemctl status supervisor

You should receive the following output:

Output
● supervisor.service - Supervisor process control system for UNIX
     Loaded: loaded (/lib/systemd/system/supervisor.service; enabled; vendor preset: enabled)
     Active: active (running) since Wed 2021-11-17 22:56:48 UTC; 5min ago

Add configuration

create app.rupadana.com.conf configuration to /etc/supervisor/conf.d, and paste it

[program:rupadana-app]
process_name=%(program_name)s_%(process_num)02d
command=php /home/rupadana-app/htdocs/app.rupadana.com/artisan queue:work --sleep=3 --tries=3
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true
user=rupadana-app
numprocs=2
redirect_stderr=true
stdout_logfile = /home/app/htdocs/app.rupadana.com/worker.log
stopwaitsecs=3600

and enter this command to run configuration

sudo supervisorctl reread
sudo supervisorctl update

Hide filamentphp default Widget

Rupadana — Fri, 29 Sep 2023 14:51:23 +0000

Introduction

Before continuing, make sure you have installed panel builder.

php artisan filament:install --panels

Edit AdminPanelProvider

Edit file app/Providers/Filament/AdminPanelProvider.php

Here we found default widgets, you can remove it.

$panel
->widgets([
    Widgets\AccountWidget::class,
    Widgets\FilamentInfoWidget::class,
])

Open /admin and widget is gone.

Optimizing Next.js Performance with Code Splitting and Dynamic Imports

Rupadana — Fri, 29 Sep 2023 14:50:17 +0000

Code splitting is a technique that allows you to split your JavaScript bundle into smaller, more manageable chunks, which can improve the performance of your Next.js application. Here's an example of how to use code splitting in Next.js:

Let's assume you have a Next.js project with the following directory structure:

- pages
  - index.js
  - about.js

You can use dynamic imports to split your code into smaller chunks. In this example, we'll split the code for the about page:

// pages/about.js

import { useEffect, useState } from 'react';

// Import the dynamic module using the import() function
const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {
  loading: () => <p>Loading...</p>, // Optional loading component
  ssr: false, // Set ssr to false to enable client-side rendering
});

function About() {
  const [showDynamicComponent, setShowDynamicComponent] = useState(false);

  useEffect(() => {
    // When the component mounts, set showDynamicComponent to true
    setShowDynamicComponent(true);
  }, []);

  return (
    <div>
      <h1>About Page</h1>
      {showDynamicComponent && <DynamicComponent />}
    </div>
  );
}

export default About;

In this example, we're using the dynamic function from the next/dynamic module to load the DynamicComponent dynamically. We provide an optional loading component (

) that is displayed while the dynamic component is being loaded.

The ssr: false option specifies that this component should only be rendered on the client side, which is often desired for code-split components.

Now, let's create the DynamicComponent component that will be dynamically loaded:

// components/DynamicComponent.js

function DynamicComponent() {
  return <p>This component was dynamically loaded.</p>;
}

export default DynamicComponent;

With this setup, the code for the DynamicComponent will be loaded only when the About page is accessed. This can help reduce the initial bundle size and improve the initial loading time of your application.

Remember to run npm install next/dynamic to install the next/dynamic module before using it in your code.

Create Stats overview widgets

Rupadana — Thu, 28 Sep 2023 18:52:15 +0000

Introduction

Filament comes with a "stats overview" widget template, which you can use to display a number of different stats in a single widget, without needing to write a custom view.

Start by creating a widget with the command:

php artisan make:filament-widget StatsOverview --stats-overview

Then return Stat instances from the getStats() method:

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
            Stat::make('Bounce rate', '21%'),
            Stat::make('Average time on page', '3:12'),
        ];
    }
}

Now, check out your widget in the dashboard.