DONE: confirmation and list online form
This commit is contained in:
ISMAIL MASSERAN
@@ -0,0 +1,137 @@
|
||||
@props([
|
||||
'id',
|
||||
'columns' => [],
|
||||
'exportable' => true,
|
||||
'filename' => '',
|
||||
'skipExport' => ['Bil', 'Cetak'],
|
||||
])
|
||||
|
||||
<style>
|
||||
.erahn-datatable {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.erahn-datatable .dataTables_wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.erahn-datatable table {
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
.erahn-datatable table th,
|
||||
.erahn-datatable table td {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.erahn-datatable .dt-buttons {
|
||||
margin: 0 0 8px 8px;
|
||||
}
|
||||
.erahn-datatable .dt-button {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
margin-left: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background: #17a2b8;
|
||||
color: #fff;
|
||||
}
|
||||
.erahn-datatable .dt-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.erahn-datatable .buttons-excel {
|
||||
background: #28a745;
|
||||
}
|
||||
.erahn-datatable .buttons-csv {
|
||||
background: #6c757d;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
if (typeof window.initErahnDatatable !== 'function') {
|
||||
window.initErahnDatatable = function (selector, options) {
|
||||
var $table = $(selector);
|
||||
var exportable = $table.data('exportable');
|
||||
var filename = $table.data('export-filename') || $table.attr('id') || 'export';
|
||||
var defaults = {
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
language: {
|
||||
emptyTable: 'Tiada rekod'
|
||||
}
|
||||
};
|
||||
|
||||
if ((exportable === undefined || exportable === 1 || exportable === true) &&
|
||||
$.fn.dataTable && $.fn.dataTable.Buttons) {
|
||||
defaults.dom = 'lBfrtip';
|
||||
defaults.buttons = [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: 'Excel',
|
||||
className: 'buttons-excel',
|
||||
title: filename,
|
||||
filename: filename,
|
||||
exportOptions: {
|
||||
columns: ':not(.no-export)',
|
||||
format: {
|
||||
body: function (data) {
|
||||
return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'csvHtml5',
|
||||
text: 'CSV',
|
||||
className: 'buttons-csv',
|
||||
bom: true,
|
||||
title: filename,
|
||||
filename: filename,
|
||||
exportOptions: {
|
||||
columns: ':not(.no-export)',
|
||||
format: {
|
||||
body: function (data) {
|
||||
return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
return $table.DataTable($.extend(true, {}, defaults, options || {}));
|
||||
};
|
||||
}
|
||||
if (typeof window.adjustErahnDatatables !== 'function') {
|
||||
window.adjustErahnDatatables = function () {
|
||||
if (!$.fn.dataTable) {
|
||||
return;
|
||||
}
|
||||
setTimeout(function () {
|
||||
$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
|
||||
}, 50);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="erahn-datatable">
|
||||
<table
|
||||
id="{{ $id }}"
|
||||
{{ $attributes->merge(['class' => 'table table-striped table-hover nowrap']) }}
|
||||
style="width:100%"
|
||||
data-exportable="{{ $exportable ? 1 : 0 }}"
|
||||
data-export-filename="{{ $filename !== '' ? $filename : $id }}"
|
||||
>
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
@foreach ($columns as $column)
|
||||
<th @if(in_array($column, $skipExport, true)) class="no-export" @endif>{{ $column }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
{{ $slot }}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
@props([
|
||||
'showCopies' => true,
|
||||
])
|
||||
|
||||
<style>
|
||||
.print-footer {
|
||||
margin-top: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
.print-footer .copies {
|
||||
margin-top: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.print-footer .copies span {
|
||||
display: inline-block;
|
||||
border: 1px solid #111;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 4px;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
.print-footer .notes {
|
||||
margin-top: 10px;
|
||||
font-size: 9.5px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.print-footer .notes b { font-size: 10px; }
|
||||
.print-footer .notes p { margin: 2px 0; }
|
||||
</style>
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'print-footer']) }}>
|
||||
@if($showCopies)
|
||||
<div class="copies">
|
||||
Salinan: <span></span> Kad Pengenalan <span></span> Akaun Bank/ Slip/ Penyata Bank
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(trim($slot) !== '')
|
||||
<div class="notes">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,101 @@
|
||||
@props([
|
||||
'cawangan' => '',
|
||||
'kodcaw' => '',
|
||||
'alamat1' => '',
|
||||
'alamat2' => '',
|
||||
'notel' => '',
|
||||
'tarikh' => '',
|
||||
'norujukan' => '',
|
||||
'rujukanLabel' => 'No. Rujukan SAG',
|
||||
'showDummyBadge' => false,
|
||||
])
|
||||
|
||||
<style>
|
||||
.print-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
column-gap: 12px;
|
||||
border-bottom: 2px solid #111;
|
||||
padding-bottom: 8px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
.print-header .org {
|
||||
min-width: 0;
|
||||
}
|
||||
.print-header .org p {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.print-header .org .name {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.print-header .logos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.print-header .logos img {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
max-width: 70px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.print-header .meta {
|
||||
text-align: right;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.print-header .meta .label { color: #444; }
|
||||
.print-header .dummy-badge {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid #c0392b;
|
||||
color: #c0392b;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
@media print {
|
||||
.print-header .dummy-badge { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'print-header']) }}>
|
||||
<div class="org">
|
||||
<p class="name">KOPERASI PERMODALAN KELANTAN BERHAD (D-5-0228)</p>
|
||||
<p>Ar-Rahn {{ $cawangan }}</p>
|
||||
<p>{{ $alamat1 }}</p>
|
||||
<p>{{ $alamat2 }}</p>
|
||||
<p>Tel: {{ $notel }}</p>
|
||||
</div>
|
||||
<div class="logos">
|
||||
<img src="{{ asset('img/kopkb.png') }}" alt="KPKB">
|
||||
<img src="{{ asset('img/logo-arrahn.jpeg') }}" alt="Ar-Rahn">
|
||||
</div>
|
||||
<div class="meta">
|
||||
@if($kodcaw || $cawangan)
|
||||
<div>
|
||||
<span class="label">Cawangan</span><br>
|
||||
<b>{{ trim(implode(' — ', array_filter([$kodcaw, $cawangan]))) }}</b>
|
||||
</div>
|
||||
@endif
|
||||
@if($tarikh)
|
||||
<div style="{{ ($kodcaw || $cawangan) ? 'margin-top:6px' : '' }}"><span class="label">Tarikh</span><br><b>{{ $tarikh }}</b></div>
|
||||
@endif
|
||||
@if($norujukan)
|
||||
<div style="margin-top:6px"><span class="label">{{ $rujukanLabel }}</span><br><b>{{ $norujukan }}</b></div>
|
||||
@endif
|
||||
{{ $slot }}
|
||||
@if($showDummyBadge)
|
||||
<div class="dummy-badge">CONTOH SAHAJA</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
.print-watermark {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.print-watermark img {
|
||||
height: 160px;
|
||||
max-width: 240px;
|
||||
object-fit: contain;
|
||||
opacity: 0.12;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="print-watermark" aria-hidden="true">
|
||||
<img src="{{ asset('img/logo_kad.jpeg') }}" alt="">
|
||||
<img src="{{ asset('img/logo-arrahn.jpeg') }}" alt="">
|
||||
</div>
|
||||
Reference in New Issue
Block a user