Giter Club home page Giter Club logo

filament-copyactions's Introduction

Filament Copy Actions

A easy-to-use copy actions for Filament Admin

  • Table action to implement dynamic copy content
  • Form action to use with any field
  • Page action to implement dynamic copy button in any page
  • Custom copy table column to simple copy text content

Installation

composer require webbingbrasil/filament-copyactions

Usage

Table Column

Display a table text column with a copy button, the column has all features of the TextColumn and the copy action send column content to clipboard and display a success tooltip

use Webbingbrasil\FilamentCopyActions\Tables\CopyableTextColumn;

CopyableTextColumn::make('brand.name')
    ->successMessage('Brand copied to clipboard')
    ->searchable()
    ->sortable()
    ->toggleable(),

The column has a option to display a description above ou below the text, by default this description is not copied, if you want to copy the description too, use the copyWithDescription method

Success message

You can customize the success message with the successMessage method, the default message is Copied!

Button Icon and Color

You can customize the button icon and color with the icon and iconColor methods

Table Action

Display a table action button, you set the content using copyable method. You can customize the button icon/color using the same methods of the Filament Action.

use Webbingbrasil\FilamentCopyActions\Tables\Actions\CopyAction;

$table
    ->actions([
        CopyAction::make()->copyable(fn ($record) => $record->name),
    ])

Success message

The action will display a copy status, you can customize the success message with the successNotificationMessage method or the error message with the errorNotificationMessage method.

Form Action

If you want to copy a field value, use the CopyAction in your field suffix or prefix. You can customize the button icon/color using the same methods of the Filament Action.

use Webbingbrasil\FilamentCopyActions\Forms\Actions\CopyAction;

Forms\Components\TextInput::make('sku')
    ->label('SKU (Stock Keeping Unit)')
    ->suffixAction(CopyAction::make())
    ->required();
    
Forms\Components\Select::make('shop_brand_id')
    ->relationship('brand', 'name')
    ->prefixAction(\Webbingbrasil\FilamentCopyActions\Forms\Actions\CopyAction::make())
    ->searchable();

You can use this form action in any filament field, the action will copy the field value to clipboard by default, but you can customize the value with the copyable method

Forms\Components\Select::make('shop_brand_id')
    ->relationship('brand', 'name')
    ->prefixAction(\Webbingbrasil\FilamentCopyActions\Forms\Actions\CopyAction::make()->copyable(fn ($component) => $component->getOptionLabel()))
    ->searchable();

Success message

The action will display a copy status, you can customize the success message with the successNotificationMessage method or the error message with the errorNotificationMessage method.

Page Action

You can add CopyAction buttom to any page in filament, just put the action in the actions method of the page. You can customize the button icon/color using the same methods of the Filament Action.

use Webbingbrasil\FilamentCopyActions\Pages\Actions\CopyAction;

protected function getActions(): array
{
    return [
        CopyAction::make()->copyable(fn () => $this->record->name),
    ];
}

The action will display a copy status, you can customize the success message with the successNotificationMessage method or the error message with the errorNotificationMessage method.

Credits

custom table column with copy button and actions to use with any form field, page or table. Actions display a filament notification for status.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.