Merge remote-tracking branch 'origin/master' into client-updates

client/src/helpdesk/helpdesk-detail.component.html

@@ -22,95 +22,8 @@
 
 <div class="ias-header">
     <h2 id="page-content-title" translate="Title_HelpDesk">Help Desk</h2>
-</div>
-
-<person-card person="$ctrl.personCard" show-image="$ctrl.photosEnabled"></person-card>
-
-<div class="help-desk-content">
-    <div>
-        <div class="ias-tabset">
-            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="profileTab">{{'Field_Profile' | translate}}</div>
-            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="statusTab">{{'Title_Status' | translate}}</div>
-            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="historyTab">{{'Title_UserEventHistory' | translate}}</div>
-            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="passwordTab">{{'Title_PasswordPolicy' | translate}}</div>
-            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="securityTab">{{'Title_SecurityResponses' | translate}}</div>
-        </div>
-
-        <ias-tab-pane toggle-group="detailsTabGroup" name="profileTab">
-            <table class="details-table">
-                <tbody>
-                <tr ng-repeat="item in $ctrl.person.profileData">
-                    <td ng-bind="item.label"></td>
-                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                </tr>
-                </tbody>
-            </table>
-        </ias-tab-pane>
-        <ias-tab-pane toggle-group="detailsTabGroup" name="statusTab">
-            <table class="details-table">
-                <tbody>
-                <tr ng-repeat="item in $ctrl.person.statusData">
-                    <td ng-bind="item.label"></td>
-                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                </tr>
-                </tbody>
-            </table>
-        </ias-tab-pane>
-        <ias-tab-pane toggle-group="detailsTabGroup" name="historyTab" ng-if="!!$ctrl.person.userHistory">
-            <table class="details-table">
-                <tbody>
-                <tr ng-repeat="item in $ctrl.person.userHistory">
-                    <td ng-bind="item.timestamp | dateFilter"></td>
-                    <td ng-bind="item.label"></td>
-                </tr>
-                </tbody>
-            </table>
-        </ias-tab-pane>
-        <ias-tab-pane toggle-group="detailsTabGroup" name="passwordTab">
-            <table class="details-table">
-                <tbody>
-                <tr>
-                    <td ng-bind="'Field_Policy' | translate"></td>
-                    <td ng-bind="$ctrl.person.passwordPolicyDN"></td>
-                </tr>
-                <tr>
-                    <td ng-bind="'Field_Profile' | translate"></td>
-                    <td ng-bind="$ctrl.person.passwordPolicyID"></td>
-                </tr>
-                <tr class="bottom-border">
-                    <td ng-bind="'Field_Display' | translate"></td>
-                    <td>
-                        <ul>
-                            <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind="item"></li>
-                        </ul>
-                    </td>
-                </tr>
-                <tr ng-repeat="(key, item) in $ctrl.person.passwordPolicyRules">
-                    <td ng-bind="key"></td>
-                    <td ng-bind="item"></td>
-                </tr>
-                </tbody>
-            </table>
-        </ias-tab-pane>
-        <ias-tab-pane toggle-group="detailsTabGroup" name="securityTab">
-            <table class="details-table">
-                <tbody>
-                <tr ng-repeat="item in $ctrl.person.helpdeskResponses">
-                    <td ng-bind="item.label"></td>
-                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                </tr>
-                </tbody>
-            </table>
-        </ias-tab-pane>
-    </div>
-
-    <div class="help-desk-buttons">
+    <span class="ias-fill"></span>
+    <div class="help-desk-icons">
         <ias-button id="helpdesk-refresh-icon" class="ias-icon-button"
                     ng-click="$ctrl.refresh()" ng-attr-title="{{ 'Display_CaptchaRefresh' | translate }}">
             <ias-icon class="ias-selected" icon="reload_refresh_thin"></ias-icon>
@@ -119,27 +32,152 @@
                     ng-click="$ctrl.gotoSearch()" ng-attr-title="{{ 'Button_GoBack' | translate }}">
             <ias-icon class="ias-selected" icon="close_thin"></ias-icon>
         </ias-button>
+    </div>
+</div>
+
+<div class="secondary-header">
+    <div class="help-desk-person-card">
+        <person-card person="$ctrl.personCard" show-image="$ctrl.photosEnabled"></person-card>
+    </div>
+</div>
 
+<div class="help-desk-content">
+    <div class="help-desk-buttons">
         <ias-button ng-click="$ctrl.changePassword()"
-                   ng-disabled="$ctrl.buttonDisabled('changePassword')"
-                   ng-if="$ctrl.buttonVisible('changePassword')">{{ 'Button_ChangePassword' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('changePassword')"
+                    ng-if="$ctrl.buttonVisible('changePassword')">{{ 'Button_ChangePassword' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.unlockUser()"
-                   ng-disabled="$ctrl.buttonDisabled('unlock')"
-                   ng-if="$ctrl.buttonVisible('unlock')">{{ 'Button_Unlock' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('unlock')"
+                    ng-if="$ctrl.buttonVisible('unlock')">{{ 'Button_Unlock' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.clearResponses()"
-                   ng-disabled="$ctrl.buttonDisabled('clearResponses')"
-                   ng-if="$ctrl.buttonVisible('clearResponses')">{{ 'Button_ClearResponses' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('clearResponses')"
+                    ng-if="$ctrl.buttonVisible('clearResponses')">{{ 'Button_ClearResponses' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.clearOtpSecret()"
-                   ng-disabled="$ctrl.buttonDisabled('clearOtpSecret')"
-                   ng-if="$ctrl.buttonVisible('clearOtpSecret')">{{ 'Button_HelpdeskClearOtpSecret' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('clearOtpSecret')"
+                    ng-if="$ctrl.buttonVisible('clearOtpSecret')">{{ 'Button_HelpdeskClearOtpSecret' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.verifyUser()"
-                   ng-disabled="$ctrl.buttonDisabled('verification')"
-                   ng-if="$ctrl.buttonVisible('verification')">{{ 'Button_Verify' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('verification')"
+                    ng-if="$ctrl.buttonVisible('verification')">{{ 'Button_Verify' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.deleteUser()"
-                   ng-disabled="$ctrl.buttonDisabled('deleteUser')"
-                   ng-if="$ctrl.buttonVisible('deleteUser')">{{ 'Button_Delete' | translate }}</ias-button>
+                    ng-disabled="$ctrl.buttonDisabled('deleteUser')"
+                    ng-if="$ctrl.buttonVisible('deleteUser')">{{ 'Button_Delete' | translate }}
+        </ias-button>
         <ias-button ng-click="$ctrl.clickCustomButton(button)"
-                   ng-repeat="button in $ctrl.person.customButtons"
-                   ng-attr-title="{{button.description}}">{{ button.label }}</ias-button>
+                    ng-repeat="button in $ctrl.person.customButtons"
+                    ng-attr-title="{{button.description}}">{{ button.label }}
+        </ias-button>
+    </div>
+
+    <div class="tabset-container">
+        <div class="ias-tabset">
+            <div class="ias-tab"
+                 ias-toggle-active="ias-active"
+                 ias-toggle="profileTab">
+                {{'Field_Profile' | translate}}
+            </div>
+            <div class="ias-tab"
+                 ias-toggle-active="ias-active"
+                 ias-toggle="statusTab"
+                 ng-if="$ctrl.person.statusData && $ctrl.person.statusData.length">
+                {{'Title_Status' | translate}}
+            </div>
+            <div class="ias-tab"
+                 ias-toggle-active="ias-active"
+                 ias-toggle="historyTab"
+                 ng-if="$ctrl.person.userHistory && $ctrl.person.userHistory.length">
+                {{'Title_UserEventHistory' | translate}}
+            </div>
+            <div class="ias-tab"
+                 ias-toggle-active="ias-active"
+                 ias-toggle="passwordTab">
+                {{'Title_PasswordPolicy' | translate}}
+            </div>
+            <div class="ias-tab"
+                 ias-toggle-active="ias-active"
+                 ias-toggle="securityTab"
+                 ng-if="$ctrl.person.helpdeskResponses && $ctrl.person.helpdeskResponses.length">
+                {{'Title_SecurityResponses' | translate}}
+            </div>
+        </div>
+
+        <div class="tab-panes">
+            <ias-tab-pane toggle-group="detailsTabGroup" name="profileTab">
+                <table class="details-table">
+                    <tbody>
+                    <tr ng-repeat="item in $ctrl.person.profileData">
+                        <td ng-bind="item.label"></td>
+                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </ias-tab-pane>
+            <ias-tab-pane toggle-group="detailsTabGroup" name="statusTab">
+                <table class="details-table">
+                    <tbody>
+                    <tr ng-repeat="item in $ctrl.person.statusData">
+                        <td ng-bind="item.label"></td>
+                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </ias-tab-pane>
+            <ias-tab-pane toggle-group="detailsTabGroup" name="historyTab" ng-if="!!$ctrl.person.userHistory">
+                <table class="details-table">
+                    <tbody>
+                    <tr ng-repeat="item in $ctrl.person.userHistory">
+                        <td ng-bind="item.timestamp | dateFilter"></td>
+                        <td ng-bind="item.label"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </ias-tab-pane>
+            <ias-tab-pane toggle-group="detailsTabGroup" name="passwordTab">
+                <table class="details-table">
+                    <tbody>
+                    <tr>
+                        <td ng-bind="'Field_Policy' | translate"></td>
+                        <td ng-bind="$ctrl.person.passwordPolicyDN"></td>
+                    </tr>
+                    <tr>
+                        <td ng-bind="'Field_Profile' | translate"></td>
+                        <td ng-bind="$ctrl.person.passwordPolicyID"></td>
+                    </tr>
+                    <tr class="bottom-border" ng-if="!!$ctrl.person.passwordRequirements">
+                        <td ng-bind="'Field_Display' | translate"></td>
+                        <td>
+                            <ul>
+                                <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind="item"></li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr ng-repeat="(key, item) in $ctrl.person.passwordPolicyRules">
+                        <td ng-bind="key"></td>
+                        <td ng-bind="item"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </ias-tab-pane>
+            <ias-tab-pane toggle-group="detailsTabGroup" name="securityTab">
+                <table class="details-table">
+                    <tbody>
+                    <tr ng-repeat="item in $ctrl.person.helpdeskResponses">
+                        <td ng-bind="item.label"></td>
+                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </ias-tab-pane>
+        </div>
     </div>
 </div>

client/src/helpdesk/helpdesk-detail.component.scss

@@ -21,39 +21,59 @@
  */
 
 help-desk-detail {
+  display: block;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+
   #page-content-title {
     margin-bottom: 0;
   }
 
-  .ias-tile {
-    margin: 20px 0 15px;
+  .ias-header {
+    > .help-desk-icons {
+      margin-left: 15px;
+    }
   }
 
-  > .help-desk-content {
+  > .secondary-header {
     display: flex;
-    flex-flow: row wrap;
-
-    > .help-desk-buttons {
-      margin-left: 15px;
+    justify-content: space-between;
+  }
 
-      > #helpdesk-go-back-icon {
-        position: absolute;
-        top: 50px;
-        margin-left: 115px;
-        width: 28px;
-      }
+  > .help-desk-content {
+    display: flex;
+    flex-flow: row-reverse wrap;
+    justify-content: flex-end;
 
-      > #helpdesk-refresh-icon {
-        position: absolute;
-        top: 50px;
-        margin-left: 80px;
-        width: 28px;
-      }
+    > .help-desk-buttons,
+    > .tabset-container {
+      margin-top: 15px;
+    }
 
+    > .help-desk-buttons {
       > .ias-button {
         display: block;
         margin-bottom: 5px;
         width: 100%;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    > .tabset-container {
+      width: 100%;
+
+      > .tab-panes {
+        > .ias-tab-pane {
+          table {
+            width: 100%;
+            display: block;
+            overflow: auto;
+          }
+        }
       }
     }
   }
@@ -97,3 +117,76 @@ help-desk-detail {
     }
   }
 }
+
+@media (min-width: 850px) {
+  help-desk-detail {
+    > .help-desk-content {
+      > .help-desk-buttons {
+        margin-left: 15px;
+      }
+
+      > .tabset-container {
+        max-width: 100%;
+        width: auto;
+
+        > .tab-panes {
+          > .ias-tab-pane {
+            table {
+              max-width: 800px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 1050px) {
+  help-desk-detail {
+    display: flex;
+    flex-flow: column nowrap;
+
+    > .ias-header,
+    > .secondary-header {
+      flex-shrink: 0;
+    }
+
+    > .help-desk-content {
+      flex-wrap: nowrap;
+      height: 100%;
+      margin-top: 15px;
+
+      > .help-desk-buttons,
+      > .tabset-container {
+        margin-top: 0;
+      }
+
+      > .help-desk-buttons {
+        flex-shrink: 0;
+        height: 100%;
+        overflow: auto;
+      }
+
+      > .tabset-container {
+        display: flex;
+        flex-flow: column nowrap;
+        height: 100%;
+        overflow: auto;
+
+        > .ias-tabset {
+          flex-shrink: 0;
+        }
+
+        .tab-panes {
+          overflow: auto;
+
+          > .ias-tab-pane {
+            table {
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}

client/src/services/helpdesk.service.dev.ts

@@ -374,8 +374,20 @@ export default class HelpDeskService implements IHelpDeskService {
                 {
                     'key': 'item_1',
                     'type': 'string',
-                    'label': 'How many years old are you?',
-                    'value': '25RRR'
+                    'label': 'In what year were you born?',
+                    'value': '1987'
+                },
+                {
+                    'key': 'item_2',
+                    'type': 'string',
+                    'label': 'What is your favorite type of weather?',
+                    'value': 'Clear sky with funny-shaped clouds'
+                },
+                {
+                    'key': 'item_3',
+                    'type': 'string',
+                    'label': 'What is your favorite song?',
+                    'value': 'Rudolph the Red-Nosed Reindeer'
                 }
             ],
             'visibleButtons': [