New column clipboard

[adriallongarriu]

WHY

I need a be able to copy the content of the column to the clipboard. Basically is a text column with an icon and on click the span copy the content to the clipboard.
Maybe this can be and optional parameter on the basic column text buy for now i created a separated column.
Using a column this can be used in lists and in show view.
On click show a Noty to the user to report whether it was able to be copied or not

HOW

How did you achieve that, in technical terms?

Use javascript to copy text to clipboard using await navigator.clipboard.writeText(text);

Is it a breaking change?

No

How can we test the before & after?

Note: on localhost only show the error message. To work need https otherwise the browser will block the action.

  [
        'name'  => 'name',
        'label' => trans('backpack.name'),
        'type' => 'clipboard',
  ],

[o15a3d4l11s2]

It is much nicer than the workaround I have used 😅

CRUD::field('name')->type('text')->suffix('<button type="button" class="backpack-copy"><i class="lar la-clipboard"></i></button>')

and then created a clipboard.js file with

$(".backpack-copy").on("click", function () {
    const value = $(this).closest('.input-group').find('input').val();
    if (value) {
        navigator.clipboard.writeText(value);
    }
});

and added it to the CRUD with

Widget::add()->type('script')->content(basset(base_path('resources/js/admin/clipboard.js')));

Update
Just realised you have created a column, not a field.

[karandatwani92]

Hey @adriallongarriu Thanks for coming up with this cool little useful feature. I appreciate your effort & the idea.

Hey @tabacitu @pxpm
How do find the implementation?

[pxpm]

Thanks @adriallongarriu for the PR 🙏

I like the copy feature. I've need it myself, and as @o15a3d4l11s2 showed, he also probably needed it in other contexts.

I am just not sure about the implementation. Should we add this as a new column, or add the copy ability to existing columns ?

I think the later is the most appropriate, as for example you can have a date column with a specific format, and when you copy you expect to copy the formatted date. Or in an upload copy the asset url, not only the displayed text.

I am postponing this decision to v7.

Cheers

[susanu]

Hi,

I think this copy feature should be an option for all columns and fields.
Think about a date field or a dropdown field, it's not possible to copy the text inside.

Cheers!

[pxpm]

Hi,

I think this copy feature should be an option for all columns and fields. Think about a date field or a dropdown field, it's not possible to copy the text inside.

Cheers!

Sure it is, all the columns have a "display value" and the "original value". For example a dropdown, the value would be "1" (the key), but the display value would be "My Article With Id 1".
We just need to store in all the columns, something like data-copy-to-clipboard="My Article With Id 1".

But this raises many questions, for example, what would you copy in a text column where the text is truncated ? "My Article Wi..." Copy the truncated text, or the original?
And when you add prefix or suffix, should that be copied too ?

We didn't get out of the text column, and we have already so many questions and some of them are tricky.

This seems like a "simple" thing, but to make it general there are some use cases and caveats in specific fields that require a lot of thought.

I think after we decide on how we are going to tackle all the problems we can foresee, the implementation will be rather "easy" I think. I like this idea, I think it will not be very difficult to implement, the difficulty is in "writting the feature spec", that's why I keep this open as I think we should work on something like this... in the next version. 🙏

[susanu]

But this raises many questions, for example, what would you copy in a text column where the text is truncated ? "My Article Wi..." Copy the truncated text, or the original?
And when you add prefix or suffix, should that be copied too ?

If the text is truncated, copy the original.
If the column has prefix and/or suffix, copy with those included.
If the developers wants to change any of these behaviors, he can set something like 'clipboardValue' => fn($entry, $column) => 'copy me'

For the first version of this feature i think is ok to build something that will cover the simple use cases and then build from there.

[pxpm]

Sure, I can review a PR for CRUD columns if you are willing to work on this now.
I see this atm to be something like this:

// no copy
CRUD::column('title'); 

 // copy with our defaults
CRUD::column('title')->copy(true);

// copy what developer wants
CRUD::column('title')
    ->copy(fn($entry, $column, $columnProcessedValue, $columnOriginalValue) => strtoupper($columnProcessedValue)); 

Probably create a inc/copy_column.blade.php with the js logic etc. and do a @includeWhen(isset($column['copy']) && $column['copy'] !== false) in the column files.

I am sure even in crud some columns will be tricky by the way they are built but if you are willing to give it a shot, go ahead 🙏

Cheers