l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 486 forks source link

Add ngPipeArgs #1641

Closed adrien-syrotnik closed 2 years ago

adrien-syrotnik commented 2 years ago

:rocket: Feature request

Problem : couldn't pass args to the ngPipeInstance

I wanted to create new pipes with custom args in transform() method, but ngPipeInstance doesn't do it.

I think a ngPipeArgs attribute can be a good idea (any[] type).

I tried this, but I'm surprised you didn't do it before, is there a reason ?

DataTableDirective.prototype.applyNgPipeTransform = function(row, columns) {
        // Filter columns with pipe declared
        var colsWithPipe = columns.filter(function(x) { return x.ngPipeInstance && !x.ngTemplateRef; });
        colsWithPipe.forEach(function(el) {
            var pipe = el.ngPipeInstance;
            var pipeArgs = el.ngPipeArgs ? el.ngPipeArgs : []; //<-- Create the pipeArgs from ngPipeArgs, [] if null
            // find index of column using `data` attr
            var i = columns.findIndex(function(e) { return e.data === el.data; });
            // get <td> element which holds data using index
            var rowFromCol = row.childNodes.item(i);
            // Transform data with Pipe
            var rowVal = $(rowFromCol).text();
            var rowValAfter = pipe.transform(rowVal, ...pipeArgs);  //<-- Add pipeArgs in transform
            // Apply transformed string to <td>
            $(rowFromCol).text(rowValAfter);
        });
    };

Thank you for your answer, Adrien.

shanmukhateja commented 2 years ago

Hi Adrien,

I've been wanting to do this for a long time but getting to commit to it was hard part.

Since you have it working, do you mind raising a PR? You will find details in CONTRIBUTING.md

Please include a tests case in the spec file for this.

adrien-syrotnik commented 2 years ago

Hi,

I would like to create the PR but I don't really know how to create the spec file πŸ˜…. Do you have an example to help me do it ? I saw the DEVELOPER.md guide to run test, but i don't see how to test the new directive in this repo.

Sincerly.

shanmukhateja commented 2 years ago

Hi,

You could try adding new test case to ngPipe component in demo app. The actual directive doesn't have working unit tests yet.

And yes - it's DEVELOPER.md πŸ˜…

shanmukhateja commented 2 years ago

Closing this as we've merged the related PR #1642