feat: 🎸 edit project configuration

amanecer2levi · amanecer2levi · commit ca3783ae2f04 · 2023-03-05T13:29:39.000+02:00
✅ Closes: 15
diff --git a/apps/cli-daemon/src/app/utils/extract-value-object.spec.ts b/apps/cli-daemon/src/app/utils/extract-value-object.spec.ts
@@ -0,0 +1,68 @@
+import {
+  extractValueObject,
+} from './extract-value-object';
+
+describe('Extract value object', () => {
+  const data = {
+    name: 'value',
+    nestedData: {
+      name: 'nestedValue',
+      level1: {
+        level2: {
+          level2Name: 'level2NameValue',
+          level2Param: 'level2ParamValue',
+        },
+      },
+    },
+  };
+
+  it('should extract data from object', () => {
+    expect(extractValueObject(data, 'nestedData.name')).toEqual({
+      'nestedData.name': 'nestedValue',
+    });
+    expect(
+      extractValueObject(data, 'nestedData.level1.level2.level2Name')
+    ).toEqual({ 'nestedData.level1.level2.level2Name': 'level2NameValue' });
+    expect(extractValueObject(data, 'nestedData.level1')).toEqual({
+      'nestedData.level1': {
+        level2: {
+          level2Name: 'level2NameValue',
+          level2Param: 'level2ParamValue',
+        },
+      },
+    });
+  });
+
+  it('should extract data from object and override name', () => {
+    expect(extractValueObject(data, 'nestedData.name', 'name')).toEqual({
+      name: 'nestedValue',
+    });
+    expect(
+      extractValueObject(
+        data,
+        'nestedData.level1.level2.level2Name',
+        'level2Name'
+      )
+    ).toEqual({ level2Name: 'level2NameValue' });
+    expect(extractValueObject(data, 'nestedData.level1', 'level1')).toEqual({
+      level1: {
+        level2: {
+          level2Name: 'level2NameValue',
+          level2Param: 'level2ParamValue',
+        },
+      },
+    });
+  });
+
+  it('should extract data from object with wildcard', () => {
+    expect(extractValueObject(data, 'nestedData.*')).toEqual({
+      level1: {
+        level2: {
+          level2Name: 'level2NameValue',
+          level2Param: 'level2ParamValue',
+        },
+      },
+      name: 'nestedValue',
+    });
+  });
+});
diff --git a/apps/cli-daemon/src/app/utils/extract-value-object.ts b/apps/cli-daemon/src/app/utils/extract-value-object.ts
@@ -0,0 +1,46 @@
+import { JsonObject, JsonValue } from '@angular-devkit/core/src/json/utils';
+
+export const extractValueObject = <T>(
+  objectData: T,
+  path: string,
+  overridePath?: string
+): JsonObject => {
+  const traverse = (
+    dataObject: JsonObject,
+    splitPaths: string[],
+    currentPathIndex: number,
+    defaultName = ''
+  ): void => {
+    if (currentPathIndex === parts.length) {
+      result[defaultName || splitPaths.join('.')] = dataObject as JsonValue;
+      return;
+    }
+    if (!dataObject || typeof dataObject !== 'object') {
+      return;
+    }
+    if (parts[currentPathIndex] === '*') {
+      Object.entries(dataObject).forEach(([key, value]) =>
+        traverse(
+          value as JsonObject,
+          splitPaths.concat(key),
+          currentPathIndex + 1,
+          key
+        )
+      );
+      return;
+    }
+    if (parts[currentPathIndex] in dataObject) {
+      traverse(
+        dataObject[parts[currentPathIndex]] as JsonObject,
+        splitPaths.concat(parts[currentPathIndex]),
+        currentPathIndex + 1,
+        defaultName
+      );
+    }
+  };
+
+  const result: NonNullable<JsonObject> = {},
+    parts = path.split('.');
+  traverse(objectData as JsonObject, [], 0, overridePath);
+  return result;
+};
diff --git a/apps/cli-daemon/src/app/workspace/dto/schema.dto.ts b/apps/cli-daemon/src/app/workspace/dto/schema.dto.ts
@@ -0,0 +1,13 @@
+import { JSONSchema7 } from 'json-schema';
+
+export class SchemaDto implements JSONSchema7 {
+  properties: JSONSchema7['properties'];
+  title: JSONSchema7['title'];
+  description: JSONSchema7['title'];
+
+  constructor({ title, properties, description }: JSONSchema7) {
+    this.properties = properties;
+    this.title = title;
+    this.description = description;
+  }
+}
diff --git a/apps/cli-daemon/src/app/workspace/entities/workspace-configuration.ts b/apps/cli-daemon/src/app/workspace/entities/workspace-configuration.ts
@@ -0,0 +1,12 @@
+export interface ExtractValuePaths {
+  path: string;
+  overridePath?: string;
+}
+export const configurationsPaths: ExtractValuePaths[] = [
+  { path: 'definitions.project.properties.prefix', overridePath: 'prefix' },
+  { path: 'definitions.project.properties.root', overridePath: 'root' },
+  {
+    path: 'definitions.project.properties.sourceRoot',
+    overridePath: 'sourceRoot',
+  },
+];
diff --git a/apps/cli-daemon/src/app/workspace/workspace.controller.ts b/apps/cli-daemon/src/app/workspace/workspace.controller.ts
@@ -9,6 +9,7 @@ import {
   Patch,
   Post,
 } from '@nestjs/common';
+import { JSONSchema7 } from 'json-schema';
 
 import { ExecResult } from '../generators/dto';
 import { GeneratorsService } from '../generators/generators.service';
@@ -60,6 +61,11 @@ export class WorkspaceController {
     return this.workspaceService.readWorkspaceProjectNames();
   }
 
+  @Get('workspace-configuration')
+  async getWorkspaceConfiguration(): Promise<JSONSchema7> {
+    return this.workspaceService.getWorkspaceConfiguration();
+  }
+
   @Get('project/:projectName')
   async getProject(
     @Param('projectName') projectName: string
diff --git a/apps/cli-daemon/src/app/workspace/workspace.service.ts b/apps/cli-daemon/src/app/workspace/workspace.service.ts
@@ -1,4 +1,5 @@
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
+import { JsonObject } from '@angular-devkit/core/src/json/utils';
 import {
   createWorkspaceHost,
   readWorkspace as devKitReadWorkspace,
@@ -15,15 +16,20 @@ import {
   Logger,
   NotFoundException,
 } from '@nestjs/common';
+import { JSONSchema7 } from 'json-schema';
+import * as angularSchema from 'node_modules/@angular/cli/lib/config/schema.json';
 
 import { SessionService } from '../session/session.service';
+import { extractValueObject } from '../utils/extract-value-object';
 
 import { ProjectDto, UpdateProjectDto } from './dto';
+import { SchemaDto } from './dto/schema.dto';
 import {
   ANGULAR_WORKSPACE_NOT_FOUND_EXCEPTION,
   BAD_PATH_EXCEPTION,
   NOT_ANGULAR_WORKSPACE_EXCEPTION,
 } from './entities';
+import { configurationsPaths } from './entities/workspace-configuration';
 
 const ANGULAR_JSON = '/angular.json';
 
@@ -157,4 +163,24 @@ export class WorkspaceService {
         return new InternalServerErrorException(err);
     }
   }
+
+  getWorkspaceConfiguration(): Partial<JSONSchema7> {
+    const configuration = configurationsPaths.reduce(
+      (state: JsonObject, currentPath) => {
+        const schemaValues = extractValueObject(
+          angularSchema,
+          currentPath.path,
+          currentPath.overridePath
+        );
+        return { ...state, ...schemaValues };
+      },
+      {} as JsonObject
+    );
+
+    return new SchemaDto({
+      title: 'Angular CLI Workspace Configuration',
+      description: 'Browser target options',
+      properties: configuration as JSONSchema7['properties'],
+    });
+  }
 }
diff --git a/apps/cli-daemon/tsconfig.json b/apps/cli-daemon/tsconfig.json
@@ -18,6 +18,7 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   }
 }
diff --git a/apps/cli-gui/src/app/workspace-settings/workspace-settings.component.ts b/apps/cli-gui/src/app/workspace-settings/workspace-settings.component.ts
@@ -1,8 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { WorkspaceSettingsService } from './workspace-settings.service';
-
 @Component({
   selector: 'cli-workspace-settings',
   standalone: true,
@@ -11,10 +9,4 @@ import { WorkspaceSettingsService } from './workspace-settings.service';
   styleUrls: ['./workspace-settings.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WorkspaceSettingsComponent {
-  angularJson$ = this.workspaceSettingsService.readWorkspaceProjectNames();
-
-  constructor(
-    private readonly workspaceSettingsService: WorkspaceSettingsService
-  ) {}
-}
+export class WorkspaceSettingsComponent {}
diff --git a/apps/cli-gui/src/app/workspace-settings/workspace-settings.service.ts b/apps/cli-gui/src/app/workspace-settings/workspace-settings.service.ts
diff --git a/libs/configuration/src/lib/configuration/configuration.component.html b/libs/configuration/src/lib/configuration/configuration.component.html
@@ -1 +1,12 @@
-<p>configuration works!</p>
+<p>Edit project configuration</p>
+
+<ng-container *ngIf="formly$ | async as formly">
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <formly-form
+      [model]="formly.formData"
+      [fields]="formly.formFields"
+      [form]="form"
+    ></formly-form>
+    <button mat-button type="submit">Submit</button>
+  </form>
+</ng-container>
diff --git a/libs/configuration/src/lib/configuration/configuration.component.ts b/libs/configuration/src/lib/configuration/configuration.component.ts
@@ -1,11 +1,95 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { Project } from '@angular-cli-gui/shared/data';
+import { JsonObject } from '@angular-devkit/core/src/json/utils';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import {
+  combineLatest,
+  forkJoin,
+  map,
+  Observable,
+  Subject,
+  switchMap,
+  tap,
+} from 'rxjs';
+
+import { WorkspaceSettingsService } from '../services';
 
 @Component({
   selector: 'cli-configuration',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    NgIf,
+    AsyncPipe,
+    FormlyModule,
+    FormlyMaterialModule,
+    ReactiveFormsModule,
+  ],
   templateUrl: './configuration.component.html',
   styleUrls: ['./configuration.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ConfigurationComponent {}
+export class ConfigurationComponent implements OnInit {
+  private formFields$ = new Subject<FormlyFieldConfig[]>();
+  private formData$ = new Subject<JsonObject>();
+  private projectName = '';
+
+  private readonly projectConfiguration$ = this.workspaceSettingsService
+    .readWorkspaceProjectConfiguration()
+    .pipe(
+      map(
+        (configuration) =>
+          this.schema.toFieldConfig(configuration)
+            .fieldGroup as FormlyFieldConfig[]
+      )
+    );
+
+  private readonly projectName$ = this.workspaceSettingsService
+    .readWorkspaceProjectNames()
+    .pipe(
+      map((names) => names[0]),
+      tap((projectName) => (this.projectName = projectName))
+    );
+
+  private readonly workspaceProject$ = this.projectName$.pipe(
+    switchMap((currentProjectName: string) =>
+      this.workspaceSettingsService.readWorkspaceProject(currentProjectName)
+    )
+  );
+
+  readonly formly$: Observable<{
+    formData: JsonObject;
+    formFields: FormlyFieldConfig[];
+  }> = combineLatest([this.formData$, this.formFields$]).pipe(
+    map(([formData, formFields]) => ({ formFields, formData }))
+  );
+
+  form = this.fb.group({});
+
+  constructor(
+    private workspaceSettingsService: WorkspaceSettingsService,
+    private fb: FormBuilder,
+    private schema: FormlyJsonschema
+  ) {}
+
+  ngOnInit(): void {
+    forkJoin([this.projectConfiguration$, this.workspaceProject$]).subscribe(
+      ([fields, projectData]) => {
+        this.formFields$.next(fields);
+        this.formData$.next(projectData);
+      }
+    );
+  }
+
+  onSubmit(): void {
+    this.workspaceSettingsService
+      .updateWorkspaceProjectConfiguration(
+        this.projectName,
+        this.form.value as Project
+      )
+      .subscribe();
+  }
+}
diff --git a/libs/configuration/src/lib/services/index.ts b/libs/configuration/src/lib/services/index.ts
@@ -0,0 +1 @@
+export * from './workspace-settings';
diff --git a/libs/configuration/src/lib/services/workspace-settings/index.ts b/libs/configuration/src/lib/services/workspace-settings/index.ts
@@ -0,0 +1 @@
+export * from './workspace-settings.service';
diff --git a/libs/configuration/src/lib/services/workspace-settings/workspace-settings.service.spec.ts b/libs/configuration/src/lib/services/workspace-settings/workspace-settings.service.spec.ts
diff --git a/libs/configuration/src/lib/services/workspace-settings/workspace-settings.service.ts b/libs/configuration/src/lib/services/workspace-settings/workspace-settings.service.ts
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`	`"noImplicitOverride": true,`
`19`	`19`	`"noPropertyAccessFromIndexSignature": true,`
`20`	`20`	`"noImplicitReturns": true,`
`21`		`- "noFallthroughCasesInSwitch": true`
	`21`	`+ "noFallthroughCasesInSwitch": true,`
	`22`	`+ "resolveJsonModule": true`
`22`	`23`	`}`
`23`	`24`	`}`