create sales report range frontend

app/Http/Controllers/Reports/MonthlyReportController.php

@@ -17,9 +17,8 @@ use Illuminate\Http\Request;
 class MonthlyReportController
 {
     public function salesReport(Request $request): JsonResponse {
-
-        $from = $request->input('from') ? Carbon::parse($request->input('from')) : Carbon::now()->startOfMonth();
-        $to = $request->input('to') ? Carbon::parse($request->input('to')) : Carbon::now()->endOfMonth();
+        $from = $request->route('from') ? Carbon::parse($request->route('from')) : Carbon::now()->startOfMonth();
+        $to = $request->route('to') ? Carbon::parse($request->route('to')) : Carbon::now()->endOfMonth();
 
         $containers = Container::whereBetween('loading_date', [$from, $to])->orderBy('loading_date')->get();
 

package.json

@@ -30,7 +30,6 @@
         "v-money": "^0.8.1",
         "vue": "^2.6.10",
         "vue-avatar": "^2.1.8",
-        "vue-bootstrap-datetimepicker": "^5.0.1",
         "vue-debounce": "^2.6.0",
         "vue-template-compiler": "^2.6.10",
         "vue-the-mask": "^0.11.1",

resources/assets/vue/components/reports/sections/MonthlySalesReportSectionComponent.vue

@@ -2,6 +2,31 @@
     <div class="row" >
         <div class="col">
             <loading-component v-if="isLoading"></loading-component>
+            <div class="row" v-if="!isLoading">
+                <div class="col">
+                    <div class="row m-b-15">
+                        <div class="col-5 p-r-0">
+                            <div class="row">
+                                <div class="col p-r-0">
+                                    <div class="form-group no-margin form-group-default b-rad-none">
+                                        <label class="text-primary">Start Date</label>
+                                        <date-picker-component v-model="from"></date-picker-component>
+                                    </div>
+                                </div>
+                                <div class="col p-l-0">
+                                    <div class="form-group no-margin form-group-default b-rad-none">
+                                        <label class="text-primary">End Date</label>
+                                        <date-picker-component v-model="to"></date-picker-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col p-l-0">
+                            <div class="btn btn-primary b-rad-none">
+                                <i class="fa fa-refresh lh-40" @click="fetchReport()"></i>
+                            </div>
+                        </div>
+                    </div>
                     <div class="row" v-if="report">
                         <div class="col">
                             <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
@@ -159,6 +184,8 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
 <script>
 
@@ -169,9 +196,15 @@
             return {
                 section: 'monthlyReportSection',
                 isLoading: true,
-                report: null
+                report: null,
+                from: '',
+                to: '',
             }
         },
+        validations: {
+            from: {},
+            to: {},
+        },
         computed: {
             pendingQueue () {
                 return this.$store.getters.isInCompleteQueue(this.section);
@@ -190,7 +223,7 @@
         methods: {
             fetchReport(){
                 this.isLoading = true;
-                this.submit(route('api.report.sales'), 'get', this.section, false, false)
+                this.submit(route('api.report.sales', this.from, this.to), 'get', this.section, false, false)
             },
             successHandler(response){
                 this.$store.dispatch('completeList', {'name': this.section, 'data': []});

routes/api.php

@@ -50,7 +50,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
 
         require __DIR__ . '/schedule.php';
 
-        Route::get('/report/sales', 'Reports\MonthlyReportController@salesReport')->name('report.sales');
+        Route::get('/report/sales/{from?}/{to?}', 'Reports\MonthlyReportController@salesReport')->name('report.sales');
         Route::get('/report/service', 'Reports\MonthlyReportController@serviceReport')->name('report.service');
 
     });