From 9f742cab78c0a9251f27b098cc7ca8d39572e86b Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Sun, 2 Feb 2025 18:52:37 +0300
Subject: [PATCH] feat: add base component for configuration card

---
 .../configuration-card.component.html         | 17 +++++++++
 .../configuration-card.component.ts           | 37 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/admin/configuration-card/configuration-card.component.html
 create mode 100644 src/components/admin/configuration-card/configuration-card.component.ts

diff --git a/src/components/admin/configuration-card/configuration-card.component.html b/src/components/admin/configuration-card/configuration-card.component.html
new file mode 100644
index 0000000..4424b41
--- /dev/null
+++ b/src/components/admin/configuration-card/configuration-card.component.html
@@ -0,0 +1,17 @@
+<mat-card style="margin: 16px; padding: 16px;">
+  <mat-card-header style="margin-bottom: 15px;">
+    <mat-card-title>{{ title }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <ng-content></ng-content>
+  </mat-card-content>
+  <mat-card-actions style="display: flex; justify-content: end; margin-top: 15px;">
+    @if (isLoading) {
+      <app-data-spinner/>
+    } @else {
+      <button mat-raised-button color="accent" [disabled]="!isSaveEnabled" (click)="onSave()">
+        Сохранить
+      </button>
+    }
+  </mat-card-actions>
+</mat-card>
diff --git a/src/components/admin/configuration-card/configuration-card.component.ts b/src/components/admin/configuration-card/configuration-card.component.ts
new file mode 100644
index 0000000..d5a637c
--- /dev/null
+++ b/src/components/admin/configuration-card/configuration-card.component.ts
@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {MatCardModule} from "@angular/material/card";
+import {MatButton} from "@angular/material/button";
+import {catchError, Observable, tap} from "rxjs";
+import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
+
+@Component({
+  selector: 'app-configuration-card',
+  imports: [
+    MatCardModule,
+    MatButton,
+    DataSpinnerComponent
+  ],
+  templateUrl: './configuration-card.component.html'
+})
+export class ConfigurationCardComponent {
+  @Input() title: string = '';
+  @Input() isSaveEnabled: boolean = false;
+  @Input() saveFunction!: () => Observable<any>;
+  @Output() onSaveFunction = new EventEmitter<any>();
+
+  protected isLoading: boolean = false;
+
+  onSave(): void {
+    this.isLoading = true;
+
+    const result = this.saveFunction().pipe(catchError(err => {
+        this.isLoading = false;
+        throw err;
+      }),
+      tap(_ => {
+        this.isLoading = false;
+      }));
+
+    this.onSaveFunction.emit(result);
+  }
+}