CODEWITHSUNDEEP
angular
Ajay Kalkoti
Ajay Kalkoti

Reputation: 135

Not able to filter records using pipe on click of Button

I am not able to filter the records as required by me.What I desire is on click of All no filter should be applied.On Click of other option the filter should be applied.

HTML

<div class="container " style="padding-top:100px">
     <div class="row">
      <div class="input-group">
        <div class="input-group-btn">
          <!-- <label for="manageType">All</label> -->
          <select [(ngModel)]="mType" name="manageTypejj" id="manageType" class="form-control">

                 <option *ngFor="let type of manageType;" [ngValue]="type.mapping"   >{{type.name}} </option>

           </select>
        </div>
        <input type="text" class="form-control" [(ngModel)]="search" />

        <div class="input-group-btn">
          <button class="btn btn-info" (click)="manageTypeFilter(projects,search,mType)">
           <i class="fa fa-search" aria-hidden="true"></i>
           </button>
        </div>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>SL</th>
          <th>Ref</th>
          <th>Project Name</th>
          <th>Product Owner</th>
          <th>Project Type</th>
          <th>Remaining Days</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let project of projects  ;let ndx = index" >
          <td>{{ndx+1}}</td>
          <td>{{project.ref}}</td>
          <td>{{project.projectName}}</td>
          <td>{{project.productOwner}}</td>
          <td>{{project.projectType}}</td>
          <td>{{project.days}}</td>
          <td>{{project.status}}</td>
        </tr>
       </tbody>
    </table>
  </div>

Here is the Pipe Code

PIPE.TS

@Pipe({
  name: 'manageMyProjectPipe',
  pure: false
})
export class ManageMyProjectPipePipe implements PipeTransform {

  transform(projeccts: ManageProject[], filter?: string,dropdown?:any): any {
  console.log("filter>>>"+ filter);
  console.log("dropdown>>>"+ dropdown);
  console.log("dropdown json>>>"+ JSON.stringify(dropdown));

      if( !filter || (filter && dropdown== 'All' )  ){
     //      console.log("Returning full array");
          return projeccts;
        }

        if(dropdown && filter )
          return  projeccts.filter(mtype=>mtype[dropdown].toUpperCase().indexOf(filter.toUpperCase())!==-1)
        else 
          return null;
        // return null;  


  }

}

Here is the click of the button code defined for handling the pipe

MANAGE-PROJECT.TS

 manageTypeFilter(projects,search,mType){

   console.log("projects"+this.projects);
   console.log("search "+search);
   console.log("mType "+mType);

   if(mType !== 'All'){
         let managePipe = new ManageMyProjectPipePipe();
        this.projects = managePipe.transform(projects,search,mType);

   }
   else{
         this.projects = this.projects2;
   }

 }

Can you please tell me where am going wrong in filtering.Is this the right approach.Please suggest.

Upvotes: 1

Views: 467

Answers (1)

Ajay Kalkoti
Ajay Kalkoti

Reputation: 135

I removed the Pipe as I was not using the Pipe directly and coded inside the TS File as follows.

  manageTypeFilter(projects, filter, dropdown) {

    if (dropdown !== 'All' && filter) {
      console.log("comes inside filter");
      this.projects = this.projects2.filter(mtype => mtype[dropdown].toUpperCase().indexOf(filter.toUpperCase()) !== -1)
    }
    else if (dropdown === 'All' || (dropdown !== 'All' && filter === '')) {
      console.log("Comes inside returning all records");
      this.projects = this.projects2;
    }

  }

Upvotes: 1

Related Questions