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
Hide whitespace changes
Inline Side-by-side
Showing
with 166 additions and 124 deletions
src/app/core/data.service.ts
+ 1
− 1
View file @ fc07e499
......@@ -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));
}
......
src/app/core/models/course-details.ts
+ 1
− 1
View file @ fc07e499
......@@ -43,7 +43,7 @@ export interface GradingBasis {
}
export interface CourseRequirements {
"000008=": number[];
'000008=': number[];
}
export interface Payload {
......
src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
+ 2
− 68
View file @ fc07e499
......@@ -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
src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
+ 0
− 43
View file @ fc07e499
@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
src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
+ 1
− 7
View file @ fc07e499
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() {
}
......
src/app/degree-planner/term-container/term-container.component.ts
+ 0
− 1
View file @ fc07e499
......@@ -21,7 +21,6 @@ export class TermContainerComponent {
@Input() course: CourseDetails;
terms: any[];
favoriteCourse: FavoriteCourse;
constructor(private dataService: DataService, public dialog: MatDialog) {
}
......
src/app/shared/course-details/course-details.component.html 0 → 100644
+ 67
− 0
View file @ fc07e499
<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
src/app/shared/course-details/course-details.component.scss 0 → 100644
+ 43
− 0
View file @ fc07e499
@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
src/app/shared/course-details/course-details.component.spec.ts 0 → 100644
+ 25
− 0
View file @ fc07e499
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();
});
});
src/app/shared/course-details/course-details.component.ts 0 → 100644
+ 22
− 0
View file @ fc07e499
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() {
}
}
src/app/shared/shared.module.ts
+ 3
− 2
View file @ fc07e499
......@@ -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 { }
src/assets/sass/general.scss
+ 1
− 1
View file @ fc07e499
......@@ -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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment