KST-13: history admin features

src/app/core/service-detail/service-detail.component.html

@@ -5,10 +5,11 @@
         Szolgáltatás adatai
       </h5>
       <div>
-        <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.EDIT)'>
+        <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.EDIT_SERVICE)'>
           Szerkesztés
         </button>
-        <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.DELETE)'>
+        <button class='btn btn-link' *ngIf='isLoggedIn'
+                (click)='updateState(serviceDetailComponentState.DELETE_SERVICE)'>
           Törlés
         </button>
       </div>
@@ -16,7 +17,7 @@
     <div class='border-top mt-3 pt-3'>
       <div *ngIf='!isLoading'>
         <div class='bg-light p-3 mb-3' *ngIf='currentState!==serviceDetailComponentState.NONE'>
-          <div *ngIf='currentState===serviceDetailComponentState.DELETE'>
+          <div *ngIf='currentState===serviceDetailComponentState.DELETE_SERVICE'>
             <div>
               Biztos, hogy törölni szeretnéd ezt a szolgáltatást? A törléssel a kapcsolódó történeteket is törlöd!
             </div>
@@ -28,7 +29,7 @@
               <button class='btn btn-danger' (click)='deleteService()'>Törlés</button>
             </div>
           </div>
-          <div *ngIf='currentState===serviceDetailComponentState.EDIT'>
+          <div *ngIf='currentState===serviceDetailComponentState.EDIT_SERVICE'>
             <form [formGroup]='editServiceForm' (ngSubmit)='editService()'>
               <div class='mb-3'>
                 <label for='editServiceFormName' class='form-label'>Szolgáltatás neve</label>
@@ -69,19 +70,86 @@
     </div>
   </div>
   <div class='base_container bg-white w-100 mt-3' *ngIf='!isLoading'>
+
+    <div class='mb-3 d-flex justify-content-between align-items-center'>
       <h5 class='base_container_header'>
         Története
       </h5>
+      <button class='btn btn-link' *ngIf='isLoggedIn'
+              (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
+        Új hozzáadása
+      </button>
+    </div>
+
+
+    <div class='bg-light p-3 mb-3'
+         *ngIf='currentState!==serviceDetailComponentState.NONE &&
+         (currentState===serviceDetailComponentState.CREATE_HISTORY ||
+         currentState === serviceDetailComponentState.DELETE_HISTORY ||
+         currentState === serviceDetailComponentState.EDIT_HISTORY)'>
+      <div *ngIf='currentState===serviceDetailComponentState.DELETE_HISTORY'>
+        <div>
+          Biztos, hogy törölni szeretnéd ezt a történetet?
+        </div>
+        <div class='d-flex justify-content-end align-items-center mt-2'>
+          <button class='btn btn-secondary' (click)='updateState(serviceDetailComponentState.NONE)'
+                  [class.mr-1]='true'>
+            Mégse
+          </button>
+          <button class='btn btn-danger' (click)='deleteHistory()'>Törlés</button>
+        </div>
+      </div>
+      <div *ngIf='currentState===serviceDetailComponentState.EDIT_HISTORY'>
+        <form [formGroup]='editHistoryForm' (ngSubmit)='editHistory()'>
+          <div class='mb-3'>
+            <label for='editHistoryFormDescription' class='form-label'>Rövid leírás</label>
+            <input type='text' class='form-control' id='editHistoryFormDescription' aria-describedby='description'
+                   formControlName='description'>
+          </div>
+          <div class='d-flex justify-content-end align-items-center mt-2'>
+            <button class='btn btn-secondary' (click)='updateState(serviceDetailComponentState.NONE)'
+                    [class.mr-1]='true'>
+              Mégse
+            </button>
+            <button type='submit' class='btn btn-primary' [disabled]='!editHistoryForm.valid'>Véglegesítés</button>
+          </div>
+        </form>
+      </div>
+      <div *ngIf='currentState===serviceDetailComponentState.CREATE_HISTORY'>
+        <form [formGroup]='createHistoryForm' (ngSubmit)='createHistory()'>
+          <div class='mb-3'>
+            <label for='createHistoryFormDescription' class='form-label'>Rövid leírás</label>
+            <input type='text' class='form-control' id='createHistoryFormDescription' aria-describedby='description'
+                   formControlName='description'>
+          </div>
+          <div class='d-flex justify-content-end align-items-center mt-2'>
+            <button class='btn btn-secondary' (click)='updateState(serviceDetailComponentState.NONE)'
+                    [class.mr-1]='true'>
+              Mégse
+            </button>
+            <button type='submit' class='btn btn-primary' [disabled]='!createHistoryForm.valid'>Létrehozás</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <div class='border-top mt-3 pt-3' *ngIf='!service.history'>
       Nincs
     </div>
-    <div class='border-top mt-3 pt-3' *ngFor="let history of service.history; TrackBy: trackById">
+    <div class='border-top mt-3 pt-3' *ngFor='let history of service.history; TrackBy: trackById'>
       <div>
         {{history.createdAt}}
       </div>
       <div>
         {{history.description}}
       </div>
+
+      <button class='btn btn-link' *ngIf='isLoggedIn'
+              (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'>Szerkesztés
+      </button>
+      <button class='btn btn-link' *ngIf='isLoggedIn'
+              (click)='updateState(serviceDetailComponentState.DELETE_HISTORY, history.id)'>Törlés
+      </button>
     </div>
   </div>
   <div class='mt-3'>

src/app/core/service-detail/service-detail.component.ts

@@ -11,8 +11,11 @@ import { HistoriesService } from '../../services/histories.service';
 
 export enum ServiceDetailComponentState {
   NONE,
-  EDIT,
-  DELETE,
+  EDIT_SERVICE,
+  DELETE_SERVICE,
+  EDIT_HISTORY,
+  CREATE_HISTORY,
+  DELETE_HISTORY,
 }
 
 @Component({
@@ -28,6 +31,7 @@ export class ServiceDetailComponent implements OnInit {
   isLoggedIn = false;
   serviceDetailComponentState = ServiceDetailComponentState;
   currentState = ServiceDetailComponentState.NONE;
+  selectedHistory: History;
 
   createServiceForm = new FormGroup({
     name: new FormControl('', [Validators.required]),
@@ -41,6 +45,14 @@ export class ServiceDetailComponent implements OnInit {
     isOkay: new FormControl(false, [Validators.required]),
   });
 
+  createHistoryForm = new FormGroup({
+    description: new FormControl('', [Validators.required]),
+  });
+
+  editHistoryForm = new FormGroup({
+    description: new FormControl('', [Validators.required]),
+  });
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -72,12 +84,25 @@ export class ServiceDetailComponent implements OnInit {
 
   updateState(newState: ServiceDetailComponentState, id?: number): void {
     this.currentState = newState;
-    if (newState === ServiceDetailComponentState.EDIT) {
+    if (newState === ServiceDetailComponentState.EDIT_SERVICE) {
       this.editServiceForm.setValue({
         name: this.service.name,
         description: this.service.description,
         isOkay: this.service.isOkay,
       });
+    } else if (
+      newState === ServiceDetailComponentState.EDIT_HISTORY ||
+      newState === ServiceDetailComponentState.DELETE_HISTORY
+    ) {
+      const history = this.service.history.find((h) => h.id === id);
+      if (!history) {
+        this.currentState = ServiceDetailComponentState.NONE;
+        return;
+      }
+      this.selectedHistory = history;
+      this.editHistoryForm.setValue({
+        description: history.description,
+      });
     }
   }
 
@@ -92,4 +117,29 @@ export class ServiceDetailComponent implements OnInit {
       this.router.navigate(['/services']);
     });
   }
+
+  editHistory(): void {
+    this.historiesService
+      .updateHistory(this.selectedHistory.id, {
+        ...this.editHistoryForm.value,
+        serviceId: this.service.id,
+      })
+      .subscribe((c) => {
+        window.location.reload();
+      });
+  }
+
+  createHistory(): void {
+    this.historiesService
+      .createHistory({ ...this.createHistoryForm.value, serviceId: this.service.id })
+      .subscribe((c) => {
+        window.location.reload();
+      });
+  }
+
+  deleteHistory(): void {
+    this.historiesService.deleteHistoryById(this.selectedHistory.id).subscribe((c) => {
+      window.location.reload();
+    });
+  }
 }