|
Protected
Readonly
comingSoonDialog
|
Type : unknown
|
Default value : inject(ComingSoonDialogService)
|
|
|
|
Protected
Readonly
getEntityRuntimeRoute
|
Type : unknown
|
Default value : getEntityRuntimeRoute
|
|
|
import {
ChangeDetectionStrategy,
Component,
inject,
Signal,
} from "@angular/core";
import { ComingSoonDialogService } from "#src/app/features/coming-soon/coming-soon-dialog.service";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
import { RouterLink } from "@angular/router";
import { ViewTitleComponent } from "#src/app/core/common-components/view-title/view-title.component";
import { RouteTarget } from "#src/app/route-target";
import { EntityConstructor } from "#src/app/core/entity/model/entity";
import { DisableEntityOperationDirective } from "#src/app/core/permissions/permission-directive/disable-entity-operation.directive";
import { AttendanceService } from "../../attendance.service";
import { getEntityRuntimeRoute } from "#src/app/core/entity/entity-config.service";
@RouteTarget("AttendanceManager")
@Component({
selector: "app-attendance-manager",
templateUrl: "./attendance-manager.component.html",
styleUrls: ["./attendance-manager.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
MatCardModule,
MatButtonModule,
RouterLink,
ViewTitleComponent,
DisableEntityOperationDirective,
],
})
export class AttendanceManagerComponent {
protected readonly comingSoonDialog = inject(ComingSoonDialogService);
private readonly attendanceService = inject(AttendanceService);
activityTypes: Signal<EntityConstructor[]> =
this.attendanceService.activityTypes;
eventTypes: Signal<EntityConstructor[]> = this.attendanceService.eventTypes;
protected readonly getEntityRuntimeRoute = getEntityRuntimeRoute;
}
<app-view-title
i18n="
Heading for Attendance Register|The heading for the view showing the
Attendance Register
"
>
Managing Attendance
</app-view-title>
<div class="cards-wrapper">
<mat-card appearance="raised">
<mat-card-header>
<mat-card-title i18n="Record attendance title">
Record Attendance
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p i18n="Record attendance content">
Record attendance for an activity on a certain day. Optimized for
smartphones.
</p>
<button
mat-raised-button
class="full-width"
routerLink="/attendance/add-day"
*appDisabledEntityOperation="{
entity: eventTypes(),
operation: 'create',
}"
i18n="Record attendance button"
>
Record
</button>
</mat-card-content>
</mat-card>
<mat-card appearance="raised">
<mat-card-header>
<mat-card-title i18n="Manage Activities title">
Recurring Activities
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p i18n="Manage Activities content">
Manage "recurring activities" for which you regularly record attendance.
You can assign participants and users to these activities and analyze
their attendance across time.
</p>
<div class="flex-column gap-small">
@for (activity of activityTypes(); track activity.ENTITY_TYPE) {
<button
mat-raised-button
class="full-width"
[routerLink]="getEntityRuntimeRoute(activity)"
*appDisabledEntityOperation="{
entity: activity,
operation: 'read',
}"
>
{{ activity.labelPlural }}
</button>
} @empty {
<span class="no-types-hint" i18n
>No record types have been set up as "recurring activities"
yet.</span
>
}
</div>
</mat-card-content>
</mat-card>
<mat-card appearance="raised" disabled>
<mat-card-header>
<mat-card-title i18n="Monthly attendance title">
Monthly Attendance
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p i18n="Monthly attendance content">
Document attendance totals for a whole month that were collected on
paper.
</p>
<button
(click)="comingSoonDialog.open('monthly-attendance')"
mat-stroked-button
i18n="Enter attendance button"
>
Document Month
</button>
</mat-card-content>
</mat-card>
</div>
@use "variables/sizes";
@use "variables/colors";
@use "mixins/grid-layout";
@use "typography/custom-typography";
.cards-wrapper {
margin-top: sizes.$large;
@include grid-layout.adaptive($min-block-width: 250px);
}
.mat-mdc-card[disabled] {
background-color: colors.$disabled-transparent;
}
mat-card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.no-types-hint {
font-style: italic;
color: colors.$hint-text;
}
Legend
Html element with directive