0

I am trying to enhance my LWC Skill, so I am trying to mimic the file object in SF. So file object in SF classic we have search criteria which is not available in Lightning. Hence I am trying to add a search bar owned by me by trying to build the whole thing from scratch. Now I am stuck on how to filter data of data table without sending the search key to the apex class below is my Html and JS file.

Html

  <template>
    <lightning-layout multiple-rows=true>
        <lightning-layout-item size="12">
            <lightning-card variant="narrow">
                <div slot="title">
                <h5>Files</h5>
                <h1><b>{chooseOptionName}</b></h1>
                <h5>{sizeofOptionList} items Sorted by Last Modified Date</h5>
                </div>
                <div slot ="actions" class="button">
                  <lightning-button label="Upload Files" onclick={handleUploadFiles} ></lightning-button>
                </div>
            </lightning-card>
        </lightning-layout-item>
    <lightning-layout-item size = "2">
        <div class="options page-section page-right">
            <span>
                <ul>
                    <li><a onclick={handleOptionClick}>Owned by Me</a></li><br/>
                    <li><a onclick={handleOptionClick}>Shared with Me</a></li><br/>
                    <li><a onclick={handleOptionClick}>Recent</a></li><br/>
                    <li><a onclick={handleOptionClick}>Following</a></li><br/>
                    <li><a onclick={handleOptionClick}>Libraries</a></li><br/>
                </ul>
            </span>
            </div>
    </lightning-layout-item>
    <lightning-layout-item size="10">
        <lightning-layout>
           <lightning-layout-item size="5" class="search">

              <lightning-input id="search-01" type="search" onchange={handleSearch} onemptied={handleEmpty}></lightning-input>

              <lightning-button label="Search" variant="brand" onclick={handleSearchButton} ></lightning-button>


            </lightning-layout-item>
        </lightning-layout>
              <div class="options">
              <lightning-datatable 
                key-field="Id"
                data={contentDoc}
                columns={columns}
                hide-checkbox-column=true>
              </lightning-datatable>
              </div>
    </lightning-layout-item>
    </lightning-layout>

JS File

export default class SearchFile extends LightningElement {
@track chooseOptionName = 'Owned by Me';
@track sizeofOptionList;
@track contentDoc = [];
userId = Id;
@track searchKey ='';
columns = cols;

handleSearch(event){
    this.searchKey = event.target.value;
    if(this.searchKey === ''){
        this.getFile();
    }

}

handleSearchButton(){

    if(this.contentDoc.length >0 && this.searchKey !=''){
       console.log('this is search key',this.searchKey);
       let doc = this.filterObj(this.contentDoc,this.searchKey);
       console.log('This is Content doc',this.doc);
    }
}

filterObj(arrayOfObject,string){
    Console.log('I am in filter',arrayOfObject);
    return arrayOfObject.filter(obj => 
        Object.keys(obj).some(k => obj[k].toLowerCase().includes(string.toLowerCase())));

}

handleEmpty(event){
    console.log('Close box is clicked');
}

handleOptionClick(event){
   this.chooseOptionName = event.target.text;
   console.log(this.chooseOptionName);
   if(this.chooseOptionName.includes("Owned")){
       this.getFile();
   }
}

getFile(){
    getFileOwned({userId : this.userId})
           .then(result => {
               if(result.length >0){
               const contentList = result;
               this.sizeofOptionList = result.length;
               console.log('This is Option List size ',this.sizeofOptionList);
               let ownerName;
               let titleUrl;
               this.contentDoc = contentList.map(row => {
                titleUrl = `/${row.Id}`;
                ownerName = row.Owner.Name;
                return {...row,titleUrl,ownerName}
               });
               console.log(this.contentDoc);
               }
           })
           .catch(error => {
               console.log(error);
               this.contentDoc = [];
           });

}

get content (){
    if(this.contentDoc){
        return true;
    }
}

Apex Handler Class

public with sharing class searchFileHandler {
    @AuraEnabled(cacheable = true)
    public static List<ContentDocument> getFileOwned(String userId){
          return [SELECT Id,FileExtension,FileType,Title,Owner.Name,LastModifiedDate
                   FROM ContentDocument ORDER BY LastModifiedDate desc];

    }
}
0

You need a separate backing variable to store all the results, and then a separate variable for just the displayed values. Here's a playground I created that demonstrates this.

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    _allData = [
        { id: '1', name: 'Marc Benioff' },
        { id: '2', name: 'Bill Gates' },
        { id: '3', name: 'Shigeru Miyamoto' },
        { id: '4', name: 'Arnold Schwarzenegger'}
    ];
    data = [];
    columns = [
        { label: 'People I Have Heard Of', fieldName: 'name' }
    ];
    connectedCallback() {
        this.data = [...this._allData];
    }
    updateSearch(event) {
        var regex = new RegExp(event.target.value,'gi')
        this.data = this._allData.filter(
            row => regex.test(row.name)
        );
    }
}

<template>
    <lightning-input type="search" label="Search" onchange={updateSearch}>
    </lightning-input>
    <lightning-datatable data={data} columns={columns} key-field="id">
    </lightning-datatable>
</template>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.