Merged in bugfix/SHIBUI-379 (pull request #10)

SHIBUI-379: Fixed accordions to open individually Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Mar 13, 2018 · aeb5a4c · aeb5a4c
1 parent e319026
commit aeb5a4c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 28 deletions.
diff --git a/ui/src/app/metadata-provider/component/forms/advanced-info-form.component.html b/ui/src/app/metadata-provider/component/forms/advanced-info-form.component.html
@@ -133,11 +133,15 @@
             </p>
             <div formArrayName="contacts" class="bg-light border rounded p-4" *ngIf="contacts.length">
                 <ul class="list-group" id="contactAccordionGroup" aria-label="Contact information accordion group" tabindex="0" role="presentation">
-                    <li *ngFor="let contact of contacts.controls; let i=index;" [formGroupName]="i" class="list-group-item" [attr.aria-label]="'Contact information accordion item for ' + contact.get('name').value">
+                    <li *ngFor="let contact of contacts.controls; let i=index;"
+                        [formGroupName]="i"
+                        class="list-group-item"
+                        [attr.aria-label]="'Contact information accordion item for ' + contact.get('name').value"
+                        #acc>
                         <div class="clearfix">
-                            <div class="row" (click)="isHidden = !isHidden" (keydown.space)="isHidden = !isHidden" [id]="'contactAccordion' + i" aria-expanded="true" [attr.aria-controls]="'contactContent' + i" role="button">
+                            <div class="row" (click)="acc.isHidden = !acc.isHidden" (keydown.space)="acc.isHidden = !acc.isHidden" [id]="'contactAccordion' + i" aria-expanded="true" [attr.aria-controls]="'contactContent' + i" role="button">
                                 <div class="col-sm-10">
-                                    <i class="fa" [ngClass]="{'fa-chevron-right': isHidden, 'fa-chevron-down': !isHidden}"></i>
+                                    <i class="fa" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         {{ contact.get('name').value || 'New Contact' }}
                                         <small *ngIf="contact.get('type').value">({{ contact.get('type').value }})</small>
@@ -150,7 +154,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="collapse" [ngClass]="{'show': !isHidden}" [id]="'contactContent' + i" [attr.aria-labelledby]="'contactAccordion' + i" role="region">
+                        <div class="collapse" [ngClass]="{'show': !acc.isHidden}" [id]="'contactContent' + i" [attr.aria-labelledby]="'contactAccordion' + i" role="region">
                             <hr />
                             <div class="row">
                                 <div class="col col-7">

diff --git a/ui/src/app/metadata-provider/component/forms/assertion-form.component.html b/ui/src/app/metadata-provider/component/forms/assertion-form.component.html
@@ -10,11 +10,12 @@
                     <li *ngFor="let endpoint of assertionConsumerServices.controls; let i=index;"
                         [formGroupName]="i"
                         class="list-group-item"
-                        [attr.aria-label]="'Assertion consumer service endpoint accordion item for ' + endpoint.get('locationUrl').value">
+                        [attr.aria-label]="'Assertion consumer service endpoint accordion item for ' + endpoint.get('locationUrl').value"
+                        #acc>
                         <div class="clearfix">
-                            <div class="row" (click)="isHidden = !isHidden" (keydown.space)="isHidden = !isHidden" [id]="'ascAccordion' + i" aria-expanded="true" [attr.aria-controls]="'ascContent' + i" role="button">
+                            <div class="row" (click)="acc.isHidden = !acc.isHidden" (keydown.space)="acc.isHidden = !acc.isHidden" [id]="'ascAccordion' + i" aria-expanded="true" [attr.aria-controls]="'ascContent' + i" role="button">
                                 <div class="col-sm-10">
-                                    <i class="fa" [ngClass]="{'fa-chevron-right': isHidden, 'fa-chevron-down': !isHidden}"></i>
+                                    <i class="fa" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="endpoint.get('locationUrl').value">{{ endpoint.get('locationUrl').value }}</ng-container>
                                         <ng-container *ngIf="!endpoint.get('locationUrl').value" i18n="@@label--new-endpoint">New Endpoint</ng-container>
@@ -30,7 +31,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="collapse" [ngClass]="{'show': !isHidden}" [id]="'ascContent' + i" [attr.aria-labelledby]="'ascAccordion' + i" role="region">
+                        <div class="collapse" [ngClass]="{'show': !acc.isHidden}" [id]="'ascContent' + i" [attr.aria-labelledby]="'ascAccordion' + i" role="region">
                             <hr />
                             <div class="form-group">
                                 <div class="row">

diff --git a/ui/src/app/metadata-provider/component/forms/key-info-form.component.html b/ui/src/app/metadata-provider/component/forms/key-info-form.component.html
@@ -96,11 +96,12 @@
                     <li *ngFor="let cert of x509Certificates.controls; let i=index;"
                         [formGroupName]="i"
                         class="list-group-item"
-                        [attr.aria-label]="'x509 certificate information accordion item for ' + cert.get('name').value">
+                        [attr.aria-label]="'x509 certificate information accordion item for ' + cert.get('name').value"
+                        #acc>
                         <div class="clearfix">
-                            <div class="row" (click)="isHidden = !isHidden" (keydown.space)="isHidden = !isHidden" [id]="'certAccordion' + i" aria-expanded="true" [attr.aria-controls]="'certContent' + i" role="button">
+                            <div class="row" (click)="acc.isHidden = !acc.isHidden" (keydown.space)="acc.isHidden = !acc.isHidden" [id]="'certAccordion' + i" aria-expanded="true" [attr.aria-controls]="'certContent' + i" role="button">
                                 <div class="col-sm-10">
-                                    <i class="fa" [ngClass]="{'fa-chevron-right': isHidden, 'fa-chevron-down': !isHidden}"></i>
+                                    <i class="fa" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="cert.get('name').value">{{ cert.get('name').value }}</ng-container>
                                         <ng-container *ngIf="!cert.get('name').value" i18n="@@label--new-cert">New Certificate</ng-container>
@@ -116,7 +117,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="collapse" [ngClass]="{'show': !isHidden}"  [id]="'certContent' + i" [attr.aria-labelledby]="'certAccordion' + i" role="region">
+                        <div class="collapse" [ngClass]="{'show': !acc.isHidden}"  [id]="'certContent' + i" [attr.aria-labelledby]="'certAccordion' + i" role="region">
                             <hr />
                             <div class="form-group">
                                 <div class="row">

diff --git a/ui/src/app/metadata-provider/component/forms/logout-form.component.html b/ui/src/app/metadata-provider/component/forms/logout-form.component.html
@@ -7,11 +7,15 @@
             </p>
             <div formArrayName="logoutEndpoints" class="bg-light border rounded p-4" *ngIf="logoutEndpoints.length">
                 <ul class="list-group" id="logoutAccordionGroup" aria-label="Logout endpoint accordion group" role="presentation" tabindex="0">
-                    <li *ngFor="let endpoint of logoutEndpoints.controls; let i=index;" [formGroupName]="i" class="list-group-item" [attr.aria-label]="'Logout endpoint information accordion item for ' + endpoint.get('url').value">
+                    <li *ngFor="let endpoint of logoutEndpoints.controls; let i=index;"
+                        [formGroupName]="i"
+                        class="list-group-item"
+                        [attr.aria-label]="'Logout endpoint information accordion item for ' + endpoint.get('url').value"
+                        #acc>
                         <div class="clearfix">
-                            <div class="row" (click)="isHidden = !isHidden" (keydown.space)="isHidden = !isHidden" [id]="'logoutAccordion' + i" aria-expanded="true" [attr.aria-controls]="'logoutContent' + i" role="button">
+                            <div class="row" (click)="acc.isHidden = !acc.isHidden" (keydown.space)="acc.isHidden = !acc.isHidden" [id]="'logoutAccordion' + i" aria-expanded="true" [attr.aria-controls]="'logoutContent' + i" role="button">
                                 <div class="col-sm-10">
-                                    <i class="fa" [ngClass]="{'fa-chevron-right': isHidden, 'fa-chevron-down': !isHidden}"></i>
+                                    <i class="fa" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="endpoint.get('url').value">{{ endpoint.get('url').value }}</ng-container>
                                         <ng-container *ngIf="!endpoint.get('url').value" i18n="@@label--new-endpoint">New Endpoint</ng-container>
@@ -24,7 +28,7 @@
                                 </span>
                             </div>
                         </div>
-                        <div class="collapse" [ngClass]="{'show': !isHidden}" [id]="'logoutContent' + i" [attr.aria-labelledby]="'logoutAccordion' + i" role="region">
+                        <div class="collapse" [ngClass]="{'show': !acc.isHidden}" [id]="'logoutContent' + i" [attr.aria-labelledby]="'logoutAccordion' + i" role="region">
                             <hr />
                             <div class="form-group">
                                 <div class="row">

diff --git a/ui/src/app/metadata-provider/component/forms/organization-info-form.component.html b/ui/src/app/metadata-provider/component/forms/organization-info-form.component.html
@@ -29,10 +29,10 @@
                     </label>
                     <span class="col-sm-2 text-right">
                         <ng-template #tooltipOrganizationDisplayName i18n="@@tooltip--organization-display-name">Organization Display Name Popover</ng-template>
-                    <i class="info-icon fa fa-info-circle text-primary fa-lg"
-                       [ngbPopover]="tooltipOrganizationDisplayName"
-                       i18n-aria-label="@@tooltip--instruction"
-                       aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                        <i class="info-icon fa fa-info-circle text-primary fa-lg"
+                            [ngbPopover]="tooltipOrganizationDisplayName"
+                            i18n-aria-label="@@tooltip--instruction"
+                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
                 <input id="displayName" type="text" class="form-control" placeholder="" formControlName="displayName" role="textbox" />
@@ -48,9 +48,9 @@
                     <span class="col-sm-2 text-right">
                         <ng-template #tooltipOrganizationUrl i18n="@@tooltip--organization-url">Organization Url Popover</ng-template>
                         <i class="info-icon fa fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipOrganizationUrl"
-                           i18n-aria-label="@@tooltip--instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                            [ngbPopover]="tooltipOrganizationUrl"
+                            i18n-aria-label="@@tooltip--instruction"
+                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
                 <input id="url" type="text" class="form-control" placeholder="" formControlName="url" role="textbox" />
@@ -64,12 +64,16 @@
                 <button class="btn btn-success btn-sm" (click)="addContact()" i18n="@@action--add-contact" aria-label="Add contact to accordion group" role="button">Add Contact</button>
             </p>
             <div formArrayName="contacts" class="bg-light border rounded p-4" *ngIf="contacts.length">
-                <ul class="list-group" id="contactAccordionGroup"aria-label="Contact information accordion group" role="presentation" tabindex="0">
-                    <li *ngFor="let contact of contacts.controls; let i=index;" [formGroupName]="i" class="list-group-item" [attr.aria-label]="'Contact information accordion item for ' + contact.get('name').value">
+                <ul class="list-group" id="contactAccordionGroup" aria-label="Contact information accordion group" role="presentation" tabindex="0">
+                    <li *ngFor="let contact of contacts.controls; let i=index;"
+                        [formGroupName]="i"
+                        class="list-group-item"
+                        [attr.aria-label]="'Contact information accordion item for ' + contact.get('name').value"
+                        #acc>
                         <div class="clearfix">
-                            <div class="row" (click)="isHidden = !isHidden" (keydown.space)="isHidden = !isHidden" [id]="'contactAccordion' + i" [attr.aria-controls]="'contactContent' + i" role="button">
+                            <div class="row" (click)="acc.isHidden = !acc.isHidden" (keydown.space)="acc.isHidden = !acc.isHidden" [id]="'contactAccordion' + i" [attr.aria-controls]="'contactContent' + i" role="button">
                                 <div class="col-sm-10">
-                                    <i class="fa" [ngClass]="{'fa-chevron-right': isHidden, 'fa-chevron-down': !isHidden}"></i>
+                                    <i class="fa" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     {{ contact.get('name').value || 'New Contact' }}
                                     <span tabindex="0" role="heading" aria-level="3">
                                     <small *ngIf="contact.get('type').value">({{ contact.get('type').value }})</small>
@@ -82,7 +86,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="collapse" [ngClass]="{'show': !isHidden}" [id]="'contactContent' + i" [attr.aria-labelledby]="'contactAccordion' + i" role="region">
+                        <div class="collapse" [ngClass]="{'show': !acc.isHidden}" [id]="'contactContent' + i" [attr.aria-labelledby]="'contactAccordion' + i" role="region">
                             <hr />
                             <div class="row">
                                 <div class="col col-7">