357 lines
12 KiB
PHP
357 lines
12 KiB
PHP
|
@extends('theme::layouts.app')
|
||
|
|
|
||
|
|
@section('style')
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
.dashboard-title{
|
||
|
|
font-size: 32px;
|
||
|
|
color: #364257;
|
||
|
|
margin-right: 80px;
|
||
|
|
}
|
||
|
|
.dashboard-btn{
|
||
|
|
margin-right: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
width: 250px;
|
||
|
|
padding: 12px !important;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
line-height: 30px;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 3px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.back-btn {
|
||
|
|
background-color: #9B0025;
|
||
|
|
color: #FFF;
|
||
|
|
padding: 20px 105px;
|
||
|
|
width: 250px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<button type="button" class="d-none reload-main-table"></button>
|
||
|
|
|
||
|
|
<div class="dashboard-title-flex">
|
||
|
|
<h2 class="dashboard-title">{{ __("Document Library") }}</h2>
|
||
|
|
<div class="dashboard-button-title">
|
||
|
|
<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">{{ __("Upload Document") }}</a>
|
||
|
|
<a href="{{ route('cms.bookkeepings') }}" class="btn btn-error">{{ __("Back") }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form class="search-bar flex mb-5" id="searchFilterFrm">
|
||
|
|
<span class="search-bar__label">{{ __("Document/Record search") }}</span>
|
||
|
|
<div class="search-bar__field">
|
||
|
|
<button type="button" data-bs-toggle="modal" data-bs-target="#searchFilterModal"><img src="{{ asset('themes/tailwind/images/setting-4.svg') }}"></button>
|
||
|
|
<input type="text" name="main_search_file_name" class="w-100" style="box-shadow: none;">
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn primary-button search-bar__button">{{ __("Search") }}</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="tabs-content">
|
||
|
|
<div class="tabs-content-item white-bg no-padd no-box-shadow">
|
||
|
|
<table id="documentLibrariesTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
{{-- <td style="width: fit-content;"><input type="checkbox"></td> --}}
|
||
|
|
<td>{{ __("Document Name") }}</td>
|
||
|
|
<td>{{ __("Company") }}</td>
|
||
|
|
<td>{{ __("Document Category") }}</td>
|
||
|
|
<td>{{ __("Upload User") }}</td>
|
||
|
|
<td>{{ __("Document Size") }}</td>
|
||
|
|
<td>{{ __("Date Uploaded") }}</td>
|
||
|
|
<td>{{ __("Action") }}</td>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{{-- <tr>
|
||
|
|
<td><input type="checkbox"></td>
|
||
|
|
<td>
|
||
|
|
<div class="flex justify-start">
|
||
|
|
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||
|
|
<span class="fix-text">202301Bank state...</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>ABC Consultant Ltd.</td>
|
||
|
|
<td>Report</td>
|
||
|
|
<td>Admin</td>
|
||
|
|
<td class="primary-text">234KB</td>
|
||
|
|
<td>20230515-14:43</td>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="primary-text">View</a> |
|
||
|
|
<a href="#" class="primary-text">Properties</a> |
|
||
|
|
<a href="#" class="primary-text">Download</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><input type="checkbox"></td>
|
||
|
|
<td>
|
||
|
|
<div class="flex justify-start">
|
||
|
|
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||
|
|
<span class="fix-text">202301Bank state...</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>ABC Consultant Ltd.</td>
|
||
|
|
<td>Report</td>
|
||
|
|
<td>Admin</td>
|
||
|
|
<td class="primary-text">234KB</td>
|
||
|
|
<td>20230515-14:43</td>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="primary-text">View</a> |
|
||
|
|
<a href="#" class="primary-text">Properties</a> |
|
||
|
|
<a href="#" class="primary-text">Download</a>
|
||
|
|
</td>
|
||
|
|
</tr> --}}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="d-flex align-items-center justify-content-center">
|
||
|
|
<a href="{{ route('cms.bookkeepings.document-libraries.export') }}" class="btn primary-button w-fit-content mb-3" style="min-width: 300px;">{{ __("Download") }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Modals --}}
|
||
|
|
{{-- Upload Document Modal --}}
|
||
|
|
@include('theme::cms.bookkeepings.document-libraries.upload-document-modal')
|
||
|
|
|
||
|
|
<div class="modal fade custom-modal" id="searchFilterModal" tabindex="-1" aria-labelledby="searchFilterModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
|
|
<div class="modal-content mx-auto">
|
||
|
|
<div class="modal-body p-0">
|
||
|
|
<p class="modal-title">{{ __("Search") }}</p>
|
||
|
|
|
||
|
|
<form action="#" class="theme-form" id="searchFilterModalFrm">
|
||
|
|
<div class="row mb-5 align-items-center">
|
||
|
|
<div class="col-4">
|
||
|
|
<label class="col-form-label">{{ __("Document category") }}</label>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<select class="w-100" name="search_bookkeeping_document_category_id">
|
||
|
|
@foreach ($categories as $category)
|
||
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||
|
|
@endforeach
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-5 align-items-center">
|
||
|
|
<div class="col-4">
|
||
|
|
<label class="col-form-label">{{ __("Status") }}</label>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<select class="w-100" name="search_status">
|
||
|
|
<option value="uploaded">{{ __("Uploaded") }}</option>
|
||
|
|
<option value="in_progress">{{ __("In Progress") }}</option>
|
||
|
|
<option value="ocr_complete">{{ __("OCR Complete") }}</option>
|
||
|
|
<option value="failed">{{ __("Failed") }}</option>
|
||
|
|
<option value="completed">{{ __("Completed") }}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-5 align-items-center">
|
||
|
|
<div class="col-4">
|
||
|
|
<label class="col-form-label">Keyword</label>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<input type="text" class="form-control" value="" name="search_file_name">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mb-5">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-4">
|
||
|
|
<label class="col-form-label">Date uploaded</label>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<select class="w-100" name="search_date_uploaded">
|
||
|
|
<option value="">Any time</option>
|
||
|
|
<option value="today">{{ __("Today") }}</option>
|
||
|
|
<option value="yesterday">{{ __("Yesterday") }}</option>
|
||
|
|
<option value="last_7_days">{{ __("Last 7 days") }}</option>
|
||
|
|
<option value="last_30_days">{{ __("Last 30 days") }}</option>
|
||
|
|
<option value="last_90_days">{{ __("Last 90 days") }}</option>
|
||
|
|
<option value="custom">{{ __("Custom") }}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="display:none;" id="customDateWrapper">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<label class="col-form-label">Between</label>
|
||
|
|
</div>
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col">
|
||
|
|
<input type="text" class="form-control" value="" name="search_date_from">
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<input type="text" class="form-control" value="" name="search_date_to">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center justify-content-center">
|
||
|
|
<button type="submit" class="btn green-btn mx-3">{{ __("Search") }}</button>
|
||
|
|
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('script')
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
|
||
|
|
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/cms/bookkeepings/document-libraries/upload-document-modal.js') }}"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
var mainSearchBtnClicked = false;
|
||
|
|
$.ajaxSetup({
|
||
|
|
headers: {
|
||
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#searchFilterModalFrm [name="search_date_from"]').datepicker().on('changeDate', function (selected) {
|
||
|
|
var minDate = new Date(selected.date.valueOf());
|
||
|
|
$('#searchFilterModalFrm [name="search_date_to"]').datepicker('setStartDate', minDate);
|
||
|
|
$('#searchFilterModalFrm [name="search_date_to"]').val('');
|
||
|
|
});
|
||
|
|
$('#searchFilterModalFrm [name="search_date_to"]').datepicker();
|
||
|
|
|
||
|
|
var documentLibrariesTable = $("#documentLibrariesTable").DataTable({
|
||
|
|
processing: true,
|
||
|
|
serverSide: true,
|
||
|
|
ajax: {
|
||
|
|
url: '{{ route("cms.bookkeepings.document-libraries.table") }}',
|
||
|
|
type: 'post',
|
||
|
|
"data": function ( d ) {
|
||
|
|
if (mainSearchBtnClicked == false && $('#searchFilterModal').is(':visible')) {
|
||
|
|
return $.extend( {}, d, {
|
||
|
|
"bookkeeping_document_category_id": $('#searchFilterModalFrm [name="search_bookkeeping_document_category_id"]').val(),
|
||
|
|
"status": $('#searchFilterModalFrm [name="search_status"]').val(),
|
||
|
|
"file_name": $('#searchFilterModalFrm [name="search_file_name"]').val(),
|
||
|
|
"date_uploaded": $('#searchFilterModalFrm [name="search_date_uploaded"]').val(),
|
||
|
|
"date_uploaded_from": $('#searchFilterModalFrm [name="search_date_from"]').val(),
|
||
|
|
"date_uploaded_to": $('#searchFilterModalFrm [name="search_date_to"]').val(),
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
else if (mainSearchBtnClicked) {
|
||
|
|
return $.extend( {}, d, {
|
||
|
|
"file_name": $('#searchFilterFrm [name="main_search_file_name"]').val(),
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return $.extend( {}, d, {} );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"dataSrc": function ( json ) {
|
||
|
|
for (var i = 0; i < json.data.length; i++) {
|
||
|
|
$.each( json.data[i], function( key, value ) {
|
||
|
|
json.data[i][key] = value ? value : '-';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return json.data;
|
||
|
|
},
|
||
|
|
complete: function (data) {
|
||
|
|
if (mainSearchBtnClicked == false && $('#searchFilterModal').is(':visible')) {
|
||
|
|
$('#searchFilterFrm')[0].reset();
|
||
|
|
}
|
||
|
|
else if (mainSearchBtnClicked) {
|
||
|
|
$('#searchFilterModalFrm')[0].reset();
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#searchFilterModal').modal('hide');
|
||
|
|
$('#searchFilterModalFrm button[type="submit"]').removeAttr('disabled');
|
||
|
|
$('#searchFilterModalFrm button[type="submit"]').html('{{ __("Search") }}');
|
||
|
|
|
||
|
|
$('#searchFilterFrm button[type="submit"]').removeAttr('disabled');
|
||
|
|
$('#searchFilterFrm button[type="submit"]').html('{{ __("Search") }}');
|
||
|
|
|
||
|
|
mainSearchBtnClicked = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
columns: [
|
||
|
|
// {data: 'checkbox', name: 'checkbox', searchable: false, sortable: false},
|
||
|
|
{data: 'file_name', name: 'bookkeeping_documents.file_name'},
|
||
|
|
('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
|
||
|
|
{data: 'category_name', name: 'bookkeeping_document_categories.name'},
|
||
|
|
{data: 'user_name', name: 'users.name'},
|
||
|
|
{data: 'document_size', name: 'document_size', searchable: false, sortable: false},
|
||
|
|
{data: 'created_at', name: 'bookkeeping_documents.created_at'},
|
||
|
|
{data: 'actions', name: 'actions', searchable: false, sortable: false}
|
||
|
|
],
|
||
|
|
order: [[5, "desc"]],
|
||
|
|
searchDelay: 500,
|
||
|
|
"language": {
|
||
|
|
"paginate": {
|
||
|
|
"next": ">", // Text for the "Next" page button
|
||
|
|
"previous": "<" // Text for the "Previous" page button
|
||
|
|
},
|
||
|
|
"emptyTable": '{{ __("No data available in table") }}'
|
||
|
|
// Add more text customizations if needed
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('change', '#searchFilterModalFrm [name="search_date_uploaded"]', function (e) {
|
||
|
|
if ($(this).val() == 'custom') {
|
||
|
|
$('#searchFilterModalFrm #customDateWrapper').show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$('#searchFilterModalFrm #customDateWrapper').hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('click', '.reload-main-table', function (e) {
|
||
|
|
documentLibrariesTable.ajax.reload();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('submit', '#searchFilterModalFrm', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var button = $(this).find('button[type="submit"]');
|
||
|
|
var buttonHtml = button.html();
|
||
|
|
|
||
|
|
if (!button.is(':disabled')) {
|
||
|
|
button.attr('disabled', 'disabled');
|
||
|
|
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||
|
|
documentLibrariesTable.ajax.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('submit', '#searchFilterFrm', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var button = $(this).find('button[type="submit"]');
|
||
|
|
var buttonHtml = button.html();
|
||
|
|
|
||
|
|
if (!button.is(':disabled')) {
|
||
|
|
button.attr('disabled', 'disabled');
|
||
|
|
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||
|
|
mainSearchBtnClicked = true;
|
||
|
|
documentLibrariesTable.ajax.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('click', '.download-file', function (e) {
|
||
|
|
var id = $(this).attr('data-id');
|
||
|
|
var url = '{{ route("cms.bookkeepings.document-libraries.download", ["document" => ":id"]) }}';
|
||
|
|
|
||
|
|
if (id) {
|
||
|
|
$.ajax({
|
||
|
|
url: url.replace(':id', id),
|
||
|
|
type: "get",
|
||
|
|
data: {},
|
||
|
|
dataType: 'json',
|
||
|
|
success:function(data) {
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
@endsection
|