Skip to content
Snippets Groups Projects
Verified Commit 4eb335ac authored by Peter Stanko's avatar Peter Stanko
Browse files

Fixes in the frontend datatable

parent 585acb29
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 120 additions and 66 deletions
src/app/core/dashboard/dashboard.component.html
+ 1
− 1
View file @ 4eb335ac
......@@ -4,7 +4,7 @@
<div class="container">
<div class="row">
<label>My latest submissions:</label>
<app-submissions-table [submissions]="loggedInUser?.submissions" [maxEntries]="5"></app-submissions-table>
<app-submissions-table [submissions]="loggedInUser?.submissions"></app-submissions-table>
</div>
</div>
</div>
src/app/core/dashboard/dashboard.component.ts
+ 0
− 1
View file @ 4eb335ac
......@@ -12,7 +12,6 @@ import {UserService} from '../../services/user.service';
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {
loggedInUser: User;
subscriptions: Subscription[] = [];
constructor(private auth: AuthService,
......
src/app/shared/submissions-table/submissions-table.component.html
+ 90
− 56
View file @ 4eb335ac
<ngx-datatable
#table
class="bootstrap"
[rows]="submissions"
[loadingIndicator]="loadingIndicator"
[rowHeight]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[limit]="20"
[reorderable]="reorderable">
<div>
<div>
<button class="btn" (click)="reloadSubmissions()">Reload submissions</button>
</div>
<ngx-datatable
#table
class="bootstrap"
[rows]="submissions"
[loadingIndicator]="loadingIndicator"
[rowHeight]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[limit]="5"
[sorts]="[{prop: 'created_at', dir: 'desc'}]"
[reorderable]="reorderable">
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset">
<div style="padding: 5px 10px">
<div>
Rows: {{rowCount}} |
Current: {{curPage}}
</div>
</div>
<datatable-pager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!((rowCount / pageSize) > 1)"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
<ngx-datatable-column name="Submitted at" prop="created_at">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/submissions/' + row.id]">{{value | date: 'd.MM.yyyy H:m.s'}}</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Submitted at" prop="created_at">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/submissions/' + row.id]">{{value | date: 'd.MM.yyyy H:m.s'}}</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Result" prop="result">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Result" prop="result">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Points" prop="points">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row.points}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Points" prop="points">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row.points}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="State" prop="state">
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="State" prop="state">
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Course/Project" prop="project">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/courses/' + row.course.id]">{{row.course.codename}}</a>/
<a [routerLink]="['/courses/' + row.course.id + '/projects/' + row.project.id]">
{{row.project.codename}}
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Course/Project" prop="project">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/courses/' + row.course.id]">{{row.course.codename}}</a>/
<a [routerLink]="['/courses/' + row.course.id + '/projects/' + row.project.id]">
{{row.project.codename}}
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Author" prop="user">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/users/' + value.username ]">{{value.username}}</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Author" prop="user">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/users/' + value.username ]">{{value.username}}</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Cancel" prop="id">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button class="btn btn-danger" (click)="cancelSubmission(value?.id)">
Cancel
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Cancel" prop="id">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button class="btn btn-danger" (click)="cancelSubmission(value?.id)">
Cancel
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Review" prop="id">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button class="btn btn-warning" [routerLink]="['/review/' + value.id ]">Review tool</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
<ngx-datatable-column name="Review" prop="id">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button class="btn btn-warning" [routerLink]="['/review/' + value.id ]">Review tool</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
src/app/shared/submissions-table/submissions-table.component.scss
+ 7
− 0
View file @ 4eb335ac
.pages {
background: red !important;
}
.color_white {
color: #000;
}
src/app/shared/submissions-table/submissions-table.component.ts
+ 15
− 6
View file @ 4eb335ac
......@@ -13,7 +13,6 @@ import { DatatableComponent } from '@swimlane/ngx-datatable';
})
export class SubmissionsTableComponent implements OnInit, OnDestroy {
@Input() submissions: Submission[];
@Input() maxEntries = 10;
subscriptions: Subscription[] = [];
temp: Submission[];
......@@ -22,6 +21,15 @@ export class SubmissionsTableComponent implements OnInit, OnDestroy {
reorderable = true;
@ViewChild(DatatableComponent) table: DatatableComponent;
customClasses = {
sortAscending: 'fa fa-sort-asc color_white',
sortDescending: 'fa fa-sort-desc color_white',
pagerLeftArrow: 'fa fa-chevron-left color_white',
pagerRightArrow: 'fa fa-chevron-right color_white',
pagerPrevious: 'fa fa-step-backward color_white',
pagerNext: 'fa fa-step-forward color_white'
};
ngOnDestroy() {
this.subscriptions.forEach(subscription => subscription.unsubscribe());
}
......@@ -37,9 +45,12 @@ export class SubmissionsTableComponent implements OnInit, OnDestroy {
console.log('user submissions:', this.submissions);
}
loadMore() {
console.log('loading more submissions');
this.maxEntries += 5;
reloadSubmissions() {
const submission_list = this.submissionService.listSubmissions({}).subscribe(
(submissions: Submission[]) => {
this.submissions = submissions;
});
this.subscriptions.push(submission_list);
}
cancelSubmission(submission_id: string) {
......@@ -57,6 +68,4 @@ export class SubmissionsTableComponent implements OnInit, OnDestroy {
}
));
}
}
src/app/submissions/submission-list/submission-list.component.html
+ 1
− 0
View file @ 4eb335ac
......@@ -111,6 +111,7 @@
[footerHeight]="40"
[rowHeight]="40"
[rowClass]="getRowClass"
[sorts]="[{prop: 'created_at', dir: 'desc'}]"
[limit]="10">
<!-- Row Column Template -->
<ngx-datatable-column name="Submitted at" prop="created_at">
......
src/assets/scss/row-result.scss
+ 6
− 2
View file @ 4eb335ac
......@@ -3,11 +3,11 @@
}
.row-class-fail {
background-color: #ff4d4d !important;
background-color: #ff4c05 !important;
}
.row-class-error {
background-color: #800000 !important;
background-color: #d40dd6 !important;
}
.row-class-none {
......@@ -17,3 +17,7 @@
.row-class-skip {
background-color: #ffff80 !important;
}
.pager a {
color: #333333 !important;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment