Description
Short overall attendance statistics of all events within a given activity, beyond a fixed monthly period.
Example
|
Readonly
_columns
|
Type : unknown
|
Default value : computed(() =>
this.columns()
// hide periodFrom / periodTo as it is displayed in custom styling directly in the template
.filter((col) => !["periodFrom", "periodTo"].includes(col.id))
// start with most summative column, usually displayed right-most in table
.reverse(),
)
|
|
|
import {
Component,
ChangeDetectionStrategy,
computed,
input,
} from "@angular/core";
import { ActivityAttendance } from "../../model/activity-attendance";
import { FormFieldConfig } from "#src/app/core/common-components/entity-form/FormConfig";
import { CustomDatePipe } from "#src/app/core/basic-datatypes/date/custom-date.pipe";
import { DynamicComponentDirective } from "#src/app/core/config/dynamic-components/dynamic-component.directive";
/**
* Short overall attendance statistics of all events within a given activity, beyond a fixed monthly period.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-attendance-summary",
templateUrl: "./attendance-summary.component.html",
styleUrls: ["./attendance-summary.component.scss"],
imports: [CustomDatePipe, DynamicComponentDirective],
})
export class AttendanceSummaryComponent {
attendance = input<ActivityAttendance>();
forChild = input<string>();
columns = input<FormFieldConfig[]>([]);
readonly _columns = computed(() =>
this.columns()
// hide periodFrom / periodTo as it is displayed in custom styling directly in the template
.filter((col) => !["periodFrom", "periodTo"].includes(col.id))
// start with most summative column, usually displayed right-most in table
.reverse(),
);
}
@if (attendance()) {
<h4 class="summary-title" i18n="Attendance summary title">
Overall Attendance
</h4>
<p class="summary-period">
{{ attendance()?.periodFrom | customDate: "shortDate" }} -
{{ attendance()?.periodTo | customDate: "shortDate" }}
</p>
<table class="summary-table">
@for (col of _columns(); track col.id) {
<tr class="summary-row">
<td class="padding-small">{{ col.label }}:</td>
<td class="summary-cell">
<ng-container
[appDynamicComponent]="{
component: col.viewComponent,
config: {
id: col.id,
entity: attendance(),
config: col.additional,
},
}"
></ng-container>
</td>
</tr>
}
</table>
}
@use "sass:map";
@use "variables/sizes";
@use "variables/colors";
.summary-title {
margin-bottom: 0.25em;
font-size: 150%;
}
.summary-period {
color: colors.$hint-text;
font-size: 110%;
}
.summary-table {
border-spacing: 0 sizes.$small;
}
.summary-row {
background-color: colors.$grey-transparent;
}
.summary-cell {
font-size: 150%;
text-align: right;
padding: sizes.$small;
}
:host {
display: block;
}
Legend
Html element with directive