WIP: edit org personnel and tacticals

web/src/app/org-detail/org-detail.component.html

@@ -16,7 +16,7 @@ <h1>{{ (organization$ | async)! | orgTitle }}</h1>
       mat-mini-fab
       color="accent"
       aria-label="Save Edits"
-      (click)="editMode = false"
+      (click)="save(); editMode = false"
     >
       <mat-icon>save</mat-icon>
     </button>
@@ -38,7 +38,13 @@ <h1>{{ (organization$ | async)! | orgTitle }}</h1>
     <mat-card-content>
       <app-personnel-view
         [personnel]="(organization$ | async)?.personnel ?? []"
+        *ngIf="!editMode; else editPersonnel"
       />
+      <ng-template #editPersonnel>
+        <app-personnel-edit
+          [personnel]="(organization$ | async)?.personnel ?? []"
+        />
+      </ng-template>
     </mat-card-content>
   </mat-card>
 
@@ -67,7 +73,13 @@ <h1>{{ (organization$ | async)! | orgTitle }}</h1>
     <mat-card-content>
       <app-tactical-view
         [tacticalCallsigns]="(organization$ | async)?.tacticalCallsigns ?? []"
+        *ngIf="!editMode; else editTactical"
       />
+      <ng-template #editTactical>
+        <app-tactical-edit
+          [tacticalCallsigns]="(organization$ | async)?.tacticalCallsigns ?? []"
+        />
+      </ng-template>
     </mat-card-content>
   </mat-card>
 </ng-template>

web/src/app/org-detail/org-detail.component.scss

@@ -12,7 +12,3 @@ button[mat-mini-fab] {
 mat-card {
   max-width: 500px;
 }
-
-table.personnel {
-  margin-bottom: 2em;
-}

web/src/app/org-detail/org-detail.component.ts

@@ -1,16 +1,25 @@
-import { Component, Input, inject } from '@angular/core';
+import { Component, Input, ViewChild, inject } from '@angular/core';
 import { BehaviorSubject, Observable, combineLatest, mergeMap } from 'rxjs';
 
+import { Personnel, TacticalCallsign } from '../datatypes/organization';
 import { Ics217Service } from '../ics217.service';
 import { OrganizationsService } from '../organizations.service';
 import { UserInfoService } from '../user-info.service';
+import { PersonnelEditComponent } from './personnel-edit/personnel-edit.component';
+import { TacticalEditComponent } from './tactical-edit/tactical-edit.component';
 
 @Component({
   selector: 'app-org-detail',
   templateUrl: './org-detail.component.html',
   styleUrls: ['./org-detail.component.scss'],
 })
 export class OrgDetailComponent {
+  @ViewChild(PersonnelEditComponent)
+  personnelEditComponent!: PersonnelEditComponent;
+
+  @ViewChild(TacticalEditComponent)
+  tacticalEditComponent!: TacticalEditComponent;
+
   private organizationsService = inject(OrganizationsService);
   private ics217Service = inject(Ics217Service);
   private userInfoService = inject(UserInfoService);
@@ -39,4 +48,19 @@ export class OrgDetailComponent {
   set orgSlug(orgSlug: string) {
     this.orgSlug$.next(orgSlug);
   }
+
+  save() {
+    if (
+      !this.tacticalEditComponent.validate() ||
+      !this.personnelEditComponent.validate()
+    ) {
+      return;
+    }
+
+    const newPersonnel: Personnel[] = this.personnelEditComponent.getFormData();
+    const newTacticalCalls: TacticalCallsign[] =
+      this.tacticalEditComponent.getFormData();
+    console.log(newPersonnel);
+    console.log(newTacticalCalls);
+  }
 }

web/src/app/org-detail/org-detail.module.ts

@@ -3,22 +3,38 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 
 import { CoreModule } from '../core/core.module';
 import { OrgDetailRoutingModule } from './org-detail-routing.module';
 import { OrgDetailComponent } from './org-detail.component';
+import { PersonnelEditComponent } from './personnel-edit/personnel-edit.component';
 import { PersonnelViewComponent } from './personnel-view/personnel-view.component';
+import { TacticalEditComponent } from './tactical-edit/tactical-edit.component';
 import { TacticalViewComponent } from './tactical-view/tactical-view.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  PersonnelEditRowComponent
+} from './personnel-edit/personnel-edit-row/personnel-edit-row.component';
 
 @NgModule({
-  declarations: [OrgDetailComponent, PersonnelViewComponent, TacticalViewComponent],
+  declarations: [
+    OrgDetailComponent,
+    PersonnelViewComponent,
+    TacticalViewComponent,
+    PersonnelEditComponent,
+    TacticalEditComponent,
+  ],
   imports: [
     CommonModule,
     CoreModule,
     OrgDetailRoutingModule,
     MatButtonModule,
     MatIconModule,
     MatCardModule,
-  ],
+    MatInputModule,
+    ReactiveFormsModule,
+    PersonnelEditRowComponent
+  ]
 })
 export class OrgDetailModule {}

web/src/app/org-detail/personnel-edit/personnel-edit-row/personnel-edit-row.component.html

@@ -0,0 +1,20 @@
+<div class="personEditRow" [formGroup]="form">
+  <div>
+    <mat-form-field>
+      <mat-label>Title</mat-label>
+      <input matInput [formControlName]="person.title" />
+    </mat-form-field>
+  </div>
+  <div>
+    <mat-form-field>
+      <mat-label>Name</mat-label>
+      <input matInput [formControlName]="person.name" />
+    </mat-form-field>
+  </div>
+  <div>
+    <mat-form-field>
+      <mat-label>Callsign</mat-label>
+      <input matInput [formControlName]="person.callsign" />
+    </mat-form-field>
+  </div>
+</div>

web/src/app/org-detail/personnel-edit/personnel-edit-row/personnel-edit-row.component.scss

@@ -0,0 +1,4 @@
+.personEditRow {
+  display: flex;
+  flex-direction: row;
+}

web/src/app/org-detail/personnel-edit/personnel-edit-row/personnel-edit-row.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonnelEditRowComponent } from './personnel-edit-row.component';
+
+describe('PersonnelEditRowComponent', () => {
+  let component: PersonnelEditRowComponent;
+  let fixture: ComponentFixture<PersonnelEditRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PersonnelEditRowComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PersonnelEditRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/org-detail/personnel-edit/personnel-edit-row/personnel-edit-row.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Personnel } from '../../../datatypes/organization';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'app-personnel-edit-row',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './personnel-edit-row.component.html',
+  styleUrl: './personnel-edit-row.component.scss'
+})
+export class PersonnelEditRowComponent {
+  @Input() person!: Personnel;
+  @Input() index!: number;
+  @Input() form!: FormGroup;
+}

web/src/app/org-detail/personnel-edit/personnel-edit.component.html

@@ -0,0 +1,5 @@
+<div [formGroup]="personnelForm">
+  <div *ngFor="let person of personnelArray.value; let i=index">
+    <app-personnel-edit-row [person]="person" [index]="i" [form]="personnelForm" />
+  </div>
+</div>

web/src/app/org-detail/personnel-edit/personnel-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonnelEditComponent } from './personnel-edit.component';
+
+describe('PersonnelEditComponent', () => {
+  let component: PersonnelEditComponent;
+  let fixture: ComponentFixture<PersonnelEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PersonnelEditComponent]
+    });
+    fixture = TestBed.createComponent(PersonnelEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/org-detail/personnel-edit/personnel-edit.component.ts

@@ -0,0 +1,42 @@
+import { Component, inject, Inject, Input } from '@angular/core';
+
+import { Personnel } from '../../datatypes/organization';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-personnel-edit',
+  templateUrl: './personnel-edit.component.html',
+  styleUrls: ['./personnel-edit.component.scss']
+})
+export class PersonnelEditComponent {
+  private formBuilder = inject(FormBuilder);
+  personnelArray = this.formBuilder.array([this.buildFormGroup({} as Personnel)]);
+  personnelForm = this.formBuilder.group({
+    personnelArray: this.personnelArray
+  });
+
+  @Input() set personnel(personnel: Personnel[]) {
+    const personnelArray = this.personnelForm.get('personnelArray') as FormArray;
+    personnelArray.clear();
+    personnel.forEach((p) => personnelArray.push(this.buildFormGroup(p)));
+    personnelArray.push(this.buildFormGroup({} as Personnel));
+  }
+
+  private buildFormGroup(person: Personnel): FormGroup {
+    return this.formBuilder.group({
+      title: [person.title || ''],
+      name: [person.name || ''],
+      callsign: [person.callsign || '']
+    });
+  }
+
+  validate(): boolean {
+    return this.personnelForm.valid;
+  }
+
+  getFormData(): Personnel[] {
+    const personnelArray = this.personnelForm.get('personnelArray') as FormArray;
+    console.log('personnelArray', personnelArray);
+    return personnelArray.value as Personnel[];
+  }
+}

web/src/app/org-detail/personnel-view/personnel-view.component.html

@@ -1,4 +1,4 @@
-<table class="personnel" *ngIf="personnel.length > 0; else noPersonnel">
+<table *ngIf="personnel.length > 0; else noPersonnel">
   <tr *ngFor="let person of personnel">
     <td>{{ person.title }}:</td>
     <td>

web/src/app/org-detail/tactical-edit/tactical-edit.component.html

@@ -0,0 +1,16 @@
+<table>
+  <tr *ngFor="let tac of _tacticalCallsigns">
+    <td>
+      <mat-form-field>
+        <mat-label>Title</mat-label>
+        <input matInput [value]="tac.title ?? ''" />
+      </mat-form-field>
+    </td>
+    <td>
+      <mat-form-field>
+        <mat-label>Callsign</mat-label>
+        <input matInput [value]="tac.callsign ?? ''" />
+      </mat-form-field>
+    </td>
+  </tr>
+</table>

web/src/app/org-detail/tactical-edit/tactical-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TacticalEditComponent } from './tactical-edit.component';
+
+describe('TacticalEditComponent', () => {
+  let component: TacticalEditComponent;
+  let fixture: ComponentFixture<TacticalEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TacticalEditComponent]
+    });
+    fixture = TestBed.createComponent(TacticalEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/org-detail/tactical-edit/tactical-edit.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+import { TacticalCallsign } from '../../datatypes/organization';
+
+@Component({
+  selector: 'app-tactical-edit',
+  templateUrl: './tactical-edit.component.html',
+  styleUrls: ['./tactical-edit.component.scss'],
+})
+export class TacticalEditComponent {
+  _tacticalCallsigns: Partial<TacticalCallsign>[] = [];
+  @Input() set tacticalCallsigns(tacticalCallsigns: TacticalCallsign[]) {
+    this._tacticalCallsigns = tacticalCallsigns.concat([
+      {} as TacticalCallsign,
+    ]);
+  }
+
+  validate(): boolean {
+    return true;
+  }
+
+  getFormData(): TacticalCallsign[] {
+    return [];
+  }
+}

web/src/app/org-detail/tactical-view/tactical-view.component.html

@@ -1,4 +1,4 @@
-<table class="personnel" *ngIf="tacticalCallsigns.length > 0; else noTacticals">
+<table *ngIf="tacticalCallsigns.length > 0; else noTacticals">
   <tr *ngFor="let tac of tacticalCallsigns">
     <td>{{ tac.title }}:</td>
     <td>