added new category transaction listing page
This commit is contained in:
parent
bd8af1d1bd
commit
45eb7cb7a1
6 changed files with 100 additions and 0 deletions
33
src/app/dashboard/category-month.component.html
Normal file
33
src/app/dashboard/category-month.component.html
Normal file
|
@ -0,0 +1,33 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class=row>
|
||||
<div class="col-xl-4 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title float-left mb-0">Purchases this week</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<span class="title">Placeholder Category</span>
|
||||
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
|
||||
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
[style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.first | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="categoryList.length > 10 && disableCategoryButtonFirst == false" class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
40
src/app/dashboard/category-month.component.ts
Normal file
40
src/app/dashboard/category-month.component.ts
Normal file
|
@ -0,0 +1,40 @@
|
|||
import { Directive, Component, OnInit } from '@angular/core';
|
||||
import { ApiService } from '../providers/api-service';
|
||||
import { DataType } from '../shared/data-types.enum';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'category-month.component.html'
|
||||
})
|
||||
export class CategoryMonthComponent implements OnInit {
|
||||
|
||||
disableCategoryButtonFirst: boolean = false;
|
||||
|
||||
weekPurchaseList = {
|
||||
first: 0,
|
||||
};
|
||||
|
||||
categoryList: number[] = [];
|
||||
categoryLimitFirst: number = 10;
|
||||
|
||||
constructor(
|
||||
private api: ApiService,
|
||||
) {
|
||||
this.api.categoryTransactionList().subscribe(
|
||||
result => {
|
||||
console.log(result);
|
||||
},
|
||||
error => {
|
||||
console.log('Retrieval Error');
|
||||
console.log( error._body );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
public loadMore () {
|
||||
this.disableCategoryButtonFirst = true;
|
||||
this.categoryLimitFirst = 100;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
}
|
|
@ -16,6 +16,7 @@ import { AccountEditComponent } from './account-edit.component';
|
|||
import { AddDataComponent } from './add-data.component';
|
||||
import { FeedbackComponent } from './feedback.component';
|
||||
import { TransactionLogComponent } from './transaction-log.component';
|
||||
import { CategoryMonthComponent } from './category-month.component';
|
||||
import { PayrollLogComponent } from './payroll-log.component';
|
||||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
|
@ -61,6 +62,7 @@ import { environment } from '../../environments/environment';
|
|||
OrgResultComponent,
|
||||
OrgTableComponent,
|
||||
TransactionLogComponent,
|
||||
CategoryMonthComponent,
|
||||
TransactionResultComponent,
|
||||
PayrollLogComponent,
|
||||
PayrollResultComponent,
|
||||
|
|
|
@ -12,6 +12,7 @@ import { AccountEditComponent } from './account-edit.component';
|
|||
import { AddDataComponent } from './add-data.component';
|
||||
import { FeedbackComponent } from './feedback.component';
|
||||
import { TransactionLogComponent } from './transaction-log.component';
|
||||
import { CategoryMonthComponent } from './category-month.component';
|
||||
import { PayrollLogComponent } from './payroll-log.component';
|
||||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
|
@ -58,6 +59,11 @@ const routes: Routes = [
|
|||
component: TransactionLogComponent,
|
||||
data: { title: 'Transaction Log' },
|
||||
},
|
||||
{
|
||||
path: 'category-month',
|
||||
component: CategoryMonthComponent,
|
||||
data: { title: 'Month Category' },
|
||||
},
|
||||
{
|
||||
path: 'map',
|
||||
component: MapComponent,
|
||||
|
|
|
@ -81,6 +81,14 @@
|
|||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/category-month']">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col-2"><i class="icon-basket"></i></div>
|
||||
<div class="col-10">Month Category</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="accountType == 'organisation'" class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
|
||||
<div class="row no-gutters align-items-center">
|
||||
|
|
|
@ -127,6 +127,17 @@ export class ApiService {
|
|||
);
|
||||
}
|
||||
|
||||
// Basic Customer User stats API
|
||||
public categoryTransactionList() {
|
||||
const key = this.sessionKey;
|
||||
return this.http.post<any>(
|
||||
this.apiUrl + '/stats/category',
|
||||
{
|
||||
session_key : key,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Searches organisations used for transaction submission
|
||||
|
||||
public search(data) {
|
||||
|
|
Reference in a new issue