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

<script>
    "use strict";

// Class definition
var KTAppInbox = function() {
    // Private properties
    var _asideEl;
    var _listEl;
    var _viewEl;
    var _composeEl;
    var _replyEl;
    var _asideOffcanvas;    

    // Public methods
    return {
        // Public functions
        init: function() {
            // Init variables
            _asideEl = KTUtil.getById('kt_inbox_aside');
            _listEl = KTUtil.getById('kt_inbox_list');
            _viewEl = KTUtil.getById('kt_inbox_view');
            _composeEl = KTUtil.getById('kt_inbox_compose');
            _replyEl = KTUtil.getById('kt_inbox_reply');

            // Init handlers
            KTAppInbox.initAside();
            KTAppInbox.initList();
            KTAppInbox.initView();            
        },

        initAside: function() {
            // Mobile offcanvas for mobile mode
            _asideOffcanvas = new KTOffcanvas(_asideEl, {
                overlay: true,
                baseClass: 'offcanvas-mobile',
                //closeBy: 'kt_inbox_aside_close',
                toggleBy: 'kt_subheader_mobile_toggle'
            });

            // View list
            KTUtil.on(_asideEl, '.list-item[data-action="list"]', 'click', function(e) {
                var type = KTUtil.attr(this, 'data-type');
                var listItemsEl = KTUtil.find(_listEl, '.kt-inbox__items');
                var navItemEl = this.closest('.kt-nav__item');
                var navItemActiveEl = KTUtil.find(_asideEl, '.kt-nav__item.kt-nav__item--active');

                // demo loading
                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });
                loading.show();

                setTimeout(function() {
                    loading.hide();

                    KTUtil.css(_listEl, 'display', 'flex'); // show list
                    KTUtil.css(_viewEl, 'display', 'none'); // hide view

                    KTUtil.addClass(navItemEl, 'kt-nav__item--active');
                    KTUtil.removeClass(navItemActiveEl, 'kt-nav__item--active');

                    KTUtil.attr(listItemsEl, 'data-type', type);
                }, 600);
            });
        },

        initList: function() {
            // View message
            KTUtil.on(_listEl, '[data-inbox="message"]', 'click', function(e) { 
                e.preventDefault();
                e.stopImmediatePropagation();              
                var actionsEl = KTUtil.find(this, '[data-inbox="actions"]');
                var idmmp = $(this).data('idmmp');                
                
                // skip actions click
                if (e.target === actionsEl || (actionsEl && actionsEl.contains(e.target) === true)) {
                    return false;
                }
                var is_read = false;
                var type_inbox = $('#type_inbox').val();
                var formData = new FormData();	
                formData.append('id', idmmp)                
                formData.append('type', type_inbox)                
                // Demo loading
                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });
                loading.show();
                doPost(base_url+'projects/get_any/get_det_inbox', formData, function (msg, data) {                                
                    var data = data.data;
                    $('#tittle_view').html(data.tittle)
                    var img_user = "{{asset('assets/media/logos/no_img.png')}}";
                    if (data.image_url) {
                        img_user = data.image_url;                            
                    }  
                    is_read = data.is_read;                    
                    $('#user_img_view').css('background-image',`url('${img_user}')`)
                    $('#name_user_view').html(data.full_name)
                    $('#name_user_from_view').html(data.full_name)
                    $('#send_date_view').html(G_formatDate(data.send_date, 'd-M-Y H:i'))
                    $('#send_date_view2').html(G_formatDate(data.send_date, 'd-M-Y H:i'))
                    $('#subject_view').html(data.tittle)
                    if(type_inbox=='meetings') {
                        $('#message_view').html(data.inv_content)                
                    } else {
                        var description = data.inv_content?data.inv_content:'Tidak Ada Notes';
                        $('#message_view').html(`                            
                            <p>
                                Notes:
                                <br>
                                ${description}
                            </p>
                        `);                
                    }
                    var countInbox = $('#countInbox').html();
                    // setTimeout(function() {
                    $.when(update_read(idmmp, type_inbox)).done(function() {
                        if(!is_read) {
                            if(countInbox > 0) {
                                $('#countInbox').html(countInbox - 1);
                            }
                        }
                        loading.hide();
    
                        KTUtil.addClass(_listEl, 'd-none');
                        KTUtil.removeClass(_listEl, 'd-block');
    
                        KTUtil.addClass(_viewEl, 'd-block');
                        KTUtil.removeClass(_viewEl, 'd-none');
                    })
                    // }, 700);
                });
                
            });

            // Group selection
            KTUtil.on(_listEl, '[data-inbox="group-select"] input', 'click', function() {
                var messages = KTUtil.findAll(_listEl, '[data-inbox="message"]');

                for (var i = 0, j = messages.length; i < j; i++) {
                    var message = messages[i];
                    var checkbox = KTUtil.find(message, '.checkbox input');
                    checkbox.checked = this.checked;

                    if (this.checked) {
                        KTUtil.addClass(message, 'active');
                    } else {
                        KTUtil.removeClass(message, 'active');
                    }
                }
            });

            // Individual selection
            KTUtil.on(_listEl, '[data-inbox="message"] [data-inbox="actions"] .checkbox input', 'click', function() {
                var item = this.closest('[data-inbox="message"]');

                if (item && this.checked) {
                    KTUtil.addClass(item, 'active');
                } else {
                    KTUtil.removeClass(item, 'active');
                }
            });
        },

        initView: function() {
            // Back to listing
            KTUtil.on(_viewEl, '[data-inbox="back"]', 'click', function() {
                // demo loading
                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });

                loading.show();

                setTimeout(function() {
                    loading.hide();

                    KTUtil.addClass(_listEl, 'd-block');
                    KTUtil.removeClass(_listEl, 'd-none');

                    KTUtil.addClass(_viewEl, 'd-none');
                    KTUtil.removeClass(_viewEl, 'd-block');
                }, 700);
            });

            // Expand/Collapse reply
            KTUtil.on(_viewEl, '[data-inbox="message"]', 'click', function(e) {
                var message = this.closest('[data-inbox="message"]');

                var dropdownToggleEl = KTUtil.find(this, '[data-toggle="dropdown"]');
                var toolbarEl = KTUtil.find(this, '[data-inbox="toolbar"]');

                // skip dropdown toggle click
                if (e.target === dropdownToggleEl || (dropdownToggleEl && dropdownToggleEl.contains(e.target) === true)) {
                    return false;
                }

                // skip group actions click
                if (e.target === toolbarEl || (toolbarEl && toolbarEl.contains(e.target) === true)) {
                    return false;
                }

                if (KTUtil.hasClass(message, 'toggle-on')) {
                    KTUtil.addClass(message, 'toggle-off');
                    KTUtil.removeClass(message, 'toggle-on');
                } else {
                    KTUtil.removeClass(message, 'toggle-off');
                    KTUtil.addClass(message, 'toggle-on');
                }
            });
        },        
    };
}();

/* // Class Initialization
jQuery(document).ready(function() {
    KTAppInbox.init();
}); */

var url = '{{ route('inboxMeetingData') }}';
var keyword;
var typeInbox=$('#type_inbox').val();
var is_read=$('#is_read').val();
$(document).ready(function() {  
    keyword = $("#keyword").val();
    load_data_inbox(url, keyword, is_read, typeInbox);

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

$(document).on('click', '.pagination-wrapper a', function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var page = $(this).attr('href').split('page=')[1];
    url = base_url + 'projects/data?page=' + page;
    keyword = $("#keyword").val();
    typeInbox=$('#type_inbox').val();
    is_read=$('#is_read').val();
    load_data_inbox(url, keyword, is_read, typeInbox);
});

function load_data_inbox(url, keyword, is_read='all', type='meetings') {
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            keyword : keyword,  
            is_read : is_read,
            type: type          
        },
        beforeSend: function () {
            znLoadingPage()
            $("#list_inbox").html('');
        },
        success: function (response) {
            znLoadingPageEnd()            
            if ( response.rc == 200 ) {
                var data = response.data.inbox.data;
                var links = response.data.paginateLinks;

                if ( data.length <=  0 ) {
                    znLoadingPageEnd()                    
                    // znNotif('warning', 'Data Project belum tersedia')
                    $('#list_inbox').append(`
                        <x-other.no_data 
                            messageTitle="Maaf data Inbox saat ini tidak ditemukan."
                            subMessage=""
                        />
                    `)
                    return false;
                }                
                // var arr = _.chunk(data, 3);
                znLoadingPageEnd()
                var html = "";
                // arr.forEach(function(items, index) {
                    // html += `<div class="row">`;
                    // items.forEach(function (value, index) {                        
                    data.forEach(function (value, index) {                        
                        var url_img = "{{asset('assets/media/logos/no_img.png')}}";
                        if (value.image_url) {
                            url_img = value.image_url;                            
                        }                                                

                        var send_date = G_formatDate(value.send_date, 'd-M-Y H:i');                                            
                        var is_read = '';
                        if(value.is_read) {
                            is_read = '<span class="label label-light-success font-weight-bold label-inline mr-1">Read</span>';
                        }    

                        html += `<div class="list list-hover min-w-500px" data-inbox="list">
                            <!--begin::Item-->
                            <div class="d-flex align-items-start list-item card-spacer-x py-3" data-inbox="message" data-idmmp='${value.id}'>
                                <!--begin::Toolbar-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Author-->
                                    <div class="d-flex align-items-center flex-wrap w-xxl-200px mr-3" data-toggle="view">
                                        <span class="symbol symbol-60 mr-3">
                                            <span class="symbol-label" style="background-image: url('${url_img}')"></span>
                                        </span>
                                        <a href="#" class="font-weight-bold text-dark-75 text-hover-primary">${value.full_name}</a>
                                    </div>
                                    <!--end::Author-->
                                </div>
                                <!--end::Toolbar-->
                                <!--begin::Info-->
                                <div class="flex-grow-1 mt-2 mr-2" data-toggle="view">
                                    <div>
                                        <span class="font-weight-bolder font-size-lg mr-2">${value.tittle} - </span>
                                        <span class="text-muted">${value.project_name}</span>
                                    </div>
                                    <div class="mt-2">
                                        <span class="label label-light-primary font-weight-bold label-inline mr-1">inbox</span>
                                        ${is_read}
                                    </div>
                                </div>
                                <!--end::Info-->
                                <!--begin::Datetime-->
                                <div class="mt-2 mr-3 font-weight-bolder text-right" data-toggle="view">${send_date}</div>
                                <!--end::Datetime-->
                            </div>
                            <!--end::Item-->                        
                        </div>`;
                    });
                    // html += `</div>`;
                // });                
                $('#is_read').val(is_read)
                $('#type_inbox').val(type)
                $("#list_inbox").html(html);
                $(".pagination-wrapper").html(links); 
                $('[data-toggle="popover"]').popover();               
                KTUtil.scrollTop();
                KTAppInbox.init();
            } else {
                znLoadingPageEnd()
                // notifToast('error', 'Terjadi Kesalahan');
                znNotif('error', 'Terjadi Kesalahan');
            }           
        }
    }).done(function (msg) {
    }).fail(function (msg) {
        znLoadingPageEnd()
        znNotif('error', 'Terjadi Kesalahan');
    });
}

function update_read(id, type) {
    var formData = new FormData();	
	formData.append('id', id)
    formData.append('type', type)
    var is_read = $('#is_read').val();    
	// znLoadingPage()
	doPost(base_url+'projects/act_any/read_inbox', formData, function (msg, data) {
		// znLoadingPageEnd()	
        load_data_inbox(url, keyword, is_read, type)
	});
}

</script>