src/app/shared/components/link/link.component.ts
| selector | crm-link |
| styleUrls | link.component.scss |
| templateUrl | ./link.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(notificationsService: NotificationsService)
|
||||||||
|
Parameters :
|
currentLinks
|
Type: |
readonly
|
Type:
Default value: |
addedLinks
|
$event type: EventEmitter<string[]>
|
| haveLinks |
haveLinks()
|
|
Returns :
boolean
|
| isNewLink |
isNewLink()
|
|
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onAddNewLink |
onAddNewLink()
|
|
Returns :
void
|
| onCopyLink | ||||||||
onCopyLink(element: Node)
|
||||||||
|
Parameters :
Returns :
void
|
| onDeleteLink | ||||||||
onDeleteLink(link: string)
|
||||||||
|
Parameters :
Returns :
void
|
| toggleShowLinks |
toggleShowLinks()
|
|
Returns :
void
|
| links |
links:
|
Type : string[]
|
Default value : []
|
| newLink |
newLink:
|
Type : string
|
Default value : ''
|
| showAddLinkInput |
showAddLinkInput:
|
Type : boolean
|
Default value : false
|
import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {NotificationsService} from "../../../core/notifications/notifications.service";
@Component({
selector: 'crm-link',
templateUrl: './link.component.html',
styleUrls: ['./link.component.scss']
})
export class LinkComponent implements OnInit {
links: string[] = [];
showAddLinkInput: boolean = false;
newLink: string = '';
@Input() currentLinks: string[];
@Input() readonly : boolean = false;
@Output() addedLinks: EventEmitter<string[]> = new EventEmitter<string[]>();
constructor(private notificationsService: NotificationsService) { }
ngOnInit() {
this.links.push(...this.currentLinks);
}
onAddNewLink() {
if (this.isNewLink()) {
this.links.push(this.newLink);
this.newLink = '';
this.addedLinks.emit(this.links);
}
}
onDeleteLink(link: string) {
this.links.splice(this.links.indexOf(link), 1);
this.addedLinks.emit(this.links);
}
onCopyLink(element: Node) {
const selection = getSelection();
const range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
this.notificationsService.info(`${range} copied to clipboard`)
}
toggleShowLinks() {
this.showAddLinkInput = !this.showAddLinkInput;
}
isNewLink() {
return this.newLink && this.newLink.trim().length > 0;
}
haveLinks() {
return this.links.length > 0
}
}
<div class="row">
<div class="col-md-1 col-sm-12" *ngIf="!readonly">
<button type="button" (click)="toggleShowLinks()" class="btn btn-link add-link-button" *ngIf="!showAddLinkInput">Add
link
</button>
<button type="button" (click)="toggleShowLinks()" class="btn btn-link add-link-button" *ngIf="showAddLinkInput">Hide
link input
</button>
</div>
<div class="col-sm-12" [ngClass]="{'col-md-11': !readonly, 'col-md-12': readonly}">
<table class="table table-custom" *ngIf="haveLinks()">
<thead>
<tr>
<th class="links-td">Link</th>
<th class="links-td" width="80"><!--Actions--></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let link of links">
<td class="links-td text-truncate link-name" #linkNode>{{link}}</td>
<td class="links-td">
<div class="pull-right">
<button type="button"
class="btn btn-link text-muted action-padding"
title="Copy link to clipboard"
(click)="onCopyLink(linkNode)">
<span class="fa fa-copy fa-lg"></span>
</button>
<button type="button"
class="btn btn-link text-muted action-padding"
title="Delete link" *ngIf="!readonly"
(click)="onDeleteLink(link)">
<span class="fa fa-trash fa-lg"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row" *ngIf="showAddLinkInput">
<div class="input-group col-sm-12">
<input type="text"
class="form-control"
placeholder="Link"
[(ngModel)]="newLink"
(keyup.enter)="onAddNewLink()">
<span class="input-group-btn">
<button type="button"
class="btn btn-primary"
title="Add link"
[disabled]="!isNewLink()"
(click)="onAddNewLink()">
<span class="fa fa-plus fa-md"></span> Add
</button>
</span>
</div>
</div>
</div>
</div>