fix(table, formfield): remove padding from formfields inside table an…

…d add example (#281)
allianz · Mar 31, 2021 · ad7e21d · ad7e21d
1 parent 7f05f15
commit ad7e21d
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 1 deletion.
diff --git a/projects/ng-aquila/documentation/examples/table/table-examples.module.ts b/projects/ng-aquila/documentation/examples/table/table-examples.module.ts
@@ -7,6 +7,9 @@ import { NxPaginationModule } from '@aposin/ng-aquila/pagination';
 import { NxCheckboxModule } from '@aposin/ng-aquila/checkbox';
 import { NxSwitcherModule } from '@aposin/ng-aquila/switcher';
 import { NxTableModule } from '@aposin/ng-aquila/table';
+import { NxDropdownModule } from '@aposin/ng-aquila/dropdown';
+import { NxDatefieldModule } from '@aposin/ng-aquila/datefield';
+import { NxMomentDateModule } from '@aposin/ng-aquila/moment-date-adapter';
 
 import { NgModule } from '@angular/core';
 import { TableExampleComponent } from './table/table-example';
@@ -18,6 +21,8 @@ import { TableSingleSelectExampleComponent } from './table-single-select/table-s
 import { TableSortingExampleComponent } from './table-sorting/table-sorting-example';
 import { TableZebraExampleComponent } from './table-zebra/table-zebra-example';
 import { ExamplesSharedModule } from '../examples-shared.module';
+import { TableFormElementsExampleComponent } from './table-form-elements/table-form-elements-example';
+import { NxIconModule } from '@aposin/ng-aquila/icon';
 
 const EXAMPLES = [
   TableExampleComponent,
@@ -27,7 +32,8 @@ const EXAMPLES = [
   TableSelectingExampleComponent,
   TableSingleSelectExampleComponent,
   TableSortingExampleComponent,
-  TableZebraExampleComponent
+  TableZebraExampleComponent,
+  TableFormElementsExampleComponent
 ];
 
  @NgModule({
@@ -36,10 +42,14 @@ const EXAMPLES = [
     NxSwitcherModule,
     NxCheckboxModule,
     NxPaginationModule,
+    NxDropdownModule,
+    NxDatefieldModule,
+    NxMomentDateModule,
     NxInputModule,
     NxBadgeModule,
     NxLinkModule,
     NxRadioModule,
+    NxIconModule,
     ExamplesSharedModule,
     RouterModule
   ],
@@ -57,6 +67,7 @@ export class TableExamplesModule {
       'table-single-select': TableSingleSelectExampleComponent,
       'table-sorting': TableSortingExampleComponent,
       'table-zebra': TableZebraExampleComponent,
+      'table-form-elements': TableFormElementsExampleComponent
     };
   }
 }
diff --git a/...g-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.css b/...g-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.css
@@ -0,0 +1,8 @@
+:host {
+  overflow-x: auto;
+  display: block;
+}
+
+.date-cell, .status-cell {
+  min-width: 160px;
+}
diff --git a/...-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html b/...-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html
@@ -0,0 +1,52 @@
+<table nxTable condensed class="nx-margin-bottom-xs">
+  <thead>
+    <tr nxTableRow>
+      <th nxHeaderCell>Assignment/Case ID</th>
+      <th nxHeaderCell>Gross Amount</th>
+      <th nxHeaderCell>Ending At</th>
+      <th nxHeaderCell>Status</th>
+      <th nxHeaderCell></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr nxTableRow *ngFor="let control of formArray.controls; index as i" [formGroup]="getFormGroup(i)">
+      <td nxTableCell>
+        <nx-formfield>
+          <input nxInput formControlName="id"/>
+        </nx-formfield>
+      </td>
+      <td nxTableCell>
+        <nx-formfield>
+          <input nxInput formControlName="amount"/>
+        </nx-formfield>
+      </td>
+      <td nxTableCell class="date-cell">
+        <nx-formfield>
+          <input nxDatefield nxInput [nxDatepicker]="myDatepicker" formControlName="endingAt" />
+
+          <nx-datepicker-toggle [for]="myDatepicker" nxFormfieldSuffix></nx-datepicker-toggle>
+          <nx-datepicker #myDatepicker></nx-datepicker>
+        </nx-formfield>
+      </td>
+      <td nxTableCell class="status-cell">
+        <nx-formfield>
+          <nx-dropdown formControlName="status">
+            <nx-dropdown-item nxValue="open"></nx-dropdown-item>
+            <nx-dropdown-item nxValue="processing"></nx-dropdown-item>
+            <nx-dropdown-item nxValue="accepted"></nx-dropdown-item>
+            <nx-dropdown-item nxValue="rejected"></nx-dropdown-item>
+          </nx-dropdown>
+        </nx-formfield>
+      </td>
+      <td nxTableCell>
+        <button nxPlainButton (click)="removeRow(i)" aria-label="Remove row">
+          <nx-icon name="trash-o"></nx-icon>
+        </button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<button nxPlainButton (click)="addRow()">
+  <nx-icon name="plus" class="nx-margin-right-2xs"></nx-icon>Add row
+</button>
diff --git a/...ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.ts b/...ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.ts
@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { DATEPICKER_DEFAULT_OPTIONS } from '@aposin/ng-aquila/datefield';
+import { FORMFIELD_DEFAULT_OPTIONS } from '@aposin/ng-aquila/formfield';
+import moment from 'moment';
+
+/**
+* @title Table with form elements
+*/
+@Component({
+  selector: 'table-form-elements-example',
+  templateUrl: './table-form-elements-example.html',
+  styleUrls: ['./table-form-elements-example.css'],
+  providers: [
+    // Both provided with NxExpertModule
+    { provide: FORMFIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline', nxFloatLabel: 'always' }},
+    { provide: DATEPICKER_DEFAULT_OPTIONS, useValue: { toggleIconTabindex: -1 } },
+  ]
+})
+export class TableFormElementsExampleComponent {
+
+  formArray = new FormArray([
+    new FormGroup({
+      id: new FormControl('123456789'),
+      amount: new FormControl(250.00),
+      endingAt: new FormControl(moment([2021, 4, 1])),
+      status: new FormControl('open')
+    }),
+    new FormGroup({
+      id: new FormControl('987654321'),
+      amount: new FormControl(1000.40),
+      endingAt: new FormControl(moment([2023, 2, 23])),
+      status: new FormControl('processing')
+    }),
+    new FormGroup({
+      id: new FormControl('123456700'),
+      amount: new FormControl(40),
+      endingAt: new FormControl(moment([2019, 11, 31])),
+      status: new FormControl('accepted')
+    }),
+    new FormGroup({
+      id: new FormControl('123456780'),
+      amount: new FormControl(501),
+      endingAt: new FormControl(moment([2018, 11, 31])),
+      status: new FormControl('rejected')
+    })
+  ]);
+
+  addRow() {
+    this.formArray.push(
+      new FormGroup({
+        id: new FormControl(''),
+        amount: new FormControl(''),
+        endingAt: new FormControl(''),
+        status: new FormControl('')
+      })
+    );
+  }
+
+  removeRow(index: number) {
+    this.formArray.removeAt(index);
+  }
+
+  getFormGroup(i: number): FormGroup {
+    return this.formArray.controls[i] as FormGroup;
+  }
+}
diff --git a/projects/ng-aquila/src/table/table.component.scss b/projects/ng-aquila/src/table/table.component.scss
@@ -266,6 +266,10 @@ $horizontal-padding-edges: nx-spacer(2xs);
     padding: 0;
   }
 
+  nx-formfield.has-outline .nx-formfield__wrapper {
+    padding-top: 0;
+  }
+
   .nx-list {
     margin: 0;
 

diff --git a/projects/ng-aquila/src/table/table.md b/projects/ng-aquila/src/table/table.md
@@ -61,4 +61,10 @@ The table also supports expanding all rows at the same time. The `[nxExpandableT
 
 <!-- example(table-expandable) -->
 
+### Expert: Form elements
+
+Form elements can also be added to the table:
+
+<!-- example(table-form-elements) -->
+
 </div>