Merge pull request #2086 from cuneytsenturk/master
Portal dashboard added date filter
This commit is contained in:
Cüneyt Şentürk
GitHub
commit
95b8a64f1e
@ -4,12 +4,13 @@ namespace App\Http\Controllers\Portal;
|
||||
|
||||
use App\Models\Document\Document;
|
||||
use App\Traits\Charts;
|
||||
use App\Traits\DateTime;
|
||||
use App\Utilities\Chartjs;
|
||||
use Date;
|
||||
|
||||
class Dashboard
|
||||
{
|
||||
use Charts;
|
||||
use Charts, DateTime;
|
||||
|
||||
/**
|
||||
* Display a listing of the resource.
|
||||
@ -20,14 +21,25 @@ class Dashboard
|
||||
{
|
||||
$contact = user()->contact;
|
||||
|
||||
$invoices = Document::invoice()->accrued()->where('contact_id', $contact->id)->get();
|
||||
$financial_start = $this->getFinancialStart()->format('Y-m-d');
|
||||
|
||||
$start = Date::parse(request('start', Date::today()->startOfYear()->format('Y-m-d')));
|
||||
$end = Date::parse(request('end', Date::today()->endOfYear()->format('Y-m-d')));
|
||||
// check and assign year start
|
||||
if (($year_start = Date::today()->startOfYear()->format('Y-m-d')) !== $financial_start) {
|
||||
$year_start = $financial_start;
|
||||
}
|
||||
|
||||
$start = Date::parse(request('start_date', $year_start));
|
||||
$end = Date::parse(request('end_date', Date::parse($year_start)->addYear(1)->subDays(1)->format('Y-m-d')));
|
||||
|
||||
//$invoices = Document::invoice()->accrued()->where('contact_id', $contact->id)->get();
|
||||
$invoices = Document::invoice()->accrued()->whereBetween('due_at', [$start, $end])->where('contact_id', $contact->id)->get();
|
||||
|
||||
$start_month = $start->month;
|
||||
$end_month = $end->month;
|
||||
|
||||
// look cashFlow widget
|
||||
$end_month = $end->diffInMonths($start);
|
||||
$start_month = 0;
|
||||
// Monthly
|
||||
$labels = [];
|
||||
|
||||
@ -89,7 +101,14 @@ class Dashboard
|
||||
])
|
||||
->fill(false);
|
||||
|
||||
return view('portal.dashboard.index', compact('contact', 'invoices', 'totals', 'progress', 'chart'));
|
||||
$date_picker_shortcuts = $this->getDatePickerShortcuts();
|
||||
|
||||
if (!request()->has('start_date')) {
|
||||
request()->merge(['start_date' => $date_picker_shortcuts[trans('reports.this_year')]['start']]);
|
||||
request()->merge(['end_date' => $date_picker_shortcuts[trans('reports.this_year')]['end']]);
|
||||
}
|
||||
|
||||
return view('portal.dashboard.index', compact('contact', 'invoices', 'totals', 'progress', 'chart', 'date_picker_shortcuts'));
|
||||
}
|
||||
|
||||
private function calculateAmounts($invoices, $start, $end)
|
||||
|
||||
37
resources/assets/js/views/portal/dashboard.js
vendored
37
resources/assets/js/views/portal/dashboard.js
vendored
@ -12,20 +12,51 @@ import Vue from 'vue';
|
||||
import DashboardPlugin from './../../plugins/dashboard-plugin';
|
||||
|
||||
import Global from './../../mixins/global';
|
||||
import {getQueryVariable} from './../../plugins/functions';
|
||||
import {DatePicker, Tooltip} from 'element-ui';
|
||||
|
||||
import {Tooltip} from 'element-ui';
|
||||
Vue.use(DatePicker, Tooltip);
|
||||
|
||||
// plugin setup
|
||||
Vue.use(DashboardPlugin, Tooltip);
|
||||
Vue.use(DashboardPlugin, DatePicker, Tooltip);
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
el: '#main-body',
|
||||
|
||||
components: {
|
||||
[DatePicker.name]: DatePicker,
|
||||
[Tooltip.name]: Tooltip,
|
||||
},
|
||||
|
||||
mixins: [
|
||||
Global
|
||||
],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
filter_date: [],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let start_date = getQueryVariable('start_date');
|
||||
|
||||
if (start_date) {
|
||||
let end_date = getQueryVariable('end_date');
|
||||
|
||||
this.filter_date.push(start_date);
|
||||
this.filter_date.push(end_date);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Global filter change date column
|
||||
onChangeFilterDate() {
|
||||
if (this.filter_date) {
|
||||
window.location.href = url + '/portal?start_date=' + this.filter_date[0] + '&end_date=' + this.filter_date[1];
|
||||
} else {
|
||||
window.location.href = url + '/portal';
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -2,6 +2,71 @@
|
||||
|
||||
@section('title', trans_choice('general.dashboards', 1))
|
||||
|
||||
@section('new_button')
|
||||
<!--Dashboard General Filter-->
|
||||
<el-date-picker
|
||||
v-model="filter_date"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
:format="'yyyy-MM-dd'"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="onChangeFilterDate"
|
||||
range-separator=">>"
|
||||
start-placeholder="{{ $date_picker_shortcuts[trans("reports.this_year")]["start"] }}"
|
||||
end-placeholder="{{ $date_picker_shortcuts[trans("reports.this_year")]["end"] }}"
|
||||
:picker-options="{
|
||||
shortcuts: [
|
||||
{
|
||||
text: '{{ trans("reports.this_year") }}',
|
||||
onClick(picker) {
|
||||
const start = new Date('{{ $date_picker_shortcuts[trans("reports.this_year")]["start"] }}');
|
||||
const end = new Date('{{ $date_picker_shortcuts[trans("reports.this_year")]["end"] }}');
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '{{ trans("reports.previous_year") }}',
|
||||
onClick(picker) {
|
||||
const start = new Date('{{ $date_picker_shortcuts[trans("reports.previous_year")]["start"] }}');
|
||||
const end = new Date('{{ $date_picker_shortcuts[trans("reports.previous_year")]["end"] }}');
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '{{ trans("reports.this_quarter") }}',
|
||||
onClick(picker) {
|
||||
const start = new Date('{{ $date_picker_shortcuts[trans("reports.this_quarter")]["start"] }}');
|
||||
const end = new Date('{{ $date_picker_shortcuts[trans("reports.this_quarter")]["end"] }}');
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '{{ trans("reports.previous_quarter") }}',
|
||||
onClick(picker) {
|
||||
const start = new Date('{{ $date_picker_shortcuts[trans("reports.previous_quarter")]["start"] }}');
|
||||
const end = new Date('{{ $date_picker_shortcuts[trans("reports.previous_quarter")]["end"] }}');
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '{{ trans("reports.last_12_months") }}',
|
||||
onClick(picker) {
|
||||
const start = new Date('{{ $date_picker_shortcuts[trans("reports.last_12_months")]["start"] }}');
|
||||
const end = new Date('{{ $date_picker_shortcuts[trans("reports.last_12_months")]["end"] }}');
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}
|
||||
]
|
||||
}">
|
||||
</el-date-picker>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
@ -12,6 +77,7 @@
|
||||
<h5 class="text-uppercase text-white mb-0">{{ trans('general.paid') }}</h5>
|
||||
<span class="font-weight-bold text-white mb-0">{{ $totals['paid'] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="icon icon-shape bg-white text-success rounded-circle shadow">
|
||||
<i class="fa fa-money-bill"></i>
|
||||
@ -19,6 +85,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ $progress['paid'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['paid'] }}%"></div>
|
||||
@ -26,6 +93,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-gradient-warning card-stats">
|
||||
<div class="card-body">
|
||||
@ -34,6 +102,7 @@
|
||||
<h5 class="text-uppercase text-white mb-0">{{ trans('general.unpaid') }}</h5>
|
||||
<span class="font-weight-bold text-white mb-0">{{ $totals['unpaid'] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="icon icon-shape bg-white text-warning rounded-circle shadow">
|
||||
<i class="fa fa-money-bill"></i>
|
||||
@ -41,6 +110,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ $progress['unpaid'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['unpaid'] }}%"></div>
|
||||
@ -48,6 +118,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-gradient-danger card-stats">
|
||||
<div class="card-body">
|
||||
@ -56,6 +127,7 @@
|
||||
<h5 class="text-uppercase text-white mb-0">{{ trans('general.overdue') }}</h5>
|
||||
<span class="font-weight-bold text-white mb-0">{{ $totals['overdue'] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="icon icon-shape bg-white text-danger rounded-circle shadow">
|
||||
<i class="fa fa-money-bill"></i>
|
||||
@ -63,6 +135,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ $progress['overdue'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $progress['overdue'] }}%"></div>
|
||||
@ -70,6 +143,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user