From fc07e4999e8bdbaf70a9086e031eba7c9f4326c1 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Tue, 27 Nov 2018 11:52:45 -0600
Subject: [PATCH] Create Course Details component in Shared folder
---
src/app/core/data.service.ts | 2 +-
src/app/core/models/course-details.ts | 2 +-
.../course-details-dialog.component.html | 70 +------------------
.../course-details-dialog.component.scss | 43 ------------
.../course-details-dialog.component.ts | 8 +--
.../term-container.component.ts | 1 -
.../course-details.component.html | 67 ++++++++++++++++++
.../course-details.component.scss | 43 ++++++++++++
.../course-details.component.spec.ts | 25 +++++++
.../course-details.component.ts | 22 ++++++
src/app/shared/shared.module.ts | 5 +-
src/assets/sass/general.scss | 2 +-
12 files changed, 166 insertions(+), 124 deletions(-)
create mode 100644 src/app/shared/course-details/course-details.component.html
create mode 100644 src/app/shared/course-details/course-details.component.scss
create mode 100644 src/app/shared/course-details/course-details.component.spec.ts
create mode 100644 src/app/shared/course-details/course-details.component.ts
diff --git a/src/app/core/data.service.ts b/src/app/core/data.service.ts
index e5fbdf4..78d8f0f 100644
--- a/src/app/core/data.service.ts
+++ b/src/app/core/data.service.ts
@@ -41,7 +41,7 @@ export class DataService {
}
getCourseDetails(termCode: string, subjectCode: string, courseId: string): Observable<CourseDetails[]> {
- return this.http.get<CourseDetails[]>(this.searchApiUrl + 'course/' + termCode + '/' + subjectCode + '/' + courseId, httpOptions)
+ return this.http.get<CourseDetails[]>(this.searchApiUrl + 'course/0000/' + '/' + subjectCode + '/' + courseId, httpOptions)
.pipe(catchError(this.errorHandler));
}
diff --git a/src/app/core/models/course-details.ts b/src/app/core/models/course-details.ts
index cbfb4e3..4048f3b 100644
--- a/src/app/core/models/course-details.ts
+++ b/src/app/core/models/course-details.ts
@@ -43,7 +43,7 @@ export interface GradingBasis {
}
export interface CourseRequirements {
- "000008=": number[];
+ '000008=': number[];
}
export interface Payload {
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
index fded3ae..35b902d 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
@@ -3,72 +3,6 @@
<button mat-button mat-dialog-close class="close-btn"><i class="material-icons">clear</i></button>
</mat-toolbar>
-<mat-dialog-content id="course-details-content" class="mat-typography dialog-with-toolbar ">
-
- <div fxLayout="row">
- <div fxLayout="row" fxLayout.lt-md="column" fxFlex="100" fxLayoutGap="10px" class="course-details-header">
- <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
- <h3>{{ courseDetails.fullCourseDesignation | titlecase }}<span class="course-detail-subtitle">{{ courseDetails.title }}</span></h3>
- </div>
- <div fxFlex="50" fxLayout="row" fxLayoutAlign="end start" >
- <mat-dialog-actions>
- <button mat-button class="btn-secondary" mat-dialog-close>Delete</button>
- <button mat-raised-button class="btn-primary mat-button">See Sections</button>
- </mat-dialog-actions>
- </div>
- </div>
- </div>
-
- <div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="10px" class="course-details-content">
- <p>{{ courseDetails.description }}</p>
- <p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
-
- <ul class="courseDetails-list">
- <li *ngIf="courseDetails.creditRange"><span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}</li>
- <li *ngIf="courseDetails.levels && courseDetails.levels.length > 0"><span class="semi-bold">Level: </span>
- <span *ngFor="let levels of courseDetails.levels">
- <span class="list-comma">{{ levels.description }}</span>
- </span>
- </li>
- <li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth: </span>
- <span *ngFor="let breadths of courseDetails.breadths">
- <span class="list-comma">{{ breadths.description }}</span>
- </span>
- </li>
- <li *ngIf="courseDetails.lettersAndScienceCredits"><span class="semi-bold">L&S Credit Type:</span>
- {{ courseDetails.lettersAndScienceCredits.description }}
- </li>
- </ul>
-
- <ul class="courseDetails-list">
- <li *ngIf="courseDetails.lastTaught"><span class="semi-bold">Last Taught:</span> {{ courseDetails.lastTaught | getTermDescription }}</li>
- <li *ngIf="(courseDetails.gradCourseWork || courseDetails.workplaceExperience || courseDetails.foreignLanguage)" ><span class="semi-bold">Course Options:</span>
- <ul class="courseDetails-nested-list">
- <li>
- <span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
- <span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>
- <span *ngIf="courseDetails.foreignLanguage">{{ courseDetails.foreignLanguage.description }}</span>
- </li>
- </ul>
- </li>
- </ul>
-
- <p class="semi-bold">Subject Notes:</p>
- <p>{{ courseDetails.subject.footnotes }}</p>
-
- </div>
-
- <div class="course-details-footer">
- <p class="semi-bold">{{ courseDetails.fullCourseDesignation | titlecase }} Information:</p>
- <div fxLayout="row">
- <div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
- <div fxFlex="100" class="course-detail-title" fxLayoutAlign="start center">
- <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.departmentURI }}">Website</a>
- <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.undergraduateCatalogURI }}">Undergraduate Info</a>
- <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.graduateCatalogURI }}">Graduate Info</a>
- </div>
- </div>
- </div>
- </div>
-
+<mat-dialog-content class="mat-typography dialog-with-toolbar">
+ <cse-course-details></cse-course-details>
</mat-dialog-content>
\ No newline at end of file
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
index 8a74918..e69de29 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
@@ -1,43 +0,0 @@
-@import 'assets/material-theme.scss';
-
-#course-details-content {
- .courseDetails-list {
- margin-bottom: 20px;
- list-style: none;
- padding-inline-start: 0px;
- }
- .courseDetails-nested-list {
- list-style: circle;
- -webkit-padding-start: 1.2em;
- padding-inline-start: 1.2em;
- }
- .course-detail-title {
- h3 {
- line-height: 1.2;
- color: #333;
- font-size: 16px;
- font-weight: 500;
- padding-top: 5px;
- }
- .course-detail-subtitle {
- font-weight: 300;
- display: block;
- }
- }
- .mat-dialog-actions {
- padding-top: 0px;
- }
- .course-details-header {
- padding: 12px 0px;
- }
- .btn-link {
- color: map-get($uw-primary, 500);
- }
- .course-details-footer {
- margin-top: 5px;
- .mat-dialog-actions {
- margin-bottom: 0px;
- padding-bottom: 0px;
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
index 59aff05..993c2ae 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
@@ -1,7 +1,4 @@
import { Component, OnInit, Inject } from '@angular/core';
-import { CourseDetails } from '../../../core/models/course-details';
-import { DataService } from '../../../core/data.service';
-import { MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'cse-course-details-dialog',
@@ -10,11 +7,8 @@ import { MAT_DIALOG_DATA } from '@angular/material';
})
export class CourseDetailsDialogComponent implements OnInit {
- courseDetails: CourseDetails;
- constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService) {
- this.courseDetails = data.courseDetails;
- }
+ constructor() {}
ngOnInit() {
}
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index ccb71a6..a20077f 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -21,7 +21,6 @@ export class TermContainerComponent {
@Input() course: CourseDetails;
terms: any[];
- favoriteCourse: FavoriteCourse;
constructor(private dataService: DataService, public dialog: MatDialog) {
}
diff --git a/src/app/shared/course-details/course-details.component.html b/src/app/shared/course-details/course-details.component.html
new file mode 100644
index 0000000..bd88faf
--- /dev/null
+++ b/src/app/shared/course-details/course-details.component.html
@@ -0,0 +1,67 @@
+<div id="course-details-content">
+ <div fxLayout="row">
+ <div fxLayout="row" fxLayout.lt-md="column" fxFlex="100" fxLayoutGap="10px" class="course-details-header">
+ <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
+ <h3>{{ courseDetails.fullCourseDesignation | titlecase }}<span class="course-detail-subtitle">{{ courseDetails.title }}</span></h3>
+ </div>
+ <div fxFlex="50" fxLayout="row" fxLayoutAlign="end start" >
+ <mat-dialog-actions>
+ <button mat-button class="btn-secondary" mat-dialog-close>Delete</button>
+ <button mat-raised-button class="btn-primary mat-button">See Sections</button>
+ </mat-dialog-actions>
+ </div>
+ </div>
+ </div>
+
+ <div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="10px" class="course-details-content">
+ <p>{{ courseDetails.description }}</p>
+ <p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
+
+ <ul class="courseDetails-list">
+ <li *ngIf="courseDetails.creditRange"><span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}</li>
+ <li *ngIf="courseDetails.levels && courseDetails.levels.length > 0"><span class="semi-bold">Level: </span>
+ <span *ngFor="let levels of courseDetails.levels">
+ <span class="list-comma">{{ levels.description }}</span>
+ </span>
+ </li>
+ <li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth: </span>
+ <span *ngFor="let breadths of courseDetails.breadths">
+ <span class="list-comma">{{ breadths.description }}</span>
+ </span>
+ </li>
+ <li *ngIf="courseDetails.lettersAndScienceCredits"><span class="semi-bold">L&S Credit Type:</span>
+ {{ courseDetails.lettersAndScienceCredits.description }}
+ </li>
+ </ul>
+
+ <ul class="courseDetails-list">
+ <li *ngIf="courseDetails.lastTaught"><span class="semi-bold">Last Taught:</span> {{ courseDetails.lastTaught | getTermDescription }}</li>
+ <li *ngIf="(courseDetails.gradCourseWork || courseDetails.workplaceExperience || courseDetails.foreignLanguage)" ><span class="semi-bold">Course Options:</span>
+ <ul class="courseDetails-nested-list">
+ <li>
+ <span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
+ <span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>
+ <span *ngIf="courseDetails.foreignLanguage">{{ courseDetails.foreignLanguage.description }}</span>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ <p class="semi-bold">Subject Notes:</p>
+ <p>{{ courseDetails.subject.footnotes }}</p>
+
+ </div>
+
+ <div class="course-details-footer">
+ <p class="semi-bold">{{ courseDetails.fullCourseDesignation | titlecase }} Information:</p>
+ <div fxLayout="row">
+ <div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
+ <div fxFlex="100" class="course-detail-title" fxLayoutAlign="start center">
+ <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.departmentURI }}">Website</a>
+ <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.undergraduateCatalogURI }}">Undergraduate Info</a>
+ <a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.graduateCatalogURI }}">Graduate Info</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/course-details/course-details.component.scss b/src/app/shared/course-details/course-details.component.scss
new file mode 100644
index 0000000..8a74918
--- /dev/null
+++ b/src/app/shared/course-details/course-details.component.scss
@@ -0,0 +1,43 @@
+@import 'assets/material-theme.scss';
+
+#course-details-content {
+ .courseDetails-list {
+ margin-bottom: 20px;
+ list-style: none;
+ padding-inline-start: 0px;
+ }
+ .courseDetails-nested-list {
+ list-style: circle;
+ -webkit-padding-start: 1.2em;
+ padding-inline-start: 1.2em;
+ }
+ .course-detail-title {
+ h3 {
+ line-height: 1.2;
+ color: #333;
+ font-size: 16px;
+ font-weight: 500;
+ padding-top: 5px;
+ }
+ .course-detail-subtitle {
+ font-weight: 300;
+ display: block;
+ }
+ }
+ .mat-dialog-actions {
+ padding-top: 0px;
+ }
+ .course-details-header {
+ padding: 12px 0px;
+ }
+ .btn-link {
+ color: map-get($uw-primary, 500);
+ }
+ .course-details-footer {
+ margin-top: 5px;
+ .mat-dialog-actions {
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/shared/course-details/course-details.component.spec.ts b/src/app/shared/course-details/course-details.component.spec.ts
new file mode 100644
index 0000000..b8854c4
--- /dev/null
+++ b/src/app/shared/course-details/course-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CourseDetailsComponent } from './course-details.component';
+
+describe('CourseDetailsComponent', () => {
+ let component: CourseDetailsComponent;
+ let fixture: ComponentFixture<CourseDetailsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CourseDetailsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CourseDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/course-details/course-details.component.ts b/src/app/shared/course-details/course-details.component.ts
new file mode 100644
index 0000000..bb2fc31
--- /dev/null
+++ b/src/app/shared/course-details/course-details.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { CourseDetails } from '../../core/models/course-details';
+import { DataService } from '../../core/data.service';
+import { MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+ selector: 'cse-course-details',
+ templateUrl: './course-details.component.html',
+ styleUrls: ['./course-details.component.scss']
+})
+
+export class CourseDetailsComponent implements OnInit {
+ courseDetails: CourseDetails;
+
+ constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService) {
+ this.courseDetails = data.courseDetails;
+ }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index f8fba8e..ba0f2e1 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -16,6 +16,7 @@ import { MatDialogModule } from '@angular/material/dialog';
import { GetTermDescriptionPipe } from './get-term-description.pipe';
import { AcademicYearStatePipe } from './academic-year-state.pipe';
+import { CourseDetailsComponent } from './course-details/course-details.component';
const modules = [
CommonModule,
@@ -36,8 +37,8 @@ const modules = [
@NgModule({
imports: [ modules ],
- exports: [ modules, GetTermDescriptionPipe, AcademicYearStatePipe ],
- declarations: [ GetTermDescriptionPipe, AcademicYearStatePipe ]
+ exports: [ modules, GetTermDescriptionPipe, AcademicYearStatePipe, CourseDetailsComponent ],
+ declarations: [ GetTermDescriptionPipe, AcademicYearStatePipe, CourseDetailsComponent ]
})
export class SharedModule { }
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 87e0591..7f4e9bd 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -133,6 +133,7 @@ body {
padding: 0px !important;
.dialog-with-toolbar {
padding: 0 45px 10px 45px;
+ margin: 0px;
}
}
@@ -151,7 +152,6 @@ body {
}
}
-
// Media queries
@media screen and (max-width: 800px) {
--
GitLab