admin comment functionality

src/app/admin/services/admin.service.ts

@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export interface AdminComment {
+  recipyId: string;
+  text: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminService {
+  url = `https://cookster-12ac8-default-rtdb.firebaseio.com/admin`;
+
+  constructor(private http: HttpClient) {}
+
+  addAdminComment(comment: AdminComment): Observable<any> {
+    return this.http.post<any>(`${this.url}.json`, comment);
+  }
+}

src/app/recipies/components/recipy-preview/recipy-preview.component.html

@@ -425,12 +425,16 @@ <h4>{{ item.key }}</h4>
     <div class="photo-container" *ngIf="_clonedRecipy.photo">
       <app-image [imagePath]="_clonedRecipy.photo"></app-image>
     </div>
-    <div *ngIf="isUserAdmin">
+    <div *ngIf="isUserAdmin" class="margin-block-medium">
       <mat-checkbox
           [ngModel]="recipy.isCheckedAndApproved"
           (ngModelChange)="onisCheckedAndApprovedClicked()"
         >Рецепт перевірений на практиці</mat-checkbox>
     </div>
+    <div *ngIf="isUserAdmin" class="margin-block-medium">
+      <button mat-flat-button
+      class="action-button" (click)="onAddAdminComment()">Додати коментар</button>
+    </div>
   </div>
   <button
     mat-flat-button

src/app/recipies/components/recipy-preview/recipy-preview.component.scss

@@ -227,6 +227,9 @@
 
 .mobile-details-wrapper {
   padding: 10px;
+  & > div:last-of-type {
+    margin-bottom: 30px;
+  }
 }
 
 .add-ingredient-button {

src/app/recipies/components/recipy-preview/recipy-preview.component.ts

@@ -1,3 +1,4 @@
+import { AdminService } from './../../../admin/services/admin.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DatePipe, Location } from '@angular/common';
 import {
@@ -86,7 +87,8 @@ export class RecipyPreviewComponent implements OnInit, OnDestroy, OnChanges {
     private calendarService: CalendarService,
     private location: Location,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private adminService: AdminService
   ) {
     this.isPreviousRoute$ = this.store.pipe(
       select(getPreviousRoute),
@@ -562,4 +564,14 @@ export class RecipyPreviewComponent implements OnInit, OnDestroy, OnChanges {
     } as Recipy;
     this.store.dispatch(new fromRecipiesActions.UpdateRecipyAction(updatedRecipy));
   }
+
+  onAddAdminComment(){
+    this.dialogsService.openTextInputDialog('Коментар:').pipe(take(1)).subscribe(res => {
+      if(res && 'id' in this.recipy){
+        this.adminService.addAdminComment({recipyId: this.recipy.id, text: res}).pipe(take(1)).subscribe(res => {
+          console.log('comment added')
+        })
+      }
+    })
+  }
 }

src/styles.scss

@@ -359,7 +359,6 @@ button.mat-menu-item {
   justify-content: space-between;
   width: 100%;
   align-items: center;
-
 }
 
 .ingredient-name {
@@ -449,7 +448,7 @@ button.mat-menu-item {
     height: 80vh;
   }
 
-  .page-container{
+  .page-container {
     padding-top: 9vh;
   }
 }
@@ -477,3 +476,7 @@ button.mat-menu-item {
     font-weight: 500 !important;
   }
 }
+
+.margin-block-medium {
+  margin-block: 20px;
+}