385 lines
17 KiB
PHP
385 lines
17 KiB
PHP
@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<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" />
|
|
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@30.0.0/dist/ag-grid-community.min.js"></script>
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div id="pageloader">
|
|
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
|
|
</div>
|
|
<div class="container-fluid">
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<div class="page-title-right">
|
|
<button class="btn btn-success" id="btn_approve_all">Approve all Selected</button>
|
|
<button class="btn btn-danger ms-1" id="btn_reject_all">Reject all Selected</button>
|
|
<button class="btn btn-primary ms-1" >Show All</button>
|
|
<button class="btn btn-primary ms-1" id="btn_approve_all">Show Pending</button>
|
|
<a class="btn btn-dark waves-effect waves-light ms-1" href="/form/allsubmissions?partition={{$form->partition}}&form_id={{$form->id}}&download=1">Export</a>
|
|
</div>
|
|
<h4 class="page-title">All Workflow</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
@if(session()->has('message'))
|
|
<div class="alert alert-success">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="myGrid" style="" class="ag-theme-alpine"></div>
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</div>
|
|
|
|
</div> <!-- container -->
|
|
|
|
<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content ">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="scrollableModalTitle">View Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<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%;
|
|
}
|
|
.img-thumbnail {max-width: 100px}
|
|
.filter-section .form-select {max-width: 150px}
|
|
.filter-section .form-control {max-width: 120px}
|
|
.header-cell {background-color: #a6e1ec;text-align: center;}
|
|
.quarters-cell {background-color: #5bc0de;}
|
|
.row-header {}
|
|
.cell-span {background-color: #f4f7f8;}
|
|
</style>
|
|
|
|
|
|
@endsection
|
|
|
|
|
|
@section('script')
|
|
|
|
<!-- third party js -->
|
|
|
|
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
|
|
<!-- third party js ends -->
|
|
<script type="text/javascript">
|
|
let submissions = []
|
|
function submissionHandle(id) {
|
|
let submission = submissions.find(s => s.id == id)
|
|
$('#scrollable-modal').modal('show');
|
|
$('#scrollable-modal .modal-body').html(`
|
|
<div class="row gx-0 justify-content-center" id="model_approval_status"><div class="col-2"><div class="avatar-md"><img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" class="img-fluid" alt="processing..." /></div></div></div>
|
|
<div id="form-wrapper">
|
|
<form method="POST" action="/form/submit" id="report-form" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="col-12 mb-2">
|
|
<div class="table-responsive">
|
|
<table class="table m-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Field</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><h5 class="m-0 fw-normal">User Name</h5> </td>
|
|
<td> ${submission['submitted_by']} </td>
|
|
</tr>
|
|
<tr>
|
|
<td><h5 class="m-0 fw-normal">User Email</h5> </td>
|
|
<td> ${submission['user_email']} </td>
|
|
</tr>
|
|
<tr>
|
|
<td><h5 class="m-0 fw-normal">User Phone</h5> </td>
|
|
<td> ${submission['user_phone']} </td>
|
|
</tr>
|
|
<tr>
|
|
<td><h5 class="m-0 fw-normal">Submitted On</h5> </td>
|
|
<td> ${submission['submitted_on']} </td>
|
|
</tr>
|
|
@foreach($questions as $que)
|
|
<tr>
|
|
<td><h5 class="m-0 fw-normal">{{$que->question}}</h5> </td>
|
|
<td> ${submission['{{$que->code}}']} </td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<button type="button" class="btn btn-success" submission="${id}" id="btn_approve" ${ ['approved', 'rejected'].includes(submission.workflow_status) ? 'disabled':''}>Approve</button>
|
|
<button type="button" class="btn btn-danger ms-1" submission="${id}" id="btn_reject" ${ ['approved', 'rejected'].includes(submission.workflow_status) ? 'disabled':''}>Reject</button>
|
|
</div>
|
|
</form>
|
|
</div>`)
|
|
|
|
$.ajax({
|
|
url: '/form/allaprovers',
|
|
type: 'GET',
|
|
data: {submission_id:id, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
|
|
success: function( data ) {
|
|
$('#model_approval_status').html('')
|
|
for(let da of data) {
|
|
$('#model_approval_status').append(`<div class="col-auto">
|
|
<div class="widget-rounded-circle card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center gx-2">
|
|
<div class="col-auto">
|
|
<div class="avatar-sm">
|
|
<img src="https://ui-avatars.com/api/?background=random&name=${da.user_name}" class="img-fluid rounded-circle" alt="user-img">
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="mb-1 mt-2 font-16">${da.user_name}</h5>
|
|
<p class="mb-2 text-muted">${da.approval_status}</p>
|
|
</div>
|
|
</div> <!-- end row-->
|
|
</div>
|
|
</div> <!-- end widget-rounded-circle-->
|
|
</div>`)
|
|
}
|
|
console.log(data)
|
|
},
|
|
});
|
|
|
|
$('#btn_approve').unbind()
|
|
$('#btn_approve').click(function(){
|
|
$("#pageloader").fadeIn();
|
|
let that = $(this)
|
|
$.ajax({
|
|
url: '/form/approverejectmultiple',
|
|
type: 'GET',
|
|
data: {action:'approve', ids:[that.attr('submission')], form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456', user_id:'{{ $formdata->user_id ?? '' }}', partition:'{{ $formdata->partition ?? '' }}'},
|
|
success: function( data ) {
|
|
$("#pageloader").fadeOut();
|
|
$('#scrollable-modal').modal('hide');
|
|
Swal.fire({
|
|
title: 'Great!',
|
|
text: 'Your data is successfully submitted!',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
});
|
|
})
|
|
$('#btn_reject').unbind()
|
|
$('#btn_reject').click(function(){
|
|
$("#pageloader").fadeIn();
|
|
let that = $(this)
|
|
$.ajax({
|
|
url: '/form/approverejectmultiple',
|
|
type: 'GET',
|
|
data: {action:'reject', ids:[that.attr('submission')], form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456', user_id:'{{ $formdata->user_id ?? '' }}', partition:'{{ $formdata->partition ?? '' }}'},
|
|
success: function( data ) {
|
|
$("#pageloader").fadeOut();
|
|
$('#scrollable-modal').modal('hide');
|
|
Swal.fire({
|
|
title: 'Great!',
|
|
text: 'Your data is successfully submitted!',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
});
|
|
})
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
|
|
$('#btn_approve_all').click(function(){
|
|
$("#pageloader").fadeIn();
|
|
let selected = []
|
|
$('input[type=checkbox]').each(function () {
|
|
if(this.checked) {
|
|
selected.push($(this).val())
|
|
}
|
|
});
|
|
if(selected.length > 0) {
|
|
$.ajax({
|
|
url: '/form/approverejectmultiple',
|
|
type: 'GET',
|
|
data: {action:'approve', ids:selected, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456', user_id:'{{ $formdata->user_id ?? '' }}', partition:'{{ $formdata->partition ?? '' }}'},
|
|
dataType: "json",
|
|
success: function(resultData) {
|
|
$("#pageloader").fadeOut();
|
|
Swal.fire({
|
|
title: 'Great!',
|
|
text: 'Your data is successfully submitted!',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
});
|
|
} else {
|
|
$("#pageloader").fadeOut();
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'No Submission Selected',
|
|
text: 'Please select at least 1 submission'
|
|
})
|
|
}
|
|
console.log(selected)
|
|
})
|
|
|
|
$('#btn_reject_all').click(function(){
|
|
$("#pageloader").fadeIn();
|
|
let selected = []
|
|
$('input[type=checkbox]').each(function () {
|
|
if(this.checked) {
|
|
selected.push($(this).val())
|
|
}
|
|
});
|
|
if(selected.length > 0) {
|
|
$.ajax({
|
|
url: '/form/approverejectmultiple',
|
|
type: 'GET',
|
|
data: {action:'reject', ids:selected, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456', user_id:'{{ $formdata->user_id ?? '' }}', partition:'{{ $formdata->partition ?? '' }}'},
|
|
dataType: "json",
|
|
success: function(resultData) {
|
|
$("#pageloader").fadeOut();
|
|
Swal.fire({
|
|
title: 'Great!',
|
|
text: 'Your data is successfully submitted!',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
});
|
|
} else {
|
|
$("#pageloader").fadeOut();
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'No Submission Selected',
|
|
text: 'Please select at least 1 submission'
|
|
})
|
|
}
|
|
console.log(selected)
|
|
})
|
|
|
|
const columnDefs = [{
|
|
headerName: "Select",
|
|
width: 120,
|
|
cellRenderer: params => {
|
|
return `<input type="checkbox" value="${params.data.id}" name="row-${params.data.id}" ${ ['approved', 'rejected'].includes(params.data.workflow_status) ? 'disabled':''} class="form-check-input mt-2" /> <button type="button" onClick="submissionHandle('${params.data.id}')" class="btn btn-info btn-xs ms-1 btn_submission_view">View</button>`;
|
|
}
|
|
},
|
|
{
|
|
headerName: 'Approval Status',
|
|
field: 'workflow_status',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'User Name',
|
|
field: 'submitted_by',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'User Email',
|
|
field: 'user_email',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'User Phone',
|
|
field: 'user_phone',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Submitted On',
|
|
field: 'submitted_on',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: 170,
|
|
},
|
|
@foreach($questions as $que)
|
|
{
|
|
headerName: '{{$que->question}}',
|
|
field: '{{$que->code}}',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
width: {{ strlen($que->question)*14 > 250 ? 250 : ( strlen($que->question)*14 < 150 ? 150 : strlen($que->question)*14 ) }},
|
|
},
|
|
@endforeach
|
|
]
|
|
|
|
const rowData = [];
|
|
const gridOptions = {
|
|
columnDefs: columnDefs,
|
|
pagination: true,
|
|
paginationPageSize: 50,
|
|
defaultColDef: {
|
|
resizable: true,
|
|
sortable: true,
|
|
},
|
|
rowData: rowData,
|
|
domLayout: 'autoHeight',
|
|
};
|
|
|
|
const gridDiv = document.querySelector('#myGrid');
|
|
new agGrid.Grid(gridDiv, gridOptions);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '{{$submission_json}}',
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(data) {
|
|
//console.log(data)
|
|
submissions = data
|
|
gridOptions.api.setRowData(data);
|
|
$("#pageloader").fadeOut();
|
|
},
|
|
});
|
|
|
|
|
|
$('.btn_submission_view').on( 'click', 'button', function () {
|
|
$('#scrollable-modal').modal('show');
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
@endsection |