From 392d6dfde51cd0c739e24d6c2ece5c84d7440ddd Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Mon, 26 Nov 2018 15:37:29 -0600
Subject: [PATCH] Use ngFor to display courseDetails elements

---
 .../course-details-dialog.component.html         | 16 ++++++++++------
 .../course-details-dialog.component.scss         |  4 ++--
 .../course-details-dialog.component.ts           |  4 ----
 src/assets/sass/general.scss                     |  8 ++++++++
 4 files changed, 20 insertions(+), 12 deletions(-)

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 28e5d6b..8e8f704 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
@@ -23,23 +23,27 @@
 		<p>{{ courseDetails.description }}</p>
 		<p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
 		
-		<ul>
+		<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>
-				{{ mapDescriptions(courseDetails.levels) }}
+				<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> 
-				{{ mapDescriptions(courseDetails.breadths) }}
+			<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>
+		<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="course-options-list">
+				<ul class="courseDetails-nested-list">
 					<li>
 						<span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
 						<span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>
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 4a0054d..8a74918 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,12 +1,12 @@
 @import 'assets/material-theme.scss';
 
 #course-details-content {
-    ul {
+    .courseDetails-list {
         margin-bottom: 20px;
         list-style: none;
         padding-inline-start: 0px;
     }
-    .course-options-list {
+    .courseDetails-nested-list {
         list-style: circle;
         -webkit-padding-start: 1.2em;
         padding-inline-start: 1.2em;
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 0347ea6..59aff05 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
@@ -16,10 +16,6 @@ export class CourseDetailsDialogComponent implements OnInit {
 		this.courseDetails = data.courseDetails;
 	}
 
-	mapDescriptions(objects) {
-		return objects.map(object => object.description);
-	}
-
 	ngOnInit() {
 	}
 }
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 3a96171..d3c9535 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -94,6 +94,14 @@ body {
 	padding: 20px 10px;
 }
 
+.list-comma::before {
+    content: ', ';
+}
+
+.list-comma:first-child::before {
+    content: '';
+}
+
 /*
 
 	Note: The follow styles need to be in the global styles file
-- 
GitLab