Rapport-Laravel/resources/views/form/list.blade.php

627 lines
28 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
@include('layouts.shared/title-meta', ['title' => "History"])
@include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
<link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
</head>
<div id="pageloader">
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
<body class="loading">
<div class="account-pages">
<div class="container">
<!-- start page title -->
<div class="row">
<div class="col-8 p-2">
<h4 class="page-title">{{$formname}}</h4>
</div>
<div class="col-4 p-2">
<button type="button" id="export-btn" class="btn btn-info btn-xs float-end" data-bs-toggle="modal" data-bs-target="#export-modal">Export</button>
</div>
<div class="col-12">
</div>
</div>
<!-- end page title -->
@if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<div id="notifications"></div>
<div class="row">
<div class="col-12 p-0">
<div class="card">
<div class="card-body">
<form class="row row-cols-lg-auto g-2 align-items-center mb-3" id="date-range-form" onsubmit="return false;">
<div class="col-4">
<label for="startdate" class="form-label mb-0 me-2">Start Date:</label>
<input type="date" class="form-control form-control-sm d-inline-block w-auto" id="startdate" name="startdate" value="{{ request()->input('startdate') }}">
</div>
<div class="col-4">
<label for="enddate" class="form-label mb-0 me-2">End Date:</label>
<input type="date" class="form-control form-control-sm d-inline-block w-auto" id="enddate" name="enddate" value="{{ request()->input('enddate') }}">
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-sm" id="apply-date-range">Apply</button>
</div>
<input type="hidden" name="form_id" id="form_id" value="{{ $form_id }}">
</form>
<div class="responsive-table-plugin">
<div class="table-rep-plugin">
<div class="table-responsive" data-pattern="priority-columns">
<table id="basic-datatable" class="table dt-responsive nowrap">
<thead>
<tr>
<th data-priority="1">Action</th>
<th data-priority="1">Submission Date</th>
<th data-priority="1">Submitted By</th>
<th data-priority="1">Employee Code</th>
@foreach(($userAttrs ?? []) as $attr)
<th data-priority="1">{{ $userAttrLabels[$attr] ?? ucwords(str_replace('_', ' ', $attr)) }}</th>
@endforeach
@if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
<th data-priority="1">Workflow Status</th>
@endif
@foreach(($positionColumns ?? []) as $positionField)
<th data-priority="1">{{ ucfirst($positionField) }}</th>
@endforeach
@if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes' )
<th data-priority="1">L1 Manager</th>
<th data-priority="1">L1 Employee Code</th>
<th data-priority="1">L2 Manager</th>
<th data-priority="1">L2 Employee Code</th>
@endif
@foreach($questions as $code => $question)
@if($question->type == 'hidden')
@continue
@endif
@if($question->type == 'multitextbox')
@foreach( $question->options as $k => $v )
<th data-priority="1">{{$v}} ({{$question->label}})</th>
@endforeach
@else
<th data-priority="1">{{$question->label}}</th>
@endif
@endforeach
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
@if($lastkey)
<div class="text-center d-grid mt-3">
<button class="btn btn-info" type="button" id="load-btn"> Load More ... </button>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="export-modal" tabindex="-1" role="dialog" aria-labelledby="export-modal-label" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="export-modal-label">Export</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-2">
<label for="export-startdate" class="form-label">Start Date</label>
<input type="date" class="form-control form-control-sm" id="export-startdate" required>
</div>
<div class="mb-2">
<label for="export-enddate" class="form-label">End Date</label>
<input type="date" class="form-control form-control-sm" id="export-enddate" required>
</div>
<div id="export-date-error" class="text-danger small d-none"></div>
<small class="text-muted">Maximum date range is 12 months.</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning btn-sm" id="export-email-btn">Email</button>
<button type="button" class="btn btn-info btn-sm" id="export-download-btn">Download</button>
</div>
</div>
</div>
</div>
<style type="text/css">
#pageloader {
background: rgba( 255, 255, 255, 0.8 );
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 9999;
}
#pageloader img {
left: 50%;
margin-left: -32px;
margin-top: -32px;
position: absolute;
top: 50%;
}
</style>
@include('layouts.shared/footer-script')
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$.fn.dataTable.ext.errMode = 'none';
const loggedInUser = @json($formdata->user_id ?? "");
const allAccess = @json(isset($formdata->all_data_access) ? $formdata->all_data_access : 0);
const formId = @json($form_id);
const canDeleteSubmission = @json(!empty($formdata->delete_submission));
let table = $('#basic-datatable').DataTable({
"responsive": false,
"language": {
"paginate": {
"previous": "<i class='mdi mdi-chevron-left'>",
"next": "<i class='mdi mdi-chevron-right'>"
}
},
fixedHeader: true,
"paging": false,
"pageLength": -1,
"lengthMenu": [[-1], ["All"]],
'processing': false,
'serverSide': false,
"order": [[1, "desc"]],
'searching': true,
'info': true,
data: [],
columns: [
{ data: null,
render: function ( data, type, row ) {
let buttons = '';
if (row.actions && Array.isArray(row.actions)) {
if (row.actions.includes('edit')) {
buttons += ` <button title="Edit" class="btn btn-warning btn-xs waves-effect waves-light btn-edit" submission="${row.submission_id}"><i class="mdi mdi-pencil-outline"></i></button>`;
}
if (row.actions.includes('delete') || canDeleteSubmission) {
buttons += ` <button title="Delete" class="btn btn-danger btn-xs waves-effect waves-light btn-delete" submission="${row.submission_id}"><i class="mdi mdi-delete-outline"></i></button>`;
}
if (row.actions.includes('approve') || row.actions.includes('reject')) {
const nextApprover = row.workflow_next_approver ?? "";
if (allAccess == 1) {
if (row.actions.includes('approve')) {
buttons += `<button title="Approve" class="btn btn-success btn-xs waves-effect waves-light btn-approve" submission="${row.submission_id}"><i class="mdi mdi-check-outline"></i></button>`;
}
if (row.actions.includes('reject')) {
buttons += `<button title="Reject" class="btn btn-danger btn-xs waves-effect waves-light btn-reject" submission="${row.submission_id}"><i class="mdi mdi-close-outline"></i></button>`;
}
} else if (loggedInUser === nextApprover) {
if (row.actions.includes('approve')) {
buttons += `<button title="Approve" class="btn btn-success btn-xs waves-effect waves-light btn-approve" submission="${row.submission_id}"><i class="mdi mdi-check-outline"></i></button>`;
}
if (row.actions.includes('reject')) {
buttons += `<button title="Reject" class="btn btn-danger btn-xs waves-effect waves-light btn-reject" submission="${row.submission_id}"><i class="mdi mdi-close-outline"></i></button>`;
}
}
}
}
return buttons;
}
},
{ "data": "date" },
{ "data": "name" },
{ "data": "employee_code" },
@foreach(($userAttrs ?? []) as $attr)
{ "data": "{{ $attr }}" },
@endforeach
@if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
{ "data": "workflow_status" },
@endif
@foreach(($positionColumns ?? []) as $positionField)
{ "data": "{{ $positionField }}" },
@endforeach
@if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes')
{ "data": "manager1_name" },
{ "data": "manager1_code" },
{ "data": "manager2_name" },
{ "data": "manager2_code" },
@endif
@foreach($questions as $code => $question)
@if($question->type == 'hidden')
@continue
@endif
@if($question->type == 'multitextbox')
@foreach($question->options as $k => $v)
{ "data": "{{$k}}" },
@endforeach
@elseif($question->type == 'image')
{
"data": "{{$code}}",
render: function(data, type, row) {
data = row.{{$code.'_file'}};
if (data && !/^https?:\/\//.test(data)) {
data = '{{ env('AWS_URL') }}' + (data.startsWith('/') ? '' : '/') + data;
}
if (data && data !== '') {
return '<button class="btn btn-info btn-xs" onclick="window.open(\'' + data + '\', \'_blank\')">View Image</button>';
}
return '';
}
},
@elseif($question->type == 'file')
{
"data": "{{$code}}",
render: function(data, type, row) {
data = row.{{$code.'_file'}};
if (data && !/^https?:\/\//.test(data)) {
data = '{{ env('AWS_URL') }}' + (data.startsWith('/') ? '' : '/') + data;
}
if (data && data !== '') {
return '<a class="btn btn-primary btn-xs" target="_blank" href="' + data + '" download>Download File</a>';
}
return '';
}
},
@else
{ "data": "{{$code}}" },
@endif
@endforeach
],
"initComplete": function(settings, json) {
var textBox = $('.dataTables_filter label input');
textBox.unbind();
textBox.on('keydown', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
runServerSearch($(this).val());
}
});
textBox.on('input', function() {
if (!$(this).val()) {
runServerSearch('');
}
});
}
});
let lastkey = '{{$lastkey}}';
let currentFilterParams = {};
function runServerSearch(keyword) {
currentFilterParams = Object.assign({}, currentFilterParams, {
form_id: $('#form_id').val(),
startdate: $('#startdate').val(),
enddate: $('#enddate').val()
});
keyword = (keyword || '').trim();
if (keyword) {
currentFilterParams.keyword = keyword;
} else {
delete currentFilterParams.keyword;
}
lastkey = 1;
loadRows(lastkey, false, currentFilterParams);
}
function parseYmd(ymd) {
var parts = String(ymd || '').split('-');
if (parts.length !== 3) return null;
var y = parseInt(parts[0], 10);
var m = parseInt(parts[1], 10) - 1;
var d = parseInt(parts[2], 10);
if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
var date = new Date(y, m, d);
if (date.getFullYear() !== y || date.getMonth() !== m || date.getDate() !== d) return null;
return date;
}
function addMonthsClamped(date, months) {
var y = date.getFullYear();
var m = date.getMonth() + months;
var d = date.getDate();
var result = new Date(y, m, 1);
var lastDay = new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate();
result.setDate(Math.min(d, lastDay));
return result;
}
function validateExportDateRange(startdate, enddate, silent) {
if (!startdate || !enddate) {
if (!silent) Swal.fire('Error!', 'Start date and end date are required.', 'error');
return false;
}
var start = parseYmd(startdate);
var end = parseYmd(enddate);
if (!start || !end) {
if (!silent) Swal.fire('Error!', 'Start date or end date is invalid.', 'error');
return false;
}
if (end < start) {
if (!silent) Swal.fire('Error!', 'End date must be on or after start date.', 'error');
return false;
}
var maxEnd = addMonthsClamped(start, 12);
if (end > maxEnd) {
if (!silent) Swal.fire('Error!', 'Date range must not exceed 12 months.', 'error');
return false;
}
return true;
}
function bindRowActions() {
$('.btn-edit').off('click').on('click', function(){
window.location.href = '/form/edit?id=' + $(this).attr('submission');
});
$('.btn-delete').off('click').on('click', function(){
const btn = $(this);
const submissionId = btn.attr('submission');
Swal.fire({
title: 'Are you sure?',
text: "Do you really want to delete this submission?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$("#pageloader").fadeIn();
$.ajax({
url: '/form/delete',
type: 'GET',
data: {
id: submissionId,
form_id: formId,
_token: '{{ csrf_token() }}'
},
success: function(response) {
$("#pageloader").fadeOut();
if (response.success) {
Swal.fire('Deleted!', 'Submission has been deleted.', 'success');
table.rows(function(idx, data) {
return data.submission_id === submissionId;
}).remove().draw();
} else {
Swal.fire('Error!', response.message || 'Could not delete submission.', 'error');
}
},
error: function(xhr) {
$("#pageloader").fadeOut();
Swal.fire('Error!', xhr.responseJSON?.message || 'Could not delete submission.', 'error');
}
});
}
});
});
$('.btn-approve').off('click').on('click', function(){
$("#pageloader").fadeIn();
let that = $(this);
$.ajax({
type: "GET",
url: '/form/approvereject?action=approve&id=' + that.attr('submission') + '&form_id=' + formId + '&user_id={{ $formdata->user_id ?? '' }}&partition={{ $formdata->partition ?? '' }}',
processData: false,
contentType: false,
success: function() {
$("#pageloader").fadeOut();
that.parent().html('');
},
error: function() {
$("#pageloader").fadeOut();
Swal.fire('Error!', 'Could not approve submission.', 'error');
}
});
});
$('.btn-reject').off('click').on('click', function(){
$("#pageloader").fadeIn();
let that = $(this);
$.ajax({
type: "GET",
url: '/form/approvereject?action=reject&id=' + that.attr('submission') + '&form_id=' + formId + '&user_id={{ $formdata->user_id ?? '' }}&partition={{ $formdata->partition ?? '' }}',
processData: false,
contentType: false,
success: function() {
$("#pageloader").fadeOut();
that.parent().html('');
},
error: function() {
$("#pageloader").fadeOut();
Swal.fire('Error!', 'Could not reject submission.', 'error');
}
});
});
}
function loadRows(lastkeyVal, append = true, extraParams = {}) {
$("#pageloader").fadeIn();
let params = {
lastkey: lastkeyVal,
partition: '{{ $formdata->partition ?? '' }}',
limit: 50
};
params['user_id'] = '{{ $formdata->user_id ?? '' }}';
@if(isset($formdata->all_data_access) && $formdata->all_data_access == 1)
params['alldata'] = 1;
@else
params['team_report'] = 1;
@endif
params['delete_submission'] = canDeleteSubmission ? 1 : 0;
params = Object.assign(params, extraParams);
$.get('/form/loadmore?' + $.param(params), function(data) {
$("#pageloader").fadeOut();
if (data && data.rows && data.rows.length > 0) {
if (append) {
table.rows.add(data.rows).draw(false);
} else {
table.clear().rows.add(data.rows).draw();
}
lastkey = data.lastkey;
if (!data.lastkey) {
$('#load-btn').hide();
} else {
$('#load-btn').show();
}
} else if (!append) {
table.clear().draw();
$('#load-btn').hide();
} else {
$('#load-btn').hide();
}
bindRowActions();
}).fail(function() {
$("#pageloader").fadeOut();
Swal.fire('Error!', 'Could not load submissions.', 'error');
});
}
$('#apply-date-range').on('click', function() {
var keyword = currentFilterParams.keyword || '';
currentFilterParams = {
form_id: $('#form_id').val(),
startdate: $('#startdate').val(),
enddate: $('#enddate').val()
};
if (keyword) {
currentFilterParams.keyword = keyword;
}
lastkey = 1;
loadRows(lastkey, false, currentFilterParams);
});
currentFilterParams = {
form_id: $('#form_id').val(),
startdate: $('#startdate').val(),
enddate: $('#enddate').val()
};
loadRows(1, false, currentFilterParams);
$('#load-btn').off('click').on('click', function() {
if (lastkey) {
loadRows(lastkey, true, currentFilterParams);
}
});
$('#export-modal').on('show.bs.modal', function() {
$('#export-startdate').val($('#startdate').val() || '');
$('#export-enddate').val($('#enddate').val() || '');
$('#export-date-error').addClass('d-none').text('');
syncExportDateLimits();
});
function formatYmd(date) {
var y = date.getFullYear();
var m = String(date.getMonth() + 1).padStart(2, '0');
var d = String(date.getDate()).padStart(2, '0');
return y + '-' + m + '-' + d;
}
function syncExportDateLimits() {
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
var start = parseYmd(startdate);
var end = parseYmd(enddate);
var $startInput = $('#export-startdate');
var $endInput = $('#export-enddate');
var $error = $('#export-date-error');
$startInput.removeAttr('max');
$endInput.removeAttr('min').removeAttr('max');
if (start) {
$endInput.attr('min', startdate);
$endInput.attr('max', formatYmd(addMonthsClamped(start, 12)));
}
if (end) {
$startInput.attr('max', enddate);
$startInput.attr('min', formatYmd(addMonthsClamped(end, -12)));
}
if (startdate && enddate && !validateExportDateRange(startdate, enddate, true)) {
var msg = 'Date range must not exceed 12 months.';
if (end && start && end < start) {
msg = 'End date must be on or after start date.';
}
$error.removeClass('d-none').text(msg);
return false;
}
$error.addClass('d-none').text('');
return true;
}
$('#export-startdate, #export-enddate').on('change input', function() {
syncExportDateLimits();
});
$('#export-download-btn').on('click', function(e) {
e.preventDefault();
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
if (!validateExportDateRange(startdate, enddate)) {
syncExportDateLimits();
return false;
}
var url = '/form/downloaddata?form_id=' + encodeURIComponent(formId)
+ '&startdate=' + encodeURIComponent(startdate)
+ '&enddate=' + encodeURIComponent(enddate);
window.location.href = url;
$('#export-modal').modal('hide');
});
$('#export-email-btn').on('click', function(e) {
e.preventDefault();
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
if (!validateExportDateRange(startdate, enddate)) {
syncExportDateLimits();
return false;
}
$("#pageloader").fadeIn();
var url = '/form/downloaddata?email=1&form_id=' + encodeURIComponent(formId)
+ '&startdate=' + encodeURIComponent(startdate)
+ '&enddate=' + encodeURIComponent(enddate);
$.ajax({
type: "GET",
url: url,
success: function() {
$('#notifications').append('<div class="alert alert-success">Email Sent Successfully</div>');
$("#pageloader").fadeOut();
$('#export-modal').modal('hide');
},
error: function(xhr) {
$("#pageloader").fadeOut();
var message = xhr.responseJSON?.message || 'Could not send email.';
Swal.fire('Error!', message, 'error');
}
});
});
});
</script>
</body>
</html>