chore(virtual-table-demo): form layout improvements and some other minor fixes

hakimio · hakimio · commit 173710ed5e3e · 2025-08-20T10:51:14.000+03:00
diff --git a/apps/ngxs-demo/src/app.config.ts b/apps/ngxs-demo/src/app.config.ts
@@ -4,6 +4,7 @@ import {
     provideBrowserGlobalErrorListeners,
     provideZonelessChangeDetection,
 } from '@angular/core';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {
     provideRouter,
@@ -46,5 +47,12 @@ export const appConfig: ApplicationConfig = {
             withNgxsNoopExecutionStrategy(),
         ),
         provideNgxsDataPlugin(withNgxsDataStorage()),
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: {
+                subscriptSizing: 'dynamic',
+                appearance: 'outline',
+            },
+        },
     ],
 };
diff --git a/apps/ngxs-demo/src/article/dialog/article-dialog.component.html b/apps/ngxs-demo/src/article/dialog/article-dialog.component.html
@@ -1,33 +1,27 @@
-<h1 mat-dialog-title>Article</h1>
+<h2 mat-dialog-title>Article</h2>
 
-<div
-    mat-dialog-content
+<mat-dialog-content
+    class="content"
     [formGroup]="form"
 >
-    <div>
-        <mat-form-field>
-            <mat-label>Article title</mat-label>
-            <input
-                formControlName="title"
-                matInput
-                placeholder="title"
-            />
-        </mat-form-field>
-    </div>
+    <mat-form-field>
+        <mat-label>Article title</mat-label>
+        <input
+            formControlName="title"
+            matInput
+        />
+    </mat-form-field>
 
-    <div>
-        <mat-form-field>
-            <mat-label>Article category</mat-label>
-            <input
-                formControlName="category"
-                matInput
-                placeholder="category"
-            />
-        </mat-form-field>
-    </div>
-</div>
+    <mat-form-field>
+        <mat-label>Article category</mat-label>
+        <input
+            formControlName="category"
+            matInput
+        />
+    </mat-form-field>
+</mat-dialog-content>
 
-<div mat-dialog-actions>
+<mat-dialog-actions align="end">
     <button
         mat-button
         type="button"
@@ -43,4 +37,4 @@ <h1 mat-dialog-title>Article</h1>
     >
         Save
     </button>
-</div>
+</mat-dialog-actions>
diff --git a/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts b/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts
@@ -32,6 +32,17 @@ import {Article} from '../article';
         ReactiveFormsModule,
     ],
     templateUrl: './article-dialog.component.html',
+    styles: `
+        .content {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        mat-form-field {
+            padding-top: 0.25rem;
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleDialogComponent {
diff --git a/apps/virtual-table-demo/src/app.config.ts b/apps/virtual-table-demo/src/app.config.ts
@@ -45,6 +45,7 @@ export const appConfig: ApplicationConfig = {
             provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
             useValue: {
                 subscriptSizing: 'dynamic',
+                appearance: 'outline',
             },
         },
         provideNativeDateAdapter(),
diff --git a/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.html b/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.html
@@ -10,7 +10,7 @@
         }
     </mat-toolbar>
 
-    <form>
+    <form class="filter-form">
         <mat-form-field>
             <mat-label>Data size</mat-label>
             <mat-select
diff --git a/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts b/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts
@@ -37,6 +37,14 @@ import {CodeDialogComponent} from '../../shared/dialog/code-dialog.component';
         VirtualTable,
     ],
     templateUrl: './sample-first.component.html',
+    styles: `
+        .filter-form {
+            margin-bottom: 1rem;
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class SampleFirstComponent implements OnInit, OnDestroy {
diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.html b/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.html
@@ -1,5 +1,5 @@
 <div class="my-filter">
-    <mat-form-field appearance="outline">
+    <mat-form-field>
         <mat-label>Find options</mat-label>
         <mat-select
             [value]="$any(table().filterable.filterTypeDefinition)[state().key!]"
@@ -24,10 +24,7 @@
             </mat-button-toggle-group>
         }
         @case (TableFilterType.INTERVAL) {
-            <mat-form-field
-                appearance="outline"
-                type="daterange"
-            >
+            <mat-form-field type="daterange">
                 <mat-date-range-input [rangePicker]="rangePicker">
                     <input
                         matStartDate
@@ -50,10 +47,7 @@
             </mat-form-field>
         }
         @case (TableFilterType.EQUALS_DATES_WITHOUT_TIME) {
-            <mat-form-field
-                appearance="outline"
-                class="date-picker"
-            >
+            <mat-form-field class="date-picker">
                 <input
                     matInput
                     [matDatepicker]="picker"
@@ -68,7 +62,7 @@
             </mat-form-field>
         }
         @default {
-            <mat-form-field appearance="outline">
+            <mat-form-field>
                 <mat-label>Filter by {{ state().key! | uppercase }}</mat-label>
                 <input
                     autocomplete="off"
diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html
@@ -47,7 +47,7 @@
         [css-class]="['my-filter']"
     >
         <div class="filter-form">
-            <mat-form-field appearance="outline">
+            <mat-form-field>
                 <mat-label>Filter</mat-label>
                 <input
                     autocomplete="off"
@@ -59,10 +59,7 @@
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
 
-            <mat-form-field
-                appearance="outline"
-                class="filter-options"
-            >
+            <mat-form-field class="filter-options">
                 <mat-label>Find options</mat-label>
                 <mat-select
                     [(value)]="table.filterable.filterType"
diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.ts b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.ts
@@ -115,7 +115,7 @@ export default class SampleFourteenComponent implements OnInit, AfterViewInit {
                 code: `
     <ngx-filter #filter>
         <div class="my-filter">
-            <mat-form-field appearance="outline">
+            <mat-form-field>
                 <mat-label>Find options</mat-label>
                 <mat-select
                     [value]="table.filterable.filterTypeDefinition[filter.state.key!]"
@@ -129,7 +129,7 @@ export default class SampleFourteenComponent implements OnInit, AfterViewInit {
                 </mat-select>
             </mat-form-field>
 
-            <mat-form-field appearance="outline">
+            <mat-form-field>
                 <mat-label>Filter by {{ filter.state.key! | uppercase }}</mat-label>
                 <input
                     matInput
diff --git a/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html b/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html
@@ -31,7 +31,7 @@
                 [css-class]="['my-filter']"
             >
                 <div class="filter-form">
-                    <mat-form-field appearance="outline">
+                    <mat-form-field>
                         <mat-label>Filter</mat-label>
                         <input
                             autocomplete="off"
@@ -43,10 +43,7 @@
                         <mat-icon matSuffix>search</mat-icon>
                     </mat-form-field>
 
-                    <mat-form-field
-                        appearance="outline"
-                        class="filter-options"
-                    >
+                    <mat-form-field class="filter-options">
                         <mat-label>Find options</mat-label>
                         <mat-select
                             [(value)]="table1.filterable.filterType"
@@ -89,7 +86,7 @@
                 [css-class]="['my-filter']"
             >
                 <div class="filter-form">
-                    <mat-form-field appearance="outline">
+                    <mat-form-field>
                         <mat-label>Filter</mat-label>
                         <input
                             autocomplete="off"
@@ -101,10 +98,7 @@
                         <mat-icon matSuffix>search</mat-icon>
                     </mat-form-field>
 
-                    <mat-form-field
-                        appearance="outline"
-                        class="filter-options"
-                    >
+                    <mat-form-field class="filter-options">
                         <mat-label>Find options</mat-label>
                         <mat-select
                             [(value)]="table2.filterable.filterType"
diff --git a/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.html b/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.html
@@ -85,7 +85,7 @@ <h3>
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 10px;
-  &#123;
+  &#125;
 
 </code></pre>
     </div>
diff --git a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts
@@ -8,8 +8,14 @@ import {
     ReactiveFormsModule,
 } from '@angular/forms';
 import {MatButton} from '@angular/material/button';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {MatFormField, MatInput} from '@angular/material/input';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogRef,
+    MatDialogTitle,
+} from '@angular/material/dialog';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
 import {Nullable} from '@angular-ru/cdk/typings';
 
 @Component({
@@ -18,11 +24,22 @@ import {Nullable} from '@angular-ru/cdk/typings';
         FormsModule,
         KeyValuePipe,
         MatButton,
+        MatDialogActions,
+        MatDialogContent,
+        MatDialogTitle,
         MatFormField,
         MatInput,
+        MatLabel,
         ReactiveFormsModule,
     ],
     templateUrl: './dialog-template.template.html',
+    styles: `
+        form {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogTemplateComponent implements OnInit {
diff --git a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html
@@ -1,24 +1,28 @@
-<h3>Edit</h3>
+<h2 mat-dialog-title>Edit</h2>
 
-@if (form) {
-    <form [formGroup]="form">
-        @for (input of data | keyvalue; track input.key) {
-            <mat-form-field>
-                <input
-                    matInput
-                    placeholder="{{ input.key }}"
-                    [formControlName]="$any(input.key)"
-                />
-            </mat-form-field>
-        }
-    </form>
-}
+<mat-dialog-content>
+    @if (form) {
+        <form [formGroup]="form">
+            @for (input of data | keyvalue; track input.key) {
+                <mat-form-field>
+                    <mat-label>{{ input.key }}</mat-label>
+                    <input
+                        matInput
+                        [formControlName]="$any(input.key)"
+                    />
+                </mat-form-field>
+            }
+        </form>
+    }
+</mat-dialog-content>
 
-<button
-    mat-button
-    type="button"
-    class="dialog-close"
-    (click)="save()"
->
-    Save
-</button>
+<mat-dialog-actions align="end">
+    <button
+        mat-button
+        type="button"
+        class="dialog-close"
+        (click)="save()"
+    >
+        Save
+    </button>
+</mat-dialog-actions>
diff --git a/apps/virtual-table-demo/styles.scss b/apps/virtual-table-demo/styles.scss
@@ -55,3 +55,7 @@ sample-eight ngx-table-builder * {
     margin-bottom: 0;
     padding: 2px 0;
 }
+
+mat-form-field.mat-mdc-form-field {
+    padding-top: 0.25rem;
+}

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`}`
`11`	`11`	`</mat-toolbar>`
`12`	`12`
`13`		`- <form>`
	`13`	`+ <form class="filter-form">`
`14`	`14`	`<mat-form-field>`
`15`	`15`	`<mat-label>Data size</mat-label>`
`16`	`16`	`<mat-select`