<template>
    <article>
       <div class="slds-p-around_medium lgc-bg list_view_and_table_container"  id="myDIV">
          <lightning-tile label="Accounts"  type="media" href="javascript:void(0);" class="list_view_container" >
             <lightning-icon slot="media" icon-name="standard:account" size="medium" class="icon_custom_class">
             </lightning-icon>
             <div class="slds-form-element">
                <div class="slds-form-element__control">
                   <div class="slds-combobox_container testCustomCss">
                      <div class={dropdownTriggerClass} aria-expanded="false" aria-haspopup="listbox" role="combobox">
                         <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
                            role="none" onclick={handleClickExtend}>
                            <span class="current_filter">
                               {listViewName}
                               <lightning-icon
                                  class="slds-m-left_x-small slds-button__icon slds-icon-utility-down slds-icon_container forceIcon"
                                  data-data-rendering-service-uid="232" data-aura-rendered-by="371:0"
                                  data-aura-class="forceIcon" icon-name="utility:down" size="x-small">
                               </lightning-icon>
                            </span>
                         </div>
                        
                         <div  class="listViewPickerPanel deActive_ListView uiPanel--default uiPanel positioned south" 
                            aria-hidden="true" tabindex='0'  onfocusout={handelFocusOut} style="outline:none;">
                            <div id="listbox-id-1" class="slds-form-element slds-lookup forceVirtualAutocompleteMenu max_height"
                               role="listbox" >
                               <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                                  <li role="presentation" class="slds-dropdown__header slds-text-heading--label forceVirtualAutocompleteMenuOption">
                                     <div>List Views</div>
                                  </li>
                                  <template for:each={listViewOptions} for:item="option">
                                     <li role="presentation" class="slds-listbox__item" key={option.value}>
                                        <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
                                           data-filter={option.value} onclick={getListViewValue}  
                                           >
                                           <span class="slds-media__figure slds-listbox__option-icon"
                                              data-filter={option.value}>
                                              <template if:true={option.show_option_icon}>
                                                 <lightning-icon icon-name="utility:check" size="xx-small" class="my-icon">
                                                 </lightning-icon>
                                              </template>
                                           </span>
                                           <span class="slds-media__body" data-filter={option.value}>
                                           <span class="slds-truncate" 
                                              data-filter={option.value}>{option.label}</span>
                                           </span>
                                        </div>
                                     </li>
                                  </template>
                               </ul>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </lightning-tile>
       </div>
       <div class="table_cc">
         
<!--list view dataTable start here -->
          <lightning-datatable
          key-field="id"
          columns={lstviewCol}
          data={storeListViewRecords}
          >
  </lightning-datatable>
  <template if:true={isLoading}>
   <lightning-spinner alternative-text="spinner"></lightning-spinner>
</template>
<!--list view dataTable end here -->
          <template if:false={hasRecords}>
             <div class="No_Record_Found_Css">No items to display</div>
          </template>
       </div>
      
          </article>
 </template>

/* 6 July 2021 => */
import {LightningElement,wire} from 'lwc';
import fetchListView from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView';

import {getListUi } from 'lightning/uiListApi';
import Account_OBJECT from '@salesforce/schema/Account';
import Name_FIELD from '@salesforce/schema/Account.Name';

export default class ListViewInLwc extends LightningElement {
    lstviewCol;
    storeListViewRecords;
    isLoading = false;
	hasRecords = false;
	listViewOptions = [];
	//records;
  
	error;
	listViewName = 'Recently Viewed Accounts';
	defaultListView = "RecentlyViewedAccounts";
	
	@wire(fetchListView) ListView(value) {
		const {
			data,
			error
		} = value;
		if (data) {
			this.isLoading = true;
			let plistViewOptions = JSON.parse(JSON.stringify(data));


			let lstOption = [];
			for (var i = 0; i < plistViewOptions.length; i++) {

				lstOption.push({
					label: plistViewOptions[i].Name,
					value: plistViewOptions[i].DeveloperName,
					show_option_icon: false
				});
				if (this.defaultListView == plistViewOptions[i].DeveloperName) {
					lstOption[i].show_option_icon = true;
				}

			}
			console.log('lstOption===> ' + JSON.stringify(lstOption));


			this.listViewOptions = lstOption;
			this.isLoading = false;
		} else if (error) {
			this.isLoading = false;
			console.log('error===> ' + JSON.stringify(error))
		}


	}
	@wire(getListUi, {
		objectApiName: Account_OBJECT,
		listViewApiName: '$defaultListView' ,
		sortBy: Name_FIELD,
		pageSize: 100,
      }) listViewData({
		error,
		data
	}) {
		if (data) {
console.log('data getListUi: ' + JSON.stringify(data));
const columns = [];

            for(let Col in data.info.displayColumns){
                columns.push({
                    label : data.info.displayColumns[Col].label,
                    fieldName : data.info.displayColumns[Col].fieldApiName
                  });
            }
            this.lstviewCol = columns;
        console.log('this.columns' +  JSON.stringify(this.lstviewCol));

            
           
			let records = JSON.parse(JSON.stringify(data.records.records));
            let sAssignObj = [];
            for(let rec of records){
                console.log('sData : ' + JSON.stringify(rec.fields));
                let listViewData = [];
                for(let fldObj in rec.fields){
                    console.log('fldObj : ' +fldObj);
                    console.log('sData.fields[value] : ' + JSON.stringify(rec.fields[fldObj]));

                    let sObj =  this.lstviewCol.find(data => data.fieldName == fldObj);
                    console.log('sObj : ' + JSON.stringify(sObj));
                    if(sObj != undefined){
                        listViewData.push({"key" : [fldObj],
                                           "value" : rec.fields[fldObj].value}); 
                    }
                   }
                    //convert
                    var result = {};
                      for (var i = 0; i < listViewData.length; i++) {
                        result[listViewData[i].key] = listViewData[i].value;
                             }


                sAssignObj.push(result);
            }
            console.log("sAssignObj : " + JSON.stringify(sAssignObj));
			/* set ListView Option */ 
          
         let lstOption = JSON.parse(JSON.stringify(this.listViewOptions));
			for (let i = 0; i < lstOption.length; i++) {
				if (this.defaultListView == lstOption[i].value) {
					lstOption[i].show_option_icon = true;
				} else {
					lstOption[i].show_option_icon = false;
				}
			}
			this.listViewOptions = lstOption;
			/* ################################## */
			console.log(' records length : ' + records.length);

			if (records.length > 0) {
				this.hasRecords = true;
			} else {
				this.hasRecords = false;                 
			}
			console.log('this.hasRecords====> '+this.hasRecords);
            
			this.storeListViewRecords = sAssignObj;
			this.isLoading = false;
			this.error = undefined;

		} else if (error) {
			this.error = error;
			console.log('error : ' + JSON.stringify(error));
			this.isLoading = false;
			this.storeListViewRecords = undefined;
		}
	}
	
	handleClickExtend(event) {
	
		let getElement = this.template.querySelector('.listViewPickerPanel');
		//console.log('getElement.getAttribute("data-show") ==>' + getElement.getAttribute('data-show'));
		if (getElement.classList.contains('deActive_ListView')){
			getElement.setAttribute('aria-hidden', false);
			getElement.classList.remove('deActive_ListView');
			getElement.classList.add('active_ListView');
			this.template.querySelector('.listViewPickerPanel').focus();
		} else {
			
			this.closeListViewHelper();
		}
	}

 
	handelFocusOut(event) {
		let that = this;
		setTimeout(function(){ that.closeListViewHelper(); }, 300);
		
	}
	getListViewValue(event) {
		let listViewValue = event.target.dataset.filter;
        console.log('listViewValue : ' + listViewValue);
		if (listViewValue != this.defaultListView) {
			this.isLoading = true;
		}
		this.defaultListView = listViewValue;
		console.log(this.defaultListView);
		let getListViewLabel = this.listViewOptions.find(data => data.value == listViewValue);
       
		this.listViewName = getListViewLabel.label;
		console.log(this.listViewName);
		this.closeListViewHelper();
		
		   
	}
	closeListViewHelper(){
		let getElement = this.template.querySelector('.listViewPickerPanel');
		getElement.setAttribute('aria-hidden', true);
		getElement.classList.remove('active_ListView');
		getElement.classList.add('deActive_ListView');
		//getElement.setAttribute('data-show', 0);

	}

	
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        
    </targets>
</LightningComponentBundle>

.lgc-bg {
	background-color: rgb(242, 242, 242);
}

.lgc-bg-inverse {
	background-color: rgb(22, 50, 92);
}

.label-hidden>label {
	display: none !important;
}

.icon_custom_class {
	margin-top: 5px;
}

.current_filter {
	color: rgb(8, 7, 7);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	display: block;
	cursor: pointer;
}

.current_filter:hover {
	text-decoration: underline;
}

.custom_list_view {
	max-width: max-content;
}

.button_class {
	margin-left: 10px;
	margin-right: 10px;
}

.list_view_container {
	max-width: max-content;
}

.list_view_and_table_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.max_height {
	max-height: 409px;
}

.deActive_ListView {
	opacity: 0;
	display: none;
	z-index: 9001;
	position: absolute;
	left: 0px;
	top: 24px;
	visibility: hidden;
}

.active_ListView {
	opacity: 1;
	display: block;
	z-index: 9001;
	position: absolute;
	left: 0px;
	top: 24px;
	visibility: visible;
}

.my-icon {
	--sds-c-icon-color-foreground-default: rgb(0, 112, 210, 1);
}
.No_Record_Found_Css {
	text-align: center;
	margin-top: 200px;
}

.table_cc {
	background-color: rgb(250, 250, 249);
}

@future (callout=true)
    Public static void sendHTTPRequest(String url, String body){
        
        Http http = new Http();
        HttpResponse res = new HttpResponse();
        HttpRequest req = new HttpRequest();
        req.setEndpoint(url);
        req.setBody(body);
        req.setMethod('POST');
        
        try {
            res = http.send(req);
        } catch(System.CalloutException e) {
            System.debug('CalloutException: '+ e);
            System.debug(res.toString());
        }
 }

@isTest
public class colloutTest {
@isTest
    public static void testAccTriHandler(){
        test.startTest();
       string key = 'https://orgBaseUrl.salesforce.com/identity/connect/token';
       string body = '{"name" : 'dummy'}';  
  AccountCustomerNumber.sendHTTPRequest(key, body);
        test.stopTest(); 
    }
  
}

@testSetup static void testSetup() {
    Test.loadData(Account.sobjectType, 'records_accounts_with_cases_2021');
    Test.loadData(Contact.sobjectType, 'records_contacts_with_cases_2021');
    Test.loadData(Case.sobjectType, 'records_cases_2021');
    
  }

Map<Id,account> accountMap = new Map<Id,account>();
set<Id> setAccShareIds = new set<Id>();
 for (Account a : [SELECT Id,Name, (SELECT UserOrGroupId from Shares WHERE RowCause='Territory') 
                   FROM Account WHERE Id IN :accountIds]) {
            accountMap.put(a.Id,a);
            if(!a.Shares.isEmpty()) {
                for(AccountShare s : a.Shares) {
                    setAccShareIds.add(s.UserOrGroupId);
                }
            }
        }

for (Account a : [SELECT Territories__c, (SELECT UserOrGroupId from Shares WHERE RowCause='Territory'), (SELECT UserId, TeamMemberRole FROM AccountTeamMembers) FROM Account WHERE Id IN :accountIds]) {
            if(!a.Shares.isEmpty()) {
                for(AccountShare s : a.Shares) {
                    //tMap.put(s.UserOrGroupId, null);
                     system.debug('UserOrGroupId===> ' + s.UserOrGroupId);
 system.debug('RowCause===> ' + s.RowCause);                
}
            }

@future (callout=true)
    Public static void sendHTTPRequest(String url, String body){
        
        Http http = new Http();
        HttpResponse res = new HttpResponse();
        HttpRequest req = new HttpRequest();
        req.setEndpoint(url);
        req.setBody(body);
        req.setMethod('POST');
        
        try {
            res = http.send(req);
        } catch(System.CalloutException e) {
            System.debug('CalloutException: '+ e);
            System.debug(res.toString());
        }
 }

@isTest
public class colloutTest {
@isTest
    public static void testAccTriHandler(){
        test.startTest();
       string key = 'https://orgBaseUrl.salesforce.com/identity/connect/token';
       string body = '{"name" : 'dummy'}';  
  AccountCustomerNumber.sendHTTPRequest(key, body);
        test.stopTest(); 
    }
  
}

@testSetup static void testSetup() {
    Test.loadData(Account.sobjectType, 'records_accounts_with_cases_2021');
    Test.loadData(Contact.sobjectType, 'records_contacts_with_cases_2021');
    Test.loadData(Case.sobjectType, 'records_cases_2021');
    
  }

Map<Id,account> accountMap = new Map<Id,account>();
set<Id> setAccShareIds = new set<Id>();
 for (Account a : [SELECT Id,Name, (SELECT UserOrGroupId from Shares WHERE RowCause='Territory') 
                   FROM Account WHERE Id IN :accountIds]) {
            accountMap.put(a.Id,a);
            if(!a.Shares.isEmpty()) {
                for(AccountShare s : a.Shares) {
                    setAccShareIds.add(s.UserOrGroupId);
                }
            }
        }

for (Account a : [SELECT Territories__c, (SELECT UserOrGroupId from Shares WHERE RowCause='Territory'), (SELECT UserId, TeamMemberRole FROM AccountTeamMembers) FROM Account WHERE Id IN :accountIds]) {
            if(!a.Shares.isEmpty()) {
                for(AccountShare s : a.Shares) {
                    //tMap.put(s.UserOrGroupId, null);
                     system.debug('UserOrGroupId===> ' + s.UserOrGroupId);
 system.debug('RowCause===> ' + s.RowCause);                
}
            }