diff options
author | 2020-07-02 12:56:08 +0530 | |
---|---|---|
committer | 2020-07-17 16:48:53 -0400 | |
commit | a36db1a18f3d5117517313ba035e2384e00cc0a7 (patch) | |
tree | b3424bdf4d6c6479ef30251a281eb1339f4d9af9 /portal-FE-os | |
parent | d856cbc5d725836a07776b0f20f06bbbda7b5412 (diff) |
Portal Non-Gui application onboarding changes
Change-Id: Ib878398995e1d7a407d44ea6113c05aab2dd1625
Issue-ID: PORTAL-935
Signed-off-by: Muni Mohan Kunchi <munmohan@att.com>
Diffstat (limited to 'portal-FE-os')
11 files changed, 567 insertions, 315 deletions
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html index bef37b84..6d0c5446 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html @@ -36,240 +36,305 @@ --> <div class="container"> - <!--Modal Headers--> + <!--Modal Headers--> <div class="modal-header"> <h4 class="modal-title">Application Details</h4> <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> <span aria-hidden="true">×</span> </button> </div> - <!--Modal Body goes here--> + <!--Modal Body goes here--> <div class="modal-body"> <div class="application-details-modal"> - <div class="app-properties-main" scroll-top="appDetails.scrollApi"> - <form name="appForm" novalidate autocomplete="off"> - <div id="app-left-container" class="left-container"> - <div class="property-label checkbox-label"> + <div class="app-properties-main" scroll-top="appDetails.scrollApi"> + <form name="appForm" novalidate autocomplete="off"> + <div id="app-left-container" class="left-container"> + <!-- <div class="property-label checkbox-label"> <mat-checkbox name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp" id="checkbox-app-is-restricted" [disabled]="isEditMode" [checked]="applicationObj.restrictedApp"> Hyperlink only application </mat-checkbox> - </div> - - <div class="property required"> - <div class="property-label">Application Name</div> - <input id="input-app-name" type="text" - [(ngModel)]="applicationObj.name" maxlength="100" name="name" - pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" /> - - <div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name" - id="conflictMessages-name"> - <small id="app-name-error-conflict" class="err-message" - ng-bind="appDetails.conflictMessages.name"> - </small> - </div> - - <div id="error-container-edit" class="error-container" - *ngIf="(!applicationObj.name || applicationObj.name.length == 0)"> - <small id="app-name-error-required" class="err-message"> - Application name is required - </small> - </div> - </div> - - <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"> - <div id="url-property-label" class="property-label">URL</div> - <input id="input-app-url" [(ngModel)]="applicationObj.url" - maxlength="256" name="url" type="url" placeholder="https://" - pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" required /> + </div> --> + + <div class="property required"> + <div class="property-label" style="display: flex;"> + <span style="flex: 9">Application Name</span> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Application Name Information'"> + </app-information-tooltip> + </div> + <input #applicationName id="input-app-name" type="text" [(ngModel)]="applicationObj.appName" + maxlength="100" name="name" pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" /> - <div id="error-container-edit" class="error-container" - *ngIf="(applicationObj.isEnabled && applicationObj.url=='')"> - <small id="app-name-error-required" class="err-message"> - Application URL is required - </small> + <div id="error-container-conflict" class="error-container" + ng-show="appDetails.conflictMessages.name" id="conflictMessages-name"> + <small id="app-name-error-conflict" class="err-message" + ng-bind="appDetails.conflictMessages.name"> + </small> + </div> </div> - </div> - - <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'" - [hidden] ="applicationObj.restrictedApp"> - <div class="property-label">Rest API URL</div> - <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl" - name="restUrl" type="url" placeholder="https://" - pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" maxlength="256" - ng-required="!applicationObj.restrictedApp" /> - - <div id="error-container-edit" class="error-container" - *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')"> - <small id="app-name-error-required" class="err-message"> - Rest API URL is required - </small> + + <div id="property-active" class="property-active" style="display: flex; + justify-content: flex-end;margin-right: 16px;"> + <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled" + [checked]="applicationObj.isEnabled" id="checkbox-app-is-enabled">Active + </mat-checkbox> </div> - </div> - - <div [ngClass]="(applicationObj.isEnabled || applicationObj.isCentralAuth) ? 'property required' : 'property'" - [hidden] ="applicationObj.restrictedApp"> - <div id="username-property-label" class="property-label">Username</div> - <input type="text" id="input-username-property" [(ngModel)]="applicationObj.username" name="username" - maxlength="256" ng-required="!appDetails.app.restrictedApp" /> - - <div id="error-container-edit" class="error-container" - *ngIf="((applicationObj.isEnabled || applicationObj.isCentralAuth) && applicationObj.username =='')"> - <small id="app-name-error-required" class="err-message"> - App Username is required - </small> + + <div class="property"> + <div class="property-label" style="display: flex;"> + <mat-label style="flex: 9">Application Type</mat-label> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Application Type Information - Gui, Hyperlink or Non-gui'"> + </app-information-tooltip> + </div> + <mat-select [disabled]="action === 'edit'" [(value)]="applicationObj.applicationType"> + <mat-option *ngFor="let appType of applicationTypeArray" [value]="appType.value"> + {{appType.name}} + </mat-option> + </mat-select> </div> - </div> - - <div [ngClass]="(applicationObj.isEnabled && !applicationObj.isCentralAuth) ? 'property required' : 'property'" - [hidden] ="applicationObj.restrictedApp"> - <div id="pwd-property-label" class="property-label">Password</div> - <input type="password" id="input-mylogins-password" - [(ngModel)]="applicationObj.appPassword" autocomplete="new-password" - name="appPassword" maxlength="256"/> - <div id="error-container-edit" class="error-container" - *ngIf="(applicationObj.isEnabled && !applicationObj.isCentralAuth && applicationObj.appPassword =='')"> - <small id="app-name-error-required" class="err-message"> - Password is required - </small> + <div class="property" *ngIf="applicationObj.applicationType == '1'"> + <div class="property-label" style="display: flex;"> + <mat-label style="flex: 9">Mode of Integration</mat-label> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Mode Of Integration. SDK or Framework'"> + </app-information-tooltip> + </div> + <mat-select [(value)]="applicationObj.modeOfIntegration"> + <mat-option *ngFor="let integrationType of modeOfIntegration" + [value]="integrationType.value"> + {{integrationType.name}} + </mat-option> + </mat-select> </div> - </div> - </div> - - <!-- Right container--> - <div class="right-container"> - <div class="property"> - <div class="property-label">Upload Image</div> - <input type="file" id="input-app-image-upload" - class="input-file-field input-app-image-upload-ht" - accept="image/*" [(ngModel)]="applicationObj.originalImage" - name="appImage" image-upload="applicationObj.originalImage" - image-upload-resize-max-height="300" - image-upload-resize-max-width="360" - image-upload-resize-quality="0.7" - image-upload-api="appDetails.imageApi" - (change)="appImageHandler($event)" /> - - <div id="app-error-image-upload-type" class="error-container" - *ngIf="appImageTypeError" class="ng-hide"> - <div class="error-container"> - <small id="error-app-invalid-image-size" class="err-message">File must be an image</small> + + <div class="property" *ngIf="!(applicationObj.applicationType == '2')"> + <div class="property-label" style="display: flex;"> + <mat-label style="flex: 9">Roles Management Type</mat-label> + <app-information-tooltip style="flex: 1;" [textMessage]="'Roles Management Type'"> + </app-information-tooltip> + </div> + <mat-select [(value)]="applicationObj.rolesInAAF"> + <mat-option *ngFor="let roleRepo of rolesManagementType" [value]="roleRepo.value"> + {{roleRepo.name}} + </mat-option> + </mat-select> </div> - </div> - - <div id="app-error-image-upload" class="error-container" - *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)"> - <div ng-messages="appForm.appImage.$error" - class="error-container"> - <small id="error-app-invalid-image-size" class="err-message" - ng-message="imageSize">Image file must be smaller than - 1MB</small> + + <div *ngIf="!((applicationObj.applicationType=='2') || (!applicationObj.rolesInAAF))" + class="property-active" style="display: flex;"> + <mat-checkbox style="flex: 9" name="appAck" [(ngModel)]="applicationObj.appAck"> + Notify App For AAF Operations + </mat-checkbox> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Notify application for AAF operations'"> + </app-information-tooltip> </div> - </div> - - <div class="property-label preview"> - <span class="left-label">Preview</span> - <span class="remove" (click)="removeImage()">Remove</span> - </div> - <img id="image-app-preview" class="image-preview" - src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" /> - - <br/> - <div id="property-active" class="property-active"> - <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled" - [checked]="applicationObj.isEnabled" - id="checkbox-app-is-enabled">Active - </mat-checkbox> - </div> - - <div id="property-guest-access" class="property-guest-access"> - <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" id="checkbox-app-is-open" - [checked]="(applicationObj.isOpen || applicationObj.restrictedApp)" - [disabled]="applicationObj.restrictedApp">Allow guest access</mat-checkbox> - </div> - - <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp"> - <div id="property-is-central-auth" class="property" [hidden] ="applicationObj.restrictedApp"> - <mat-checkbox name="isCentralAuth" [(ngModel)]="applicationObj.isCentralAuth" - id="checkbox-app-is-central-auth" [checked]="applicationObj.isCentralAuth"> - Centralized + + <div class="property-active" *ngIf="!(applicationObj.applicationType == '2' + ||(!applicationObj.rolesInAAF))"> + <mat-checkbox name="usesCadi" [(ngModel)]="applicationObj.usesCadi" + [checked]="applicationObj.usesCadi">Is CADI Enabled? </mat-checkbox> </div> - - <div class="centralized-key" aria-haspopup="true" style="padding-left: 150px;"> - <div b2b-flyout-toggler class="notification-div" > - <div id="tooltip" class="icon-primary-flat-info" tabindex="0" - b2b-accessibility-click="13,32" aria-label="notifications" - aria-haspopup="true" - role="button"></div> + + <div class="table-control" style="display: inline-flex;" + *ngIf="!(applicationObj.applicationType == '2' || !applicationObj.rolesInAAF)"> + + <div [ngClass]="(applicationObj.rolesInAAF) ? 'property required' : 'property'" + style="width: 250px;"> + <div id="pwd-property-label" class="property-label">AAF Namespace</div> + <input type="text" id="input-mylogins-auth-namespace" + [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace" maxlength="256" + [disabled]="!applicationObj.rolesInAAF" /> </div> - - <!--<div id="notification" align="left"> - <p class="uuid-text" - style="font: normal 12px Omnes-ECOMP-W02, Arial;"> - To convert the non-centralized app to centralized app please - follow below steps. <a href="https://wiki.web.att.com/display/ECops/BulkUpload" target="_blank"> - https://wiki.web.att.com/display/ECops/BulkUpload</a> - </p> + <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;"> + + <div b2b-flyout-toggler class="notification-div"> + <div id="tooltip" class="icon-primary-flat-info" tabindex="0" + b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" + role="button"></div> + </div> + <!--<div id="notification" align="left"> + <p class="nameSpace-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p> </div>--> + </div> + </div> + + <div *ngIf="!(applicationObj.applicationType == '3')" + [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"> + <div class="property-label" style="display: flex;"> + <span style="flex: 9">Landing Page</span> + <app-information-tooltip style="flex: 1;" [textMessage]="'Application URL Information'"> + </app-information-tooltip> + </div> + <input id="input-app-url" [(ngModel)]="applicationObj.landingPage" maxlength="256" + name="url" type="url" placeholder="https://" + pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" + required /> + + <div id="error-container-edit" class="error-container" + *ngIf="(applicationObj.isEnabled && applicationObj.landingPage=='')"> + <small id="app-name-error-required" class="err-message"> + Landing Page URL is required + </small> + </div> + </div> + + <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'" + *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')"> + <div class="property-label" style="display: flex;"> + <span style="flex: 9">Rest API URL</span> + <app-information-tooltip style="flex: 1;" [textMessage]="'Rest Api URL Information'"> + </app-information-tooltip> + </div> + <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl" name="restUrl" + type="url" placeholder="https://" + pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" + maxlength="256" ng-required="applicationObj.applicationType == '1'" /> + + <div id="error-container-edit" class="error-container" + *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')"> + <small id="app-name-error-required" class="err-message"> + Rest API URL is required + </small> + </div> + </div> + + <div [ngClass]="(applicationObj.isEnabled || applicationObj.rolesInAAF) ? 'property required' : 'property'" + *ngIf="!(applicationObj.applicationType == '2')"> + <div id="username-property-label" class="property-label" style="display: flex;"> + <span style="flex: 9">Auth Configured User</span> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Basic Authentication Username Information'"> + </app-information-tooltip> + </div> + <input type="text" id="input-username-property" + [(ngModel)]="applicationObj.appBasicAuthUsername" name="username" maxlength="256" + ng-required="!appDetails.app.restrictedApp" /> + + <div id="error-container-edit" class="error-container" + *ngIf="((applicationObj.isEnabled || applicationObj.rolesInAAF) && applicationObj.appBasicAuthUsername =='')"> + <small id="app-name-error-required" class="err-message"> + App Username is required + </small> + </div> + </div> + + <div [ngClass]="(applicationObj.isEnabled && !applicationObj.rolesInAAF) ? 'property required' : 'property'" + *ngIf="!(applicationObj.applicationType == '2' || (applicationObj.rolesInAAF && applicationObj.usesCadi))"> + <div id="pwd-property-label" class="property-label" style="display: flex;"> + <span style="flex: 9">Basic Auth Password</span> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Basic Authentication Password Information'"> + </app-information-tooltip> + </div> + <input type="password" id="input-mylogins-password" + [(ngModel)]="applicationObj.appBasicAuthPassword" autocomplete="new-password" + name="appPassword" maxlength="256" /> + + <div id="error-container-edit" class="error-container" + *ngIf="(applicationObj.isEnabled && !applicationObj.rolesInAAF && applicationObj.appBasicAuthPassword =='')"> + <small id="app-name-error-required" class="err-message"> + Password is required + </small> + </div> </div> </div> - - <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp"> - <div id="property-communication-key" class="property" - [hidden] ="applicationObj.restrictedApp" style="width: 250px;"> - <div id="property-communication-key-label" class="property-label">Application UUID</div> - <input type="text" id="input-UEB-communication-key" - [(ngModel)]="applicationObj.uebKey" name="uebKey" - readonly="readonly" [disabled]="true"/> + + <!-- Right container--> + <div class="right-container"> + + <div class="property" *ngIf="!(applicationObj.applicationType == '3')"> + <div class="property-label" style="display: flex;"> + <span style="flex: 9">Upload + Image</span> + <app-information-tooltip style="flex: 1;" + [textMessage]="'Image file must be smaller than 1MB'"> + </app-information-tooltip> + </div> + <input type="file" id="input-app-image-upload" + class="input-file-field input-app-image-upload-ht" accept="image/*" + [(ngModel)]="applicationObj.originalImage" name="appImage" + image-upload="applicationObj.originalImage" image-upload-resize-max-height="300" + image-upload-resize-max-width="360" image-upload-resize-quality="0.7" + image-upload-api="appDetails.imageApi" (change)="appImageHandler($event)" /> + + <div id="app-error-image-upload-type" class="error-container" *ngIf="appImageTypeError" + class="ng-hide"> + <div class="error-container"> + <small id="error-app-invalid-image-size" class="err-message">File must be an + image</small> + </div> + </div> + + <div id="app-error-image-upload" class="error-container" + *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)"> + <div ng-messages="appForm.appImage.$error" class="error-container"> + <small id="error-app-invalid-image-size" class="err-message" + ng-message="imageSize">Image file must be smaller than + 1MB</small> + </div> + </div> + </div> + + + <div class="property" *ngIf="!(applicationObj.applicationType == '3')"> + <div class="property-label preview"> + <span class="left-label">Preview</span> + <span class="remove" (click)="removeImage()">Remove</span> + </div> + <img id="image-app-preview" class="image-preview" + src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" /> + </div> + + <div class="property" *ngIf="!(applicationObj.applicationType == '3')"> + <div id="property-guest-access" class="property-guest-access"> + <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" + id="checkbox-app-is-open" + [checked]="(applicationObj.isOpen || applicationObj.applicationType == '2')" + [disabled]="applicationObj.applicationType == '2'">Allow guest access + </mat-checkbox> + </div> </div> - <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;"> - <div b2b-flyout-toggler class="notification-div"> - <div id="tooltip" class="icon-primary-flat-info" tabindex="0" - b2b-accessibility-click="13,32" aria-label="notifications" - aria-haspopup="true" - role="button"></div> + <div class="table-control" style="display: inline-flex;" + *ngIf="!(applicationObj.applicationType == '2')"> + <div id="property-communication-key" class="property" + *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')" + style="width: 250px;"> + <div id="property-communication-key-label" class="property-label">Application + UUID</div> + <input type="text" id="input-UEB-communication-key" [(ngModel)]="applicationObj.uebKey" + name="uebKey" readonly="readonly" [disabled]="true" /> + </div> + + <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;"> + <div b2b-flyout-toggler class="notification-div"> + <div id="tooltip" class="icon-primary-flat-info" tabindex="0" + b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" + role="button"></div> + </div> + <!--<div id="notification" align="left"> + <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication + key between application and portal.Please place this value in + portal.properties</p> + </div>--> + </div> </div> - <!--<div id="notification" align="left"> - <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication - key between application and portal.Please place this value in - portal.properties</p> - </div>--> - </div> - </div> - - <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp"> - - <div [ngClass]="(applicationObj.isCentralAuth) ? 'property required' : 'property'" - [hidden] ="applicationObj.restrictedApp" style="width: 250px;"> - <div id="pwd-property-label" class="property-label" >Name Space</div> - <input type="text" id="input-mylogins-auth-namespace" - [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace" - maxlength="256" [disabled]="!applicationObj.isCentralAuth" /> </div> - <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;"> - - <div b2b-flyout-toggler class="notification-div"> - <div id="tooltip" class="icon-primary-flat-info" tabindex="0" - b2b-accessibility-click="13,32" aria-label="notifications" - aria-haspopup="true" - role="button"></div> - </div> - <!--<div id="notification" align="left"> - <p class="nameSpace-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p> - </div>--> - </div> - </div> - </div> - </div> - </form> + </form> </div> </div> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name || applicationObj.name.length == 0)" (click)="saveChanges()">Save</button> - <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button> + + <div class="modal-footer"> + <button type="button" class="btn btn-primary" + [disabled]="(!applicationObj.appName || applicationObj.appName.length == 0)" + (click)="saveChanges()">Save</button> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button> + </div> + </div> </div>
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss index 0e042a96..1106eb5a 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss @@ -35,6 +35,10 @@ * * */ + + .application-details-modal{ + min-height: 37vw; + } .application-details-modal .app-properties-mainapp-properties-main{ padding-left: 40px; @@ -58,7 +62,7 @@ .application-details-modal .app-properties-main .property{ position: relative; - margin-bottom: 18px; + margin-bottom: 16px; } .application-details-modal .app-properties-main .checkbox-label{ display: inline-block; @@ -73,7 +77,7 @@ } .application-details-modal .app-properties-main .preview{ width: 220px; - margin-top: 22px; + margin-top: 11px; display: block; } @@ -90,6 +94,17 @@ .application-details-modal .app-properties-main .input-field{ width: 220px; } + +mat-select { + width: 16em; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + border-width: 2px; + border-style: ridge; + border-color: initial; +} .application-details-modal .app-properties-main .input-file-field{ width: 220px; @@ -129,6 +144,10 @@ width: 16em; } +.application-details-modal select { + width: 16em; +} + .application-details-modal input[type="url"] { width: 16em; } @@ -160,4 +179,19 @@ cursor: pointer; color: #007bff; } -
\ No newline at end of file +.application-deatils-radio-group{ + display: flex; + flex-direction: column; +} + +mat-radio-group{ + margin-left: 10%; +} + +.modal-footer{ + width: 100%; +} + +mat-form-field{ + width: 94%; +}
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts index 629e5fa6..d1f352cb 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts @@ -48,6 +48,9 @@ import { InformationModalComponent } from 'src/app/modals/information-modal/info import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing'; import { NgbModalBackdrop } from '@ng-bootstrap/ng-bootstrap/modal/modal-backdrop'; import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; +import { InformationTooltipComponent } from '../../information-tooltip/information-tooltip.component'; +import { MatTooltipModule } from '@angular/material'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; describe('ApplicationDetailsDialogComponent', () => { @@ -57,9 +60,10 @@ describe('ApplicationDetailsDialogComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ApplicationDetailsDialogComponent,InformationModalComponent,ConfirmationModalComponent], - imports: [NgMaterialModule,FormsModule,HttpClientTestingModule,NgbModule.forRoot()], - providers: [NgbActiveModal] + declarations: [ ApplicationDetailsDialogComponent,InformationModalComponent,ConfirmationModalComponent, InformationTooltipComponent], + imports: [NgMaterialModule,FormsModule,HttpClientTestingModule,NgbModule.forRoot(), MatTooltipModule], + providers: [NgbActiveModal], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [InformationModalComponent,ConfirmationModalComponent] } }) .compileComponents(); })); @@ -80,20 +84,20 @@ describe('ApplicationDetailsDialogComponent', () => { expect(component.removeImage).toHaveBeenCalledWith(); }); it('saveChanges should return stubbed value', () => { - component.applicationObj.isCentralAuth = true; + component.applicationObj.rolesInAAF = true; component.applicationObj.isEnabled = false; spyOn(component, 'saveChanges').and.callThrough(); component.saveChanges(); expect(component.saveChanges).toHaveBeenCalledWith(); component.applicationObj.isEnabled = true; - component.applicationObj.url = 'www.test.com' + component.applicationObj.landingPage = 'www.test.com' component.applicationObj.restrictedApp =true; //spyOn(component, 'saveChanges').and.callThrough(); component.saveChanges(); expect(component.saveChanges).toHaveBeenCalledWith(); - component.applicationObj.isCentralAuth = false; - component.applicationObj.url = 'test' + component.applicationObj.rolesInAAF = false; + component.applicationObj.landingPage = 'test' component.applicationObj.restrictedApp =false; component.applicationObj.isOpen = true; component.isEditMode =true; @@ -102,7 +106,7 @@ describe('ApplicationDetailsDialogComponent', () => { expect(component.saveChanges).toHaveBeenCalledWith(); }); it('saveChanges Central Auth is disabled', () => { - component.applicationObj.isCentralAuth = false; + component.applicationObj.rolesInAAF = false; component.applicationObj.isEnabled = false; spyOn(component, 'saveChanges').and.callThrough(); component.saveChanges(); @@ -115,11 +119,11 @@ describe('ApplicationDetailsDialogComponent', () => { }); it('saveChanges URL validation changes', () => { - component.applicationObj.isCentralAuth = true; + component.applicationObj.rolesInAAF = true; component.applicationObj.isEnabled = true; - component.applicationObj.name ='test'; - component.applicationObj.url = 'https://www.test.com' - component.applicationObj.username ='test' + component.applicationObj.appName ='test'; + component.applicationObj.landingPage = 'https://www.test.com' + component.applicationObj.appBasicAuthUsername ='test' component.applicationObj.nameSpace ='ONAP' spyOn(component, 'saveChanges').and.callThrough(); component.saveChanges(); diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts index 7aad140a..1b15f801 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts @@ -36,7 +36,7 @@ * */ -import { Component, OnInit, Input, Output, EventEmitter, PLATFORM_ID, Inject, Injector} from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, Inject, PLATFORM_ID, Injector } from '@angular/core'; import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { IApplications } from 'src/app/shared/model/applications-onboarding/applications'; import { ApplicationsService } from 'src/app/shared/services'; @@ -51,6 +51,7 @@ import { isPlatformBrowser } from '@angular/common'; }) export class ApplicationDetailsDialogComponent implements OnInit { + addEditAction: any; emptyImg = null; emptyImgForPreview:string; conflictMessages = {}; @@ -71,34 +72,75 @@ export class ApplicationDetailsDialogComponent implements OnInit { } @Input() applicationObj: IApplications; + @Input() action: any; @Output() passEntry: EventEmitter<any> = new EventEmitter(); + @ViewChild('applicationName') applicationNameElement: ElementRef; newAppModel = { 'id': null, - 'name': null, + 'appName': null, 'imageUrl': null, - 'description': null, - 'notes': null, - 'url': null, + 'appDescription': null, + 'appNotes': null, + 'landingPage': null, 'alternateUrl': null, 'restUrl': null, 'isOpen': false, - 'username': null, - 'appPassword': null, + 'appBasicAuthUsername': null, + 'appBasicAuthPassword': null, 'thumbnail': this.emptyImg, 'isEnabled': false, - 'restrictedApp': false, - 'nameSpace':null, - 'isCentralAuth': false, - 'uebTopicName':null, + 'applicationType': null, + 'rolesInAAF': false, + 'nameSpace': null, + 'uebTopicName': null, 'uebKey': null, 'uebSecret': null, - 'imageLink': null + 'imageLink': null, + 'usesCadi': true, + 'modeOfIntegration': null, + 'appAck': false, + 'restrictedApp': false }; + applicationTypeArray: any[] = [ + { name: 'GUI Application', value: "1" }, + { name: 'HyperLink Application', value: "2" }, + { name: 'Non-GUI Application', value: "3" } + + ]; + + rolesManagementType: any[] = [ + { name: 'Roles in Application (Non-Centralized)', value: false }, + { name: 'Roles in AAF (Centralized)', value: true } + ]; + + modeOfIntegration: any[] = [ + { name: 'Portal SDK Based', value: 'sdk' }, + { name: 'Framework Based', value: 'fw' } + ] ngOnInit() { - if(this.applicationObj.id){ + + this.addEditAction = this.action; + + + if (this.action === 'add') { + this.applicationObj.applicationType = "1"; + if (this.applicationObj.applicationType == '1') { + this.applicationObj.modeOfIntegration = this.modeOfIntegration[0].value; + } + this.applicationObj.rolesInAAF = true; + this.applicationObj.usesCadi = true; + this.applicationObj.appAck = false; + console.log("Action : ", this.action); + console.log("Focus : ", this.applicationNameElement.nativeElement); + setTimeout(() => { // this will make the execution after the above boolean has changed + this.applicationNameElement.nativeElement.focus(); + }, 0); + } + + if (this.applicationObj.id) { this.isEditMode = true; }else{ this.isEditMode = false; @@ -167,59 +209,91 @@ export class ApplicationDetailsDialogComponent implements OnInit { /** Add/Edit Application Method*/ saveChanges() { //console.log("addNewApplication getting called.."); - if(this.applicationObj.isCentralAuth){ + if (this.applicationObj.rolesInAAF) { + //if valid. + if (this.applicationObj.applicationType == "1") { + console.log("Gui Application valodations"); //if valid. - if(!this.applicationObj.isEnabled){ - if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name)||(this.applicationObj.nameSpace == 'undefined' - || !this.applicationObj.nameSpace) ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username))) { - this.openConfirmationModal('','Please fill in all required fields(*) for centralized application'); + if (!this.applicationObj.isEnabled) { + if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) { + this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application'); return; } } - if(this.applicationObj.isEnabled){ - if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name) - ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url) - ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)||(this.applicationObj.nameSpace == 'undefined' - || !this.applicationObj.nameSpace))) { + if (this.applicationObj.isEnabled) { + if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) + || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage) + || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace))) { - this.openConfirmationModal('','Please fill in all required fields(*) for centralized active application'); + this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application'); return; } } - }else{ - if(!this.applicationObj.isEnabled) { - if((this.applicationObj.name == 'undefined' || !this.applicationObj.name)){ - this.openConfirmationModal('','Please fill in all required field(*) ApplicationName to Save the applictaion'); - return; - } - }else if(this.applicationObj.isEnabled && !this.applicationObj.restrictedApp){ - if((this.applicationObj.name == 'undefined' || !this.applicationObj.name) - ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url) - ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)|| - (this.applicationObj.appPassword== 'undefined' || !this.applicationObj.appPassword)) { - - this.openConfirmationModal('','Please fill in all required fields(*) along with password as the app is not centralized'); - return; + } else if (this.applicationObj.applicationType == "3") { + console.log("Non-Gui Application valodations"); + if (!this.applicationObj.isEnabled) { + if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) { + this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application'); + return; } - }else if(this.applicationObj.isEnabled && this.applicationObj.restrictedApp){ - if((this.applicationObj.name == 'undefined' || !this.applicationObj.name) ||(this.applicationObj.url == 'undefined' - || !this.applicationObj.url)){ - this.openConfirmationModal('','Please fill in all required fields(*)'); - return; - } } + + if (this.applicationObj.isEnabled) { + if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) + || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace))) { + + this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application'); + return; + } + } + } + } else { + console.log("Non-centralized applications validation"); + this.applicationObj.appAck = null; + if (!this.applicationObj.isEnabled) { + if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)) { + this.openConfirmationModal('', 'Please fill in all required field(*) ApplicationName to Save the applictaion'); + return; + } + } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "1")) { + if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) + || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage) + || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || + (this.applicationObj.appBasicAuthPassword == 'undefined' || !this.applicationObj.appBasicAuthPassword)) { + + this.openConfirmationModal('', 'Please fill in all required fields(*) along with password as the app is not centralized'); + return; + } + } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "3")) { + console.log("Non gui validation"); + if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) + || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername)) { + this.openConfirmationModal('', 'Please fill in all required fields(*)'); + return; + } + } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "2")) { + if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.landingPage == 'undefined' + || !this.applicationObj.landingPage)) { + this.openConfirmationModal('', 'Please fill in all required fields(*)'); + return; + } + } } //URL Validation - if(this.applicationObj.isEnabled){ - if(this.applicationObj.url && this.applicationObj.url !='undefined' && this.applicationObj.url != ''){ - let isValidURL = this.isUrlValid(this.applicationObj.url); - if(!isValidURL){ - this.openConfirmationModal('Error','Application URL must be a valid URL.'); + if (this.applicationObj.isEnabled && this.applicationObj.applicationType == "1") { + if (this.applicationObj.landingPage && this.applicationObj.landingPage != 'undefined' && this.applicationObj.landingPage != '') { + let isValidURL = this.isUrlValid(this.applicationObj.landingPage); + if (!isValidURL) { + this.openConfirmationModal('Error', 'Application URL must be a valid URL.'); return; } - }else{ - this.openConfirmationModal('Error','Application URL is required.'); + } else { + this.openConfirmationModal('Error', 'Application URL is required.'); return; } } @@ -227,34 +301,40 @@ export class ApplicationDetailsDialogComponent implements OnInit { this.isSaving = true; // For a restricted app, null out all irrelevant fields - if(this.applicationObj.restrictedApp) { + if (this.applicationObj.applicationType == "2") { + console.log("Hyperlinka pplication validation"); this.newAppModel.restUrl = null; this.newAppModel.isOpen = true; - this.newAppModel.username = null; - this.newAppModel.appPassword = null; + this.newAppModel.appBasicAuthUsername = null; + this.newAppModel.appBasicAuthPassword = null; this.newAppModel.uebTopicName = null; this.newAppModel.uebKey = null; this.newAppModel.uebSecret = null; + this.newAppModel.restrictedApp = true; /**Need to set below fields values based on input provided in the dialog */ - this.newAppModel.restrictedApp = this.applicationObj.restrictedApp; - this.newAppModel.name = this.applicationObj.name; - this.newAppModel.url = this.applicationObj.url; - if(this.applicationObj.isEnabled){ + this.newAppModel.applicationType = this.applicationObj.applicationType; + this.newAppModel.appName = this.applicationObj.appName; + this.newAppModel.landingPage = this.applicationObj.landingPage; + this.newAppModel.usesCadi = this.applicationObj.usesCadi; + if (this.applicationObj.isEnabled) { this.newAppModel.isEnabled = this.applicationObj.isEnabled; }else{ this.newAppModel.isEnabled = false; } + console.log("New Model : ", this.newAppModel); + } else { - }else{ - - /**Need to set below fields values based on input provided in the dialog */ - this.newAppModel.restrictedApp = false; - this.newAppModel.name = this.applicationObj.name; - this.newAppModel.url = this.applicationObj.url; - this.newAppModel.restUrl = this.applicationObj.restUrl; - this.newAppModel.username = this.applicationObj.username; - this.newAppModel.appPassword = this.applicationObj.appPassword; + /**Need to set below fields values based on input provided in the dialog */ + this.newAppModel.applicationType = this.applicationObj.applicationType; + this.newAppModel.appName = this.applicationObj.appName; + this.newAppModel.landingPage = this.applicationObj.landingPage; + this.newAppModel.restUrl = this.applicationObj.restUrl; + this.newAppModel.appBasicAuthUsername = this.applicationObj.appBasicAuthUsername; + this.newAppModel.appBasicAuthPassword = this.applicationObj.appBasicAuthPassword; + this.newAppModel.modeOfIntegration = this.applicationObj.modeOfIntegration; + this.newAppModel.usesCadi = this.applicationObj.usesCadi; + this.newAppModel.appAck = this.applicationObj.appAck; if(this.applicationObj.isEnabled){ this.newAppModel.isEnabled = this.applicationObj.isEnabled; @@ -269,11 +349,12 @@ export class ApplicationDetailsDialogComponent implements OnInit { } //console.log("this.applicationObj.isOpen",this.applicationObj.isOpen); - if(this.applicationObj.isCentralAuth){ - this.newAppModel.isCentralAuth = this.applicationObj.isCentralAuth; - }else{ - this.newAppModel.isCentralAuth = false; - } + if (this.applicationObj.rolesInAAF) { + this.newAppModel.rolesInAAF = this.applicationObj.rolesInAAF; + } else { + this.newAppModel.rolesInAAF = false; + this.newAppModel.usesCadi = false; + } } @@ -283,7 +364,17 @@ export class ApplicationDetailsDialogComponent implements OnInit { this.newAppModel.nameSpace = this.applicationObj.nameSpace; } - if(this.isEditMode){ + if (this.applicationObj.applicationType == "2" || this.applicationObj.applicationType == "3") { + this.applicationObj.modeOfIntegration = null; + } + + if (this.newAppModel.applicationType == "2" || this.newAppModel.applicationType == "3") { + this.newAppModel.modeOfIntegration = null; + } + + if (this.isEditMode) { + console.log("Edit application Object : ", JSON.stringify(this.applicationObj)); + console.log("Mode Of iNtegration : ", this.applicationObj.modeOfIntegration); this.applicationsService.updateOnboardingApp(this.applicationObj) .subscribe( _data => { this.result = _data; diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html index 8a678917..19f5d8ae 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html @@ -46,7 +46,7 @@ <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table"> </mat-form-field> - <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddApplicationModal('')"> + <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddApplicationModal('', 'add')"> <i class="icon ion-md-person-add"></i> Add App </button> @@ -56,7 +56,7 @@ <!-- Thumbnail Column --> <ng-container matColumnDef="thumbnail"> <th id="col1" mat-header-cell *matHeaderCellDef> Thumbnail </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-thumbnail" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-thumbnail" mat-cell *matCellDef="let element; let i = index;"> <div><img class="small-thumbnail" src={{element.imageLink}}></div> </td> @@ -65,64 +65,71 @@ <!-- Application Name Column --> <ng-container matColumnDef="applicationName"> <th id="col2" mat-header-cell *matHeaderCellDef> Application Name </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationName" - mat-cell *matCellDef="let element; let i=index;"> {{element.name}} </td> + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-applicationName" + mat-cell *matCellDef="let element; let i=index;"> {{element.appName}} </td> </ng-container> <!-- Active Column --> <ng-container matColumnDef="active"> <th id="col2" mat-header-cell *matHeaderCellDef> Active </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-active" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-active" mat-cell *matCellDef="let element; let i=index;"> {{(element.isEnabled) ? 'yes' : 'no'}} </td> </ng-container> <!-- Integration Type Column --> <ng-container matColumnDef="integrationType"> <th id="col2" mat-header-cell *matHeaderCellDef> Integration Type </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-integrationType" - mat-cell *matCellDef="let element; let i=index;"> {{(element.restrictedApp) ? 'link' : 'standard'}} </td> + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-integrationType" + mat-cell *matCellDef="let element; let i=index;"> {{(element.applicationType == 2) ? 'link' : 'standard'}} </td> + </ng-container> + + <!-- Mode Of Integration Type Column --> + <ng-container matColumnDef="modeOfIntegration"> + <th id="col2" mat-header-cell *matHeaderCellDef> Mode Of Integration </th> + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-modeOfIntegration" + mat-cell *matCellDef="let element; let i=index;"> {{element.modeOfIntegration}} </td> </ng-container> <!-- Guest Access Column--> <ng-container matColumnDef="guestAccess"> <th id="col2" mat-header-cell *matHeaderCellDef> Guest Access </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-guestAccess" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-guestAccess" mat-cell *matCellDef="let element; let i=index;">{{(element.isOpen) ? 'yes' : 'no'}} </td> </ng-container> <!-- url column --> - <ng-container matColumnDef="url"> - <th id="col2" mat-header-cell *matHeaderCellDef> Url </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-url" - mat-cell *matCellDef="let element; let i=index;">{{element.url}} </td> + <ng-container matColumnDef="landingPage"> + <th id="col2" mat-header-cell *matHeaderCellDef> Landing Page </th> + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-url" + mat-cell *matCellDef="let element; let i=index;">{{element.landingPage}} </td> </ng-container> <!-- rest url column --> <ng-container matColumnDef="restURL"> <th id="col2" mat-header-cell *matHeaderCellDef> REST Url </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-restURL" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-restURL" mat-cell *matCellDef="let element; let i=index;">{{element.restUrl}} </td> </ng-container> <!-- communicationKey column --> <ng-container matColumnDef="communicationKey"> <th id="col2" mat-header-cell *matHeaderCellDef> Communication Key </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-communicationKey" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-communicationKey" mat-cell *matCellDef="let element; let i=index;">{{element.uebKey}} </td> </ng-container> <!-- applicationNamespace column --> <ng-container matColumnDef="applicationNamespace"> <th id="col2" mat-header-cell *matHeaderCellDef> Application Namespace </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationNamespace" + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-applicationNamespace" mat-cell *matCellDef="let element; let i=index;">{{element.nameSpace}} </td> </ng-container> <!-- centralAuthAccess column --> <ng-container matColumnDef="centralAuthAccess"> <th id="col2" mat-header-cell *matHeaderCellDef> Central Auth Access </th> - <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-centralAuthAccess" - mat-cell *matCellDef="let element; let i=index;">{{(element.isCentralAuth) ? 'yes' : 'no'}} </td> + <td (click)="openAddApplicationModal(element, 'edit')" id="rowheader_t1_{{i}}-centralAuthAccess" + mat-cell *matCellDef="let element; let i=index;">{{(element.rolesInAAF) ? 'yes' : 'no'}} </td> </ng-container> <!-- Delete Column --> diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts index 8cbf1d28..a2c759dc 100644 --- a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts @@ -61,7 +61,7 @@ export class ApplicationOnboardingComponent implements OnInit { emptyImgForPreview: string; isUserSuperAdmin: boolean = false; displayedColumns: string[] = ['thumbnail', 'applicationName','active', - 'integrationType', 'guestAccess', 'url','restURL', + 'integrationType', 'modeOfIntegration', 'guestAccess', 'landingPage','restURL', 'communicationKey', 'applicationNamespace', 'centralAuthAccess']; dataSource = new MatTableDataSource(this.appsList); @ViewChild(MatSort) sort: MatSort; @@ -112,9 +112,11 @@ export class ApplicationOnboardingComponent implements OnInit { this.dataSource.paginator = this.paginator; }; - openAddApplicationModal(rowData: any) { + openAddApplicationModal(rowData: any, action:any) { + console.log("Action : ", action); const modalRef = this.ngbModal.open(ApplicationDetailsDialogComponent, { size: 'lg' }); modalRef.componentInstance.title = 'Application Details'; + modalRef.componentInstance.action = action; //console.log("selectedData in parent",rowData); if(rowData != 'undefined' && rowData){ modalRef.componentInstance.applicationObj = rowData; @@ -162,7 +164,7 @@ export class ApplicationOnboardingComponent implements OnInit { if(res) { this.isUserSuperAdmin = true; this.displayedColumns = ['thumbnail', 'applicationName','active', - 'integrationType', 'guestAccess', 'url','restURL', + 'integrationType', 'modeOfIntegration', 'guestAccess', 'landingPage','restURL', 'communicationKey', 'applicationNamespace', 'centralAuthAccess', 'delete']; } //console.log("isUserSuperAdmin :: ",this.isUserSuperAdmin); diff --git a/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.html b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.html new file mode 100644 index 00000000..92f13c8c --- /dev/null +++ b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.html @@ -0,0 +1,3 @@ +<span matTooltip="{{textMessage}}" [matTooltipPosition]="'above'"> + <i class="icon ion-md-help-circle" style="color: #087ac2;"></i> +</span>
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.scss b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.scss new file mode 100644 index 00000000..3d72a79e --- /dev/null +++ b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.scss @@ -0,0 +1,13 @@ +.material-icons { + font-size: 17px !important; + cursor: default; +} + +.mat-tooltip { + font-size: 1.5rem !important; + } + + img{ + width: 16px; + } +
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.spec.ts b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.spec.ts new file mode 100644 index 00000000..9c8c6214 --- /dev/null +++ b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.spec.ts @@ -0,0 +1,8 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InformationTooltipComponent } from './information-tooltip.component'; + +describe('InformationTooltipComponent', () => { + + +}); diff --git a/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.ts b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.ts new file mode 100644 index 00000000..3c05d074 --- /dev/null +++ b/portal-FE-os/src/app/pages/information-tooltip/information-tooltip.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-information-tooltip', + templateUrl: './information-tooltip.component.html', + styleUrls: ['./information-tooltip.component.scss'] +}) +export class InformationTooltipComponent implements OnInit { + + @Input() textMessage : any; + constructor() { } + + message : string; + ngOnInit() { + console.log("Message ", this.textMessage); + this.message = this.textMessage; + } + +} diff --git a/portal-FE-os/src/app/pages/pages.module.ts b/portal-FE-os/src/app/pages/pages.module.ts index 7ccb3f95..b7163da3 100644 --- a/portal-FE-os/src/app/pages/pages.module.ts +++ b/portal-FE-os/src/app/pages/pages.module.ts @@ -35,7 +35,7 @@ * * */ -import { NgModule } from '@angular/core'; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { MatIconModule } from '@angular/material/icon'; @@ -96,7 +96,9 @@ import { ApplicationPipesModule } from '../shared/pipes/application-pipes.module import { UsersComponent } from './users/users.component'; import { NewUserModalComponent } from './users/new-user-modal/new-user-modal.component'; import { BulkUserComponent } from './users/bulk-user/bulk-user.component'; +import { InformationTooltipComponent } from './information-tooltip/information-tooltip.component'; import { UserDetailsFormComponent } from './users/user-details-form/user-details-form.component'; +import { MatTooltipModule } from '@angular/material'; @NgModule({ @@ -149,7 +151,8 @@ import { UserDetailsFormComponent } from './users/user-details-form/user-details DashboardWidgetCatalogComponent, FunctionalMenuDialogComponent, GetAccessComponent, - UserDetailsFormComponent + UserDetailsFormComponent, + InformationTooltipComponent ], imports: [ CommonModule, @@ -163,7 +166,8 @@ import { UserDetailsFormComponent } from './users/user-details-form/user-details MatIconModule, MatCheckboxModule, FormsModule, - PluginModule + PluginModule, + MatTooltipModule ], entryComponents: [ SchedulerComponent, @@ -193,7 +197,9 @@ import { UserDetailsFormComponent } from './users/user-details-form/user-details useClass: HeaderInterceptor, multi: true, }], - + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ] }) export class PagesModule { |