first commit
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
@section('style')
|
||||
<style>
|
||||
.pagination-link {
|
||||
padding: 35px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.pagination-link .flex.justify-between.flex-1.sm\:hidden {
|
||||
justify-content: unset !important;
|
||||
}
|
||||
.pagination-link p.text-sm.text-gray-700.leading-5 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
img.doc-file-img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="document-library-page">
|
||||
<div class="title-wrapper">
|
||||
<form action="{{ Request::url() }}" method="GET" class="theme-form search-wrapper mb-2">
|
||||
<span class="search-title">Document/Record search</span>
|
||||
<div class="search-input-wrapper">
|
||||
<a class="filter-modal" href="#" data-bs-toggle="modal" data-bs-target="#searchFilterModal">
|
||||
<img src="{{ asset('themes/tailwind/images/filter-icon.png') }}">
|
||||
</a>
|
||||
<input type="text" name="s" value="{{ $search }}" class="form-control" required>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn">Search</button>
|
||||
</form>
|
||||
<div class="title-actions-wrapper">
|
||||
<a href="{{ route('wave.user.book-keeping.list') }}" class="btn yellow-btn mb-2">Back to list</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wrapper">
|
||||
<div class="table-responsive mb-5">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="custom-radio-checkbox">
|
||||
<input type="checkbox" id="checkAll" value="all">
|
||||
<label for="checkAll"></label>
|
||||
</div>
|
||||
Document Name
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Document Size</th>
|
||||
<th scope="col">Date Uploaded</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="custom-radio-checkbox">
|
||||
<input type="checkbox" class="download-checkbox" id="row-{{ $doc->id }}" value="{{ $doc->id }}">
|
||||
<label for="row-{{ $doc->id }}"></label>
|
||||
</div>
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td><span class="green-text">{{ $doc->file_size }}</span></td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="{{ $doc->url }}" id="download-doc-{{ $doc->id }}" class="action-btn text-underline sky-blue-text" target="_blank" >Download</a>
|
||||
</div>
|
||||
<div class="modal fade doc-file-img-modal" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img class="doc-file-img" src="{{ $doc->url }}" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="btn blue-btn mx-auto mb-5" id="download-all-file" >Download</button>
|
||||
<div class="pagination-link" >{{ $documents->links() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Search Filter Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="searchFilterModal" tabindex="-1" aria-labelledby="searchFilterModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Search</p>
|
||||
|
||||
<form action="{{ url('/user/book-keeping/document-library') }}" method="get" class="theme-form">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="category_id" >
|
||||
<option value="all" selected >Any</option>
|
||||
@foreach($document_category as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="status" >
|
||||
<option value="all" selected>All</option>
|
||||
<option value="completed" >ORC Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Keyword</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" name="s" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Date uploaded</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="fix_date" id="dateFilter">
|
||||
<option value="all" selected >Any Time</option>
|
||||
<option value="today">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3" id="customDateFields" style="display: none;">
|
||||
<div class="col-md-12">
|
||||
<label class="col-form-label">Between</label>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col date-picker-wrapper">
|
||||
<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
|
||||
<input type="date" class="form-control" name="data_from" placeholder="After">
|
||||
</div>
|
||||
<div class="col date-picker-wrapper">
|
||||
<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
|
||||
<input type="date" class="form-control" name="date_to" placeholder="Before">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-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>
|
||||
$(function() {
|
||||
$('#searchFilterModal #dateFilter').change(function() {
|
||||
if ($(this).val() == 'custom') {
|
||||
$('#searchFilterModal #customDateFields').show();
|
||||
}
|
||||
else {
|
||||
$('#searchFilterModal #customDateFields').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#checkAll').click(function(){
|
||||
$('.download-checkbox').prop('checked', $(this).prop('checked'));
|
||||
});
|
||||
|
||||
$('#download-all-file').click(function(){
|
||||
console.log('testtest');
|
||||
$('.download-checkbox').each(function(){
|
||||
if ($(this).prop('checked')) {
|
||||
console.log('#download-doc-' + $(this).val());
|
||||
$('#download-doc-' + $(this).val())[0].click();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user