Merge branch 'main' into feat/show-result-handle-same-id-between-sess…

…ions-and-tasks

package.json

@@ -34,7 +34,6 @@
     "@ngx-grpc/core": "^3.1.2",
     "@ngx-grpc/grpc-web-client": "^3.1.2",
     "@ungap/structured-clone": "^1.2.0",
-    "defu": "^6.1.4",
     "jest-junit": "^16.0.0",
     "luxon": "^3.4.4",
     "rxjs": "~7.8.1",

src/app/components/table-dashboard-actions-toolbar.component.html

@@ -17,7 +17,7 @@
   <button mat-menu-item (click)="onEditNameLine()">
     <mat-icon aria-hidden="true"  [fontIcon]="getIcon('edit')"></mat-icon>
     <span i18n appNoWrap>
-      Edit name line
+      Edit line name
     </span>
   </button>
   <button mat-menu-item (click)="onDeleteLine()">

src/app/dashboard/components/add-line-dialog.component.html

@@ -0,0 +1,30 @@
+<h2 mat-dialog-title i18n="Dialog title">Add a line</h2>
+
+<form [formGroup]="lineForm" (ngSubmit)="onSubmit()">
+  <mat-dialog-content>
+
+    <mat-form-field appearance="outline">
+      <mat-label for="name" i18n="Name of the statuses group"> Name </mat-label>
+      <input matInput id="name" type="text" formControlName="name" i18n-placeholder="Placeholder" placeholder="Name of your line" required i18n="Input error">
+      <mat-error *ngIf="lineForm.get('name')?.hasError('required')">
+      Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label for="type"> Type </mat-label>
+      <mat-select id="type" [value]="types" formControlName="type" required>
+        <mat-option *ngFor="let option of types; trackByType" [value]="option">{{option}}</mat-option>
+      </mat-select>
+      <mat-error *ngIf="lineForm.get('type')?.hasError('required')">
+      Type is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="end">
+    <button mat-button (click)="onCancel()" type="button" i18n="Dialog action"> Cancel </button>
+    <button mat-flat-button type="submit" color="primary" [disabled]="!lineForm.valid" i18n="Dialog action"> Confirm </button>
+  </mat-dialog-actions>
+</form>

src/app/dashboard/components/add-line-dialog.component.spec.ts

@@ -1,35 +1,49 @@
-import { TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';
+import { AddLineDialogResult } from '@app/types/dialog';
 import { AddLineDialogComponent } from './add-line-dialog.component';
 
-describe('AddLineDialogComponent', () => {
-  let component: AddLineDialogComponent;
-
-  const mockMatDialogRef = {
+describe('FormNameLineComponent', () => {
+  const mockDialogRef = {
     close: jest.fn()
-  };
+  } as unknown as MatDialogRef<AddLineDialogComponent, AddLineDialogResult>;
 
-  beforeEach(() => {
-    component = TestBed.configureTestingModule({
-      providers: [
-        AddLineDialogComponent,
-        { provide: MatDialogRef, useValue: mockMatDialogRef },
-        { provide: MAT_DIALOG_DATA, useValue: {} }
-      ]
-    }).inject(AddLineDialogComponent);
+  const component = new AddLineDialogComponent(mockDialogRef, {
+    name: 'line',
+    type: 'Applications'
   });
+  component.ngOnInit();
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should close with result on submit', () => {
-    component.onSubmit({name:'result', type: 'Tasks'});
-    expect(mockMatDialogRef.close).toHaveBeenCalledWith({name:'result', type: 'Tasks'});
+  it('should init', () => {
+    expect(component.lineForm.value.name).toEqual('line');
+    expect(component.lineForm.value.type).toEqual('Applications');
+  });
+
+  describe('onSubmit', () => {
+    it('should submit if there is a value', () => {
+      component.lineForm.value.name = 'line';
+      component.lineForm.value.type = 'Applications';
+      component.onSubmit();
+      expect(mockDialogRef.close).toHaveBeenCalledWith({name: 'line', type: 'Applications'});
+    });
+
+    it('should submit empty if there no value', () => {
+      component.lineForm.value.name = null;
+      component.lineForm.value.type = null;
+      component.onSubmit();
+      expect(mockDialogRef.close).toHaveBeenCalledWith({name:'', type: ''});
+    });
+  });
+
+  it('should cancel', () => {
+    component.onCancel();
+    expect(mockDialogRef.close).toHaveBeenCalled();
   });
 
-  it('should close on "no" click', () => {
-    component.onNoClick();
-    expect(mockMatDialogRef.close).toHaveBeenCalled();
+  it('should track by options', () => {
+    expect(component.trackByType(0, 'Applications')).toEqual('Applications');
   });
 });

src/app/dashboard/components/add-line-dialog.component.ts

@@ -1,38 +1,81 @@
-import { Component, Inject } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { AddLineDialogData, AddLineDialogResult } from '@app/types/dialog';
-import { FormNameLineComponent } from './form-name-line.component';
+import { LineType } from '../types';
 
 @Component({
   selector: 'app-add-line-dialog',
-  template: `
-<h2 mat-dialog-title i18n="Dialog title">Add a line</h2>
-
-<app-form-name-line
-  (cancelChange)="onNoClick()"
-  (submitChange)="onSubmit($event)"
-></app-form-name-line>
-  `,
+  templateUrl: 'add-line-dialog.component.html',
   styles: [`
+mat-dialog-content {
+  padding-top: 0!important;
+  overflow: visible!important;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
   `],
   standalone: true,
   providers: [],
   imports: [
     MatDialogModule,
-    FormNameLineComponent
+    NgIf,
+    NgFor,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatSelectModule
   ]
 })
-export class AddLineDialogComponent {
+export class AddLineDialogComponent implements OnInit {
+
+  types: LineType[] = ['CountStatus', 'Applications', 'Sessions', 'Tasks', 'Partitions', 'Results'];
+
+  lineForm = new FormGroup({
+    name: new FormControl('', [
+      Validators.required,
+    ]),
+    type: new FormControl<LineType | ''>('', [
+      Validators.required
+    ])
+  });
+
   constructor(
     public _dialogRef: MatDialogRef<AddLineDialogComponent, AddLineDialogResult>,
-    @Inject(MAT_DIALOG_DATA) public data: AddLineDialogData,
+    @Inject(MAT_DIALOG_DATA) public data?: AddLineDialogData,
   ) {}
 
-  onSubmit(result: AddLineDialogResult) {
+  ngOnInit(): void {
+    if(this.data?.name && this.data?.type) {
+      this.lineForm.setValue({
+        name: this.data.name,
+        type: this.data.type
+      });
+    }
+  }
+
+  onSubmit() {
+    const result = {
+      name: this.lineForm.value.name ?? '',
+      type: this.lineForm.value.type ?? ''
+    } as AddLineDialogResult;
     this._dialogRef.close(result);
   }
 
-  onNoClick(): void {
+  onCancel(): void {
     this._dialogRef.close();
   }
+
+  trackByType(_: number, item: LineType) {
+    return item;
+  }
 }

src/app/dashboard/components/edit-name-line-dialog.component.html

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title i18n="Dialog title">Edit the line name</h2>
+
+<form [formGroup]="nameForm" (ngSubmit)="onSubmit()">
+  <mat-dialog-content>
+    <mat-form-field subscriptSizing="dynamic" appearance="outline">
+      <mat-label for="name">Name</mat-label>
+      <input matInput id="name" type="text" formControlName="name" i18n-placeholder="placeholder" placeholder="Line name"/>
+    </mat-form-field>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close i18n="Button to close the dialog">Cancel</button>
+    <button mat-flat-button (click)="onSubmit()" type="button" color="primary" [disabled]="!nameForm.valid" i18n="Button to submit the dialog">Submit</button>
+  </mat-dialog-actions>
+</form>

src/app/dashboard/components/edit-name-line-dialog.component.spec.ts

@@ -0,0 +1,44 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import { EditNameLineResult } from '@app/types/dialog';
+import { EditNameLineDialogComponent } from './edit-name-line-dialog.component';
+
+describe('', () => {
+  const mockMatDialogRef = {
+    close: jest.fn()
+  } as unknown as MatDialogRef<EditNameLineDialogComponent, EditNameLineResult>;
+
+  const defaultName = 'Tasks';
+
+  const component = new EditNameLineDialogComponent(mockMatDialogRef, {
+    name: defaultName
+  });
+
+  component.ngOnInit();
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should init', () => {
+    expect(component.nameForm).toBeDefined();
+  });
+
+  describe('onSubmit', () => {
+    it('should close with result', () => {
+      component.nameForm.setValue({name: 'result'});
+      component.onSubmit();
+      expect(mockMatDialogRef.close).toHaveBeenCalledWith('result');
+    });
+
+    it('should close with previous name', () => {
+      component.nameForm.setValue({name: ''});
+      component.onSubmit();
+      expect(mockMatDialogRef.close).toHaveBeenCalledWith(defaultName);
+    });
+  });
+
+  it('should close on "no" click', () => {
+    component.onNoClick();
+    expect(mockMatDialogRef.close).toHaveBeenCalled();
+  });
+});

src/app/dashboard/components/edit-name-line-dialog.component.ts

@@ -1,43 +1,47 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
 import { EditNameLineData, EditNameLineResult } from '@app/types/dialog';
-import { FormNameLineComponent } from './form-name-line.component';
 
 @Component({
   selector: 'app-edit-name-line-dialog',
-  template: `
-<h2 mat-dialog-title i18n="Dialog title">Edit the name line</h2>
-
-<app-form-name-line
-  [line]="name"
-  (cancelChange)="onNoClick()"
-  (submitChange)="onSubmit($event)"
-></app-form-name-line>
-  `,
-  styles: [`
-  `],
+  templateUrl: 'edit-name-line-dialog.component.html',
   standalone: true,
   providers: [
   ],
   imports: [
-    FormNameLineComponent,
     MatDialogModule,
+    MatInputModule,
+    MatButtonModule,
+    ReactiveFormsModule,
   ]
 })
 export class EditNameLineDialogComponent implements OnInit  {
-  name: string;
+  nameForm: FormGroup;
 
   constructor(
     public _dialogRef: MatDialogRef<EditNameLineDialogComponent, EditNameLineResult>,
     @Inject(MAT_DIALOG_DATA) public data: EditNameLineData,
   ) {}
 
   ngOnInit(): void {
-    this.name = this.data.name;
+    this.nameForm = new FormGroup({
+      name: new FormControl(this.data.name, [
+        Validators.required,
+        Validators.minLength(1)
+      ])
+    });
   }
 
-  onSubmit(result: {name: string, type: string}) {
-    this._dialogRef.close(result);
+  onSubmit() {
+    if (this.nameForm.invalid) {
+      this._dialogRef.close(this.data.name);
+    } else {
+      const name = this.nameForm.value.name;
+      this._dialogRef.close(name);
+    }
   }
 
   onNoClick(): void {