Hello,

I have customized POS screen and I want to add button to select many2many employee when click on the button , the list to slect the employee did not appear the UI, here's the code:

/** @odoo-module **/ 

import { _t } from "@web/core/l10n/translation" ; 
import { useBus, useService } from "@web/core/utils/hooks" ; 
import { EventBus } from "@odoo/owl" ; 
import { registry } from "@web/core/registry" ; 
import { ControlButtonsMixin } from "@point_of_sale/app/utils/control_buttons_mixin" ; 
import { SelectionPopup } from "@point_of_sale/app/utils/input_popups/selection_popup" ; 
import { ErrorPopup } from "@point_of_sale/app/errors/popups/error_popup" ; 
import { ConfirmPopup } from "@point_of_sale/app/utils/confirm_popup/confirm_popup" ; 
import { Component, onMounted, useRef } from "@odoo/owl" ; 
import { usePos } from "@point_of_sale/app/store/pos_hook" ; 
import { AppointmentList } from "@plnx_pos_appointment/app/appointment_screen/appointment_list/appointment_list" ; 
import { AppointmentManagementControlPanel } from "@plnx_pos_appointment/app/appointment_screen/appointment_management_control_panel/appointment_management_control_panel" ; 





export class EmployeeSelectionScreen extends ControlButtonsMixin(Component) { 
    static storeOnOrder = false ; 
    static template = "plnx_pos_appointment.EmployeeSelectionScreen" ; 

    setup() { 
        super.setup(); 
        this .pos = usePos(); 
        this .popup = useService( "popup" ); 
        this .orm = useService( "orm" ); 
        this .root = useRef( "root" ); 
        this .numberBuffer = useService( "number_buffer" ); 
        this .selectedEmployees = []; 
        this .employees = []; // Initialize employees as an empty array 
        this .employeeFetcher = useService( "employee_fetcher" ); 
        useBus( this .employeeFetcher, "update" , this .render); 
        this .toggleEmployeeSelection = this .toggleEmployeeSelection.bind( this ); 
        this .confirmSelection = this .confirmSelection.bind( this ); 

        console.log( "POS Context:" , this .pos); 

       onMounted(() => {
            this .fetchEmployees(); // Fetch employees when mounted 
        }); 
    } 




    async fetchEmployees() { 
        try { 
            this .employees = await this .employeeFetcher.fetchEmployees(); 
            console.log( "Fetched Employees:" , this .employees); 
             this .render(); 
        } catch (error) { 
            console.error( "Error fetching employees:" , error); 
        } 
    } 

   toggleEmployeeSelection(employeeId) { 
        const index = this .state.selectedEmployeees.indexOf(employeeId); 
        if (index > - 1 ) { 
            this .selectedEmployees.splice(index, 1 ); // Remove if already selected 
        } else { 
            this .state.selectedEmployees.push(employeeId); // Add if not selected 
        } 
    } 

    // Save selected employees to the current POS order 
    confirmSelection() { 
        const order = this .pos.get_order(); 
        if (order) { 
            order.selectedEmployees = this .state.selectedEmployees; 
            console.log( "Saved employees to order:" , order.selectedEmployees); 
        } else { 
            console.warn( "Do not activate order found." ); 
        } 
    } 




} 

registry.category( "pos_screens" ).add( "EmployeeSelectionScreen" , EmployeeSelectionScreen);

<templates id ="template" xml :space ="preserve" > 
    <t t-name ="plnx_pos_appointment.EmployeeSelectionScreen" > 
        <div class ="popup-content" > 
            <h3> Select Employees </h3> 
            <div class = "employee-list" > 
                <t t-foreach ="employees" t-as ="employee" t-key ="employee.id" > 
                    <div class ="employee-item" > 
                        <input type ="checkbox" 
                               t -att-checked ="selectedEmployee.includes(employee.id)" 
                               t-att-on-click ="toggleEmployeeSelection(employee.id)" /> 
                        <span t-esc ="employee.name" /> 
                    </div> 
                </t> 
            </div> 
            <div class ="popup-footer" > 
                <button t-on-click ="cancel" > Cancel </button> 
                <button t-on-click ="confirmSelection" > Confirm </button> 
            </div> 
        </ div> 
    </t> 
</templates>
 /** @odoo-module */ 

import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen" ; 
import { usePos } from "@point_of_sale/app/store/pos_hook" ; 
import { Component } from "@odoo/owl" ; 
import {onMounted} from "@odoo/owl" ; 
import { useBus, useService } from "@web/core/utils/hooks" ; 



export class SetEmployeeButton extends Component { 
    static template = "plnx_pos_appointment.SetEmployeeButton" ; 

    setup() { 
        this .pos = usePos(); 
        this .selectedEmployees = []; 
        this .employees = []; // Initialize employees as an empty array 
        this .employeeFetcher = useService( "employee_fetcher" ); 

         onMounted(() => { 
            this .fetchEmployees(); // Fetch employees when mounted 
        }); 
    } 




    async fetchEmployees() { 
        try { 
            this .employees = await this .employeeFetcher.fetchEmployees(); 
            console.log( "Fetched Employees:" , this .employees); 
            let emp= this .employees 
            console.log( "length:" , emp.length) 
        } catch (error) { 
            console.error( "Error fetching employees:" , error); 
        } 
    } 






    async click() { 
        this .pos.showScreen( "EmployeeSelectionScreen" ); 

    } 


} 

ProductScreen.addControlButton({ component: SetEmployeeButton }); 

<? xml version ="1.0" encoding ="UTF-8" ?> 
<templates id ="template" xml :space ="preserve" > 

    <t t-name ="plnx_pos_appointment.SetEmployeeButton" > 


<div class ="control-button o_appointment_button btn btn-light rounded-0 fw-bolder" t-on-click ="click" > 
            <i class ="fa fa-user-plus me-1" role ="img" aria-label ="Select Employees" title ="Select Employees" ></i> 
            Select Employees 
        </div> 

    </t> 

</templates>