301 lines
11 KiB
PHP
301 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', __('managementtools::lang.employee_tasks'))
|
|
|
|
@section('content')
|
|
@include('managementtools::layouts.nav')
|
|
|
|
@php
|
|
$tabs = [
|
|
'defined' => __('managementtools::lang.user_defined_tasks'),
|
|
'pending' => __('managementtools::lang.pending_approval'),
|
|
'unreported' => __('managementtools::lang.tasks_without_report'),
|
|
'inability' => __('managementtools::lang.inability_tasks'),
|
|
'incomplete' => __('managementtools::lang.incomplete_user_tasks'),
|
|
'approved' => __('managementtools::lang.approved_tasks'),
|
|
'all' => __('managementtools::lang.all_tasks'),
|
|
];
|
|
@endphp
|
|
|
|
<section class="content no-print mt-page mt-user-tasks-page">
|
|
<div class="mt-page-header">
|
|
<h1><i class="fas fa-tasks" style="color:#2563eb;margin-left:8px;"></i> @lang('managementtools::lang.employee_tasks')</h1>
|
|
@if($can_manage)
|
|
<button type="button" class="mt-btn-primary btn-modal"
|
|
data-href="{{ action([\Modules\ManagementTools\Http\Controllers\EmployeeTaskController::class, 'create']) }}"
|
|
data-container=".mt_task_modal">
|
|
<i class="fa fa-plus"></i> @lang('managementtools::lang.add_system_task')
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mt-card">
|
|
<div class="mt-card-body" style="padding-top:0;">
|
|
<ul class="nav nav-tabs mt-ut-tabs" role="tablist">
|
|
@foreach($tabs as $tab_key => $tab_label)
|
|
<li role="presentation" @if($active_tab === $tab_key) class="active" @endif>
|
|
<a href="#mt-ut-{{ $tab_key }}" role="tab" data-toggle="tab" data-tab="{{ $tab_key }}">
|
|
{{ $tab_label }}
|
|
<span class="badge mt-ut-tab-count" data-tab="{{ $tab_key }}">{{ $tab_counts[$tab_key] ?? 0 }}</span>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
<div class="tab-content mt-ut-tab-content">
|
|
@foreach(array_keys($tabs) as $tab_key)
|
|
<div role="tabpanel" class="tab-pane fade @if($active_tab === $tab_key) in active @endif"
|
|
id="mt-ut-{{ $tab_key }}" data-tab="{{ $tab_key }}">
|
|
<div class="mt-ut-tab-loading text-center" style="padding:40px;display:none;">
|
|
<i class="fa fa-spinner fa-spin fa-2x"></i>
|
|
<p style="margin-top:8px;color:#64748b;">@lang('managementtools::lang.loading')</p>
|
|
</div>
|
|
<div class="mt-ut-tab-body"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade mt_task_modal" tabindex="-1" role="dialog"></div>
|
|
<div class="modal fade mt_user_tasks_modal" tabindex="-1" role="dialog"></div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
var tabUrlBase = @json(url('management-tools/daily-reports/UserTasks/tab'));
|
|
var countsUrl = @json(action([\Modules\ManagementTools\Http\Controllers\EmployeeTaskController::class, 'tabCounts']));
|
|
var activeTab = @json($active_tab);
|
|
var loadedTabs = {};
|
|
|
|
function tabContentUrl(tab) {
|
|
return tabUrlBase + '/' + tab;
|
|
}
|
|
|
|
function updateBadge(tab, count) {
|
|
$('.mt-ut-tab-count[data-tab="' + tab + '"]').text(count);
|
|
}
|
|
|
|
function refreshAllCounts() {
|
|
$.getJSON(countsUrl, function(r) {
|
|
if (r.success && r.counts) {
|
|
$.each(r.counts, function(tab, count) {
|
|
updateBadge(tab, count);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function initTabWidgets($container) {
|
|
$container.find('.mt-ut-user-select').select2({
|
|
allowClear: true,
|
|
placeholder: '@lang("managementtools::lang.all_employees")'
|
|
});
|
|
if (typeof MtDate !== 'undefined') {
|
|
MtDate.initDatepicker($container.find('.mt-datepicker'));
|
|
}
|
|
}
|
|
|
|
function loadTab(tab, params, forceReload) {
|
|
params = params || {};
|
|
var cacheKey = tab + JSON.stringify(params);
|
|
if (loadedTabs[cacheKey] && !forceReload) {
|
|
return;
|
|
}
|
|
|
|
var $pane = $('#mt-ut-' + tab);
|
|
var $body = $pane.find('.mt-ut-tab-body');
|
|
var $loading = $pane.find('.mt-ut-tab-loading');
|
|
|
|
$loading.show();
|
|
$body.css('opacity', '0.4');
|
|
|
|
$.ajax({
|
|
method: 'GET',
|
|
url: tabContentUrl(tab),
|
|
data: params,
|
|
dataType: 'json',
|
|
success: function(r) {
|
|
if (r.success) {
|
|
$body.html(r.html);
|
|
initTabWidgets($body);
|
|
updateBadge(tab, r.count);
|
|
loadedTabs[cacheKey] = true;
|
|
} else {
|
|
toastr.error(LANG.something_went_wrong);
|
|
}
|
|
},
|
|
error: function() {
|
|
toastr.error(LANG.something_went_wrong);
|
|
},
|
|
complete: function() {
|
|
$loading.hide();
|
|
$body.css('opacity', '1');
|
|
}
|
|
});
|
|
}
|
|
|
|
function reloadCurrentTab(forceReload) {
|
|
var $active = $('.mt-ut-tabs li.active a');
|
|
if (!$active.length) return;
|
|
var tab = $active.data('tab');
|
|
var params = {};
|
|
if (tab === 'approved') {
|
|
var $form = $('#mt-ut-approved .mt-ut-approved-filter');
|
|
if ($form.length) {
|
|
params = {
|
|
filter_start: $form.find('[name=filter_start]').val(),
|
|
filter_end: $form.find('[name=filter_end]').val(),
|
|
filter_user_id: $form.find('[name=filter_user_id]').val()
|
|
};
|
|
}
|
|
}
|
|
var $catForm = $('#mt-ut-' + tab + ' .mt-ut-category-filter');
|
|
if ($catForm.length) {
|
|
params.filter_category_id = $catForm.find('[name=filter_category_id]').val();
|
|
}
|
|
var cacheKey = tab + JSON.stringify(params);
|
|
delete loadedTabs[cacheKey];
|
|
loadTab(tab, params, true);
|
|
}
|
|
|
|
$('a[data-toggle="tab"][data-tab]').on('shown.bs.tab', function(e) {
|
|
loadTab($(e.target).data('tab'));
|
|
});
|
|
|
|
$(document).on('submit', '.mt-ut-approved-filter', function(e) {
|
|
e.preventDefault();
|
|
var tab = $(this).data('tab') || 'approved';
|
|
var params = {
|
|
filter_start: $(this).find('[name=filter_start]').val(),
|
|
filter_end: $(this).find('[name=filter_end]').val(),
|
|
filter_user_id: $(this).find('[name=filter_user_id]').val()
|
|
};
|
|
var $catForm = $('#mt-ut-' + tab + ' .mt-ut-category-filter');
|
|
if ($catForm.length) {
|
|
params.filter_category_id = $catForm.find('[name=filter_category_id]').val();
|
|
}
|
|
var cacheKey = tab + JSON.stringify(params);
|
|
delete loadedTabs[cacheKey];
|
|
loadTab(tab, params, true);
|
|
});
|
|
|
|
$(document).on('submit', '.mt-ut-category-filter', function(e) {
|
|
e.preventDefault();
|
|
var tab = $(this).data('tab') || $(this).closest('.tab-pane').data('tab');
|
|
var params = { filter_category_id: $(this).find('[name=filter_category_id]').val() };
|
|
if (tab === 'approved') {
|
|
var $form = $('#mt-ut-approved .mt-ut-approved-filter');
|
|
if ($form.length) {
|
|
params.filter_start = $form.find('[name=filter_start]').val();
|
|
params.filter_end = $form.find('[name=filter_end]').val();
|
|
params.filter_user_id = $form.find('[name=filter_user_id]').val();
|
|
}
|
|
}
|
|
delete loadedTabs[tab + JSON.stringify(params)];
|
|
loadTab(tab, params, true);
|
|
});
|
|
|
|
$(document).on('click', '.mt-ut-tab-pagination a', function(e) {
|
|
e.preventDefault();
|
|
var href = $(this).attr('href');
|
|
if (!href) return;
|
|
var url = new URL(href, window.location.origin);
|
|
var tab = url.searchParams.get('tab') || $(this).closest('.tab-pane').data('tab');
|
|
var params = { page: url.searchParams.get('page') || 1 };
|
|
['filter_start', 'filter_end', 'filter_user_id', 'filter_category_id'].forEach(function(k) {
|
|
if (url.searchParams.get(k)) params[k] = url.searchParams.get(k);
|
|
});
|
|
delete loadedTabs[tab + JSON.stringify(params)];
|
|
loadTab(tab, params, true);
|
|
});
|
|
|
|
$(document).on('submit', 'form#mt_task_form', function(e) {
|
|
e.preventDefault();
|
|
var form = $(this);
|
|
$.ajax({
|
|
method: form.find('input[name="_method"]').val() === 'PUT' ? 'PUT' : 'POST',
|
|
url: form.attr('action'),
|
|
dataType: 'json',
|
|
data: form.serialize(),
|
|
success: function(result) {
|
|
if (result.success) {
|
|
$('.mt_task_modal').modal('hide');
|
|
toastr.success(result.msg);
|
|
loadedTabs = {};
|
|
refreshAllCounts();
|
|
reloadCurrentTab(true);
|
|
} else {
|
|
toastr.error(result.msg);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function mtTaskAction(url, confirmMsg) {
|
|
swal({ title: confirmMsg || LANG.sure, icon: 'warning', buttons: true }).then(function(ok) {
|
|
if (!ok) return;
|
|
$.ajax({
|
|
method: 'POST',
|
|
url: url,
|
|
dataType: 'json',
|
|
success: function(result) {
|
|
if (result.success) {
|
|
toastr.success(result.msg);
|
|
loadedTabs = {};
|
|
refreshAllCounts();
|
|
reloadCurrentTab(true);
|
|
} else {
|
|
toastr.error(result.msg);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.mt_approve_task', function() {
|
|
mtTaskAction($(this).data('href'), '@lang("managementtools::lang.confirm_approve_task")');
|
|
});
|
|
|
|
$(document).on('click', '.mt_reject_task', function() {
|
|
mtTaskAction($(this).data('href'), '@lang("managementtools::lang.confirm_reject_task")');
|
|
});
|
|
|
|
$(document).on('click', '.delete_mt_user_task', function() {
|
|
var url = $(this).data('href');
|
|
swal({ title: LANG.sure, icon: 'warning', buttons: true, dangerMode: true }).then(function(ok) {
|
|
if (!ok) return;
|
|
$.ajax({
|
|
method: 'DELETE',
|
|
url: url,
|
|
dataType: 'json',
|
|
success: function(r) {
|
|
if (r.success) {
|
|
toastr.success(r.msg);
|
|
loadedTabs = {};
|
|
refreshAllCounts();
|
|
reloadCurrentTab(true);
|
|
} else {
|
|
toastr.error(r.msg);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
loadTab(activeTab);
|
|
});
|
|
</script>
|
|
<style>
|
|
.mt-user-tasks-page .mt-ut-tabs { margin-bottom:0; border-bottom:1px solid #e5e7eb; flex-wrap:wrap; }
|
|
.mt-user-tasks-page .mt-ut-tabs > li > a { font-weight:600; border-radius:8px 8px 0 0; }
|
|
.mt-user-tasks-page .mt-ut-tabs .badge { background:#dc2626; margin-right:4px; }
|
|
.mt-user-tasks-page .mt-ut-tab-content { padding-top:16px; min-height:120px; }
|
|
.mt-user-tasks-page .mt-ut-tasks-table td,
|
|
.mt-user-tasks-page .mt-ut-tasks-table th { font-size:13px; vertical-align:middle !important; }
|
|
.mt-user-tasks-page .thead-dark th { background:#1f2937; color:#fff; border-color:#374151; }
|
|
</style>
|
|
@endsection
|