Commit 54656846 authored by Brian Wangora's avatar Brian Wangora

Passport tabs config started

parent 4e0c2c8e
...@@ -16,6 +16,9 @@ ...@@ -16,6 +16,9 @@
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
<!-- Include Select2 CSS --> <!-- Include Select2 CSS -->
<link href="{{ asset('public/vendor/select2/css/select2.min.css') }}" rel="stylesheet"> <link href="{{ asset('public/vendor/select2/css/select2.min.css') }}" rel="stylesheet">
......
...@@ -6,17 +6,20 @@ ...@@ -6,17 +6,20 @@
$modalStatus= 'show'; $modalStatus= 'show';
$modalStyle="display: block;"; $modalStyle="display: block;";
} }
$fnames = $passport['first_names'] ?? '';
$lname = $passport['last_names'] ?? '';
@endphp @endphp
<x-adminlte-modal id="searchModalBasic" class="{{ $modalStatus }}" style="{{ $modalStyle }}" size="lg" <x-adminlte-modal id="searchModalPassport" class="{{ $modalStatus }}" style="{{ $modalStyle }}" size="lg"
title="" v-centered static-backdrop scrollable> title="{{ $fnames }} {{ $lname }}" v-centered static-backdrop scrollable>
<div class="modal-body"> <div class="modal-body">
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist"> <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
@if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"])) @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
<li class="nav-item"> <li class="nav-item">
@if($modalStatus) @if($modalStatus)
<a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill"
href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">
aria-selected="true">
Document data Document data
</a> </a>
@else @else
...@@ -31,74 +34,76 @@ ...@@ -31,74 +34,76 @@
<li class="nav-item"> <li class="nav-item">
@if($modalStatus) @if($modalStatus)
<a class="nav-link" id="custom-tabs-four-photo-tab" data-toggle="pill" <a class="nav-link" id="custom-tabs-four-photo-tab" data-toggle="pill"
href="#custom-tabs-four-photo" role="tab" aria-controls="custom-tabs-four-photo" href="#custom-tabs-four-photo" role="tab" aria-controls="custom-tabs-four-photo" aria-selected="false">
aria-selected="false"> Photo & signature
Photo & signature </a> </a>
@else @else
<a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-family" aria-selected="false"> <a class="nav-link" id="custom-tabs-four-photo-tab" data-toggle="pill" href="#custom-tabs-four-photo" role="tab" aria-controls="custom-tabs-four-photo" aria-selected="false">
<div class="skeleton skeleton-text short" style="width: 10rem;"></div> <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
</a> </a>
@endif @endif
</li> </li>
@endif @endif
@if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"])) @if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"]))
<li class="nav-item"> <li class="nav-item">
@if($modalStatus) @if($modalStatus)
<a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" <a class="nav-link" id="custom-tabs-four-documents-tab" data-toggle="pill"
href="#custom-tabs-four-documents" role="tab" aria-controls="custom-tabs-four-documents" href="#custom-tabs-four-documents" role="tab" aria-controls="custom-tabs-four-documents" aria-selected="false">
aria-selected="false"> Documents
Documents</a> </a>
@else @else
<a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-family" aria-selected="false"> <a class="nav-link" id="custom-tabs-four-documents-tab" data-toggle="pill" href="#custom-tabs-four-documents" role="tab" aria-controls="custom-tabs-four-documents" aria-selected="false">
<div class="skeleton skeleton-text short" style="width: 10rem;"></div> <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
</a> </a>
@endif @endif
</li> </li>
@endif @endif
@if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"])) @if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"]))
<li class="nav-item"> <li class="nav-item">
@if($modalStatus) @if($modalStatus)
<a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill"
href="#custom-tabs-four-history" role="tab" aria-controls="custom-tabs-four-history" href="#custom-tabs-four-history" role="tab" aria-controls="custom-tabs-four-history" aria-selected="false">
aria-selected="false"> Document History
Document History</a> </a>
@else @else
<a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-family" aria-selected="false"> <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" href="#custom-tabs-four-history" role="tab" aria-controls="custom-tabs-four-history" aria-selected="false">
<div class="skeleton skeleton-text short" style="width: 10rem;"></div> <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
</a> </a>
@endif @endif
</li> </li>
@endif @endif
</ul> </ul>
<div class="card card-primary card-outline card-outline-tabs" style="box-shadow: none;"> <div class="card card-primary card-outline card-outline-tabs" style="box-shadow: none;">
<div class="card-header p-0 border-bottom-0"> <div class="card-header p-0 border-bottom-0"></div>
</div>
<div class="card-body"> <div class="card-body">
<div class="tab-content" id="custom-tabs-four-tabContent"> <div class="tab-content" id="custom-tabs-four-tabContent">
@if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"])) @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
<div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel" <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
aria-labelledby="custom-tabs-four-home-tab">
@include('livewire.search.partials.tabs.passport_tabs.document_data') @include('livewire.search.partials.tabs.passport_tabs.document_data')
</div> </div>
@endif @endif
@if($role->hasPermissionTo("Basic View ID Photo and Signature")) @if($role->hasPermissionTo("Basic View ID Photo and Signature"))
<div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" <div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" aria-labelledby="custom-tabs-four-photo-tab">
aria-labelledby="custom-tabs-four-photo-tab">
@include('livewire.search.partials.tabs.passport_tabs.document_header_details') @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
<h4>Photos</h4>
</div> </div>
@endif @endif
@if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"])) @if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"]))
<div class="tab-pane fade" id="custom-tabs-four-documents" role="tabpanel" <div class="tab-pane fade" id="custom-tabs-four-documents" role="tabpanel" aria-labelledby="custom-tabs-four-documents-tab">
aria-labelledby="custom-tabs-four-documents-tab">
@include('livewire.search.partials.tabs.passport_tabs.document_header_details') @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
<h4>Documents</h4>
</div> </div>
@endif @endif
@if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"])) @if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"]))
<div class="tab-pane fade" id="custom-tabs-four-history" role="tabpanel" <div class="tab-pane fade" id="custom-tabs-four-history" role="tabpanel" aria-labelledby="custom-tabs-four-history-tab">
aria-labelledby="custom-tabs-four-history-tab">
@include('livewire.search.partials.tabs.passport_tabs.document_header_details') @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
<h4>History</h4>
</div> </div>
@endif @endif
......
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
<x-adminlte-button <x-adminlte-button
label="Details" label="Details"
theme="info" theme="info"
id="humanbtn" id="passportbtn"
icon="fas fa-info-circle" icon="fas fa-info-circle"
wire:click="passportresultsModal({{ $human['identity_card_no'] ?? 0 }},'{{ $human['passport_no'] ?? 0 }}','{{ $doctype ?? 0 }}')" wire:click="passportresultsModal({{ $human['identity_card_no'] ?? 0 }},'{{ $human['passport_no'] ?? 0 }}','{{ $doctype ?? 0 }}')"
data-toggle="modal" data-toggle="modal"
......
...@@ -38,14 +38,21 @@ ...@@ -38,14 +38,21 @@
color:red; color:red;
} }
#submitSearch{ #submitSearch{
border-top-right-radius: 15px; border-top-right-radius: 20px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 20px;
width: 20%; width: 20%;
} }
#searchModalBasic > .modal-dialog{ #searchModalBasic > .modal-dialog{
max-width: 95vw; max-width: 95vw;
margin: auto; margin: auto;
} }
#searchModalPassport > .modal-dialog{
max-width: 95vw;
margin: auto;
}
#overlaySpinner{ #overlaySpinner{
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -130,9 +137,16 @@ ...@@ -130,9 +137,16 @@
@section('js') @section('js')
<script> <script>
//handle modal: event delegation //handle basic modal: event delegation
$(document).on('click', '#humanbtn',function(event){ $(document).on('click', '#humanbtn',function(event){
$('#searchModalBasic').modal('show'); $('#searchModalBasic').modal('show');
}); });
//handle passport modal: event delegation
$(document).on('click', '#passportbtn', function(event){
$('#searchModalPassport').modal('show');
});
</script> </script>
@stop @stop
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment