Skip to content
Snippets Groups Projects
Commit fc07e499 authored by pnogal's avatar pnogal
Browse files

Create Course Details component in Shared folder

parent 5641e522
No related branches found
No related tags found
No related merge requests found
Showing
with 166 additions and 124 deletions
......@@ -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));
}
......
......@@ -43,7 +43,7 @@ export interface GradingBasis {
}
export interface CourseRequirements {
"000008=": number[];
'000008=': number[];
}
export interface Payload {
......
......@@ -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&amp;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
@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
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() {
}
......
......@@ -21,7 +21,6 @@ export class TermContainerComponent {
@Input() course: CourseDetails;
terms: any[];
favoriteCourse: FavoriteCourse;
constructor(private dataService: DataService, public dialog: MatDialog) {
}
......
<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&amp;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
@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
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();
});
});
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() {
}
}
......@@ -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 { }
......@@ -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) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment