fix(workspace): i#0453 workspace name empty error

kaleidos-ventures · Oct 30, 2023 · 9fdf6e1 · 9fdf6e1
1 parent 0df3931
commit 9fdf6e1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/...modules/workspace/feature-list/components/workspace-create/workspace-create.component.css b/...modules/workspace/feature-list/components/workspace-create/workspace-create.component.css
@@ -41,4 +41,10 @@ Copyright (c) 2023-present Kaleidos INC
   & .workspace-input-project-name {
     inline-size: 278px;
   }
+
+  &::ng-deep {
+    & .input-container {
+      flex-direction: column;
+    }
+  }
 }
diff --git a/...odules/workspace/feature-list/components/workspace-create/workspace-create.component.html b/...odules/workspace/feature-list/components/workspace-create/workspace-create.component.html
@@ -12,6 +12,7 @@
     (keydown.esc)="close()"
     (ngSubmit)="onSubmit()"
     [attr.aria-invalid]="createProjectForm.invalid"
+    [showFormErrors]="submitted"
     class="workspace-create-padding">
     <tg-ui-avatar
       class="workspace-image"
@@ -28,16 +29,19 @@
         class="input-project"
         (keyup)="setName($event)"
         data-test="workspace-name-input"
-        formControlName="projectName"
+        formControlName="workspaceName"
         #firstInput
         tuiAutoFocus
-        maxlength="40"
+        [maxlength]="maxLength"
         [placeholder]="t('workspace.workspace_name')" />
       <tg-ui-error
         inputError
         error="required">
         {{ t('workspace.error_name_empty') }}
       </tg-ui-error>
+      <tg-ui-error error="pattern">{{
+        t('workspace.error_name_empty')
+      }}</tg-ui-error>
     </tg-ui-input>
     <button
       data-test="workspace-project-form-submit"

diff --git a/.../modules/workspace/feature-list/components/workspace-create/workspace-create.component.ts b/.../modules/workspace/feature-list/components/workspace-create/workspace-create.component.ts
@@ -15,12 +15,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import {
-  FormBuilder,
-  FormGroup,
-  Validators,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { RxState } from '@rx-angular/state';
 import { RandomColorService } from '@taiga/ui/services/random-color/random-color.service';
@@ -35,6 +30,10 @@ import { CommonModule } from '@angular/common';
 import { InputsModule } from '@taiga/ui/inputs';
 import { AvatarComponent } from '@taiga/ui/avatar/avatar.component';
 import { FormDirective } from '@taiga/ui/inputs/form/form.directive';
+import {
+  WorkspaceNameMaxLength,
+  WorkspaceNameValidation,
+} from '~/app/shared/workspace/workspace-name-validation';
 
 @Component({
   selector: 'tg-workspace-create',
@@ -66,6 +65,8 @@ export class WorkspaceCreateComponent implements OnInit {
   public color = 0;
   public createProjectForm!: FormGroup;
   public name = '';
+  public maxLength = WorkspaceNameMaxLength;
+  public submitted = false;
 
   public close() {
     this.store.dispatch(createFormHasError({ hasError: false }));
@@ -76,24 +77,26 @@ export class WorkspaceCreateComponent implements OnInit {
     this.color = RandomColorService.randomColorPicker();
     this.createProjectForm = this.fb.group(
       {
-        projectName: ['', [Validators.required]],
+        workspaceName: ['', WorkspaceNameValidation],
       },
       { updateOn: 'submit' }
     );
   }
 
   public setName(event: Event) {
+    this.submitted = false;
     this.name = (<HTMLInputElement>event.target).value;
   }
 
   public onSubmit() {
     if (this.createProjectForm.invalid) {
+      this.submitted = true;
       (this.firstInput.nativeElement as HTMLElement).focus();
       this.store.dispatch(createFormHasError({ hasError: true }));
     } else {
       this.store.dispatch(
         createWorkspace({
-          name: this.createProjectForm.get('projectName')!.value as string,
+          name: this.createProjectForm.get('workspaceName')!.value as string,
           color: this.color,
         })
       );