[WIP] Add dialog for adding dimensions

frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.html

@@ -1 +1,39 @@
-<p>Dialog works!</p>
+<nb-card class="dialog">
+  <nb-card-header>Dodaj nowy wymiar</nb-card-header>
+  <nb-card-body>
+    <form
+      [formGroup]="dimensionForm"
+      (ngSubmit)="onSubmit()"
+      class="dialog__body"
+      id="dimensionForm"
+    >
+      <input nbInput placeholder="Nazwa wymiaru" formControlName="name" />
+      <button nbButton status="info" (click)="addCategory()" type="button">
+        Dodaj nową kategorię
+      </button>
+      <div
+        *ngFor="let category of categories.controls; let i = index"
+        formArrayName="categories"
+      >
+        <nb-form-field>
+          <input
+            nbInput
+            type="text"
+            [formControlName]="i"
+            [status]="
+              category.invalid && (category.dirty || category.touched)
+                ? 'danger'
+                : 'basic'
+            "
+          />
+          <button nbButton nbSuffix ghost type="button">
+            <nb-icon icon="minus-outline" pack="eva"></nb-icon>
+          </button>
+        </nb-form-field>
+      </div>
+    </form>
+  </nb-card-body>
+  <nb-card-footer>
+    <button nbButton type="submit" form="dimensionForm">Dodaj</button>
+  </nb-card-footer>
+</nb-card>

frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.scss

@@ -0,0 +1,6 @@
+.dialog {
+  &__body {
+    display: flex;
+    flex-flow: column;
+  }
+}

frontend/src/app/my-profile/add-dimension-dialog/add-dimension-dialog.component.ts

@@ -1,15 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { FormBuilder, FormArray, Validators } from '@angular/forms';
 
 @Component({
   selector: 'add-dimension-dialog',
   templateUrl: './add-dimension-dialog.component.html',
-  styleUrls: ['./add-dimension-dialog.component.scss']
+  styleUrls: ['./add-dimension-dialog.component.scss'],
 })
-export class AddDimensionDialogComponent implements OnInit {
+export class AddDimensionDialogComponent {
+  constructor(private fb: FormBuilder) {}
 
-  constructor() { }
+  dimensionForm = this.fb.group({
+    name: ['', Validators.required],
+    categories: this.fb.array([this.fb.control('', Validators.required)]),
+  });
 
-  ngOnInit(): void {
+  get categories() {
+    return this.dimensionForm.get('categories') as FormArray;
   }
 
+  addCategory() {
+    this.categories.push(this.fb.control('', Validators.required));
+  }
+
+  onSubmit() {
+    this.dimensionForm.markAllAsTouched();
+  }
 }

frontend/src/app/my-profile/my-profile.module.ts

@@ -7,7 +7,9 @@ import {
   NbButtonModule,
   NbCardModule,
   NbDialogModule,
+  NbFormFieldModule,
   NbIconModule,
+  NbInputModule,
   NbLayoutModule,
   NbListModule,
   NbMenuModule,
@@ -22,6 +24,7 @@ import { ManageDimensionsComponent } from './manage-dimensions/manage-dimensions
 import { MainViewComponent } from './main-view/main-view.component';
 import { DimensionsService } from '../services/dimensions.service';
 import { AddDimensionDialogComponent } from './add-dimension-dialog/add-dimension-dialog.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -45,6 +48,10 @@ import { AddDimensionDialogComponent } from './add-dimension-dialog/add-dimensio
     NbCardModule,
     NbTreeGridModule,
     NbDialogModule.forChild(),
+    NbInputModule,
+    NbFormFieldModule,
+    NbCardModule,
+    ReactiveFormsModule,
   ],
   providers: [DimensionsService],
 })