<template>
    <div class="slds-m-top_small slds-m-bottom_medium">
        <p align="right">
            <lightning-button variant="brand" label="Add Team Member" title="addteammember" onclick={showModalBox} class="slds-m-left_x-small"></lightning-button>
            <lightning-button variant="brand" label="Active" title="active" data-status="Active" onclick={handleActiveAndInActive} class="slds-m-left_x-small"></lightning-button>
            <lightning-button variant="brand" label="InActive" title="inactive" data-status="InActive" onclick={handleActiveAndInActive} class="slds-m-left_x-small"></lightning-button>
        </p>
    </div>
    <template if:true={isShowModal}>
        <lightning-card>
            <lightning-layout>
                <lightning-layout-item size="12">
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <!-- modal header start -->
                        <header class="slds-modal__header">
                            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
                                <lightning-icon icon-name="utility:close"
                                alternative-text="close"
                                variant="inverse"
                                size="small" ></lightning-icon>
                                <span class="slds-assistive-text">Close</span>
                            </button>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Active Physician</h2>
                        </header>
                        <!-- modal body start -->
                        <div class="slds-modal__content slds-p-around_medium" style="overflow:initial;" id="modal-content-id-1">
                            <div class="slds-m-around_medium">
                                <template if:true={rolePicklist}>
                                    <lightning-combobox name="Role"
                                                        label="Role"
                                                        value={caseTeamRole}
                                                        options={rolePicklist}
                                                        style="overflow-y: visible;"
                                                        onchange={handleCaseTeamRole}>
                                    </lightning-combobox>
                                </template>
                                <template if:false={internalUserFilter}>
                                <c-lwc-lookup-component
                                                    object-api-name="User"
                                                    icon-name="standard:user"
                                                    lookup-label = "User"
                                                    onerror={showError}
                                                    filter="Profile.Name= 'Ext. Physician'"
                                                    onrecordselection = {updateSelectedUser}
                                                >
                                </c-lwc-lookup-component>
                                 </template>
                                <template if:true={internalUserFilter}>
                                <c-lwc-lookup-component
                                                    object-api-name="User"
                                                    icon-name="standard:user"
                                                    lookup-label = "User"
                                                    onerror={showError}
                                                    onrecordselection = {updateSelectedUser}
                                                >
                                </c-lwc-lookup-component>
                            </template>
                            </div>
                        </div>
                        <!-- modal footer start-->
                        <footer class="slds-modal__footer">
                            <lightning-button variant="neutral" label="Cancel" title="Cancel" onclick={hideModalBox} class="slds-m-left_x-small"></lightning-button>
                            <lightning-button variant="brand" label="Save" title="Save" onclick={saveCareTeams} class="slds-m-left_x-small"></lightning-button>
                        </footer>
                    </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
    </template>
    <!-- modal end -->
    <template if:true={recordId}>
        <lightning-layout>
            <lightning-layout-item size="1" class="slds-border_top slds-border_left slds-border_bottom slds_th">
                Check
            </lightning-layout-item>
            <lightning-layout-item size="3" class="slds-border_top slds-border_left slds-border_bottom slds_th">
                Member Name
            </lightning-layout-item>
            <lightning-layout-item size="3" class="slds-border_top slds-border_left slds-border_bottom slds_th">
                Role
            </lightning-layout-item>
            <lightning-layout-item size="3" class="slds-border_top slds-border_left slds-border_bottom slds_th">
                Date Time
            </lightning-layout-item>
            <lightning-layout-item size="2" class="slds-border_top slds-border_left slds-border_bottom slds-border_right slds_th">
                Status
            </lightning-layout-item>
        </lightning-layout>
        <template for:each={lstWrappers} for:item="caseteam">
            <lightning-layout key={caseteam.ids}>
                <lightning-layout-item size="1" class="slds-border_bottom slds-border_left slds_td">
                    <lightning-input  type="checkbox" data-id={caseteam.ids} onchange={updateCaseTeamIds} checked={checkboxVal}></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="3" class="slds-border_bottom slds-border_left slds_td">
                    {caseteam.memberName}
                </lightning-layout-item>
                <lightning-layout-item size="3" class="slds-border_bottom slds-border_left slds_td">
                    {caseteam.teamRoleName}
                </lightning-layout-item>
                <lightning-layout-item size="3" class="slds-border_bottom slds-border_left slds_td">
                    <lightning-formatted-date-time value={caseteam.createdDate}></lightning-formatted-date-time>
                </lightning-layout-item>
                <lightning-layout-item size="2" class="slds-border_top slds-border_left slds-border_bottom slds-border_right slds_td">
                    <lightning-formatted-text  value={caseteam.status}></lightning-formatted-text>
                </lightning-layout-item>
            </lightning-layout>
        </template>
    </template>
</template>

=====================================================
import { LightningElement,api,track,wire } from 'lwc';
import { Toaster, Utils, reduceErrors } from 'c/utilityServices';
import getCaseTeamMembers from '@salesforce/apex/CareTeamController.getCaseTeamMembers';
import saveCareTeam from '@salesforce/apex/CareTeamController.saveCareTeam';
import updateStatus from '@salesforce/apex/CareTeamController.updateStatus';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import CARETEAM_OBJECT from '@salesforce/schema/CareTeam__c';
import ROLE_FIELD from '@salesforce/schema/CareTeam__c.Roles__c';
import care_coordinator from '@salesforce/label/c.care_coordinator';
export default class CareTeamList extends LightningElement
{
    @api recordId;
    @track lstWrappers;
    @track isProcessing = false;
    @track error;
    @track selectUserId;
    @track isShowModal = false;
    @track checkedCaseIds = [];
    @track rolePicklist=[];
    @track caseTeamRole;
     checkboxVal;
    showModalBox() {  
        this.isShowModal = true;
        console.log(this.isShowModal);
    }
    hideModalBox() {  
        this.isShowModal = false;
    }
    // to get the default record type id, if you dont' have any recordtypes then it will get master
    @wire(getObjectInfo, { objectApiName: CARETEAM_OBJECT })
    careTeamMetadata;
    // now get the industry picklist values
    @wire(getPicklistValues,{
            recordTypeId: '$careTeamMetadata.data.defaultRecordTypeId',
            fieldApiName: ROLE_FIELD
        }
    )
    getRolePicklist(data, error){
        if(data && data.data && data.data.values){
            data.data.values.forEach( objPicklist => {
                this.rolePicklist.push({
                    label: objPicklist.label,
                    value: objPicklist.value
                });
            });
        } else if(error){
            console.log(error);
        }
        console.log('rolePicklist'+this.rolePicklist)
    };
   
    // on select picklist value to show the selected value
    handleCaseTeamRole(event) {
        this.caseTeamRole = event.detail.value;
        if(this.caseTeamRole == care_coordinator){
            this.internalUserFilter = true;
        }else{
            this.internalUserFilter = false;
        }
    }
    saveCareTeams(event)
    {  
        saveCareTeam({role : this.caseTeamRole,
                      userId : this.selectUserId,
                      patientId : this.recordId})
        .then((result) => {
            console.log('========'+JSON.stringify(result));
            this.lstWrappers = JSON.parse(JSON.stringify(result));
            this.hideModalBox();
            this.isProcessing = false;
            this.error = undefined;
        })
        .catch((error) => {
            this.error = error;
            this.isProcessing = false;
            this.lstWrappers = undefined;
            Toaster.error('Error', reduceErrors(this.error));
        });
    }
    connectedCallback()
    {
        this.getWrapper();
    }
    updateSelectedUser(event){
        this.selectUserId = event.detail.selectedRecordId;
    }
    getWrapper()
    {  
        this.isProcessing = true;
        console.log('========'+this.recordId);
        if(this.recordId){
            getCaseTeamMembers({patientId : this.recordId})
            .then((result) => {
                console.log('========'+JSON.stringify(result));
                this.lstWrappers = result;
                this.isProcessing = false;
                this.error = undefined;
            })
            .catch((error) => {
                this.error = error;
                this.isProcessing = false;
                this.lstWrappers = undefined;
                Toaster.error('Error', reduceErrors(this.error));
            });
        }
       
    }
    updateCaseTeamIds(event)
    {
        console.log('==='+event.detail.checked);
        console.log('==='+event.currentTarget.dataset.id);
        console.log('==='+this.checkedCaseIds);
        if(event.detail.checked)
        {
            this.checkedCaseIds.push(event.currentTarget.dataset.id);
        }
        else
        {
            if(this.checkedCaseIds.length > 0)
            {
                var index = this.checkedCaseIds.indexOf(event.currentTarget.dataset.id);
                if (index > -1) {
                    this.checkedCaseIds.splice(index, 1);
                }
            }
        }
    }
    handleActiveAndInActive(event)
    {
        console.log('========'+JSON.stringify(this.checkedCaseIds));
        console.log('========'+event.currentTarget.dataset.status);
        if(this.checkedCaseIds && this.checkedCaseIds.length > 0)
        {
            updateStatus({patientId : this.recordId,
                          lstCaseTeamIdsStr : JSON.stringify(this.checkedCaseIds),
                          status : event.currentTarget.dataset.status,
                        })
            .then((result) => {
                console.log('========'+JSON.stringify(result));
                this.lstWrappers = JSON.parse(JSON.stringify(result));
                this.hideModalBox();
                this.isProcessing = false;
                this.error = undefined;
            })
            .catch((error) => {
                this.error = error;
                this.isProcessing = false;
                this.lstWrappers = undefined;
                Toaster.error('Error', reduceErrors(this.error));
            });
        }
    }
}