fix kelulusan
This commit is contained in:
fifi97
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div >
|
||||
<modal ref="modal"></modal>
|
||||
|
||||
<div class="bg-white md:items-center md:justify-between shadow rounded-lg p-4 md:p-6 xl:p-8 my-6">
|
||||
|
||||
<div class="flex flex-wrap w-full">
|
||||
<div v-for="index in 2" :key="index" class="flex flex-wrap w-full">
|
||||
<div class="w-full border rounded-l p-4">
|
||||
|
||||
<div class="flex flex-wrap mb-4">
|
||||
@@ -11,64 +13,29 @@
|
||||
<p class="font-bold text-xl w-1/3 text-gray-500 flex justify-end">Ar-Rahn Kota Bharu 2</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md">WAN RAMLAH BINTI WAN DERAMAN AMINUDDIN BAKI</span></p>
|
||||
<p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md capitalize">wan ramlah binti azam baki</span></p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM100,400.00</p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM100,400.00</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md">MOHD RUSYAIDI BIN RUSELI</span></p>
|
||||
<p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md capitalize">mohd rusyaidi bin ruseli</span></p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Margin: 78%</p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Berat: 100.00 gram</p>
|
||||
</div>
|
||||
<!-- <p class="font-bold text-xl">KB2210232-00032</p> -->
|
||||
|
||||
<div class="mx-auto flex justify-between mb-auto text-sm text-gray-500 mt-4">
|
||||
10 Jul 2018, 05:56PM
|
||||
|
||||
<div>
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-wrap w-full">
|
||||
<div class="w-full border rounded-l p-4">
|
||||
|
||||
<div class="flex flex-wrap mb-4">
|
||||
<p class="font-bold text-xl w-1/3">KB2210232-00032</p>
|
||||
<p class="font-bold text-md w-1/3 text-red-500 justify-center flex text-center">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
|
||||
<p class="font-bold text-xl w-1/3 text-gray-500 flex justify-end">Ar-Rahn Kota Bharu 2</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md">WAN RAMLAH BINTI WAN DERAMAN</span></p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM3,400.00</p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM3,400.00</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md">MOHD RUSYAIDI BIN RUSELI</span></p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Margin: 78%</p>
|
||||
<p class="w-1/4 text-sm text-gray-700">Berat: 32.00 gram</p>
|
||||
<div class="flex flex-wrap">
|
||||
<p class="font-bold text-green-500 w-3/4">Komen: <span class="text-black font-normal text-md w-1/4">Tiada Komen</span></p>
|
||||
</div>
|
||||
<!-- <p class="font-bold text-xl">KB2210232-00032</p> -->
|
||||
|
||||
<div class="mx-auto flex justify-between mb-auto text-sm text-gray-500 mt-4">
|
||||
10 Jul 2018, 05:56PM
|
||||
|
||||
<div>
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
|
||||
<div class="pl-4">
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1" @click.prevent="ApproveFunc"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1" @click.prevent="DisapproveFunc"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -77,7 +44,23 @@
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import modal from '../components/util/KomenModal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// pagination,
|
||||
modal,
|
||||
// deletemodal
|
||||
|
||||
},
|
||||
methods:{
|
||||
ApproveFunc:function(){
|
||||
this.$refs.modal.showModal = true;
|
||||
},
|
||||
DisapproveFunc:function(){
|
||||
console.log('taklulus');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Vendored
+1
-1
@@ -207,7 +207,7 @@ Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default
|
||||
Vue.component('clock-component', require('./components/util/Clock.vue').default)
|
||||
|
||||
Vue.component('logout-component', require('./Logout.vue').default)
|
||||
|
||||
Vue.component('notify-component', require('./components/util/Notify.vue').default)
|
||||
|
||||
Vue.component('apexchart', VueApexCharts)
|
||||
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div tabindex="0"
|
||||
class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed">
|
||||
<div class="z-50 relative p-3 mx-auto my-0 max-w-full"
|
||||
style="width: 500px;">
|
||||
<div class="bg-white rounded shadow-lg border flex flex-col overflow-hidden px-10 py-10">
|
||||
<div class="text-center">
|
||||
<span
|
||||
class="material-icons p-4 text-red-500 font-bold border-red-500 text-4xl">
|
||||
<i class="fas fa-warning"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center py-6 text-2xl text-gray-700">Are you sure ?</div>
|
||||
<div class="text-center font-light text-gray-700 mb-8">
|
||||
Do you really want to delete these records? This process cannot be undone.
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="bg-gray-300 text-gray-900 rounded hover:bg-gray-200 px-6 py-2 focus:outline-none mx-1">Cancel</button>
|
||||
<button
|
||||
class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-6 py-2 focus:outline-none mx-1">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-black opacity-50"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<transition name="modal-fade">
|
||||
<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/3 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-->
|
||||
<!--body-->
|
||||
<div class="relative p-6 flex-auto">
|
||||
|
||||
<h3 class="text-center text-3xl font-semibold mb-4">
|
||||
Komen
|
||||
</h3>
|
||||
|
||||
<input id="frminput" autofocus type="text" ref="btnDropdownRef" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
|
||||
|
||||
</div>
|
||||
<!--footer-->
|
||||
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
||||
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
|
||||
Batal
|
||||
</button>
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="toggleModal" type="button" >
|
||||
Lulus
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition
|
||||
enter-active-class="transition-all transform duration-200 ease-out"
|
||||
>
|
||||
</transition>
|
||||
|
||||
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: "bottom-start"
|
||||
}
|
||||
},
|
||||
name: "komen-modal",
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
kodcaw: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleModal: function(){
|
||||
this.showModal = !this.showModal;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.modal-fade-enter,
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-fade-enter-active,
|
||||
.modal-fade-leave-active {
|
||||
transition: opacity .5s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="notification" ref="notification" class="notification cursor-pointer" v-on:click="toggleDropdown()"></div>
|
||||
<div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
|
||||
<div class="py-1 px-2" role="none">
|
||||
<div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
|
||||
<div class="justify-between flex">
|
||||
<div class="w-4/6">
|
||||
<p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
|
||||
<p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
|
||||
<p class="-mb-4 text-sm">4 hours ago</p>
|
||||
</div>
|
||||
<div class="w-2/6">
|
||||
<p class="font-bold -mt-4">KB2000201-0232</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
|
||||
<div class="justify-between flex">
|
||||
<div class="w-4/6">
|
||||
<p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
|
||||
<p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
|
||||
<p class="-mb-4 text-sm">4 hours ago</p>
|
||||
</div>
|
||||
<div class="w-2/6">
|
||||
<p class="font-bold -mt-4">KB2000201-0232</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- <a class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">a<br><b>a</b></a> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button @click="Clicked">Increment Notifications</button> -->
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
/* Page Styles */
|
||||
|
||||
.container {
|
||||
/* position: absolute; */
|
||||
/* top: 50%; */
|
||||
/* left: 50%; */
|
||||
/* margin-right: 50%; */
|
||||
/* transform: translate(-50%, -50%); */
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 1em 2em;
|
||||
outline: none;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #3498db;
|
||||
border: 1px solid #1f74ac;
|
||||
border-radius: 0.3em;
|
||||
margin-top: 4em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2487c9;
|
||||
}
|
||||
/* Notifications */
|
||||
.notification {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.6em;
|
||||
background: #3498db;
|
||||
border-radius: 0.2em;
|
||||
font-size: 1.3em;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.notification::before,
|
||||
.notification::after {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.notification::before {
|
||||
display: block;
|
||||
content: "\f0f3";
|
||||
font-family: "FontAwesome";
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.notification::after {
|
||||
font-family: Arial;
|
||||
font-size: 0.7em;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
padding: 5px 8px;
|
||||
line-height: 100%;
|
||||
border: 2px #fff solid;
|
||||
border-radius: 60px;
|
||||
background: #3498db;
|
||||
opacity: 0;
|
||||
content: attr(data-count);
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: transform, opacity;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.notification.notify::before {
|
||||
animation: ring 1.5s ease;
|
||||
}
|
||||
|
||||
.notification.show-count::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes ring {
|
||||
0% {
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
12.5% {
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
37.5% {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
62.5% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
dropdownShow: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
document.addEventListener('click', this.onClick);
|
||||
|
||||
var el = this.$refs.notification;
|
||||
|
||||
if (Number(localStorage.getItem("data-count")) > 0){
|
||||
var count = Number(localStorage.getItem("data-count")) || 0;
|
||||
// console.log(localStorage.getItem("books"))
|
||||
el.setAttribute('data-count', count);
|
||||
el.classList.add('show-count');
|
||||
console.log('test1');
|
||||
}else{
|
||||
el.classList.remove('show-count');
|
||||
console.log('test2');
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.onClick);
|
||||
},
|
||||
methods:{
|
||||
async toggleDropdown() {
|
||||
this.dropdownShow = true;
|
||||
createPopper(this.$refs.notification, this.$refs.popoverDropdownRef, {
|
||||
placement: "bottom-end",
|
||||
modifiers: [{
|
||||
name: "preventOverflow",
|
||||
}]
|
||||
});
|
||||
},
|
||||
Clicked:function(data){
|
||||
var el = this.$refs.notification;
|
||||
var count = Number(localStorage.getItem("data-count")) || 0;
|
||||
console.log(count)
|
||||
localStorage.setItem('data-count',count + 1);
|
||||
el.setAttribute('data-count', count+1);
|
||||
el.classList.remove('notify');
|
||||
(function(){
|
||||
return el.offsetWidth;
|
||||
})();
|
||||
el.classList.add('notify');
|
||||
// if(count > 0){
|
||||
el.classList.add('show-count');
|
||||
// }
|
||||
},
|
||||
DropdownShow:function(){
|
||||
},
|
||||
onClick: function(){
|
||||
var el = this.$refs.notification;
|
||||
|
||||
let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
|
||||
let searchInside = this.$refs.notification.contains(event.target);
|
||||
let buttonSearch = document.getElementById('notification');
|
||||
|
||||
if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
|
||||
|
||||
localStorage.setItem('data-count',0);
|
||||
el.setAttribute('data-count', 0);
|
||||
el.classList.remove('show-count');
|
||||
this.dropdownShow = true
|
||||
|
||||
}
|
||||
else{
|
||||
|
||||
this.dropdownShow = false
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -128,7 +128,8 @@
|
||||
@auth
|
||||
<clock-component></clock-component>
|
||||
<cawangan-component roles={{ Auth::user()->roles }} route={{ (Route::is('home') || Route::is('akaun.home')) ? 'ada' : 'tiada' }} akaun={{ (Route::is('akaun.home') ? 'yes' : 'no')}}></cawangan-component>
|
||||
@endauth
|
||||
|
||||
@endauth
|
||||
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -149,6 +150,9 @@
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="mr-4">
|
||||
<notify-component></notify-component>
|
||||
</div>
|
||||
|
||||
<logout-component csrftoken="{{ csrf_token() }}" :route={{ json_encode(route('logout')) }}></logout-component>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user