Guanxinwang0118/tc 197 upload all spec

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none"
 }

.vscode/settings.json

@@ -1,4 +1,12 @@
 {
   "vsicons.presets.angular": true,
-  "angular.enable-strict-mode-prompt": false
+  "angular.enable-strict-mode-prompt": false,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
 }

README.md

@@ -47,7 +47,7 @@ The example project is located at the `tag_check_projects` folder at the root di
 
 ## Development
 
-This project uses NodeJS v23.0.0 npm v10.9.0 for development. If cannot compile, please run `nx reset` and `rm -rf .nx` to reset the project.
+This project uses NodeJS v22.10.0 npm v10.9.0 for development. If cannot compile, please run `nx reset` and `rm -rf .nx` to reset the project.
 
 ### Prerequisites
 

apps/nest-backend/src/project-agent/project-spec/project-spec.service.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { Injectable, NotAcceptableException } from '@nestjs/common';
+import { Injectable, Logger, NotAcceptableException } from '@nestjs/common';
 import { FileService } from '../../os/file/file.service';
 import { FilePathService } from '../../os/path/file-path/file-path.service';
 import { Spec } from '@utils';
 
 @Injectable()
 export class ProjectSpecService {
+  private readonly logger = new Logger(ProjectSpecService.name);
   constructor(
     private readonly fileService: FileService,
     private readonly filePathService: FilePathService
@@ -56,9 +57,8 @@ export class ProjectSpecService {
   }
 
   private async readSpecsFile(projectSlug: string): Promise<Spec[]> {
-    const filePath = await this.filePathService.getProjectConfigFilePath(
-      projectSlug
-    );
+    const filePath =
+      await this.filePathService.getProjectConfigFilePath(projectSlug);
     const specs = this.fileService.readJsonFile(filePath);
 
     if (!Array.isArray(specs)) {
@@ -72,9 +72,8 @@ export class ProjectSpecService {
     projectSlug: string,
     specs: Spec[]
   ): Promise<void> {
-    const filePath = await this.filePathService.getProjectConfigFilePath(
-      projectSlug
-    );
+    const filePath =
+      await this.filePathService.getProjectConfigFilePath(projectSlug);
     this.fileService.writeJsonFile(filePath, specs);
   }
 }

apps/ng-frontend/src/app/modules/project/components/new-report-view/new-report-view.component.html

@@ -0,0 +1,48 @@
+<div class="new-report">
+  <form
+    class="new-report__form"
+    [formGroup]="reportForm"
+    (ngSubmit)="setEditorContent(); uploadReport()"
+  >
+    <mat-form-field class="new-report__form_field" appearance="outline">
+      <mat-label>Test Name</mat-label>
+      <input matInput formControlName="testName" />
+    </mat-form-field>
+    <div>
+      <h2>Specification</h2>
+      <app-editor
+        class="new-report__form__field"
+        [content]="exampleInputJson"
+        [editorExtension]="'specJson'"
+      ></app-editor>
+    </div>
+    <div>
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        "
+      >
+        <h2>Chrome Recording</h2>
+        <button
+          type="button"
+          mat-stroked-button
+          style="margin-bottom: 1rem"
+          (click)="fileInput.click()"
+        >
+          Upload
+        </button>
+      </div>
+      <app-editor
+        class="new-report__form__field"
+        [content]="'{}'"
+        [editorExtension]="'recordingJson'"
+      ></app-editor>
+    </div>
+    <input hidden (change)="onFileSelected($event)" #fileInput type="file" />
+    <div class="new-report__form__actions">
+      <button type="submit" mat-raised-button color="primary">Submit</button>
+    </div>
+  </form>
+</div>

apps/ng-frontend/src/app/modules/project/components/new-report-view/new-report-view.component.scss

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+
+.new-report {
+  padding: 2rem 10rem;
+
+  .mat-mdc-form-field {
+    border-radius: 5px;
+    padding-top: 1.5rem;
+    @include mat.form-field-density(-4);
+    @include mat.select-density(-4);
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    &__actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+}

apps/ng-frontend/src/app/modules/project/components/report-table-toolbar/report-table-toolbar.component.html

@@ -5,7 +5,7 @@
     matTooltip="Add new report"
     matTooltipPosition="above"
     aria-label="Add new report"
-    [routerLink]="['new-report']"
+    (click)="emitAddEvent()"
   >
     <mat-icon>add</mat-icon>
   </button>
@@ -32,24 +32,25 @@
   </button>
   <div class="spacer"></div>
   @if (!isSearchVisible) {
-  <mat-button-toggle-group
-    #group="matButtonToggleGroup"
-    (change)="onToggleChange($event)"
-  >
-    <mat-button-toggle value="search" aria-label="search event">
-      <mat-icon color="primary">search</mat-icon>
-    </mat-button-toggle>
-  </mat-button-toggle-group>
-  } @if (isSearchVisible) {
-  <mat-form-field appearance="outline" class="filter" color="primary">
-    <mat-label>Filter</mat-label>
-    <input
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="add_to_cart"
-      #input
-    />
-  </mat-form-field>
+    <mat-button-toggle-group
+      #group="matButtonToggleGroup"
+      (change)="onToggleChange($event)"
+    >
+      <mat-button-toggle value="search" aria-label="search event">
+        <mat-icon color="primary">search</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+  }
+  @if (isSearchVisible) {
+    <mat-form-field appearance="outline" class="filter" color="primary">
+      <mat-label>Filter</mat-label>
+      <input
+        matInput
+        (keyup)="applyFilter($event)"
+        placeholder="add_to_cart"
+        #input
+      />
+    </mat-form-field>
   }
   <button
     mat-icon-button

apps/ng-frontend/src/app/modules/project/components/report-table-toolbar/report-table-toolbar.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnDestroy } from '@angular/core';
+import { UploadSpecService } from './../../../../shared/services/upload-spec/upload-spec.service';
+import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
@@ -40,8 +41,9 @@ export class ReportTableToolbarComponent implements OnDestroy {
   destroy$ = new Subject<void>();
   constructor(
     private dataSourceService: ProjectDataSourceService,
-    private testRunningFacade: TestRunningFacadeService
-  ) {}
+    private testRunningFacade: TestRunningFacadeService,
+    private uploadSpecService: UploadSpecService
+  ) { }
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
@@ -76,6 +78,10 @@ export class ReportTableToolbarComponent implements OnDestroy {
       .subscribe();
   }
 
+  emitAddEvent() {
+    this.uploadSpecService.startUpload();
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();

apps/ng-frontend/src/app/modules/project/components/slide-import/slide-import.component.html

@@ -0,0 +1,29 @@
+<mat-sidenav
+  class="slide-import-sidenav"
+  opened="false"
+  #importSidenav
+  mode="side"
+  position="end"
+  autoFocus="true"
+  fixedInViewport="true"
+  fixedTopGap="0"
+  fixedBottomGap="0"
+>
+  <div class="slide-import-sidenav__header">
+    <div class="slide-import-sidenav__header__title">
+      <button
+        mat-icon-button
+        (click)="importSidenav.toggle(); uploadSpecService.resetImport()"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+      <div>Import Report</div>
+    </div>
+  </div>
+  <hr />
+  <mat-sidenav-content
+    style="padding-left: 4rem; padding-right: 4rem; padding-top: 2rem"
+  >
+    <app-upload-card></app-upload-card>
+  </mat-sidenav-content>
+</mat-sidenav>

apps/ng-frontend/src/app/modules/project/components/slide-import/slide-import.component.scss

@@ -0,0 +1,18 @@
+.slide-import-sidenav {
+  width: 700px !important;
+  &__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+
+    &__title {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      align-items: center;
+      font-size: larger;
+    }
+  }
+}

apps/ng-frontend/src/app/modules/project/components/slide-import/slide-import.component.ts

@@ -0,0 +1,80 @@
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {
+  AfterViewInit,
+  Component,
+  effect,
+  OnDestroy,
+  viewChild,
+} from '@angular/core';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { Subject } from 'rxjs';
+import { ViewEncapsulation } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ProgressSpinnerComponent, CustomMatTableComponent } from '@ui';
+import { MatIconModule } from '@angular/material/icon';
+import { AsyncPipe } from '@angular/common';
+import { MatTableModule } from '@angular/material/table';
+import { NewReportViewComponent } from '../new-report-view/new-report-view.component';
+import { MatButtonModule } from '@angular/material/button';
+import { UploadCardComponent } from '../upload-card/upload-card.component';
+import { UploadSpecService } from '../../../../shared/services/upload-spec/upload-spec.service';
+
+@Component({
+  selector: 'app-slide-import-sidenav',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    MatSidenavModule,
+    MatProgressSpinnerModule,
+    MatCardModule,
+    MatTableModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    ProgressSpinnerComponent,
+    MatButtonModule,
+    CustomMatTableComponent,
+    NewReportViewComponent,
+    UploadCardComponent,
+  ],
+  templateUrl: `./slide-import.component.html`,
+  styleUrls: ['./slide-import.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SlideImportComponent implements AfterViewInit, OnDestroy {
+  importedSidenav = viewChild.required<MatSidenav>('importSidenav');
+  private destroy$ = new Subject<void>();
+
+  loading = true;
+  constructor(public uploadSpecService: UploadSpecService) {
+    effect(() => {
+      if (this.uploadSpecService.isUploaded()) {
+        this.importedSidenav().toggle(false);
+      } else if (this.uploadSpecService.isOpenImportSidenav()) {
+        this.importedSidenav().toggle(true);
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.importedSidenav().toggle(false);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // UI event handlers
+  toggleSidenav() {
+    this.adjustBodyOverflow();
+  }
+
+  private adjustBodyOverflow() {
+    this.importedSidenav().toggle();
+    document.body.style.overflow = this.importedSidenav().opened
+      ? 'hidden'
+      : 'auto';
+  }
+}

apps/ng-frontend/src/app/modules/project/components/slide-upload/slide-upload.component.html

@@ -0,0 +1,36 @@
+<mat-sidenav
+  class="slide-sidenav"
+  opened="false"
+  #sidenav
+  mode="side"
+  position="end"
+  autoFocus="true"
+  fixedInViewport="true"
+  fixedTopGap="0"
+  fixedBottomGap="0"
+>
+  <div class="slide-sidenav__header">
+    <div class="slide-sidenav__header__title">
+      <button
+        mat-icon-button
+        (click)="sidenav.toggle(); uploadSpecService.resetStart()"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+      <div>Upload Report</div>
+    </div>
+    <div class="slide-sidenav__header__upload-all">
+      <button
+        mat-stroked-button
+        color="primary"
+        (click)="emitOpenImportSidenav()"
+      >
+        Import
+      </button>
+    </div>
+  </div>
+  <hr />
+  <mat-sidenav-content>
+    <app-new-report-view></app-new-report-view>
+  </mat-sidenav-content>
+</mat-sidenav>