Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#9510] Instructor: Course Page/Student List Component: Implement sorting for table headers #9624

Closed
wants to merge 17 commits into from
Closed

[#9510] Instructor: Course Page/Student List Component: Implement sorting for table headers #9624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4067504
sorted data in course list table (instructor-courses-page.component.ts)
Mar 29, 2019
e6915bd
added sort feature to course page
Mar 30, 2019
e20da23
added sort by feature for archieve and delete tables
Mar 30, 2019
9d08c63
Merge branch 'master' of https://github.com/TEAMMATES/teammates into …
Mar 30, 2019
9639723
updated the sortByCreationDate to sort softDeleteCourses
Mar 30, 2019
9ded489
solved build error by removing undeclared var from html file
Mar 30, 2019
67f8798
solved error by removing all undeclared variables from html file
Mar 30, 2019
4a6b97a
Merge branch 'master' of https://github.com/TEAMMATES/teammates into …
Apr 9, 2019
0e1fb5c
updated sorting for sort by id
Apr 12, 2019
eba7b7e
updated local with recent changes
Apr 12, 2019
9f64ae1
Merge branch 'master' of https://github.com/TEAMMATES/teammates into …
Apr 12, 2019
2fdaad2
updated instructor-course-page.component.ts with proper spacing
Apr 12, 2019
714e417
Saving my current work
Apr 12, 2019
26f84dd
added sort functionality again with passing lint tests
Apr 12, 2019
e97cd76
removed undefined courseTabModels
Apr 12, 2019
9aaf278
did npm run test
Apr 12, 2019
3d96989
added sorting functionality for archived courses
Apr 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Expand Up @@ -50,9 +50,9 @@
},
"devDependencies": {
"@angular-builders/jest": "~7.1.2",
"@angular-devkit/build-angular": "~0.11.4",
"@angular-devkit/build-angular": "^0.13.7",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert this unrelated change

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, don't forget to revert these changes

"@angular/cli": "~7.1.4",
"@angular/compiler-cli": "~7.1.4",
"@angular/compiler-cli": "^7.2.11",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert this too

"@angular/language-service": "~7.1.4",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
Expand Down
210 changes: 210 additions & 0 deletions ...ctor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
View file
Open in desktop
Expand Up @@ -27,6 +27,41 @@ exports[`InstructorCoursesPageComponent should snap when it is undeletable and u
<h2>
Active Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down Expand Up @@ -277,6 +312,41 @@ exports[`InstructorCoursesPageComponent should snap when it is undeletable and u
/>
Archived Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down Expand Up @@ -584,6 +654,41 @@ exports[`InstructorCoursesPageComponent should snap with all courses in course s
<h2>
Active Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down Expand Up @@ -834,6 +939,41 @@ exports[`InstructorCoursesPageComponent should snap with all courses in course s
/>
Archived Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down Expand Up @@ -1147,6 +1287,41 @@ exports[`InstructorCoursesPageComponent should snap with default fields 1`] = `
<h2>
Active Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down Expand Up @@ -1238,6 +1413,41 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
<h2>
Active Courses
</h2>
<div
class="col-8"
>
<div
class="float-right"
>
<h5
class="d-inline"
>
<strong>
Sort By:
</strong>
</h5>
<div
class="btn-group"
data-toggle="buttons"
>
<button
class="btn btn-light"
>
Course ID
</button>
<button
class="btn btn-light"
>
Course Name
</button>
<button
class="btn btn-light"
>
Creation Date
</button>
</div>
</div>
</div>
<div
class="table-responsive"
>
Expand Down
20 changes: 20 additions & 0 deletions src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.html
View file
Open in desktop
Expand Up @@ -4,6 +4,16 @@

<div class="course-section">
<h2>Active Courses</h2>
<div class="col-8">
<div class="float-right">
<h5 class="d-inline"><strong> Sort By: </strong></h5>
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-light" (click)="sortCoursesBy('id')">Course ID</button>
<button class="btn btn-light" (click)="sortCoursesBy('name')">Course Name</button>
<button class="btn btn-light" (click)="sortCoursesBy('createdAt')">Creation Date</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered margin-0">
<thead>
Expand Down Expand Up @@ -121,6 +131,16 @@ <h2>Active Courses</h2>
<h2 class="text-muted">
<span class="fa fa-file-archive"></span> Archived Courses
</h2>
<div class="col-8">
<div class="float-right">
<h5 class="d-inline"><strong> Sort By: </strong></h5>
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-light" (click)="sortArchivedCoursesBy('id')">Course ID</button>
<button class="btn btn-light" (click)="sortArchivedCoursesBy('name')">Course Name</button>
<button class="btn btn-light" (click)="sortArchivedCoursesBy('createdAt')">Creation Date</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered margin-0">
<thead>
Expand Down
78 changes: 78 additions & 0 deletions src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.ts
View file
Open in desktop
Expand Up @@ -223,6 +223,84 @@ export class InstructorCoursesPageComponent implements OnInit {
}, () => {});
}

/**
* Sorts the panels of courses in order.
*/
sortPanelsBy(by: string):
((a: ActiveCourse, b: ActiveCourse) => number) {
return ((a: ActiveCourse, b: ActiveCourse): number => {
let strA: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables name don't seem to be intuitive. Perhaps use a more relatable name?

let strB: string;
const name: string = 'name';
const id: string = 'id';
const createdAt: string = 'createdAt';
switch (by) {
case name:
strA = a.name;
strB = b.name;
break;
case id:
strA = a.id;
strB = b.id;
break;
case createdAt:
strA = a.createdAt;
strB = b.createdAt;
break;
default:
strA = '';
strB = '';
}
return strA.localeCompare(strB);
});
}

/**
* Sorts the panels of courses in order.
*/
sortArchivedPanelsBy(by: string):
((a: ArchivedCourse, b: ArchivedCourse) => number) {
return ((a: ArchivedCourse, b: ArchivedCourse): number => {
let strA: string;
let strB: string;
const name: string = 'name';
const id: string = 'id';
const createdAt: string = 'createdAt';
switch (by) {
case name:
strA = a.name;
strB = b.name;
break;
case id:
strA = a.id;
strB = b.id;
break;
case createdAt:
strA = a.createdAt;
strB = b.createdAt;
break;
default:
strA = '';
strB = '';
}
return strA.localeCompare(strB);
});
}

/**
* Sorts the courses according to selected option.
*/
sortCoursesBy(by: string): void {
this.activeCourses.sort(this.sortPanelsBy(by));
}

/**
* Sorts the courses according to selected option.
*/
sortArchivedCoursesBy(by: string): void {
this.archivedCourses.sort(this.sortArchivedPanelsBy(by));
}

/**
* Restores a soft-deleted course from Recycle Bin.
*/
Expand Down