%PDF-
%PDF-
Mini Shell
Mini Shell
@extends('layouts.backend')
@section('title', $siteTitle)
@section('action')
<a href="{{ route('app.users.create') }}" class="btn btn-sm btn-primary"><i class="ti-plus fs-ism fw-800"></i> Add User</a>
@endsection
@push('styles')
<style>
.onoffswitch {
position: relative;
width: 95px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 25px;
padding: 0;
line-height: 25px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: 400;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Enabled";
padding-left: 10px;
background-color: green;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Disabled";
padding-right: 10px;
background-color: red;
color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 25px;
margin: 2px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 67px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
ol.agent-list{
margin: 0 0 0 18px;
padding: 0;
}
</style>
@endpush
@section('content')
<div class="row">
<div class="col-12">
<div id="bulk-card" class="d-none">
<form method="POST" id="bulk-form">
@csrf
<div class="d-flex align-items-center mb-3">
<x-form.selectbox name="operation" divClass="mb-0">
<option value="">--Select--</option>
@permission('app.users.bulk-destroy')
<option value="delete">Deleted</option>
@endpermission
@permission('app.users.bulk-status')
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
@endpermission
</x-form.selectbox>
<div class="bulk-apply">
<button class="btn btn-md btn-primary rounded-0 ml-2 px-3">Apply</button>
</div>
</div>
</form>
</div>
<div class="card">
<div class="card-body px-0">
<table class="table table-sm table-borderless table-style" id="user-datatables">
<thead>
<th>
<label class="ui-checkbox">
<input type="checkbox" id="all_checked">
<span class="input-span"></span>
</label>
</th>
<th>Profile</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Enabled/Disabled</th>
<th class="text-right">Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
@include('backend.modal.user-details')
@endsection
@push('scripts')
<script>
table = $('#user-datatables').DataTable({
processing: true,
serverSide: true,
order: [], //Initial no order
bInfo: true, //TO show the total number of data
bFilter: false, //For datatable default search box show/hide
responsive: true,
ordering: false,
lengthMenu: [
[5, 10, 15, 25, 50, 100, 1000, 10000, -1],
[5, 10, 15, 25, 50, 100, 1000, 10000, "All"]
],
pageLength: 25, //number of data show per page
ajax: {
url: "{{ route('app.users.get-data') }}",
type: "POST",
dataType: "JSON",
data: function(d) {
d._token = _token
},
},
columns: [
{data: 'bulk_check',orderable: false, searchable: false},
{data: 'profile', orderable: false, searchable: false},
{data: 'name'},
{data: 'email'},
{data: 'role'},
{data: 'status', orderable: false, searchable: false},
{data: 'action', orderable: false, searchable: false},
],
language: {
processing: '<img src="{{ asset("uploads/images/table-loading.svg") }}">',
emptyTable: '<strong class="text-danger">No Data Found</strong>',
infoEmpty: '',
zeroRecords: '<strong class="text-danger">No Data Found</strong>',
oPaginate: {
sPrevious: "Previous", // This is the link to the previous page
sNext: "Next", // This is the link to the next page
},
lengthMenu: "_MENU_"
},
dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6' <'float-right pr-15'B>>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'<'float-right pr-15'p>>>",
buttons: {
buttons: [
{
extend: 'pdf',
filename: 'users_{{ date("d_m_d") }}',
title: 'User List',
orientation: "portrait",
pageSize: "A4",
className: 'pdfButton btn btn-sm btn-primary',
exportOptions: {
columns: '0,1,2,3,4,5'
},
},
{
extend: 'excel',
filename: 'users_{{ date("d_m_d") }}',
title: 'User List',
className: 'excelButton btn btn-sm btn-primary',
exportOptions: {
columns: '0,1,2,3,4,5'
},
},
{
extend: 'csv',
filename: 'users_{{ date("d_m_d") }}',
title: 'User List',
className: 'csvButton btn btn-sm btn-primary',
exportOptions: {
columns: '0,1,2,3,4,5'
},
},
{
extend: 'print',
title: 'User List',
orientation: "portrait",
pageSize: "A4",
className: 'printButton btn btn-sm btn-primary',
exportOptions: {
columns: '0,1,2,3,4,5'
},
customize: function ( win ) {
$(win.document.body)
.addClass('bg-white')
.css('font-size','10pt');
$(win.document.body).find('table')
.addClass('compact bg-white')
.css('font-size','inherit' );
}
}
]
}
});
// deletable btn
$(document).on('click', 'button.confirm-deletable-action', function(){
// modal data
let data_id = $('#deletable-modal input.datatable').val();
const url = "{{ route('app.users.destroy') }}";
deletable_action(data_id,url); // define function
});
// user status enabled/disabled
$(document).on('click', 'input.user-status', function(){
let data_id = $(this).data('id');
const url = "{{ route('app.users.status') }}";
if (this.checked) {
var status = 1;
}else{
var status = 2;
}
datatable_status(data_id,status,url);
});
// user bulk deletable
$(document).on('click', 'button.bulk-deletable-action', function(){
var data_id = $('#deletable-modal input.datatable').val();
var operation_type = $('#deletable-modal .modal-body input.operation-type').val();
const url = "{{ route('app.users.bulk-destroy') }}";
bulk_deletable_action(data_id,operation_type,url);
});
@permission('app.users.show')
// user details
$(document).on('click', 'button.btn-view', function(){
let data_id = $(this).data('id');
$.ajax({
type: "POST",
url: "{{ route('app.users.show') }}",
data: {_token:_token,data_id:data_id},
dataType: "JSON",
success: function (response) {
if (response) {
$('#user-details-box').html(response);
$('#user-details-modal').modal({
keyboard: false,
backdrop: 'static'
});
}
},
error: function(error){
console.log(error);
}
});
});
@endpermission
</script>
@endpush
Zerion Mini Shell 1.0