fix(console-v2): app detail layout, create layout stepper (#3680)

* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint

console/src/app/pages/users/user-create-machine/user-create-machine.component.html

@@ -1,45 +1,47 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <a [routerLink]="[ '/users']" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </a>
-      <h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
-        1 of 1</span>
-    </div>
-    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+<cnsl-create-layout
+  title="{{ 'USER.CREATE.TITLE' | translate }}"
+  [createSteps]="1"
+  [currentCreateStep]="1"
+  (closed)="close()"
+>
+  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-    <div class="machine-create-main-content">
-      <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
-        <div class="machine-create-content">
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
-            <input cnslInput formControlName="userName" required />
-            <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
-              {{ 'USER.VALIDATION.REQUIRED' | translate }}
-            </span>
-            <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
-              {{ 'USER.VALIDATION.NOEMAIL' | translate }}
-            </span>
-          </cnsl-form-field>
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
-            <input cnslInput formControlName="name" required />
-            <span cnslError *ngIf="name?.invalid && name?.errors?.required">
-              {{ 'USER.VALIDATION.REQUIRED' | translate }}
-            </span>
-          </cnsl-form-field>
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
-            <input cnslInput formControlName="description" />
-          </cnsl-form-field>
-        </div>
-        <div class="machine-btn-container">
-          <button color="primary" [attr.data-e2e]="'create-button'" [disabled]="userForm.invalid" type="submit"
-            mat-raised-button>{{ 'ACTIONS.CREATE' |
-            translate }}</button>
-        </div>
-      </form>
-    </div>
+  <div class="machine-create-main-content">
+    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
+      <div class="machine-create-content">
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
+          <input cnslInput formControlName="userName" required />
+          <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+          <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
+            {{ 'USER.VALIDATION.NOEMAIL' | translate }}
+          </span>
+        </cnsl-form-field>
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
+          <input cnslInput formControlName="name" required />
+          <span cnslError *ngIf="name?.invalid && name?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+        </cnsl-form-field>
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
+          <input cnslInput formControlName="description" />
+        </cnsl-form-field>
+      </div>
+      <div class="machine-btn-container">
+        <button
+          color="primary"
+          [attr.data-e2e]="'create-button'"
+          [disabled]="userForm.invalid"
+          type="submit"
+          mat-raised-button
+        >
+          {{ 'ACTIONS.CREATE' | translate }}
+        </button>
+      </div>
+    </form>
   </div>
-</div>
+</cnsl-create-layout>

console/src/app/pages/users/user-create-machine/user-create-machine.component.scss

@@ -1,22 +1,4 @@
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
 .machine-create-main-content {
-  padding-left: 4.5rem;
   max-width: 35rem;
 
   .machine-create-form {

console/src/app/pages/users/user-create-machine/user-create-machine.component.ts

@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Component, OnDestroy } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -24,6 +25,7 @@ export class UserCreateMachineComponent implements OnDestroy {
     private toast: ToastService,
     public userService: ManagementService,
     private fb: FormBuilder,
+    private _location: Location,
     breadcrumbService: BreadcrumbService,
   ) {
     breadcrumbService.setBreadcrumb([
@@ -73,6 +75,10 @@ export class UserCreateMachineComponent implements OnDestroy {
     this.sub.unsubscribe();
   }
 
+  public close(): void {
+    this._location.back();
+  }
+
   public get name(): AbstractControl | null {
     return this.userForm.get('name');
   }

console/src/app/pages/users/user-create-machine/user-create-machine.module.ts

@@ -9,31 +9,31 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 
 import { UserCreateMachineRoutingModule } from './user-create-machine-routing.module';
 import { UserCreateMachineComponent } from './user-create-machine.component';
 
-
-
 @NgModule({
-    declarations: [UserCreateMachineComponent],
-    imports: [
-        UserCreateMachineRoutingModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatSelectModule,
-        MatButtonModule,
-        MatIconModule,
-        MatProgressSpinnerModule,
-        MatProgressBarModule,
-        MatCheckboxModule,
-        MatTooltipModule,
-        TranslateModule,
-        DetailLayoutModule,
-        InputModule,
-    ],
+  declarations: [UserCreateMachineComponent],
+  imports: [
+    UserCreateMachineRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CreateLayoutModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    TranslateModule,
+    DetailLayoutModule,
+    InputModule,
+  ],
 })
-export class UserCreateMachineModule { }
+export class UserCreateMachineModule {}

console/src/app/pages/users/user-create/user-create.component.html

@@ -1,167 +1,163 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <a [routerLink]="['/users']" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </a>
-      <h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1>
-    </div>
+<cnsl-create-layout
+  title="{{ 'USER.CREATE.TITLE' | translate }}"
+  [createSteps]="1"
+  [currentCreateStep]="1"
+  (closed)="close()"
+>
+  <div class="user-create-main-content">
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-    <div class="user-create-main-content">
-      <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
+      <div class="user-create-content">
+        <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
 
-      <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
-        <div class="user-create-content">
-          <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
+        <div class="user-create-grid">
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
+            <input cnslInput matRipple formControlName="email" required />
+            <span cnslError *ngIf="email?.invalid && !email?.errors?.required">
+              {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
+            </span>
+            <span cnslError *ngIf="email?.invalid && email?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
+            <input
+              cnslInput
+              formControlName="userName"
+              required
+              [ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
+            />
+            <span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
 
-          <div class="user-create-grid">
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
-              <input cnslInput matRipple formControlName="email" required />
-              <span cnslError *ngIf="email?.invalid && !email?.errors?.required">
-                {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
-              </span>
-              <span cnslError *ngIf="email?.invalid && email?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
-              <input
-                cnslInput
-                formControlName="userName"
-                required
-                [ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
-              />
-              <span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
-
-              <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-              <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
-                {{ 'USER.VALIDATION.NOEMAIL' | translate }}
-              </span>
-            </cnsl-form-field>
-
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
-              <input cnslInput formControlName="firstName" required />
-              <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
-              <input cnslInput formControlName="lastName" required />
-              <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="nickName" />
-              <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-          </div>
-
-          <div class="email-is-verified">
-            <mat-checkbox class="block-checkbox" formControlName="isVerified">
-              {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
-            </mat-checkbox>
-            <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
-              {{ 'ORG.PAGES.USEPASSWORD' | translate }}
-            </mat-checkbox>
-            <cnsl-info-section class="full-width desc">
-              <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
-            </cnsl-info-section>
-          </div>
-
-          <div class="pwd-section" *ngIf="usePassword && pwdForm">
-            <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
-            </cnsl-password-complexity-view>
-
-            <form [formGroup]="pwdForm">
-              <div class="user-create-grid">
-                <cnsl-form-field *ngIf="password">
-                  <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
-                  <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
-
-                  <span cnslError *ngIf="password?.errors?.required">
-                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                  </span>
-                </cnsl-form-field>
-                <cnsl-form-field *ngIf="confirmPassword">
-                  <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
-                  <input
-                    cnslInput
-                    autocomplete="off"
-                    name="confirmPassword"
-                    formControlName="confirmPassword"
-                    type="password"
-                  />
-
-                  <span cnslError *ngIf="confirmPassword?.errors?.required">
-                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                  </span>
-                  <span cnslError *ngIf="confirmPassword?.errors?.notequal">
-                    {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
-                  </span>
-                </cnsl-form-field>
-              </div>
-            </form>
-          </div>
-
-          <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
-
-          <div class="user-create-grid">
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
-              <mat-select formControlName="gender">
-                <mat-option *ngFor="let gender of genders" [value]="gender">
-                  {{ 'GENDERS.' + gender | translate }}
-                </mat-option>
-              </mat-select>
-              <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
-              <mat-select formControlName="preferredLanguage">
-                <mat-option *ngFor="let language of languages" [value]="language">
-                  {{ 'LANGUAGES.' + language | translate }}
-                </mat-option>
-                <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
-                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                </span>
-              </mat-select>
-            </cnsl-form-field>
-          </div>
-
-          <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
+            <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+            <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
+              {{ 'USER.VALIDATION.NOEMAIL' | translate }}
+            </span>
+          </cnsl-form-field>
 
           <cnsl-form-field>
-            <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
-            <input cnslInput formControlName="phone" />
-            <span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
+            <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
+            <input cnslInput formControlName="firstName" required />
+            <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
+            <input cnslInput formControlName="lastName" required />
+            <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="nickName" />
+            <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
               {{ 'USER.VALIDATION.REQUIRED' | translate }}
             </span>
           </cnsl-form-field>
         </div>
-        <div class="user-create-btn-container">
-          <button
-            [attr.data-e2e]="'create-button'"
-            color="primary"
-            [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
-            type="submit"
-            mat-raised-button
-          >
-            {{ 'ACTIONS.CREATE' | translate }}
-          </button>
+
+        <div class="email-is-verified">
+          <mat-checkbox class="block-checkbox" formControlName="isVerified">
+            {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
+          </mat-checkbox>
+          <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
+            {{ 'ORG.PAGES.USEPASSWORD' | translate }}
+          </mat-checkbox>
+          <cnsl-info-section class="full-width desc">
+            <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
+          </cnsl-info-section>
         </div>
-      </form>
-    </div>
+
+        <div class="pwd-section" *ngIf="usePassword && pwdForm">
+          <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
+          </cnsl-password-complexity-view>
+
+          <form [formGroup]="pwdForm">
+            <div class="user-create-grid">
+              <cnsl-form-field *ngIf="password">
+                <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
+                <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
+
+                <span cnslError *ngIf="password?.errors?.required">
+                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                </span>
+              </cnsl-form-field>
+              <cnsl-form-field *ngIf="confirmPassword">
+                <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
+                <input
+                  cnslInput
+                  autocomplete="off"
+                  name="confirmPassword"
+                  formControlName="confirmPassword"
+                  type="password"
+                />
+
+                <span cnslError *ngIf="confirmPassword?.errors?.required">
+                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                </span>
+                <span cnslError *ngIf="confirmPassword?.errors?.notequal">
+                  {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                </span>
+              </cnsl-form-field>
+            </div>
+          </form>
+        </div>
+
+        <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
+
+        <div class="user-create-grid">
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
+            <mat-select formControlName="gender">
+              <mat-option *ngFor="let gender of genders" [value]="gender">
+                {{ 'GENDERS.' + gender | translate }}
+              </mat-option>
+            </mat-select>
+            <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
+            <mat-select formControlName="preferredLanguage">
+              <mat-option *ngFor="let language of languages" [value]="language">
+                {{ 'LANGUAGES.' + language | translate }}
+              </mat-option>
+              <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
+                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+              </span>
+            </mat-select>
+          </cnsl-form-field>
+        </div>
+
+        <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
+
+        <cnsl-form-field>
+          <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
+          <input cnslInput formControlName="phone" />
+          <span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+        </cnsl-form-field>
+      </div>
+      <div class="user-create-btn-container">
+        <button
+          [attr.data-e2e]="'create-button'"
+          color="primary"
+          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
+          type="submit"
+          mat-raised-button
+        >
+          {{ 'ACTIONS.CREATE' | translate }}
+        </button>
+      </div>
+    </form>
   </div>
-</div>
+</cnsl-create-layout>

console/src/app/pages/users/user-create/user-create.component.scss

@@ -1,16 +1,4 @@
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-}
-
 .user-create-main-content {
-  padding-left: 4.5rem;
   max-width: 35rem;
 
   @media only screen and (max-width: 500px) {

console/src/app/pages/users/user-create/user-create.component.ts

@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -63,6 +64,7 @@ export class UserCreateComponent implements OnDestroy {
     private fb: FormBuilder,
     private mgmtService: ManagementService,
     private changeDetRef: ChangeDetectorRef,
+    private _location: Location,
     breadcrumbService: BreadcrumbService,
   ) {
     breadcrumbService.setBreadcrumb([
@@ -94,6 +96,10 @@ export class UserCreateComponent implements OnDestroy {
       });
   }
 
+  public close(): void {
+    this._location.back();
+  }
+
   private async loadOrg(): Promise<void> {
     const domains = await this.mgmtService.listOrgDomains();
     const found = domains.resultList.find((resp) => resp.isPrimary);

console/src/app/pages/users/user-create/user-create.module.ts

@@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
@@ -26,6 +27,7 @@ import { UserCreateComponent } from './user-create.component';
     FormsModule,
     ReactiveFormsModule,
     MatSelectModule,
+    CreateLayoutModule,
     MatButtonModule,
     MatIconModule,
     MatProgressSpinnerModule,