Merge pull request #76 from AppliedIS/feature-ui

UI fixes to the work site employees table and disability display
ais-open · Oct 25, 2016 · 8e72148 · 8e72148
2 parents fbf97b7 + abbbe70
commit 8e72148
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 11 deletions.
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesController.js
@@ -2,6 +2,7 @@
 
 import isEmpty from 'lodash/isEmpty'
 import merge from 'lodash/merge'
+import find from 'lodash/find'
 
 module.exports = function(ngModule) {
     ngModule.controller('sectionWorkSitesController', function($scope, $location, navService, responsesService, stateService) {
@@ -28,6 +29,7 @@ module.exports = function(ngModule) {
         responsesService.getQuestionResponses(questionKeys).then((responses) => { $scope.responses = responses; });
 
         this.clearActiveWorker = function() {
+            console.log(find($scope.responses.PrimaryDisability, { 'id': vm.activeWorker.primaryDisability }));
             vm.activeWorker = {};
             vm.activeWorkerIndex = -1;
         }
@@ -137,6 +139,24 @@ module.exports = function(ngModule) {
             row.next().toggleClass("show");
         }
 
+        this.getDisabilityDisplay = function(employee) {
+            if (!employee) {
+                return undefined;
+            }
+
+            var disability = find($scope.responses.PrimaryDisability, { 'id': employee.primaryDisability });
+            if (disability) {
+                if (disability.otherValueKey) {
+                    return employee[disability.otherValueKey];
+                }
+                else {
+                    return disability.display;
+                }
+            }
+
+            return undefined;
+        }
+
         $scope.$on('$routeUpdate', function(){
             query = $location.search();
             if (query.t) {

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesTemplate.html
@@ -1,4 +1,4 @@
-<div class="form-page">
+<div class="form-page-full">
     <div class="form-question-block">
         <div class="form-question-text">What is the total number of establishments and work sites to be covered by this certificate?</div>
         <div class="form-question-answer">
@@ -196,8 +196,8 @@
             </ul>
         </div>
 
-        <div class="form-question-group em-block">
-            <div ng-show="vm.addingEmployee">
+        <div class="form-question-group">
+            <div class="em-block" ng-show="vm.addingEmployee">
                 <div class="form-question-block">
                     <div class="form-question-text">Full Name of Worker</div>
                     <div class="form-question-answer">
@@ -211,9 +211,9 @@
                         <fieldset class="usa-fieldset-inputs usa-sans">
                             <ul class="usa-unstyled-list">
                                 <li ng-repeat="response in responses.PrimaryDisability">
-                                    <input id="primaryDisibility_{{ response.id }}" type="radio" name="primaryDisibility" ng-value="{{ response.id }}" ng-model="vm.acitveWorker.primaryDisibility">
-                                    <label for="primaryDisibility_{{ response.id }}">{{ response.display }}</label>
-                                    <input id="primaryDisibilityOther" name="primaryDisibilityOther" type="text" ng-model="vm.activeWorker.primaryDisabilityOther" ng-if="response.id === 37">
+                                    <input id="primaryDisability_{{ response.id }}" type="radio" name="primaryDisability" ng-value="{{ response.id }}" ng-model="vm.activeWorker.primaryDisability">
+                                    <label for="primaryDisability_{{ response.id }}">{{ response.display }}</label>
+                                    <input id="primaryDisabilityOther" name="primaryDisabilityOther" type="text" ng-model="vm.activeWorker[response.otherValueKey]" ng-if="response.otherValueKey">
                                 </li>
                             </ul>
                         </fieldset>
@@ -290,11 +290,25 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr ng-repeat="employee in vm.activeWorksite.employees">
-                            <th scope="row">{{ employee.name }}</th>
-                            <td>{{ employee.primaryDisability }}</td>
+                        <tr class="expanding-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-start="employee in vm.activeWorksite.employees">
+                            <th scope="row"><a href="" ng-click="vm.siteRowClicked($event)"><div class="arrow-expander"></div></a> {{ employee.name }}</th>
+                            <td>{{ vm.getDisabilityDisplay(employee) }}</td>
                             <td>{{ employee.workType }}</td>
-                            <td><button class="green-button" ng-click="vm.editEmployee($index)">Edit</button><button class="usa-button-secondary" ng-click="vm.deleteEmployee($index)">Delete</button></td>
+                            <td class="button-column"><button class="green-button" ng-click="vm.editEmployee($index)">Edit</button><button class="usa-button-secondary" ng-click="vm.deleteEmployee($index)">Delete</button></td>
+                        </tr>
+                        <tr class="expanded-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-end>
+                            <td colspan="4">
+                                <div class="subtable">
+                                    <div>Number of Jobs<div>{{ employee.numJobs}}</div></div>
+                                    <div>Average Hours per Week<div>{{ employee.avgWeeklyHours}}</div></div>
+                                    <div>Average Earnings per Hours<div>${{ employee.avgHourlyEarnings}}</div></div>
+                                    <div>Prevailing Wage Rate<div>${{ employee.prevailingWage}}</div></div>
+                                    <div>Productivity Measure<div>{{ employee.productivityMeasure}}</div></div>
+                                    <div>Commensurate Wage Rate<div>${{ employee.commensurateWageRate}}</div></div>
+                                    <div>Total Hours Worked<div>{{ employee.totalHours}}</div></div>
+                                    <div>Work at Other Site?<div>{{ employee.workAtOtherSite ? "Yes" : "No" }}</div></div>
+                                </div>
+                            </td>
                         </tr>
                     </tbody>
                 </table>

diff --git a/DOL.WHD.Section14c.Web/src/styles/forms.scss b/DOL.WHD.Section14c.Web/src/styles/forms.scss
@@ -2,6 +2,15 @@
 
     .form-page {
         @include span(8);
+    }
+
+    @media only screen and (max-width : 800px) {
+        .form-page {
+            @include span(12);
+        }
+    }
+
+    .form-page, .form-page-full {
 
         .em-block {
             background-color: $form-em-grey;
@@ -259,6 +268,14 @@
                 background-color: transparent;
             }
 
+            thead th {
+                background-color: $button-grey;
+            }
+
+            td.button-column {
+                white-space: nowrap;
+            }
+
             tr {
                 background-color: #fff;
             }
@@ -289,6 +306,27 @@
                     }
                 }
             }
+
+            .subtable {
+                display: table;
+                width: 100%;
+                font-size: 14px;
+
+                & > div {
+                    display: table-cell;
+                    padding: 10px 5px;
+                    font-weight: 700;
+
+                    &:not(:last-of-type) {
+                        border-right: 1px solid $text-color;
+                    }
+
+                    & > div {
+                        margin-top: 4px;
+                        font-weight: 400;
+                    }
+                }
+            }
         }
 
         table .expanding-row th, table .expanding-row td {
@@ -310,6 +348,7 @@
 
             & > div {
                 border-top: 1px solid $text-color;
+                padding: 8px 2px;
             }
         }
     }

diff --git a/DOL.WHD.Section14c.Web/src/styles/main.scss b/DOL.WHD.Section14c.Web/src/styles/main.scss
@@ -19,11 +19,18 @@ $susy: (
     margin-top: 40px;
 }
 
+@media only screen and (max-width : 1120px) {
+    .full-view {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
 @include nested(12) {
 
     .main-content {
         @include span(12);
         margin-top: 40px;
     }
-    
+
 }