File
Metadata
| selector |
app-contact-person-card |
| styleUrls |
./contact-person-card.component.scss |
| templateUrl |
./contact-person-card.component.html |
Constructor
constructor(store: Store)
|
|
|
Parameters :
| Name |
Type |
Optional |
| store |
Store
|
No
|
|
import { Component, Input } from '@angular/core';
import { ContactPerson } from 'src/app/core/data/models/contact-person.model';
import { Store } from '@ngxs/store';
import { DeleteContactPerson } from 'src/app/core/ngxs/actions/contact-person.action';
@Component({
selector: 'app-contact-person-card',
templateUrl: './contact-person-card.component.html',
styleUrls: ['./contact-person-card.component.scss'],
})
export class ContactPersonCardComponent {
@Input() contactPerson: ContactPerson;
constructor(private store: Store) {}
onDelete() {
this.store.dispatch(new DeleteContactPerson(this.contactPerson.id));
}
}
<p class="subtitle-2 mb-2" data-cy="contact-name">
{{ contactPerson.forename + ' ' + contactPerson.surname }}
</p>
<div class="wrapper-contact-person-details">
<div>
<label class="label" data-cy="contact-companyname">Unternehmen</label>
<p class="subtitle-2" data-cy="contact-companyname-entry">{{ contactPerson.companyName }}</p>
</div>
<div>
<label class="label" data-cy="contact-department">Abteilung</label>
<p *ngIf="contactPerson.department; else missing" class="subtitle-2" data-cy="contact-department-entry">{{ contactPerson.department }}</p>
</div>
<div>
<label class="label" data-cy="contact-division">Unternehmensbereich</label>
<p class="subtitle-2" data-cy="contact-division-entry">{{ contactPerson.corporateDivision }}</p>
</div>
<div>
<label class="label" data-cy="contact-sector">Branche</label>
<p *ngIf="contactPerson.sector; else missing" class="subtitle-2" data-cy="contact-sector-entry">{{ contactPerson.sector }}</p>
</div>
<ng-template #missing>
<p class="subtitle-2" data-cy="missing">-</p>
</ng-template>
</div>
<div class="action-bar">
<a [routerLink]="contactPerson.id + '/edit'" nbPopover="Bearbeiten" nbPopoverTrigger="hint" status="primary" ghost nbButton data-cy="edit-person-button">
<nb-icon icon="edit-outline"></nb-icon>
</a>
<button (click)="onDelete()" nbPopover="Löschen" nbPopoverTrigger="hint" status="basic" ghost nbButton data-cy="delete-person-button">
<nb-icon icon="person-remove-outline"></nb-icon>
</button>
</div>
@import '../../../../sass/utils';
.wrapper-contact-person-details {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 10px;
@media screen and (max-width: 600px) {
grid-template-columns: repeat(2, 1fr);
}
}
:host {
width: 100%;
position: relative;
}
.action-bar {
position: absolute;
top: 0;
right: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 10px;
}
Legend
Html element with directive