feat: add base component for configuration card

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>

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);
+  }
+}