feat: add a header for the table

src/components/table-header/table-header.component.css

@@ -0,0 +1,73 @@
+.nav-button button:nth-child(1) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-button button:nth-child(2) {
+  border-radius: 0;
+}
+
+.nav-button button:nth-child(3) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.nav-button button:not(:last-child) {
+  border-right: 1px solid var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
+}
+
+.nav-button mat-icon {
+  transform: scale(1.2);
+}
+
+.app-table-header {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 15px;
+  grid-row-gap: 10px;
+  align-items: center;
+}
+
+.app-table-header div {
+  display: flex;
+  align-items: center;
+}
+
+.app-table-header div mat-icon {
+  margin: 0;
+}
+
+.app-table-header div:nth-child(1) {
+  grid-area: 1 / 1 / 2 / 2;
+  justify-content: left;
+}
+
+.app-table-header div:nth-child(2) {
+  grid-area: 1 / 2 / 2 / 4;
+  justify-content: center;
+}
+
+.app-table-header div:nth-child(3) {
+  grid-area: 1 / 4 / 2 / 5;
+  justify-content: right;
+}
+
+@media screen and (max-width: 782px) {
+  .app-table-header {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+
+  .app-table-header div:nth-child(1) {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .app-table-header div:nth-child(2) {
+    grid-area: 2 / 1 / 3 / 3;
+  }
+
+  .app-table-header div:nth-child(3) {
+    grid-area: 1 / 2 / 2 / 3;
+  }
+}

src/components/table-header/table-header.component.html

@@ -0,0 +1,22 @@
+<div class="app-table-header">
+  <div class="mat-h4">
+    Расписание занятий
+  </div>
+  <div class="mat-h3">
+    Неделя: {{ startWeek | date:"shortDate" }}
+    -
+    {{ addDays(startWeek, 6) | date: "shortDate" }}&nbsp;
+    <span [matBadge]="currentWeek()" matBadgeOverlap="false"></span>
+  </div>
+  <div class="nav-button mat-h5">
+    <button mat-flat-button (click)="weekEvent.emit(false)" [disabled]="!canBefore()">
+      <mat-icon fontIcon="navigate_before"/>
+    </button>
+    <button mat-flat-button style="min-width: auto;" (click)="weekEvent.emit(null)">
+      <mat-icon fontIcon="calendar_month"/>
+    </button>
+    <button mat-flat-button (click)="weekEvent.emit(true)">
+      <mat-icon fontIcon="navigate_next"/>
+    </button>
+  </div>
+</div>

src/components/table-header/table-header.component.ts

@@ -0,0 +1,35 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {addDays, weekInYear} from "@progress/kendo-date-math";
+import {MatButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+import {MatBadge} from "@angular/material/badge";
+
+@Component({
+  selector: 'app-table-header',
+  standalone: true,
+  imports: [
+    MatBadge,
+    MatIcon,
+    MatButton,
+    DatePipe
+  ],
+  templateUrl: './table-header.component.html',
+  styleUrl: './table-header.component.css'
+})
+
+export class TableHeaderComponent {
+  @Input() startWeek!: Date;
+  @Input() startTerm!: Date;
+  @Output() weekEvent: EventEmitter<boolean | null> = new EventEmitter<boolean | null>();
+
+  currentWeek(): number {
+    return (weekInYear(this.startWeek) - weekInYear(this.startTerm)) + 1;
+  }
+
+  canBefore(): boolean {
+    return this.currentWeek() > 1;
+  }
+
+  protected readonly addDays = addDays;
+}