feat: Add creating/editing countries

frontend/src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { AgentListGuard } from './auth/agent-list.guard';
 import { AuthComponent } from './auth/auth.component';
 import { AuthGuard } from './auth/auth.guard';
 import { CountryDetailComponent } from './country/country-detail.component';
+import { CountryEditComponent } from './country/country-edit.component';
 import { CountryListComponent } from './country/country-list.component';
 import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
@@ -45,6 +46,8 @@ const routes: Routes = [
   { path: 'agents', component: AgentListComponent ,
         canActivate: [AgentListGuard],
       },
+      { path: 'country/edit/:id', component: CountryEditComponent },
+      { path: 'country/create', component: CountryEditComponent },
       { path: 'countries', component: CountryListComponent },
       { path: 'country/:id', component: CountryDetailComponent },
       { path: 'mission/:id', component: MissionDetailComponent },

frontend/src/app/app.module.ts

@@ -27,6 +27,7 @@ import { AssignmentDetailComponent } from './assignment/assignment-detail.compon
 import { AuthComponent } from './auth/auth.component';
 import { CountryDetailComponent } from './country/country-detail.component';
 import { CountryListComponent } from './country/country-list.component';
+import { CountryEditComponent } from './country/country-edit.component';
 import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
 import { MissionDetailComponent } from './mission/mission-detail.component';
@@ -46,6 +47,7 @@ import {AssignmentListComponent} from "./assignment/assignment-list.component";
     EditAgentComponent,
     CountryListComponent,
     CountryDetailComponent,
+    CountryEditComponent,
     MissionListComponent,
     MissionDetailComponent,
     HomeComponent,

frontend/src/app/country/country-detail.component.html

@@ -18,8 +18,7 @@
 <div *ngIf="state === requestState.ERROR">
   Error occured: {{ errorMessage }}
 </div>
-<div *ngIf="country && state === requestState.SUCCESS" class="main-container">
-
+<div *ngIf="country && state === requestState.SUCCESS" class="main-container px-4">
 
   <div *ngIf="!editing">
     <h1>{{ country.name}}</h1>
@@ -90,7 +89,7 @@
     </mat-form-field>
 
   </div>
-  <button color="accent" *ngIf="!editing" mat-fab (click)="setEditing(true)" class="!fixed right-8 bottom-20"
+  <button color="accent" mat-fab routerLink="../edit/{{ country.id }}" class="!fixed right-8 bottom-20"
     aria-label="Example icon button with a delete icon">
     <mat-icon>edit</mat-icon>
   </button>

frontend/src/app/country/country-edit.component.html

+<mat-toolbar *ngIf="country" color="primary" class="flex flex-row">
+  <button mat-icon-button [routerLink]="country.id ? ['/auth/country/', country.id] : '/auth/countries'" aria-label="Cancel editing">
+    <mat-icon>close</mat-icon>
+  </button>
+
+  <span *ngIf="this.creatingNew">Create country</span>
+  <span *ngIf="!this.creatingNew">Edit country</span>
+
+  <span class="flex-1"></span>
+
+  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item>Delete</button>
+  </mat-menu>
+</mat-toolbar>
+
+<div *ngIf="country" class="main-container">
+  <form [formGroup]="edit" class="flex flex-col px-4">
+
+    <mat-form-field>
+      <mat-label>Name</mat-label>
+      <input matInput formControlName="name" [(ngModel)]="country.name" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Code</mat-label>
+      <input matInput formControlName="code" [(ngModel)]="country.code">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Demographics</mat-label>
+      <textarea matInput formControlName="demographics" [(ngModel)]="country.demographics"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Geography</mat-label>
+      <textarea matInput formControlName="geography" [(ngModel)]="country.geography"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Communications</mat-label>
+      <textarea matInput formControlName="communications" [(ngModel)]="country.communications"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Government</mat-label>
+      <textarea matInput formControlName="government" [(ngModel)]="country.government"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Economy</mat-label>
+      <textarea matInput formControlName="economy" [(ngModel)]="country.economy"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Military</mat-label>
+      <textarea matInput formControlName="military" [(ngModel)]="country.military"></textarea>
+    </mat-form-field>
+
+    <!--  -->
+
+  </form>
+
+  <mat-divider></mat-divider>
+
+  <button color="accent" mat-fab class="!fixed right-8 bottom-20" aria-label="Save country details"
+    disabled="{{ !edit.valid }}" (click)="save()">
+    <mat-icon>done</mat-icon>
+  </button>
+</div>

frontend/src/app/country/country-edit.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { RequestState } from '../request-state.enum';
+import { Country } from './country.interface';
+
+@Component({
+  selector: 'country-edit',
+  templateUrl: 'country-edit.component.html',
+})
+export class CountryEditComponent implements OnInit {
+  country: Country = {
+    id: '',
+    code: '',
+    name: '',
+    demographics: '',
+    geography: '',
+    communications: '',
+    government: '',
+    economy: '',
+    military: '',
+    missionsIds: []
+  };
+
+  state: RequestState = RequestState.SUCCESS;
+  errorMessage: String = '';
+  edit = new FormGroup({
+    name: new FormControl('', [
+      Validators.pattern(/[a-zA-Z]{3,}/),
+      Validators.required,
+    ]),
+    code: new FormControl(''),
+    demographics: new FormControl(''),
+    geography: new FormControl(''),
+    communications: new FormControl(''),
+    government: new FormControl(''),
+    economy: new FormControl(''),
+    military: new FormControl(''),
+  });
+  creatingNew = false;
+
+  constructor(
+    private httpClient: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  async ngOnInit() {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.creatingNew = false;
+      try {
+        this.state = RequestState.PENDING;
+        this.country = await firstValueFrom(
+          this.httpClient.get<Country>(`${environment.apiUrl}/countries/${id}`)
+        );
+        this.country.id = id
+        this.edit.patchValue({
+          name: this.country.name,
+          code: this.country.code ?? '',
+          demographics: this.country.demographics ?? '',
+          geography: this.country.geography ?? '',
+          communications: this.country.communications ?? '',
+          government: this.country.government ?? '',
+          economy: this.country.economy ?? '',
+          military: this.country.military ?? '',
+        });
+
+        this.state = RequestState.SUCCESS;
+      } catch (error) {
+        this.errorMessage = 'Loading agent failed';
+        this.state = RequestState.ERROR;
+      }
+    } else {
+      this.creatingNew = true;
+    }
+  }
+
+  async save() {
+    this.country.name = this.edit.get('name')?.value;
+    this.country.code = this.edit.get('code')?.value;
+    this.country.demographics = this.edit.get('demographics')?.value;
+    this.country.geography = this.edit.get('geography')?.value;
+    this.country.communications = this.edit.get('communications')?.value;
+    this.country.government = this.edit.get('government')?.value;
+    this.country.economy = this.edit.get('economy')?.value;
+    this.country.military = this.edit.get('military')?.value;
+
+    if (this.creatingNew) {
+      this.country = await firstValueFrom(
+        this.httpClient.post<Country>(`${environment.apiUrl}/countries`, this.country)
+      );
+      this.router.navigate(['auth', 'countries']);
+    } else {
+      await firstValueFrom(
+        this.httpClient.put<Country>(
+          `${environment.apiUrl}/countries/${this.country.id}`,
+          this.country
+        )
+      );
+      this.router.navigate(['auth', 'country', this.country.id]);
+    }
+  }
+}

frontend/src/app/country/country-list.component.html

@@ -10,7 +10,7 @@
     </mat-list-item>
   </mat-action-list>
 
-  <button mat-fab color="accent" class="!fixed right-8 bottom-20" aria-label="Example icon button with a delete icon">
+  <button mat-fab color="accent" class="!fixed right-8 bottom-20" routerLink="../country/create" aria-label="Create new country">
     <mat-icon>add</mat-icon>
   </button>
 </div>