Fixing some search bar placement.

Author: renemadsen

eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html

@@ -1,14 +1,30 @@
 <eform-new-subheader>
-  <button
-    id="newDeviceUserBtn"
-    *ngIf="selectCurrentUserClaimsDeviceUsersCreate$ | async"
-    matTooltip="{{ 'Create Device User' | translate }}"
-    (click)="openCreateModal()"
-    class="btn-primary btn-primary--icon-left"
-  >
-    <mat-icon>add</mat-icon>
-    <span>{{ 'New Device User' | translate }}</span>
-  </button>
+  <div class="d-flex flex-row justify-content-center align-items-center gap-12">
+    <div class="text-field--rounded mt-4">
+      <mat-form-field>
+        <mat-label>{{ 'Search' | translate }}</mat-label>
+        <input
+          matInput
+          type="text"
+          (ngModelChange)="onSearchChanged($event)"
+          [ngModel]="selectDeviceUsersNameFilter$ | async"
+          id="labelInput"
+        />
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+    </div>
+    <div class="line-vert"></div>
+    <button
+      id="newDeviceUserBtn"
+      *ngIf="selectCurrentUserClaimsDeviceUsersCreate$ | async"
+      matTooltip="{{ 'Create Device User' | translate }}"
+      (click)="openCreateModal()"
+      class="btn-primary btn-primary--icon-left"
+    >
+      <mat-icon>add</mat-icon>
+      <span>{{ 'New Device User' | translate }}</span>
+    </button>
+  </div>
 </eform-new-subheader>
 
 <!--<mat-card class="d-flex flex-column" style="padding: 0;">-->
@@ -41,7 +57,7 @@
   [showPaginator]="false"
   [pageOnFront]="false"
   [rowStriped]="false"
-  [showToolbar]="true"
+  [showToolbar]="false"
   [showColumnMenuButton]="false"
   [toolbarTemplate]="toolbarTpl">
 </mtx-grid>

eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.ts

@@ -62,7 +62,7 @@ export class DeviceUsersPageComponent implements OnInit, OnDestroy {
   public selectCurrentUserClaimsDeviceUsersCreate$ = this.authStore.select(selectCurrentUserClaimsDeviceUsersCreate);
   public selectCurrentUserClaimsDeviceUsersUpdate$ = this.authStore.select(selectCurrentUserClaimsDeviceUsersCreate);
   public selectCurrentUserClaimsDeviceUsersDelete$ = this.authStore.select(selectCurrentUserClaimsDeviceUsersCreate);
-  private selectDeviceUsersNameFilter$ = this.authStore.select(selectDeviceUsersNameFilter);
+  public selectDeviceUsersNameFilter$ = this.authStore.select(selectDeviceUsersNameFilter);
 
   ngOnInit() {
     this.iconRegistry.addSvgIconLiteral('password-validation', this.sanitizer.bypassSecurityTrustHtml(PasswordValidationIcon));