initial: bootstrap from BukidBountyApp base

legacy/pages-html/slvl/all/ListLeads

@@ -0,0 +1,152 @@
+<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>