File
Implements
Metadata
| selector |
app-audit-card |
| styleUrls |
./audit-card.component.scss |
| templateUrl |
./audit-card.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Accessors
|
|
|
Constructor
constructor(nbMenuService: NbMenuService, store: Store)
|
|
|
Parameters :
| Name |
Type |
Optional |
| nbMenuService |
NbMenuService
|
No
|
| store |
Store
|
No
|
|
|
auditStatus
|
Default value : AuditStatus
|
|
|
|
items
|
Type : NbMenuItem[]
|
Default value : [
{
title: 'Bearbeiten',
icon: 'edit-outline',
data: MenuOptions.Edit,
},
{ title: 'Löschen', icon: 'trash-outline', data: MenuOptions.Delete },
]
|
|
|
Accessors
|
contactPerson
|
getcontactPerson()
|
|
|
import { Component, OnInit, Input } from '@angular/core';
import { NbMenuService, NbMenuItem, NbMenuBag } from '@nebular/theme';
import { map, filter } from 'rxjs/operators';
import { Store } from '@ngxs/store';
import * as shortid from 'shortid';
import { Audit, AuditStatus } from 'src/app/core/data/models/audit.model';
import { DeleteAudit } from 'src/app/core/ngxs/actions/audit.actions';
import { Navigate } from 'src/app/core/ngxs/actions/router.actions';
enum MenuOptions {
Edit,
Delete,
}
@Component({
selector: 'app-audit-card',
templateUrl: './audit-card.component.html',
styleUrls: ['./audit-card.component.scss'],
})
export class AuditCardComponent implements OnInit {
@Input() audit: Audit;
nbMenuId: string;
auditStatus = AuditStatus;
items: NbMenuItem[] = [
{
title: 'Bearbeiten',
icon: 'edit-outline',
data: MenuOptions.Edit,
},
{ title: 'Löschen', icon: 'trash-outline', data: MenuOptions.Delete },
];
constructor(private nbMenuService: NbMenuService, private store: Store) {}
get contactPerson() {
return this.audit.contactPersons ? this.audit.contactPersons[0] : null;
}
ngOnInit() {
this.nbMenuId = shortid.generate();
this.nbMenuService
.onItemClick()
.pipe(
filter(({ tag }) => tag === this.nbMenuId),
map((menuBag: NbMenuBag) => menuBag.item.data),
)
.subscribe((option: MenuOptions) => {
switch (option) {
case MenuOptions.Delete:
this.store.dispatch(new DeleteAudit(this.audit.id));
break;
case MenuOptions.Edit:
this.store.dispatch(new Navigate(`/audits/${this.audit.id}/edit`));
}
});
}
}
<nb-card [routerLink]="[audit.id + '/interviews']" data-cy="audit-card">
<ng-container [ngSwitch]="audit.status">
<div nbPopoverPlacement="left" nbPopover="Geplant" nbPopoverTrigger="hint" *ngSwitchCase="auditStatus.Planned" class="banner-status banner-status-is-planned" data-cy="audit-status"></div>
<div nbPopoverPlacement="left" nbPopover="In Bearbeitung" nbPopoverTrigger="hint" *ngSwitchCase="auditStatus.Active" class="banner-status banner-status-in-action" data-cy="audit-status"></div>
<div nbPopoverPlacement="left" nbPopover="Abgeschlossen" nbPopoverTrigger="hint" *ngSwitchCase="auditStatus.Finished" class="banner-status banner-status-is-finished" data-cy="audit-status"></div>
<div nbPopoverPlacement="left" nbPopover="Abgebrochen" nbPopoverTrigger="hint" *ngSwitchCase="auditStatus.Cancelled" class="banner-status banner-status-is-canceled" data-cy="audit-status"></div>
</ng-container>
<nb-card-header>
<div data-cy="audit-short-infos">
{{ audit.name }}
<span *ngIf="contactPerson">| {{ contactPerson.companyName }} </span>
<br />
<span class="label" data-cy="audit-dates"> {{ audit.startDate | date: 'dd.MM.yyyy' }} - {{ audit.endDate ? (audit.endDate | date: 'dd.MM.yyyy') : 'TBD' }}</span>
</div>
<div></div>
<button (click)="$event.stopPropagation()" nbContextMenuPlacement="left" nbContextMenuTrigger="focus" nbButton [nbContextMenu]="items" [nbContextMenuTag]="nbMenuId" data-cy="audit-options">
<nb-icon icon="more-vertical-outline"></nb-icon>
</button>
</nb-card-header>
</nb-card>
@import '../../../../sass/utils';
@import '../../../../../node_modules/@nebular/theme/styles/theming';
@import '../../../../../node_modules/@nebular/theme/styles/themes/default';
nb-card-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0 10px;
}
nb-card {
position: relative;
margin-bottom: 10px;
cursor: pointer;
}
.banner-status {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 12px;
-webkit-box-shadow: 3px 0px 3px 0px rgba(44, 51, 73, 0.1);
-moz-box-shadow: 3px 0px 3px 0px rgba(44, 51, 73, 0.1);
box-shadow: 3px 0px 3px 0px rgba(44, 51, 73, 0.1);
border-bottom-left-radius: nb-theme(card-border-radius);
border-top-left-radius: nb-theme(card-border-radius);
}
.banner-status-is-planned {
background-color: nb-theme(color-basic-100);
}
.banner-status-in-action {
background-color: nb-theme(color-warning-default);
}
.banner-status-is-finished {
background-color: nb-theme(color-success-default);
}
.banner-status-is-canceled {
background-color: nb-theme(color-danger-default);
}
a {
text-decoration: none;
}
Legend
Html element with directive