feat: add component for skip update

src/components/admin/skip-update-schedule/skip-update-schedule.component.css

@@ -0,0 +1,19 @@
+.date-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.date-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+mat-form-field {
+  flex: 1;
+}
+
+button[mat-icon-button] {
+  margin-left: auto;
+}

src/components/admin/skip-update-schedule/skip-update-schedule.component.html

@@ -0,0 +1,51 @@
+<app-configuration-card [title]="'Список пропуска обновления расписания'"
+                        [isSaveEnabled]="validateSaveButton() && !isDisableAddNewItem()"
+                        [saveFunction]="saveFunction()"
+                        (onSaveFunction)="onSave($event)">
+
+  <div class="date-list">
+    @for (dateItem of dateItems; track $index) {
+      <div class="date-item">
+
+        <mat-form-field color="accent">
+          <mat-label>Диапазон дат</mat-label>
+          <mat-date-range-input [rangePicker]="rangePicker"
+                                [disabled]="dateItems[$index].date">
+            <input matStartDate [(ngModel)]="dateItem.start"
+                   placeholder="Начало"
+                   (dateChange)="validateDate($index)"
+                   [min]="CurrentDate">
+            <input matEndDate [(ngModel)]="dateItem.end"
+                   placeholder="Конец"
+                   (dateChange)="validateDate($index)"
+                   [min]="CurrentDate">
+          </mat-date-range-input>
+          <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
+          <mat-date-range-picker #rangePicker></mat-date-range-picker>
+        </mat-form-field>
+
+        <mat-form-field color="accent">
+          <mat-label>Конкретная дата</mat-label>
+          <input matInput [matDatepicker]="specificDatePicker"
+                 [(ngModel)]="dateItem.date"
+                 (dateChange)="validateDate($index)"
+                 [min]="CurrentDate"
+                 [disabled]="dateItems[$index].start != null || dateItems[$index].end != null">
+          <mat-datepicker-toggle matSuffix [for]="specificDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #specificDatePicker></mat-datepicker>
+        </mat-form-field>
+
+        <button mat-icon-button color="warn" (click)="removeDate($index)" style="height: 100%;">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
+    }
+  </div>
+
+  <button mat-raised-button color="accent"
+          [disabled]="isDisableAddNewItem()"
+          (click)="addDate()">
+    <mat-icon>add</mat-icon>
+    Добавить строку
+  </button>
+</app-configuration-card>

src/components/admin/skip-update-schedule/skip-update-schedule.component.ts

@@ -0,0 +1,93 @@
+import {Component} from '@angular/core';
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatInput} from "@angular/material/input";
+import {FormsModule} from "@angular/forms";
+import {ConfigurationCardComponent} from "@component/admin/configuration-card/configuration-card.component";
+import {MatButtonModule} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+import {ScheduleService} from "@api/v1/configuration/schedule.service";
+import CronUpdateSkip from "@model/cronUpdateSkip";
+import {DateOnly} from "@model/dateOnly";
+import {addDays} from "@progress/kendo-date-math";
+import {Observable} from "rxjs";
+
+@Component({
+  selector: 'app-skip-update-schedule',
+  imports: [
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatInput,
+    FormsModule,
+    ConfigurationCardComponent,
+    MatButtonModule,
+    MatIcon
+  ],
+  templateUrl: './skip-update-schedule.component.html',
+  styleUrl: './skip-update-schedule.component.css',
+  providers: [ScheduleService]
+})
+export class SkipUpdateScheduleComponent {
+  dateItems: { start?: Date, end?: Date, date?: Date }[] = [];
+  dateItemsBefore: { start?: Date, end?: Date, date?: Date }[] = [];
+
+  constructor(private api: ScheduleService) {
+    api.getCronUpdateSkip().subscribe(data => {
+      this.dateItems = data.map(x => <{ start?: Date, end?: Date, date?: Date }>{
+        start: x.start?.date,
+        end: x.end?.date,
+        date: x.date?.date
+      });
+      if (this.dateItems.length == 0)
+        this.addDate();
+
+      this.dateItemsBefore = JSON.parse(JSON.stringify(this.dateItems));
+    });
+  }
+
+  addDate(): void {
+    this.dateItems.push({start: undefined, end: undefined, date: undefined});
+  }
+
+  removeDate(index: number): void {
+    this.dateItems.splice(index, 1);
+  }
+
+  validateDate(index: number): void {
+    const item = this.dateItems[index];
+
+    if (item.start && item.start < this.CurrentDate)
+      item.start = undefined;
+    if (item.end && item.end < this.CurrentDate)
+      item.end = undefined;
+    if (item.date && item.date < this.CurrentDate)
+      item.date = undefined;
+  }
+
+  isDisableAddNewItem() {
+    return this.dateItems.some(item => (!item.start || !item.end) && !item.date);
+  }
+
+  validateSaveButton(): boolean {
+    return this.dateItems.some(item =>
+      (item.start && item.end) || item.date
+    ) && JSON.stringify(this.dateItems) != JSON.stringify(this.dateItemsBefore);
+  }
+
+  saveFunction() {
+    return () => this.api.postCronUpdateSkip(this.dateItems.map(x =>
+      <CronUpdateSkip>{
+        start: x.start ? new DateOnly(x.start) : undefined,
+        end: x.end ? new DateOnly(x.end) : undefined,
+        date: x.date ? new DateOnly(x.date) : undefined
+      }));
+  }
+
+  onSave(event: Observable<any>): void {
+    event.subscribe(_ => {
+      this.dateItemsBefore = JSON.parse(JSON.stringify(this.dateItems));
+    });
+  }
+
+  protected CurrentDate: Date = addDays(new Date(), -1);
+}