Merge pull request #4 from CodeGov-org/profile-edit-form

Profile UI: initial profile form template

src/frontend/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { type Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: 'profile/edit',
+    loadComponent: () =>
+      import('./pages/profile-edit').then(m => m.ProfileEditComponent),
+  },
+];

src/frontend/src/app/core/utils/index.ts

@@ -0,0 +1 @@
+export * from './keys-of';

src/frontend/src/app/core/utils/keys-of.ts

@@ -0,0 +1,3 @@
+export function keysOf<T extends object>(obj: T): (keyof T)[] {
+  return Object.keys(obj) as (keyof T)[];
+}

src/frontend/src/app/pages/profile-edit/index.ts

@@ -0,0 +1 @@
+export * from './profile-edit.component';

src/frontend/src/app/pages/profile-edit/profile-edit.component.spec.ts

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

src/frontend/src/app/pages/profile-edit/profile-edit.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { keysOf } from '@core/utils';
+import { socialMediaInputs } from './profile.model';
+
+@Component({
+  selector: 'app-profile-edit',
+  standalone: true,
+  imports: [ReactiveFormsModule, CommonModule, RouterModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div><span>Role</span></div>
+    <div><span>Proposal Types</span></div>
+    <div><span>Neuron ID</span></div>
+
+    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+      <div>
+        <label for="username">Username</label>
+        <input id="username" type="text" formControlName="username" />
+      </div>
+
+      <div>
+        <label for="bio">Bio</label>
+        <input id="bio" type="text" formControlName="bio" />
+      </div>
+
+      <div>
+        Social Media
+        <div formGroupName="socialMedia">
+          @for (key of socialMediaKeys; track key) {
+            <div>
+              <label [for]="key">{{ socialMediaInputs[key].label }}</label>
+              <input [id]="key" type="text" [formControlName]="key" />
+            </div>
+          }
+        </div>
+      </div>
+
+      <div>
+        <a title="Cancel your edits" routerLink="/"> Cancel </a>
+        <button type="submit">Save</button>
+      </div>
+    </form>
+  `,
+})
+export class ProfileEditComponent {
+  public readonly profileForm!: FormGroup;
+
+  public readonly socialMediaKeys = keysOf(socialMediaInputs);
+  public readonly socialMediaInputs = socialMediaInputs;
+
+  constructor(formBuilder: FormBuilder) {
+    this.profileForm = formBuilder.group({
+      username: [''],
+      bio: [''],
+      socialMedia: formBuilder.group(this.generateSocialMedia()),
+    });
+  }
+
+  public onSubmit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  private generateSocialMedia(): Record<string, string[]> {
+    return this.socialMediaKeys.reduce(
+      (accum, value) => ({
+        ...accum,
+        [value]: [''],
+      }),
+      {},
+    );
+  }
+}

src/frontend/src/app/pages/profile-edit/profile.model.ts

@@ -0,0 +1,25 @@
+export enum SocialMediaType {
+  DSCVR = 'DSCVR',
+  OpenChat = 'OpenChat',
+  Taggr = 'Taggr',
+  X = 'X',
+  DfinityForum = 'DfinityForum',
+  Discord = 'Discord',
+}
+
+export type SocialMediaInputs = {
+  [K in SocialMediaType]: SocialMediaInputProps;
+};
+
+export const socialMediaInputs: SocialMediaInputs = {
+  DSCVR: { label: 'DSCVR' },
+  OpenChat: { label: 'Open Chat' },
+  Taggr: { label: 'TAGGR' },
+  X: { label: 'X (Twitter)' },
+  DfinityForum: { label: 'Dfinity Forum' },
+  Discord: { label: 'Discord' },
+};
+
+export interface SocialMediaInputProps {
+  label: string;
+}