Display list of all incoming changes on scenario from scheduled data

app/budget/BudgetCtrl.html

@@ -3,104 +3,111 @@
 <ipa-header page-title="Budget"></ipa-header>
 
 <div class="budget-view">
-	<spinner ng-if="!view.state"
-		size="20" style="padding-top: 200px;">
-	</spinner>
+  <spinner ng-if="!view.state"
+    size="20" style="padding-top: 200px;">
+  </spinner>
 
-	<div ng-if="view.state">
-		<!-- Modals -->
-		<ipa-modal is-visible="view.state.openAddBudgetScenario"
-		           header-text="Add New Budget Scenario">
-			<add-budget-scenario ng-if="view.state.openAddBudgetScenario"
-			                     state="view.state"
-			                     is-visible="view.state.openAddBudgetScenario">
-			</add-budget-scenario>
-		</ipa-modal>
+  <div ng-if="view.state">
+    <!-- Modals -->
+    <ipa-modal is-visible="view.state.openAddBudgetScenario"
+               header-text="Add New Budget Scenario">
+      <add-budget-scenario ng-if="view.state.openAddBudgetScenario"
+                           state="view.state"
+                           is-visible="view.state.openAddBudgetScenario">
+      </add-budget-scenario>
+    </ipa-modal>
 
-		<ipa-modal is-visible="view.state.ui.isAddLineItemModalOpen"
-		           header-text="Line Item">
-			<add-line-item ng-if="view.state.ui.isAddLineItemModalOpen"
-			               state="view.state"
-			               is-visible="view.state.ui.isAddLineItemModalOpen"
-			               line-item-to-edit="view.state.ui.lineItemToEdit">
-			</add-line-item>
-		</ipa-modal>
+    <ipa-modal is-visible="view.state.ui.isAddLineItemModalOpen"
+               header-text="Line Item">
+      <add-line-item ng-if="view.state.ui.isAddLineItemModalOpen"
+                     state="view.state"
+                     is-visible="view.state.ui.isAddLineItemModalOpen"
+                     line-item-to-edit="view.state.ui.lineItemToEdit">
+      </add-line-item>
+    </ipa-modal>
 
-		<ipa-modal is-visible="view.state.ui.isBudgetConfigModalOpen"
-		           header-text="Terms"
-		           styles="budgetConfigStyles">
-			<budget-config ng-if="view.state.ui.isBudgetConfigModalOpen"
-			               state="view.state"
-			               selected-budget-scenario="view.state.selectedBudgetScenario"
-			               is-visible="view.state.ui.isBudgetConfigModalOpen">
-			</budget-config>
-		</ipa-modal>
+    <ipa-modal is-visible="view.state.ui.isBudgetConfigModalOpen"
+               header-text="Terms"
+               styles="budgetConfigStyles">
+      <budget-config ng-if="view.state.ui.isBudgetConfigModalOpen"
+                     state="view.state"
+                     selected-budget-scenario="view.state.selectedBudgetScenario"
+                     is-visible="view.state.ui.isBudgetConfigModalOpen">
+      </budget-config>
+    </ipa-modal>
 
-		<ipa-modal is-visible="view.state.ui.courseCommentsModal.isOpen"
-		           header-text="Course Comments">
-			<add-course-comments ng-if="view.state.ui.courseCommentsModal.isOpen"
-			                     section-group-cost="view.state.ui.courseCommentsModal.sectionGroupCost"
-			                     current-user-login-id="currentUser.loginId"
-			                     is-visible="view.state.ui.courseCommentsModal.isOpen">
-			</add-course-comments>
-		</ipa-modal>
+    <ipa-modal is-visible="view.state.ui.courseCommentsModal.isOpen"
+               header-text="Course Comments">
+      <add-course-comments ng-if="view.state.ui.courseCommentsModal.isOpen"
+                           section-group-cost="view.state.ui.courseCommentsModal.sectionGroupCost"
+                           current-user-login-id="currentUser.loginId"
+                           is-visible="view.state.ui.courseCommentsModal.isOpen">
+      </add-course-comments>
+    </ipa-modal>
 
 
-		<ipa-modal class="add-course__modal" is-visible="view.state.ui.addCourseModal.isOpen"
-		           header-text="Add Course">
-			<add-course ng-if="view.state.ui.addCourseModal.isOpen"
-			            state="view.state"
-			            is-visible="view.state.ui.addCourseModal.isOpen">
-			</add-course>
-		</ipa-modal>
+    <ipa-modal class="add-course__modal" is-visible="view.state.ui.addCourseModal.isOpen"
+               header-text="Add Course">
+      <add-course ng-if="view.state.ui.addCourseModal.isOpen"
+                  state="view.state"
+                  is-visible="view.state.ui.addCourseModal.isOpen">
+      </add-course>
+    </ipa-modal>
 
-		<ipa-modal is-visible="view.state.ui.lineItemCommentsModal.isOpen"
-		           header-text="Line Item Comments">
-			<add-line-item-comments ng-if="view.state.ui.lineItemCommentsModal.isOpen"
-			                        line-item="view.state.ui.lineItemCommentsModal.lineItem"
-			                        current-user-login-id="currentUser.loginId"
-			                        is-visible="view.state.ui.lineItemCommentsModal.isOpen">
-			</add-line-item-comments>
-		</ipa-modal>
+    <ipa-modal is-visible="view.state.ui.lineItemCommentsModal.isOpen"
+               header-text="Line Item Comments">
+      <add-line-item-comments ng-if="view.state.ui.lineItemCommentsModal.isOpen"
+                              line-item="view.state.ui.lineItemCommentsModal.lineItem"
+                              current-user-login-id="currentUser.loginId"
+                              is-visible="view.state.ui.lineItemCommentsModal.isOpen">
+      </add-line-item-comments>
+    </ipa-modal>
 
-		<budget-scenario-toolbar state="view.state"></budget-scenario-toolbar>
+    <budget-scenario-toolbar state="view.state"></budget-scenario-toolbar>
 
-		<budget-nav class="budget-view__nav-container"
-		            total-balance="view.state.selectedBudgetScenario.summary.totalBalance"
-		            selected-section="view.state.ui.sectionNav.activeTab"
-		            selected-budget-scenario="view.state.selectedBudgetScenario"
-		            selected-line-items="view.state.ui.selectedLineItems"
-		            filters="view.state.ui.filters"
-		            funds-nav="view.state.ui.fundsNav.activeTab">
-		</budget-nav>
+    <budget-nav class="budget-view__nav-container"
+                total-balance="view.state.selectedBudgetScenario.summary.totalBalance"
+                selected-section="view.state.ui.sectionNav.activeTab"
+                selected-budget-scenario="view.state.selectedBudgetScenario"
+                selected-line-items="view.state.ui.selectedLineItems"
+                filters="view.state.ui.filters"
+                funds-nav="view.state.ui.fundsNav.activeTab">
+    </budget-nav>
 
-		<div class="page-content">
-			<budget-summary ng-if="view.state.ui.sectionNav.activeTab == 'Summary'"
-			                summary="view.state.summary"
-			                instructor-types="view.state.instructorTypes"
-			                selected-budget-scenario="view.state.selectedBudgetScenario">
-			</budget-summary>
-			<line-items ng-if="view.state.ui.sectionNav.activeTab == 'Funds'"
-			            selected-budget-scenario="view.state.selectedBudgetScenario"
-			            line-items="view.state.calculatedLineItems"
-			            ui="view.state.ui">
-			</line-items>
-			<budget-costs ng-if="view.state.ui.sectionNav.activeTab == 'Schedule Costs'"
-			              instructor-assignment-options="view.state.ui.instructorAssignmentOptions"
-			              regular-instructor-assignment-options="view.state.ui.regularInstructorAssignmentOptions"
-			              schedule-costs="view.state.calculatedScheduleCosts"
-			              term-nav="view.state.ui.termNav"
-			              summary="view.state.summary">
-			</budget-costs>
-			<instructor-list ng-if="view.state.ui.sectionNav.activeTab == 'Instructor List'"
-			                 state="view.state"
-			                 selected-budget-scenario="view.state.selectedBudgetScenario">
-			</instructor-list>
-			<course-list ng-if="view.state.ui.sectionNav.activeTab == 'Course List'"
-			             course-list="view.state.calculatedCourseList"
-			             term-nav="view.state.ui.termNav"
-			             selected-budget-scenario="view.state.selectedBudgetScenario">
-			</instructor-list>
-		</div>
-	</div>
+    <div class="page-content">
+      <budget-summary ng-if="view.state.ui.sectionNav.activeTab == 'Summary'"
+                      summary="view.state.summary"
+                      instructor-types="view.state.instructorTypes"
+                      selected-budget-scenario="view.state.selectedBudgetScenario">
+      </budget-summary>
+      <line-items ng-if="view.state.ui.sectionNav.activeTab == 'Funds'"
+                  selected-budget-scenario="view.state.selectedBudgetScenario"
+                  line-items="view.state.calculatedLineItems"
+                  ui="view.state.ui">
+      </line-items>
+      <budget-costs ng-if="view.state.ui.sectionNav.activeTab == 'Schedule Costs'"
+                    instructor-assignment-options="view.state.ui.instructorAssignmentOptions"
+                    regular-instructor-assignment-options="view.state.ui.regularInstructorAssignmentOptions"
+                    schedule-costs="view.state.calculatedScheduleCosts"
+                    term-nav="view.state.ui.termNav"
+                    summary="view.state.summary">
+      </budget-costs>
+      <instructor-list ng-if="view.state.ui.sectionNav.activeTab == 'Instructor List'"
+                       state="view.state"
+                       selected-budget-scenario="view.state.selectedBudgetScenario">
+      </instructor-list>
+      <course-list ng-if="view.state.ui.sectionNav.activeTab == 'Course List'"
+                   course-list="view.state.calculatedCourseList"
+                   term-nav="view.state.ui.termNav"
+                   selected-budget-scenario="view.state.selectedBudgetScenario">
+      </course-list>
+      <incoming-changes ng-if="view.state.ui.sectionNav.activeTab == 'Incoming Changes'"
+                        courses="view.state.courses"
+                        section-groups="view.state.sectionGroups"
+                        section-group-costs="view.state.sectionGroupCosts"
+                        term-nav="view.state.ui.termNav"
+                        selected-budget-scenario="view.state.selectedBudgetScenario">
+      </incoming-changes>
+    </div>
+  </div>
 </div>

app/budget/budgetApp.js

@@ -19,6 +19,7 @@ import AuthService from './../shared/services/AuthService.js';
 import SectionService from './../shared/services/SectionService.js';
 
 // Directives
+import incomingChanges from './directives/incomingChanges/incomingChanges.js';
 import budgetNav from './directives/budgetNav/budgetNav.js';
 import lineItemFilters from './directives/budgetNav/lineItemFilters/lineItemFilters.js';
 
@@ -103,6 +104,7 @@ const budgetApp = angular.module("budgetApp", dependencies)
 .directive('addLineItem', addLineItem)
 .directive('addLineItemComments', addLineItemComments)
 .directive('courseList', courseList)
+.directive('incomingChanges', incomingChanges)
 .constant('ActionTypes', {
 	INIT_STATE: "INIT_STATE",
 	CREATE_BUDGET_SCENARIO: "CREATE_BUDGET_SCENARIO",

app/budget/directives/budgetNav/budgetNav.html

@@ -15,6 +15,9 @@
 		<div class="budget-nav__nav-item" ng-click="setRoute('Course List')" ng-class="{ 'budget-nav__nav-item--active': selectedSection == 'Course List' }">
 			Course List
 		</div>
+		<div class="budget-nav__nav-item" ng-click="setRoute('Incoming Changes')" ng-class="{ 'budget-nav__nav-item--active': selectedSection == 'Incoming Changes' }">
+			Incoming Changes
+		</div>
 	</div>
 
 	<div class="budget-nav__side-bar">

app/budget/directives/incomingChanges/incomingChanges.css

@@ -0,0 +1,63 @@
+.incoming-changes__title {
+  font-weight: bold;
+}
+
+.incoming-changes__change-text {
+  color: rgb(153, 153, 153);
+  text-transform: capitalize;
+}
+
+.incoming-changes__sub-title-indent {
+  margin-left: 10px;
+}
+
+.incoming-changes__course-divide {
+  border-bottom: 1px black solid;
+}
+
+.incoming-changes__section-divide {
+  border-top: 1px #ebebeb solid;
+}
+
+.incoming-changes__ui {
+  text-align: end;
+  padding-right: 15px;
+}
+
+.incoming-changes__table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.incoming-changes__apply-term {
+  padding-bottom: 20px;
+  padding-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  border-bottom: 1p solid #ebebeb;
+}
+
+.incoming-changes__table-header {
+	width: 10%;
+	border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.incoming-changes__table-header-container {
+	border-right: 1px solid #ddd;
+	padding-left: 15px;
+	padding-right: 15px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+.incoming-changes__no-changes {
+  color: #777;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+}

app/budget/directives/incomingChanges/incomingChanges.html

@@ -0,0 +1,106 @@
+<div class="incoming-changes">
+  <ipa-tabs tab-names="termNav.allTabs"
+            active-tab="termNav.activeTab"
+            select-tab="setActiveTerm"
+            tab-overrides="tabOverrides"
+            slim="true">
+    <div>
+      <div ng-if="changes[termNav.activeTerm].length > 0" class="incoming-changes__apply-term">
+        <ipa-button text="'Apply (' + totalChanges[termNav.activeTerm] + ') changes in ' + termNav.activeTab"
+                    skin="'dark'"
+                    confirm-message="'Are you sure you want to apply all changes in ' + termNav.activeTab + '?'"
+                    on-click="applyTermChanges()">
+        </ipa-button>
+      </div>
+      <table class="incoming-changes__table">
+        <colgroup>
+          <col style="width: 20%;">
+          <col style="width: 20%;">
+          <col style="width: 20%;">
+          <col style="width: 20%;">
+          <col style="width: 20%;">
+        </colgroup>
+        <thead>
+          <tr>
+            <th class="incoming-changes__table-header">
+              <div class="incoming-changes__table-header-container">
+                Course
+              </div>
+            </th>
+           <th class="incoming-changes__table-header">
+              <div class="incoming-changes__table-header-container">
+                Change
+              </div>
+            </th>
+            <th class="incoming-changes__table-header">
+              <div class="incoming-changes__table-header-container">
+                Scheduled
+              </div>
+            </th>
+            <th class="incoming-changes__table-header">
+              <div class="incoming-changes__table-header-container">
+                Scenario
+              </div>
+            </th>
+            <th class="incoming-changes__table-header">
+              <div class="incoming-changes__table-header-container"></div>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr ng-repeat="change in changes[termNav.activeTerm]" ng-class="{'incoming-changes__course-divide': change.courseHeader, 'incoming-changes__section-divide': !change.courseHeader}">
+            <td class="course-list__cell">
+              <div class="incoming-changes__title">
+                {{ change.display.title }}
+              </div>
+              <div ng-class="{ 'incoming-changes__sub-title-indent': !change.display.title }">
+                {{ change.display.subTitle }}
+              </div>
+            </td>
+            <td class="incoming-changes__course-header-ui" ng-if="change.courseHeader" colspan="4">
+              <span>
+                <ipa-button text="'Apply (' + change.payload.changes.length + ') changes in ' + change.course"
+                            size="'small'"
+                            skin="'dark'"
+                            confirm-message="'Are you sure you want to apply changes to ' + change.course + '?'"
+                            on-click="applyCourseChanges(change)">
+                </ipa-button>
+              </span>
+            </td>
+            <td ng-if="!change.courseHeader" class="course-list__cell">
+              <span class="incoming-changes__change-text">
+                {{ change.display.changeText }}
+              </span>
+            </td>
+            <td ng-if="!change.courseHeader" class="course-list__cell">
+              <i ng-if="change.display.scheduleText == 'check'" class="glyphicon glyphicon-check"></i>
+              <span ng-if="change.display.scheduleText != 'check'">{{ change.display.scheduleText }}</span>
+            </td>
+            <td ng-if="!change.courseHeader" class="course-list__cell">
+              <i ng-if="change.display.scenarioText == 'check'" class="glyphicon glyphicon-check"></i>
+              <span ng-if="change.display.scenarioText != 'check'">{{ change.display.scenarioText }}</span>
+            </td>
+            <td ng-if="!change.courseHeader" class="course-list__cell incoming-changes__ui">
+              <span ng-if="!change.courseHeader">
+                <ipa-button text="'Apply ' + change.display.changeText"
+                            size="'small'"
+                            skin="'dark'"
+                            confirm-message="change.display.tooltip"
+                            on-click="applyChange(change)">
+                </ipa-button>
+              </span>
+            </td>
+          </tr>
+          <tr ng-show="!changes[termNav.activeTerm]">
+            <td colspan="5">
+              <div class="incoming-changes__no-changes">
+                No changes
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </ipa-tabs>
+</div>