admin-erahn/resources/js/Akaun/ImbangdugaExtended.vue

<template>
   <div class="container">
        <!-- <modal ref="modal"></modal> -->

            <div class="flex w-full">
                <div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
                    <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                   <router-link to="/akaunhome">
                        <i class="fas fa-backspace text-white"></i>
                    </router-link>
                    
                    <span class="text-center mx-auto text-white font-bold">Laporan Imbang Duga Extended</span>
                    </div>
                    <form method="get" id="myIframe" name="formimbangduga" ref="formimbangduga" :action="Urlredirect()" target="iframe_laporan">
                    <div class="rounded bg-white shadow p-6">
                        <div class="pb-6">
                        <label for="username" class="font-semibold text-gray-700 block pb-1">Tarikh</label>
                            <div class="flex">
                                <input :value="$hostname" name="hostname" hidden/>
                                <input :value="$kodcaw" name="kodcaw" hidden/>
                                <input :value="jenisgenerate" type="hidden" name="jenis" />
                                <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
                                <input id="tarikhmula" name="datetimepicker1" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
                                <button @click.prevent="generateview" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-eye mr-2"></i>View</button>
                            </div>
                        </div> 
                    </div>
                    </form>
                </div>
            </div>

             <!-- <vue-friendly-iframe v-show="showLoader == false" :style="{visibility: showLoader ? 'hidden' : 'visible'}" class="mx-auto"
                                :src="''"
                                frame-id="myIframe"
                                @load="onLoad"
                                @iframe-load="LoadedReady"
                                name="iframe_laporan"
                            ref="friendlyIframe"></vue-friendly-iframe> -->
                            
            <!-- <iframe class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex bg-white" name="iframe_laporan" width="500" height="500"></iframe> -->
            <div v-if="showModal" class="overflow-x-hidden overflow-y-auto  fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
                <div class="relative w-1/2 my-6 mx-auto max-w-6xl">
                    <!--content-->
                    <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                    <!--header-->
                    <div class="relative p-6" style="height: 80vh;">
                        
                        <!-- <div id="loading" v-show="showLoader" class="flex justify-center mt-10" :style="{visibility: showLoader ? 'visible' : 'hidden'}" >
                            <img id="loading-image" src="/img/loader.gif" alt="Loading..." />
                        </div> -->

                         <div v-if="showLoader" class="inset-0 z-30 h-full w-full"  id="loading">
                            <i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:48% !important;top:45% !important;"></i>
                        </div>

                         <vue-friendly-iframe v-show="showLoader == false" :style="{visibility: showLoader ? 'hidden' : 'visible'}" class="h-full w-full"
                                :src="''"
                                frame-id="myIframe"
                                @load="onLoad"
                                @iframe-load="LoadedReady"
                                name="iframe_laporan"
                            ref="friendlyIframe"></vue-friendly-iframe>
                         
                            <!-- <iframe :style="{visibility: showLoader ? 'hidden' : 'visible'}" name="iframe_laporan" scrolling="true" :load="onLoad()"></iframe> -->
                    </div>
                    <!--footer-->
                    <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
                        <button @click.prevent="generatepdf" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" :disabled="pendingStatus == 'none'">{{ (pendingStatus == 'loading') ? '' : '' }}<i class="fas fa-file-pdf mr-2"></i>Cetak</button>
                        <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" type="button" v-on:click="toggleModal()" :disabled="pendingStatus == 'none'">
                        <i class="fas fa-window-close mr-2"></i>Tutup
                        </button>
                    </div>
                </div>
            </div>
            
            </div>

        <div v-if="showCetak" class="inset-0 z-30 h-full w-full"  id="loading">
            <i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
        </div>
        <div v-if="showModal || showCetak" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
    </div>
</template>
<style>
.vue-friendly-iframe iframe {
height:100% !important;
width:100% !important;
}
</style>
<script>

export default {
    name: 'myIframe',
    data(){
        return{
            jenisgenerate:'none',
            kodcaw: '',
            showModal:false,
            myIframe: null,
            iframesrc:'',
            pendingStatus:'none',
            showLoader: true,
            showCetak: false
        }
    },
    methods: {
        async generatepdf(){
            this.showCetak = true;
            this.showModal = false;
            await this.setJenis('pdf');

            // Vue.swal({
            //     title: 'Memuatkan...',
            //     allowEscapeKey : false,
            //     allowOutsideClick: false,
            //     showCancelButton: false,
            //     showConfirmButton: false

            // });

            await this.$refs.formimbangduga.submit()
            await setTimeout(() => {
                this.showCetak = false
            }, 8000);
        },
        async generateview(){
            await this.setJenis('view');

            // Vue.swal({
            //     title: 'Memuatkan...',
            //     allowEscapeKey : false,
            //     allowOutsideClick: false,
            //     showCancelButton: false,
            //     showConfirmButton: false

            // });
            this.showModal = true;


        },
        toggleModal: function(){
            this.showLoader = true
            this.pendingStatus = 'none'
            this.showModal = !this.showModal;
        },
        async onLoad() {
            await this.$refs.formimbangduga.submit() 
        },
        async LoadedReady(){
            await setTimeout(() => {
            this.showLoader = false
            this.pendingStatus = 'ok'
            }, 10000);
        },
        Urlredirect: function() {
         return window.route('cetak.imbangdugaExtended')
        },    
        setJenis: function(value){
            return this.jenisgenerate = value;
        },
        urlHostname: function(){
            return document.location.origin + '/iframe';
        }
    }
    
}
</script>