packages/data/src/lib/resource-delete-pop/resource-delete-pop.component.ts
This component can be used to delete all kinds of resources with a confirmation pop.
```html
| selector | ec-resource-delete-pop |
| templateUrl | ./resource-delete-pop.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
constructor(symbol: SymbolService, loader: LoaderService, resourceService: ResourceService, notificationService: NotificationsService, popService: PopService, elementRef: ElementRef, cdr: ChangeDetectorRef)
|
||||||||||||||||||||||||
|
Injects SymbolService and LoaderService
Parameters :
|
| no | |
Type : string
|
|
|
The label for canceling |
|
| question | |
Type : string
|
|
|
The question inside the pop |
|
| relation | |
Type : string
|
|
|
The relation where it happened |
|
| resource | |
Type : Resource
|
|
|
The resource to delete |
|
| safetyWord | |
Type : string
|
|
|
If given, an input will be shown that expects the string to be entered before being able to press delete |
|
| yes | |
Type : string
|
|
|
The label for confirmation |
|
| active | |
Type : boolean
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:28
|
|
|
If true, .ec-pop is part of the DOM (*ngIf) + .active is set on .ec-pop-container. |
|
| hideOnClickOutside | |
Default value : false
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:34
|
|
|
If set to true, the pop will hide when a click happens outside the pop. |
|
| hideOnEscape | |
Default value : true
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:36
|
|
|
If set to false, esc will not close the pop |
|
| type | |
Type : string
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:32
|
|
|
The used type on the host element |
|
| deleted | |
Type : EventEmitter<any>
|
|
|
Output that is after the deletion was successful. |
|
| toggle | |
Type : EventEmitter<boolean>
|
|
|
Inherited from
PopComponent
|
|
|
Defined in
PopComponent:38
|
|
| class |
Default value : 'modal-wrapper ec-resource-delete-pop'
|
| document:click |
Arguments : '$event'
|
document:click($event)
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:43
|
|
Listens for document:click and hides |
| canDelete |
canDelete()
|
|
Returns :
boolean
|
| confirm | ||||||||
confirm(resource: Resource)
|
||||||||
|
The confirm method sets a given resource and shows the confirmation pop.
Parameters :
Returns :
void
|
| delete | ||||||||
delete(resource: Resource)
|
||||||||
|
The delete method calls del() of the given resource. You can also pass a resource to delete directly to set it.
Parameters :
Returns :
void
|
| hide |
hide()
|
|
Returns :
void
|
| show |
show()
|
|
Returns :
void
|
| Public hide |
hide()
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:88
|
|
Hides the pop. Sets active false and removes pop from popService.stack
Returns :
void
|
| isOutside | ||||
isOutside(element)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:58
|
||||
|
yields true if the given element is outside the pop / or is the wrapper element itself (the backdrop)
Parameters :
Returns :
boolean
|
| Public show | ||||
show(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:72
|
||||
|
Shows the pop. Sets active true and adds pop to popService.stack
Parameters :
Returns :
void
|
| Public toggle | ||||
toggle(e?)
|
||||
|
Inherited from
PopComponent
|
||||
|
Defined in
PopComponent:63
|
||||
|
Shows if not active, hides if active.
Parameters :
Returns :
void
|
| Public cdr |
Type : ChangeDetectorRef
|
| confirmInput |
Type : string
|
Default value : ''
|
| Public elementRef |
Type : ElementRef
|
| Public focusEvent |
Type : EventEmitter<boolean>
|
Default value : new EventEmitter()
|
|
to focus safety word input |
| Public loader |
Type : LoaderService
|
| Public notificationService |
Type : NotificationsService
|
| Public popService |
Type : PopService
|
| Public symbol |
Type : SymbolService
|
| activated |
Default value : false
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:30
|
|
Flip and stays true after first show |
| clickEvent |
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:40
|
| Public elementRef |
Type : ElementRef
|
|
Inherited from
PopComponent
|
|
Defined in
PopComponent:55
|
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { LoaderService, NotificationsService, PopComponent, PopService, SymbolService } from '@ec.components/ui';
import Resource from 'ec.sdk/lib/resources/Resource';
import { ResourceService } from '../resource-config/resource.service';
/** This component can be used to delete all kinds of resources with a confirmation pop.
*
* ```html
* <ec-resource-pop (deleted)="runAway()" #pop></ec-resource-pop>
* <a (click)="pop.confirm(SomeResource)">LÖSCHEN!</a>
* ```
*
*/
@Component({
selector: 'ec-resource-delete-pop',
templateUrl: './resource-delete-pop.component.html',
})
export class ResourceDeletePopComponent extends PopComponent {
/* The current value of the confirmation input */
confirmInput = '';
@HostBinding('class') type = 'modal-wrapper ec-resource-delete-pop';
/** The question inside the pop */
@Input() question: string;
/** The label for confirmation */
@Input() yes: string;
/** The label for canceling */
@Input() no: string;
/** The resource to delete */
@Input() resource: Resource;
/** The relation where it happened */
@Input() relation: string;
/** If given, an input will be shown that expects the string to be entered before being able to press delete */
@Input() safetyWord: string;
/** Output that is after the deletion was successful. */
@Output() deleted: EventEmitter<any> = new EventEmitter();
/** to focus safety word input */
public focusEvent: EventEmitter<boolean> = new EventEmitter();
/** Injects SymbolService and LoaderService */
constructor(
public symbol: SymbolService,
public loader: LoaderService,
private resourceService: ResourceService,
public notificationService: NotificationsService,
public popService: PopService,
public elementRef: ElementRef,
public cdr: ChangeDetectorRef,
) {
super(popService, elementRef, cdr);
}
/** The delete method calls del() of the given resource. You can also pass a resource to delete directly to set it. */
delete(resource: Resource = this.resource) {
if (!resource) {
console.error('cannot delete: no resource given!');
return;
}
if (!this.canDelete()) {
console.warn('not confirmed!');
return;
}
const deletion = this.resourceService
.del(this.relation, this.resource)
.then((res) => {
this.notificationService.emit({
title: this.symbol.resolve('success.delete'),
type: 'success',
});
this.hide();
this.deleted.next(res);
})
.catch((error) => {
this.notificationService.emit({
title: this.symbol.resolve('error.delete'),
error,
});
});
this.loader.wait(deletion);
}
canDelete() {
return !this.safetyWord || this.safetyWord === this.confirmInput;
}
/** The confirm method sets a given resource and shows the confirmation pop. */
confirm(resource: Resource = this.resource) {
this.resource = resource;
this.show();
}
show() {
super.show();
setTimeout(() => {
this.focusEvent.emit(true);
});
}
hide() {
super.hide();
this.confirmInput = '';
}
}
<div class="modal" *ngIf="active">
<div class="modal__body">
<div class="is-padding-middle-3">
{{ question || ((!safetyWord ? 'resource.delete.question' : 'resource.delete.safety') | symbol) }}
<strong *ngIf="safetyWord">: {{ safetyWord }}</strong>
</div>
<div class="field-group" *ngIf="safetyWord">
<input [ecFocus]="focusEvent" id="confirmInput" type="text" class="input" [(ngModel)]="confirmInput" />
</div>
<ul class="nav" data-flex="center">
<li class="nav__item">
<a class="btn" (click)="delete()" [class.is-disabled]="!canDelete()">
{{ yes || ((!safetyWord ? 'resource.delete.yes' : 'resource.delete.confirm') | symbol) }}
</a>
</li>
<li class="nav__item">
<a class="btn btn_minor" (click)="hide()">
{{ no || ((!safetyWord ? 'resource.delete.no' : 'resource.delete.cancel') | symbol) }}
</a>
</li>
</ul>
</div>
</div>