Copy to Clipboard for Larvel Orchid Column

Question

I have a question if someone else was in this kind of situation maybe they have a solution, for Laravel Orchid im trying to make a Copy to Clipboard Button for the Column Name with the clipboard.js. I didn't get how to use it with Laravel Orchid for other Projects it was okay.

my layout looks like this :

...
protected function columns(): array
    {
        return [
            TD::make('name', 'Name')
                ->render(function ($item) {
                    return
                        Group::make([
                            Link::make($item->name)->route('platform.item.show', $item),
                            Button::make('myBtn')->id('#myBtn')
                        ]);
                })->sort(),
    ....

but with the click on the button im getting only an error:

TypeError
Argument 1 passed to Orchid\Screen\Screen::callMethod() must be of the type string, null given, called in /Volumes/T5/www/inventory-manager-laravel/vendor/orchid/platform/src/Screen/Screen.php on line 179

what i want is i have in my script.js a function which listening to this id and using then the clipboard js, is there a better way for achieving my goal what am i doing wrong ?

Thanks in advance

Answer 1

Jaba, as far as I understand, the button must have a method

Button::make('myBtn')->id('#myBtn')->method('foo'). Doc

method('methodName') – when clicked, the form will be sent to the specified method within the current screen

So, you could use Link::make('myBtn')->id('#myBtn') and style it with ->class('foo-class'). Total: Link::make('myBtn')->class('btn btn-primary')->id('#myBtn');

Answer 2

I couldn't figure a good way out, for now I came up with a quick and dirty solution which is fine for now, but not the way it should be :

TD::make( 'name', 'Name')
    ->render(function ($item) {
        return Group::make([
            $item->name,
            Link::make()
                ->route('platform.item.show', $item)
                    ->icon('action-redo')
                         ->id('myBtn')
                              ->type(Color::INFO()),
                        ])->autoWidth();
                    }),

I'm returning the name as string so the user can copy it and add a button to go to the actual page itself.

For what I try to get the actual copy to clipboard is:

I added in the same class following (I couldn't copy my code without loosing the formatting sorry for the image)

and in the column I build it like this :

    TD::make( 'name', 'Name')
                ->render(function ($item) {
                    $value = $item->name;
                    $button = '<button id="myBtn" class="btn btn-secondary" data-clipboard-text="'.$value.'">Copy</button>';
                    return Group::make([
                        $button,
                        $item->name,
                    ])->autoWidth();
                }),

I also try now to get the clipboard.js with cdn instead of installing it with no success

The second method was with jQuery like Multi_Pony suggested but only the 1st element is seen and working with this :

$("#myBtn").click(function(){
    alert("The paragraph was clicked.");
});