[Library]: Modal: Add option to have a dont show message again checkbox. Add service to save on localStorage user's choices(only communityDireckLink now). Change search Communities result with new functionality.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56808 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
db2371fee7
commit
de87c5506b
|
|
@ -1,50 +1,96 @@
|
|||
<ul [class]="'uk-list uk-list-divider uk-margin ' + custom_class">
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
|
||||
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto" uk-grid>
|
||||
<a class="uk-width-1-5 uk-height-small uk-card uk-card-default uk-card-small communityCard uk-padding-remove-horizontal uk-inline" (click)="confirmModalOpen(result)">
|
||||
<div *ngIf="result.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
|
||||
<span>Subscribed</span>
|
||||
</div>
|
||||
<div class="uk-card-body uk-position-center uk-flex uk-flex-middle uk-flex-center">
|
||||
<img *ngIf= "result.logoUrl != null && result.logoUrl != '' " src="{{result.logoUrl}}" alt="{{(result.title)?result.title:result.shortTitle}} logo" >
|
||||
<span *ngIf= "result.logoUrl == null || result.logoUrl == '' " class="uk-icon">
|
||||
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
|
||||
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto" uk-grid>
|
||||
<a *ngIf="directLink" [href]="getCommunityPageUrl(result.communityId)" target="_blank"
|
||||
class="uk-width-1-5 uk-height-small uk-card uk-card-default uk-card-small communityCard uk-padding-remove-horizontal uk-inline">
|
||||
<div *ngIf="result.isSubscribed"
|
||||
class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
|
||||
<span>Subscribed</span>
|
||||
</div>
|
||||
<div class="uk-card-body uk-position-center uk-flex uk-flex-middle uk-flex-center">
|
||||
<img *ngIf="result.logoUrl != null && result.logoUrl != '' " src="{{result.logoUrl}}"
|
||||
alt="{{(result.title)?result.title:result.shortTitle}} logo">
|
||||
<span *ngIf="result.logoUrl == null || result.logoUrl == '' " class="uk-icon">
|
||||
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
cx="7.7" cy="8.6"
|
||||
r="3.5"></circle> <path
|
||||
fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="result.status == 'manager'" class="uk-card-badge private-card-badge uk-width-2-5 uk-position-top-left uk-text-small uk-text-center ">
|
||||
<span class="uk-padding-small">Private</span>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="result.status == 'manager'"
|
||||
class="uk-card-badge private-card-badge uk-width-2-5 uk-position-top-left uk-text-small uk-text-center ">
|
||||
<span class="uk-padding-small">Private</span>
|
||||
</div>
|
||||
</a>
|
||||
<a *ngIf="!directLink"
|
||||
class="uk-width-1-5 uk-height-small uk-card uk-card-default uk-card-small communityCard uk-padding-remove-horizontal uk-inline"
|
||||
(click)="confirmModalOpen(result)">
|
||||
<div *ngIf="result.isSubscribed"
|
||||
class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
|
||||
<span>Subscribed</span>
|
||||
</div>
|
||||
<div class="uk-card-body uk-position-center uk-flex uk-flex-middle uk-flex-center">
|
||||
<img *ngIf="result.logoUrl != null && result.logoUrl != '' " src="{{result.logoUrl}}"
|
||||
alt="{{(result.title)?result.title:result.shortTitle}} logo">
|
||||
<span *ngIf="result.logoUrl == null || result.logoUrl == '' " class="uk-icon">
|
||||
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
cx="7.7" cy="8.6"
|
||||
r="3.5"></circle> <path
|
||||
fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="result.status == 'manager'"
|
||||
class="uk-card-badge private-card-badge uk-width-2-5 uk-position-top-left uk-text-small uk-text-center ">
|
||||
<span class="uk-padding-small">Private</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="uk-width-expand">
|
||||
<div [title]=result.shortTitle class="uk-text-large uk-grid">
|
||||
<a *ngIf="directLink" [href]="getCommunityPageUrl(result.communityId)" target="_blank"
|
||||
[class]="(result.isManager)?'uk-width-3-4':''">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<div class="uk-width-expand">
|
||||
<div [title] = result.shortTitle class="uk-text-large uk-grid">
|
||||
<a (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4':''">
|
||||
{{(result.title)?result.title:result.shortTitle}}
|
||||
</a>
|
||||
<manage *ngIf="result.isManager" [communityId]="result.communityId" class="uk-width-expand uk-margin-auto-right"></manage>
|
||||
</div>
|
||||
<div *ngIf="result.description">
|
||||
<div class="text-justify descriptionText uk-margin-auto-right" [title]="result.description">
|
||||
{{_formatDescription(result.description)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-padding-small uk-padding-remove-left uk-grid">
|
||||
<div class="uk-width-1-2">
|
||||
<span *ngIf="result.date"><b> Creation Date: </b></span>
|
||||
<span *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-align-right uk-margin-auto-right">
|
||||
<span *ngIf="result.type && result.type != ''" ><b> Type: </b></span>
|
||||
<span *ngIf="result.type && result.type != ''" >{{(result.type == 'ri')?'Research Initiative':'Research Community'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a *ngIf="!directLink" (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4':''">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<manage *ngIf="result.isManager" [communityId]="result.communityId"
|
||||
class="uk-width-expand uk-margin-auto-right"></manage>
|
||||
</div>
|
||||
<div *ngIf="result.description">
|
||||
<div class="text-justify descriptionText uk-margin-auto-right" [title]="result.description">
|
||||
{{_formatDescription(result.description)}}
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="uk-padding-small uk-padding-remove-left uk-grid">
|
||||
<div class="uk-width-1-2">
|
||||
<span *ngIf="result.date"><b> Creation Date: </b></span>
|
||||
<span *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-align-right uk-margin-auto-right">
|
||||
<span *ngIf="result.type && result.type != ''"><b> Type: </b></span>
|
||||
<span
|
||||
*ngIf="result.type && result.type != ''">{{(result.type == 'ri') ? 'Research Initiative' : 'Research Community'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
|
||||
<div class="uk-text-center">
|
||||
The profile will be presented in a new tab.<br>
|
||||
Are you sure that you want to proceed?
|
||||
</div>
|
||||
<div class="uk-text-left">
|
||||
You will be navigated to a new tab. Are you sure that you want to proceed?
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import {Component, Input, ViewChild} from '@angular/core';
|
||||
import {ErrorCodes} from '../../utils/properties/errorCodes';
|
||||
import {RouterHelper} from '../../utils/routerHelper.class';
|
||||
import{EnvProperties} from '../../utils/properties/env-properties';
|
||||
import {EnvProperties} from '../../utils/properties/env-properties';
|
||||
import {CommunityInfo} from "../../connect/community/communityInfo";
|
||||
import {Router} from "@angular/router";
|
||||
import {LocalStorageService} from "../../services/localStorage.service";
|
||||
|
||||
@Component({
|
||||
selector: 'community-search-result',
|
||||
templateUrl:'communitySearchResults.component.html'
|
||||
templateUrl: 'communitySearchResults.component.html'
|
||||
})
|
||||
|
||||
export class CommunitySearchResultsComponent {
|
||||
|
|
@ -21,49 +23,73 @@ export class CommunitySearchResultsComponent {
|
|||
|
||||
|
||||
public urlParam: string;
|
||||
public errorCodes:ErrorCodes = new ErrorCodes();
|
||||
public routerHelper:RouterHelper = new RouterHelper();
|
||||
public errorCodes: ErrorCodes = new ErrorCodes();
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
public errorMessage: string = "No results found";
|
||||
public selectedCommunityId: string;
|
||||
constructor(private router: Router) {}
|
||||
public directLink: boolean = true;
|
||||
|
||||
|
||||
constructor(private router: Router,
|
||||
private localStorageService: LocalStorageService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.localStorageService.get().subscribe(value => {
|
||||
this.directLink = value;
|
||||
});
|
||||
}
|
||||
|
||||
getProductionPrefix(): string {
|
||||
return (this.properties.environment == "beta") ? "beta." : ""
|
||||
}
|
||||
|
||||
isProduction(): boolean {
|
||||
return this.properties.environment != "development";
|
||||
|
||||
}
|
||||
|
||||
getProductionPrefix():string{
|
||||
return (this.properties.environment == "beta")?"beta.":""
|
||||
}
|
||||
|
||||
isProduction():boolean{
|
||||
return this.properties.environment!="development";
|
||||
|
||||
}
|
||||
|
||||
public _formatDescription(description){
|
||||
return (((description).length > this.maxCharacters)?(description.substring(0,(this.maxCharacters - ('...').length))+"..."):description);
|
||||
public _formatDescription(description) {
|
||||
return (((description).length > this.maxCharacters) ? (description.substring(0, (this.maxCharacters - ('...').length)) + "...") : description);
|
||||
}
|
||||
|
||||
public confirmModalOpen(community: CommunityInfo) {
|
||||
this.selectedCommunityId = community.communityId;
|
||||
this.modal.cancelButton = true;
|
||||
this.modal.okButton = true;
|
||||
this.modal.alertTitle = 'You have selected ' + community.title;
|
||||
this.modal.alertMessage = false;
|
||||
this.modal.okButtonLeft = false;
|
||||
this.modal.okButtonText = 'Yes';
|
||||
this.modal.cancelButtonText = 'No';
|
||||
this.modal.open();
|
||||
this.modal.cancelButton = true;
|
||||
this.modal.okButton = true;
|
||||
this.modal.alertTitle = 'You are going to visit ' +
|
||||
((community.title) ? community.title : community.shortTitle);
|
||||
this.modal.alertMessage = false;
|
||||
this.modal.okButtonLeft = false;
|
||||
this.modal.okButtonText = 'Yes';
|
||||
this.modal.cancelButtonText = 'No';
|
||||
this.modal.choice = true;
|
||||
this.modal.open();
|
||||
}
|
||||
|
||||
public getCommunityPageUrl(communityId: string): string {
|
||||
let url = '';
|
||||
if (this.isProduction()) {
|
||||
url = 'https://' + this.getProductionPrefix() + communityId + '.openaire.eu';
|
||||
} else {
|
||||
url = this.router.createUrlTree(['/'], {
|
||||
queryParams: {'communityId': communityId}
|
||||
}).toString();
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
public goToCommunityPage(data: any) {
|
||||
let url = '';
|
||||
if(this.isProduction()) {
|
||||
url = 'https://'+ this.getProductionPrefix() + this.selectedCommunityId +'.openaire.eu';
|
||||
} else {
|
||||
url = this.router.createUrlTree(['/'], {
|
||||
queryParams: { 'communityId': this.selectedCommunityId} }).toString();
|
||||
if (data.value == true) {
|
||||
this.localStorageService.setCommunityDirectLink(data.choice);
|
||||
let url = '';
|
||||
if (this.isProduction()) {
|
||||
url = 'https://' + this.getProductionPrefix() + this.selectedCommunityId + '.openaire.eu';
|
||||
} else {
|
||||
url = this.router.createUrlTree(['/'], {
|
||||
queryParams: {'communityId': this.selectedCommunityId}
|
||||
}).toString();
|
||||
}
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import {Inject, Injectable, PLATFORM_ID} from "@angular/core";
|
||||
import {BehaviorSubject, Observable} from "rxjs";
|
||||
import {isPlatformBrowser} from "@angular/common";
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
export class LocalStorageService {
|
||||
|
||||
private communityDirectLink: BehaviorSubject<boolean>;
|
||||
|
||||
constructor(@Inject(PLATFORM_ID) private platformId: string) {
|
||||
if(isPlatformBrowser(this.platformId)) {
|
||||
let item = localStorage.getItem('communityDirectLink');
|
||||
if(item !== null) {
|
||||
this.communityDirectLink = new BehaviorSubject<boolean>(item == 'true');
|
||||
} else {
|
||||
this.communityDirectLink = new BehaviorSubject<boolean>(false);
|
||||
}
|
||||
} else this.communityDirectLink = new BehaviorSubject<boolean>(true);
|
||||
}
|
||||
|
||||
public setCommunityDirectLink(value: string) {
|
||||
localStorage.setItem('communityDirectLink', value);
|
||||
this.communityDirectLink.next(Boolean(value).valueOf());
|
||||
}
|
||||
|
||||
public get(): Observable<boolean> {
|
||||
console.log(this.communityDirectLink.getValue());
|
||||
return this.communityDirectLink.asObservable();
|
||||
}
|
||||
}
|
||||
|
|
@ -3,93 +3,101 @@ import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} f
|
|||
@Component({
|
||||
selector: 'modal-alert',
|
||||
template: `
|
||||
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal [open]="!isOpen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="uk-modal-dialog uk-modal-body" role="">
|
||||
<div class="uk-modal-title" [hidden]=!alertHeader>
|
||||
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
|
||||
<h4 class="modal-title text-center" id="myModalLabel">{{alertTitle}}</h4>
|
||||
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" id="myModal"
|
||||
tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-text-left" role="">
|
||||
<div class="uk-modal-title" [hidden]=!alertHeader>
|
||||
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
|
||||
<h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>
|
||||
</div>
|
||||
<div class="uk-margin ">
|
||||
<div class="uk-margin">
|
||||
<div [hidden]=!alertMessage>
|
||||
{{message}}
|
||||
{{message}}
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
|
||||
<span [hidden]=!okButton >
|
||||
<button class="uk-button uk-button-default" (click)="ok()">{{okButtonText}}</button>
|
||||
</span>
|
||||
<span [hidden]=!cancelButton>
|
||||
<button class="uk-button uk-button-default uk-margin-small-left" (click)="cancel()">{{cancelButtonText}}</button>
|
||||
</span>
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<label *ngIf="choice" class="uk-width-1-2 checkbox">
|
||||
<input type="checkbox" [(ngModel)]="select">
|
||||
<span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
|
||||
</label>
|
||||
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
|
||||
<div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
|
||||
<span [hidden]=!okButton>
|
||||
<button class="uk-button uk-button-default" (click)="ok()">{{okButtonText}}</button>
|
||||
</span>
|
||||
<span [hidden]=!cancelButton>
|
||||
<button class="uk-button uk-button-default uk-margin-small-left"
|
||||
(click)="cancel()">{{cancelButtonText}}</button>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
|
||||
<span [hidden]=!cancelButton>
|
||||
<button class="uk-button uk-button-default uk-margin-small-right"
|
||||
(click)="cancel()">{{cancelButtonText}}</button>
|
||||
</span>
|
||||
<span [hidden]=!okButton>
|
||||
<button *ngIf="okDisabled" class="uk-button uk-button-default" disabled>{{okButtonText}}</button>
|
||||
<button *ngIf="!okDisabled" class="uk-button portal-button" (click)="ok()">{{okButtonText}}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
|
||||
<span [hidden]=!cancelButton>
|
||||
<button class="uk-button uk-button-default uk-margin-small-right" (click)="cancel()">{{cancelButtonText}}</button>
|
||||
</span>
|
||||
<span [hidden]=!okButton >
|
||||
<button *ngIf="okDisabled" class="uk-button uk-button-default" disabled>{{okButtonText}}</button>
|
||||
<button *ngIf="!okDisabled" class="uk-button portal-button" (click)="ok()">{{okButtonText}}</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
/**
|
||||
* API to an open alert window.
|
||||
*/
|
||||
export class AlertModal{
|
||||
* API to an open alert window.
|
||||
*/
|
||||
export class AlertModal {
|
||||
/**
|
||||
* Caption for the title.
|
||||
*/
|
||||
public alertTitle:string;
|
||||
* Caption for the title.
|
||||
*/
|
||||
public alertTitle: string;
|
||||
/**
|
||||
* Describes if the alert contains Ok Button.
|
||||
* The default Ok button will close the alert and emit the callback.
|
||||
* Defaults to true.
|
||||
*/
|
||||
public okButton:boolean = true;
|
||||
* Describes if the alert contains Ok Button.
|
||||
* The default Ok button will close the alert and emit the callback.
|
||||
* Defaults to true.
|
||||
*/
|
||||
public okButton: boolean = true;
|
||||
/**
|
||||
* Caption for the OK button.
|
||||
* Default: Ok
|
||||
*/
|
||||
public okButtonText:string= 'Ok';
|
||||
* Caption for the OK button.
|
||||
* Default: Ok
|
||||
*/
|
||||
public okButtonText: string = 'Ok';
|
||||
/**
|
||||
* Describes if the alert contains cancel Button.
|
||||
* The default Cancelbutton will close the alert.
|
||||
* Defaults to true.
|
||||
*/
|
||||
public cancelButton:boolean = true;
|
||||
* Describes if the alert contains cancel Button.
|
||||
* The default Cancelbutton will close the alert.
|
||||
* Defaults to true.
|
||||
*/
|
||||
public cancelButton: boolean = true;
|
||||
/**
|
||||
* Caption for the Cancel button.
|
||||
* Default: Cancel
|
||||
*/
|
||||
public cancelButtonText:string = 'Cancel';
|
||||
* Caption for the Cancel button.
|
||||
* Default: Cancel
|
||||
*/
|
||||
public cancelButtonText: string = 'Cancel';
|
||||
/**
|
||||
* if the alertMessage is true it will show the contentString inside alert body.
|
||||
*/
|
||||
public alertMessage:boolean = true;
|
||||
* if the alertMessage is true it will show the contentString inside alert body.
|
||||
*/
|
||||
public alertMessage: boolean = true;
|
||||
/**
|
||||
* Some message/content can be set in message which will be shown in alert body.
|
||||
*/
|
||||
public message:string;
|
||||
* Some message/content can be set in message which will be shown in alert body.
|
||||
*/
|
||||
public message: string;
|
||||
/**
|
||||
* if the value is true alert footer will be visible or else it will be hidden.
|
||||
*/
|
||||
public alertFooter:boolean= true;
|
||||
* if the value is true alert footer will be visible or else it will be hidden.
|
||||
*/
|
||||
public alertFooter: boolean = true;
|
||||
/**
|
||||
* shows alert header if the value is true.
|
||||
*/
|
||||
public alertHeader:boolean = true;
|
||||
* shows alert header if the value is true.
|
||||
*/
|
||||
public alertHeader: boolean = true;
|
||||
/**
|
||||
* if the value is true alert will be visible or else it will be hidden.
|
||||
*/
|
||||
public isOpen:boolean=false;
|
||||
* if the value is true alert will be visible or else it will be hidden.
|
||||
*/
|
||||
public isOpen: boolean = false;
|
||||
|
||||
/**
|
||||
* if the value is true ok button align on the left, else on the right
|
||||
|
|
@ -101,29 +109,46 @@ export class AlertModal{
|
|||
*/
|
||||
@Input()
|
||||
public okDisabled: boolean = false;
|
||||
|
||||
@Input()
|
||||
public choice: boolean = false;
|
||||
|
||||
public select: boolean = false;
|
||||
/**
|
||||
* Emitted when a ok button was clicked
|
||||
* or when Ok method is called.
|
||||
*/
|
||||
@Output() public alertOutput:EventEmitter<any> = new EventEmitter();
|
||||
constructor( public _elementRef: ElementRef){}
|
||||
/**
|
||||
* Opens a alert window creating backdrop.
|
||||
*/
|
||||
open(){
|
||||
this.isOpen= true;
|
||||
* Emitted when a ok button was clicked
|
||||
* or when Ok method is called.
|
||||
*/
|
||||
@Output() public alertOutput: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
constructor(public _elementRef: ElementRef) {
|
||||
}
|
||||
|
||||
/**
|
||||
* ok method closes the modal and emits modalOutput.
|
||||
*/
|
||||
ok(){
|
||||
* Opens a alert window creating backdrop.
|
||||
*/
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ok method closes the modal and emits modalOutput.
|
||||
*/
|
||||
ok() {
|
||||
this.isOpen = false;
|
||||
this.alertOutput.emit(true);
|
||||
if (!this.choice) {
|
||||
this.alertOutput.emit(true);
|
||||
} else {
|
||||
this.alertOutput.emit({
|
||||
value: true,
|
||||
choice: this.select
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* cancel method closes the moda.
|
||||
*/
|
||||
cancel(){
|
||||
* cancel method closes the moda.
|
||||
*/
|
||||
cancel() {
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue