BarangaySystem/legacy/pages-html/slvl/all/ListLeads

<div id='ListLeadsMainContainer'>




</div>


<script>

    
    LoadDataPageFunc = {};
    LoadDataPageFunc.newleadrow = function (hashkey, LeadName, DateCreated, DateModified, Referrer, TargetViewingDate, Status, Mobile, Landline, Email, TargetProperty,rownum) {
        let leadrowhtml=[];
        Status = InttoStrDetailsFuncs.Status(Status);


        leadrowhtml.push(dualcolrow('Last Activity', formatDateTimetoReadable(DateModified), rowclass = ''));
        leadrowhtml.push(dualcolrow('Status', Status, rowclass = ''));
        leadrowhtml.push(dualcolrow('Referrer', Referrer, rowclass = ''));
        leadrowhtml.push(dualcolrow('Target Property', TargetProperty, rowclass = ''));
        leadrowhtml.push(dualcolrow('Target Viewing Date', formatDateTimetoReadable(TargetViewingDate), rowclass = ''));
        leadrowhtml.push(dualcolrow('Mobile', Mobile, rowclass = ''));
        leadrowhtml.push(dualcolrow('Landline', Landline || '', rowclass = ''));
        leadrowhtml.push(dualcolrow('Email', Email, rowclass = ''));
        leadrowhtml.push('<div id="LeadsListRowCardHash-'+rownum+'" style="display:none;">'+hashkey+'</div>');
        leadrowhtml.push(row(col('<br>'+buttonprimary('View Details', '', `ButtonGo('ViewLeadDetails', '${hashkey}')`, '-12','ListLeadGoRow-'+rownum))));
        let FinalBody = leadrowhtml.join('');

        return createCard(LeadName, cardid = 'LeadRowCard-'+rownum, formatDateTimetoReadable(DateCreated), cardbodyid = '', FinalBody, cardbodyclassadd = 'ListLeadRow');
    };



    LoadDataPageFunc.main = function () {
        const searchcard = UIInputGroup('Search', 'text', 'ListLeads_Search','',classs='',span='','/assets/clear.png');
        let LeadsListContainer = UICardSimple('', 'Loading Please Wait...', 'LeadsListContainer');
        LeadsListContainer = '<div id="LeadsListContainer"><center>Loading Please Wait...</center></div>';
        const FinalInnerHTML = searchcard + LeadsListContainer;
        const MainCard = UICardSimple('Leads', FinalInnerHTML,'MAINCARDBODY_LEADSLIST');
        $('#ListLeadsMainContainer').html(MainCard);
    
    };

    LoadDataPageFunc.ClearSearch=function(){
        $('#ListLeads_Search').val('');
        $('#ListLeads_Search').trigger('keyup');
    };
  

    LoadDataPageFunc.CardResultInterSectionPreloadDetails= function(){
        let hashkey='';
        const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const cardId = $(entry.target).attr('id'); 
                const variablePart = cardId.split('-')[1];
                const hashKeyDivId = 'LeadsListRowCardHash-' + variablePart;
                hashkey = $('#' + hashKeyDivId).text();
                        if (hashkey){
                            request.url('/ViewLead/Details/data').success((response) => { 
                            }).data({ target: hashkey }).fromVarCache(true).type('POST').go();
                        }
                    hashkey='';
                    }
                });
            }, { threshold: 0.1 }); 


            $('#LeadsListContainer .card').each(function() {
                observer.observe(this);
            });
    };

    LoadDataPageFunc.populateleadlist = function () {
        let request = new RequestData(true);
        request
            .url('/ListLeads/List/data')
            .type('POST')
            .data(null)
            .fromVarCache(true)
            .success((response) => {
                if ($('#card-body-MAINCARDBODY_LEADSLIST').length ===0){return false;}
                if(!response){
                    $('#card-body-MAINCARDBODY_LEADSLIST').html('No Leads');
                    return;
                }

                const LeadsList = response.List;
                //LeadsList.reverse();
                LeadsList.sort((a, b) => new Date(b.created) - new Date(a.created));
                let newhtmlrows = '';let htmlarrayrows=[];
                const count = LeadsList.length;
                let hashkey;


                for (let i = 0; i < count; i++) {
                    let hashkey =LeadsList[i]['hashkey'];
                    htmlarrayrows.push(LoadDataPageFunc.newleadrow(hashkey,LeadsList[i]['fullname'],LeadsList[i]['created'],
                    LeadsList[i]['modified'],LeadsList[i]['referral'],LeadsList[i]['target_viewing_date'],LeadsList[i]['status'],
                    LeadsList[i]['mobile'],LeadsList[i]['landline'],LeadsList[i]['email'],LeadsList[i]['property_name'],i));
                }

                newhtmlrows = htmlarrayrows.join('');
                $('#LeadsListContainer').html(newhtmlrows);
                LoadDataPageFunc.CardResultInterSectionPreloadDetails();
            })
            .error((err) => {
                console.error(err);
            })
            .go();

    };

    

    function SearchKeyUPListLeadsPage(){
        $('#ListLeads_Search').on('keyup', function() {

        let searchTerm = $(this).val().toLowerCase();

        $('#LeadsListContainer .card').each(function() {

            let title = $(this).find('.card-title').text().toLowerCase();
            let cols = $(this).find('.col').text().toLowerCase();

            if (title.includes(searchTerm) || cols.includes(searchTerm)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    }



    $(document).ready(function () {
       LoadDataPageFunc.main();
       LoadDataPageFunc.populateleadlist();
        changeTopbarTitle('Leads');
        SearchKeyUPListLeadsPage();


        $('#imgspanListLeads_Search').attr('onclick', 'LoadDataPageFunc.ClearSearch();');


      
       // $('#ListLeads_Search-div-mb3').addClass('tf-statusbar');

    });
</script>