chess/resources/views/content/others/team/action.blade.php

<script>
    /* {{-- var routeTable = '{{ $table }}' --}};
    var colum = [
        {data: 'member_name', name: 'member_name'},
        {data: 'team_code', name: 'team_code'},
        {data: 'definition', name: 'definition'},
        {data: 'project_name', name: 'project_name'},
        {data: 'is_active', name: 'is_active'},
    ];

    var columStyle =
    [
        { "orderable": false, "targets": [-1] },
    ];

    var table = znGetTableScrolling(routeTable,colum,columStyle,'indexTable'); */

var url = '{{ $urlData }}';
$(document).ready(function() {  
    keyword = $("#keyword").val();
    load_data_team(url, keyword);

    $("#keyword").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault();
            load_data_team(url, $("#keyword").val());
        }
    });
});

$(document).on('click', '.pagination-wrapper a', function(e){
    e.preventDefault();    
    var page = $(this).attr('href').split('page=')[1];
    url = base_url + 'others/data?type=mngTeam&page=' + page;
    keyword = $("#keyword").val();
    load_data_team (url, keyword);
});

function load_data_team(url, keyword) {
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            keyword : keyword,            
        },
        beforeSend: function () {
            znLoadingPage()
        },

        success: function (response) {    
            console.log(response)        
            if ( response.rc == 200 ) {
                var data = response.data.team.data;
                var links = response.data.paginateLinks;
                
                if ( data.length <=  0 ) {
                    znLoadingPageEnd()                    
                    $('#team_view').append(`
                        <x-other.no_data 
                            messageTitle="Maaf data team project saat ini tidak ditemukan."
                            subMessage="Untuk mendapatkan data team silahkan membuat project di menu management project"
                        />
                    `)
                    return false;
                }                
                // var arr = _.chunk(data, 3);

                var html = "";
                // arr.forEach(function(items, index) {
                    html += `<div class="row">`;
                    // items.forEach(function (value, index) {                        
                    data.forEach(function (value, index) {                        
                        var logo_url = "{{asset('assets/media/logos/no_img.png')}}";
                        if (value.logo_url) {
                            logo_url = value.logo_url;                            
                        }                                                                                                
                        var list_team = JSON.parse(value.list_team);
                        var user_list = '';
                        list_team.forEach(lt => {
                            var img_url = "{{asset('assets/media/logos/no_img.png')}}";
                            if (lt.profil_pict) {
                                img_url = lt.profil_pict;                            
                            }
                            user_list+= `<!--begin:User-->
                                        <div class="d-flex align-items-center justify-content-between mb-5">
                                            <div class="d-flex align-items-center">
                                                <div class="symbol symbol-circle symbol-50 mr-3">
                                                    <img alt="Pic" src="${img_url}" onerror="this.error=null;this.src='{{ asset('assets/media/logos/no_img.png') }}'" style="object-fit: cover;object-position: center center;">
                                                </div>
                                                <div class="d-flex flex-column">
                                                    <a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-lg">${lt.nama}</a>
                                                    <span class="text-muted font-weight-bold font-size-sm"></span>
                                                </div>
                                            </div>
                                            <div class="d-flex flex-column align-items-end">
                                                <span class="text-muted font-weight-bold font-size-sm">${lt.team_role}</span>
                                            </div>
                                        </div>
                                        <!--end:User-->`;
                        });

                        html += `<div class="col-md-4">
                                    <div class="card card-custom">
                                        <!--begin::Body-->
                                        <div class="card-header bg-success">
                                            <div class="d-flex align-items-center mb-7 mt-7">
                                                <!--begin::Pic-->
                                                <div class="flex-shrink-0 mr-4">
                                                    <div class="symbol symbol-lg-75 symbol-circle mr-3">
                                                        <img src="${logo_url}" onerror="this.error=null;this.src='{{ asset('assets/media/logos/no_img.png') }}'" class="img-fluid" alt="image" style="object-fit: contain;object-position: center center;">
                                                    </div>
                                                </div>
                                                <!--end::Pic-->
                                                <!--begin::Title-->
                                                <div class="d-flex flex-column">
                                                    <a href="#" class="text-dark font-weight-bold text-hover-primary font-size-h4 mb-0">${value.project_name}</a>                            
                                                    <span class="text-white font-weight-bold">${value.unit_name}</span>
                                                    <span class="text-white font-weight-bold">Team Code: ${value.team_code}</span>
                                                </div>
                                                <!--end::Title-->
                                            </div>
                                        </div>
                                        <div class="card-body">   
                                            <h3>Members</h3>                 
                                            <!--begin:Users-->
                                            <div class="mt-7 scroll scroll-pull" data-scroll="true" data-wheel-propagation="true" data-mobile-height="280" style="height: 280px; overflow: hidden;">
                                               `+user_list+` 
                                            </div>                                          
                                            <!--end:Users-->
                                        </div>
                                        <!--end::Body-->
                                    </div>    
                                </div>`;
                    });
                    html += `</div>`;
                // });
                znLoadingPageEnd()
                $("#team_view").html(html);
                $(".pagination-wrapper").html(links); 
                $('[data-toggle="popover"]').popover();                              
                KTUtil.scrollTop();
                $('[data-scroll="true"]').each(function() {
                    var el = $(this);
                    KTUtil.scrollInit(this, {
                        mobileNativeScroll: true,
                        handleWindowResize: true,
                        rememberPosition: (el.data('remember-position') == 'true' ? true : false),
                        height: function() {
                            if (KTUtil.isBreakpointDown('lg') && el.data('mobile-height')) {
                                return el.data('mobile-height');
                            } else {
                                return el.data('height');
                            }
                        }
                    });
                });
            } else {
                znLoadingPageEnd()
                // notifToast('error', 'Terjadi Kesalahan');
                znNotif('error', 'Terjadi Kesalahan');
            }            
        }

    }).done(function (msg) {
    }).fail(function (msg) {
        znLoadingPageEnd()
        znNotif('error', 'Terjadi Kesalahan');
    });
}
</script>