ngx-techlify-core 11.5.0 → 11.5.2

package/src/lib/email-subscription/email-subscription-type/email-subscription-type-list/email-subscription-type-list.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionTypeListRoutingModule } from './email-subscription-type-list-routing.module';
+import { EmailSubscriptionTypeListComponent } from './email-subscription-type-list.component';
+import { EmailSubscriptionTypeFormModule } from '../email-subscription-type-form/email-subscription-type-form.module';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../../../material.module';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [EmailSubscriptionTypeListComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+    EmailSubscriptionTypeFormModule,
+    EmailSubscriptionTypeListRoutingModule
+  ],
+  exports: [EmailSubscriptionTypeListComponent]
+})
+export class EmailSubscriptionTypeListModule { }

package/src/lib/email-subscription/email-subscription-type/email-subscription-type-list/index.ts

@@ -0,0 +1 @@
+export * from './email-subscription-type-list.component';

package/src/lib/email-subscription/email-subscription-type/email-subscription-type-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+
+export class EmailSubscriptionTypeRoutingModule { }

package/src/lib/email-subscription/email-subscription-type/email-subscription-type.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionTypeRoutingModule } from './email-subscription-type-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    EmailSubscriptionTypeRoutingModule
+  ]
+})
+export class EmailSubscriptionTypeModule { }

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-form/email-subscription-user-form-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmailSubscriptionUserFormRoutingModule { }

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-form/email-subscription-user-form.component.html

@@ -0,0 +1,38 @@
+<form [formGroup]="esUserFormGroup" (ngSubmit)="submit()" class="mat-typography">
+    <div fxLayout="column">
+        <div mat-dialog-title class="text-center">
+            <div>Email Subscription User</div>
+        </div>
+
+        <div mat-dialog-content fxLayout="column">
+            <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+
+                <mat-form-field fxFlex="48%" class="mt-1">
+                    <mat-label>User</mat-label>
+                    <app-searchable-selector formControlName="user_id" apiUrl="api/users" titleField="name" required
+                        [selectedValue]="selectedUser">
+                    </app-searchable-selector>
+                    <mat-error *ngIf="isFieldValid('user_id')">{{getErrorMessage('user_id')}}</mat-error>
+                </mat-form-field>
+
+                <mat-form-field fxFlex="48%" class="mt-1">
+                    <mat-label>Email Type</mat-label>
+                    <app-searchable-selector formControlName="email_type_id" apiUrl="api/email-subscription-types"
+                        required [selectedValue]="selectedType">
+                    </app-searchable-selector>
+                    <mat-error *ngIf="isFieldValid('email_type_id')">{{getErrorMessage('email_type_id')}}</mat-error>
+                </mat-form-field>
+
+                <div class="my-2" fxLayout="row" fxLayoutGap="30px" fxLayoutAlign="end" fxFlex="100%">
+                    <button mat-raised-button type="button" (click)="cancel()">Cancel</button>
+                    <button mat-raised-button type="submit" color="primary" [disabled]="isSubmitLoading">
+                        <app-loader class="inline-loader" [isLoading]="isSubmitLoading"></app-loader>
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</form>

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-form/email-subscription-user-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailSubscriptionUserFormComponent } from './email-subscription-user-form.component';
+
+describe('EmailSubscriptionUserFormComponent', () => {
+  let component: EmailSubscriptionUserFormComponent;
+  let fixture: ComponentFixture<EmailSubscriptionUserFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EmailSubscriptionUserFormComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailSubscriptionUserFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-form/email-subscription-user-form.component.ts

@@ -0,0 +1,113 @@
+
+import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { finalize } from 'rxjs/operators';
+import { AlertService } from '../../../core/alert.service';
+import { FormValidatorService } from '../../../core/form-validator.service';
+import { HttpService } from '../../../core/http.service';
+import { Logger } from '../../../core/logger.service';
+
+const log = new Logger('EmailSubscriptionUser Form');
+
+const errorMessages: any = {
+  user_id: {
+    required: "User is required"
+  },
+  email_type_id: {
+    required: "Email Type is required"
+  },
+};
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email-subscription-user-form',
+  templateUrl: './email-subscription-user-form.component.html',
+  styleUrls: ['./email-subscription-user-form.component.scss']
+})
+export class EmailSubscriptionUserFormComponent implements OnInit {
+
+  updateMode: boolean;
+  esUserFormGroup: FormGroup;
+  esUserFormFirstAttempt: boolean;
+  esUser: any;
+  isSubmitLoading: boolean;
+  selectedUser: any;
+  selectedType: any;
+
+  constructor(private fb: FormBuilder,
+    private formValidatorService: FormValidatorService,
+    private alertService: AlertService,
+    public dialogRef: MatDialogRef<EmailSubscriptionUserFormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private http: HttpService
+  ) {
+    this.createForm();
+  }
+
+  /** Method to create a form **/
+  private createForm() {
+
+    //TODO: Finialize and add more validations.
+    this.esUserFormGroup = this.fb.group({
+      id: [''],
+      user_id: ['', Validators.required],
+      email_type_id: ['', Validators.required],
+    });
+  }
+
+
+  ngOnInit() {
+    if (this.data?.esUser?.id) {
+      this.esUser = this.data.esUser;
+      this.updateMode = true;
+      this.selectedType = this.esUser?.email_type;
+      this.selectedUser = this.esUser?.user;
+      this.esUserFormGroup.patchValue(this.esUser);
+    }
+
+  }
+
+  //Method to trigger login
+  submit() {
+    this.esUserFormGroup.markAllAsTouched();
+    this.esUserFormFirstAttempt = true;
+    if (this.esUserFormGroup.valid) {
+      this.isSubmitLoading = true;
+      const model = this.esUserFormGroup.value;
+      (
+        this.updateMode ?
+          this.http.put(`api/email-subscription-users/${model?.id}`, model) :
+          this.http.post(`api/email-subscription-users`, model)
+      )
+        .pipe(
+          finalize(() => this.isSubmitLoading = false),
+          untilDestroyed(this)
+        ).subscribe(result => {
+          this.alertService.addAlert("Subscription saved successfully", "success");
+          this.dialogRef.close(result);
+        });
+    }
+  }
+
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  /**Method to evaluate form fields*/
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(field, this.esUserFormGroup, this.esUserFormFirstAttempt);
+  }
+
+  /**Method to find error in form fields*/
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(field, this.esUserFormGroup, errorMessages);
+  }
+
+  ngOnDestroy() {
+    // Needed for automatic unsubscribe with untilDestroyed
+  }
+
+}

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-form/email-subscription-user-form.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionUserFormRoutingModule } from './email-subscription-user-form-routing.module';
+import { EmailSubscriptionUserFormComponent } from './email-subscription-user-form.component';
+import { SearchableSelectorModule } from '../../../searchable-selector/searchable-selector.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../../../material.module';
+import { LoaderModule } from '../../../loader/loader.module';
+
+
+@NgModule({
+  declarations: [EmailSubscriptionUserFormComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+    EmailSubscriptionUserFormRoutingModule,
+    LoaderModule
+  ],
+  entryComponents: [EmailSubscriptionUserFormComponent]
+})
+export class EmailSubscriptionUserFormModule { }

package/{lib/email-subscription/email-subscription-user/email-subscription-user-form/index.d.ts → src/lib/email-subscription/email-subscription-user/email-subscription-user-form/index.ts}

@@ -1 +1 @@
-export * from './email-subscription-user-form.component';
+export * from './email-subscription-user-form.component';

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list-routing.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthenticationGuard } from '../../../core/authentication.guard';
+import { EmailSubscriptionUserListComponent } from './email-subscription-user-list.component';
+
+export const esulr = {
+  title: 'Email Subscription Users',
+  permissions: {
+    only: ['app_admin'],
+    redirectTo: '/'
+  }
+};
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmailSubscriptionUserListComponent,
+    canActivate: [AuthenticationGuard],
+    data: esulr
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmailSubscriptionUserListRoutingModule { }

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list.component.html

@@ -0,0 +1,74 @@
+<div class="mat-typography m-4">
+    <div fxLayout="row" fxLayoutAlign="start center">
+        <app-email-subscription-user-list-filter (valueChange)="filterChange($event)">
+        </app-email-subscription-user-list-filter>
+        <div class="ml-2">
+            <button mat-raised-button color="primary" type="button" (click)="addEmailSubscriptionUser()">+
+                User Subscription</button>
+        </div>
+        <span fxFlex></span>
+        <mat-form-field appearance="outline" class="no-padding">
+            <mat-label>Columns</mat-label>
+            <mat-select [formControl]="displayColumns" multiple (selectionChange)="columnsChange()">
+                <mat-option *ngFor="let column of availableDisplayColumns" [value]="column.value">{{column.name}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+
+
+
+    <section>
+        <div class="scroll-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
+            (scrolled)="onScroll()" [scrollWindow]="false">
+            <table mat-table [dataSource]="esUserList" matSort class="w-100 mt-1" multiTemplateDataRows
+                id="email-subscription-user-table">
+
+                <!-- Index Column -->
+                <ng-container matColumnDef="index">
+                    <th mat-header-cell *matHeaderCellDef> # </th>
+                    <td mat-cell *matCellDef="let esUser; let i = dataIndex"> {{ i+1 }} </td>
+                </ng-container>
+                <ng-container matColumnDef="user.name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> User </th>
+                    <td mat-cell *matCellDef="let esUser;"> {{ esUser?.user?.name }} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email_type.title">
+                    <th mat-header-cell *matHeaderCellDef> Email Type </th>
+                    <td mat-cell *matCellDef="let esUser;"> {{ esUser?.email_type?.title }} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="creator.name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Creator</th>
+                    <td mat-cell *matCellDef="let esUser;">
+                        {{esUser?.creator?.name }}
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="created_at">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On</th>
+                    <td mat-cell *matCellDef="let esUser;">
+                        {{esUser?.created_at | date:'medium' }}
+                    </td>
+                </ng-container>
+
+                <!-- Actions Column -->
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef> Actions </th>
+                    <td mat-cell *matCellDef="let esUser">
+                        <button type="button" mat-icon-button (click)="deleteEmailSubscriptionUser($event,esUser)">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                        <button type="button" mat-icon-button (click)="editEmailSubscriptionUser($event,esUser)">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+
+    </section>
+</div>

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list.component.scss

@@ -0,0 +1,5 @@
+.scroll-container{
+    max-height: 800px;
+    overflow-y: auto;
+}
+

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailSubscriptionUserListComponent } from './email-subscription-user-list.component';
+
+describe('EmailSubscriptionUserListComponent', () => {
+  let component: EmailSubscriptionUserListComponent;
+  let fixture: ComponentFixture<EmailSubscriptionUserListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EmailSubscriptionUserListComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailSubscriptionUserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list.component.ts

@@ -0,0 +1,174 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { MatDialog } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
+import { MatSort } from '@angular/material/sort';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { EmailSubscriptionUserFormComponent } from '../email-subscription-user-form/email-subscription-user-form.component';
+import { Router } from '@angular/router';
+import { Logger } from '../../../core/logger.service';
+import { PageEvent } from '../../../data-table/data-table.model';
+import { HttpService } from '../../../core/http.service';
+import { ActionPopupComponent } from '../../../action-popup/action-popup.component';
+import { ActionPopup } from '../../../action-popup/action-popup.model';
+
+const log = new Logger('EmailSubscriptionUser list');
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email-subscription-user-list',
+  templateUrl: './email-subscription-user-list.component.html',
+  styleUrls: ['./email-subscription-user-list.component.scss']
+})
+export class EmailSubscriptionUserListComponent implements OnInit {
+
+  esUserList: any[] = [];
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+  filters: any = {
+    sort_by: 'created_at|desc',
+  };
+
+
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  displayColumns: FormControl = new FormControl(['index', 'user.name', 'email_type.title', 'creator.name', 'created_at', 'actions']);
+  displayedColumns: any[] = [];
+  availableDisplayColumns: any[] = [
+    { order: 1, value: 'index', name: 'Index' },
+    { order: 2, value: 'user.name', name: 'User' },
+    { order: 3, value: 'email_type.title', name: 'Email Type' },
+    { order: 4, value: 'creator.name', name: 'Creator' },
+    { order: 5, value: 'actions', name: 'Actions' }
+  ];
+
+  constructor(
+    private dialog: MatDialog,
+    private http: HttpService,
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+    this.displayedColumns = this.displayColumns.value;
+    this.initializeData();
+
+    if (this.sort) {
+      this.sort.sortChange.pipe(untilDestroyed(this))
+        .subscribe((value: any) => {
+          this.changeSort(value);
+        })
+    }
+  }
+
+  get selectedColumns(): string[] {
+    return this.availableDisplayColumns
+      .filter(col => (this.displayColumns.value as any).some((x: any) => x === col.value))
+      .sort((a, b) => (a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0))
+      .map(col => col.value);
+  }
+
+  columnsChange() {
+    this.displayedColumns = this.selectedColumns;
+  }
+
+
+  initializeData() {
+    this.http.get(`api/email-subscription-users`, { params: { ...this.filters, ...this.pageEvent } })
+      .pipe(untilDestroyed(this))
+      .subscribe((result: any) => {
+        this.esUserList = this.esUserList.concat(result.data);
+        this.pageEvent.page = result.current_page;
+        this.pageEvent.lastPage = result.last_page;
+      });
+  }
+
+  filterChange(event: any) {
+    this.filters = {
+      ...this.filters,
+      ...event
+    };
+    this.reload();
+  }
+
+  addEmailSubscriptionUser() {
+    const dialogRef = this.dialog.open(EmailSubscriptionUserFormComponent, {
+      width: '800px',
+      autoFocus: false,
+      data: {} // Any data passed here will be injected into the model
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        log.debug(result);
+        this.reload();
+      }
+    });
+  }
+
+
+  editEmailSubscriptionUser(event: any, esUser: any) {
+    event.stopPropagation();
+    const dialogRef = this.dialog.open(EmailSubscriptionUserFormComponent, {
+      width: '800px',
+      autoFocus: false,
+      data: {
+        esUser: esUser
+      } // Any data passed here will be injected into the model
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        log.debug(result);
+        this.reload();
+      }
+    });
+  }
+
+  deleteEmailSubscriptionUser(event: any, esUser: any) {
+    event.stopPropagation();
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: '400px',
+      data: <ActionPopup>{
+        title: 'Delete Subscription',
+        message: `Are you sure to proceed delete the esUser ${esUser.name}?`
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        //Action confirmed
+        this.http.delete(`api/email-subscription-users/${esUser?.id}`)
+          .pipe(untilDestroyed(this))
+          .subscribe((result: any) => {
+            this.esUserList = this.esUserList.filter(x => x.id !== esUser.id);
+          });
+      }
+    });
+  }
+
+  onScroll() {
+    if (this.pageEvent.lastPage > this.pageEvent.page) {
+      this.pageEvent.page += 1;
+      this.initializeData();
+    }
+  }
+
+  changeSort(event: any) {
+    if (event.direction) {
+      this.filters.sort_by = `${event.active}|${event.direction}`;
+      this.reload();
+    }
+  }
+
+  reload() {
+    this.esUserList = [];
+    this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    this.initializeData();
+  }
+
+
+  ngOnDestroy() {
+    //Until destroyed uses it
+  }
+
+}

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list/email-subscription-user-list.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionUserListRoutingModule } from './email-subscription-user-list-routing.module';
+import { EmailSubscriptionUserListComponent } from './email-subscription-user-list.component';
+import { EmailSubscriptionUserListFilterModule } from '../email-subscription-user-list-filter/email-subscription-user-list-filter.module';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { EmailSubscriptionUserFormModule } from '../email-subscription-user-form/email-subscription-user-form.module';
+import { MaterialModule } from '../../../material.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [EmailSubscriptionUserListComponent],
+  imports: [
+    CommonModule,
+    InfiniteScrollModule,
+    MaterialModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    EmailSubscriptionUserListRoutingModule,
+    EmailSubscriptionUserFormModule,
+    EmailSubscriptionUserListFilterModule
+  ],
+  exports: [EmailSubscriptionUserListComponent]
+})
+export class EmailSubscriptionUserListModule { }

package/{lib/email-subscription/email-subscription-user/email-subscription-user-list/index.d.ts → src/lib/email-subscription/email-subscription-user/email-subscription-user-list/index.ts}

@@ -1 +1 @@
-export * from './email-subscription-user-list.component';
+export * from './email-subscription-user-list.component';

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list-filter/email-subscription-user-list-filter-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmailSubscriptionUserListFilterRoutingModule { }

package/src/lib/email-subscription/email-subscription-user/email-subscription-user-list-filter/email-subscription-user-list-filter.component.html

@@ -0,0 +1,21 @@
+<form [formGroup]="esUserFilterForm" fxLayout="row wrap" fxLayoutGap="1rem" fxLayoutAlign="start center">
+    <mat-form-field class="ml-3">
+        <mat-label>User</mat-label>
+        <app-searchable-selector formControlName="user_id" apiUrl="api/users" titleField="name">
+        </app-searchable-selector>
+        <button mat-button *ngIf="getFieldValue('user_id')" matSuffix mat-icon-button
+            (click)="resetFieldValue('user_id')">
+            <mat-icon>close</mat-icon>
+        </button>
+    </mat-form-field>
+
+    <mat-form-field class="ml-3">
+        <mat-label>Email Type</mat-label>
+        <app-searchable-selector formControlName="email_type_id" apiUrl="api/email-subscription-types">
+        </app-searchable-selector>
+        <button mat-button *ngIf="getFieldValue('email_type_id')" matSuffix mat-icon-button
+            (click)="resetFieldValue('email_type_id')">
+            <mat-icon>close</mat-icon>
+        </button>
+    </mat-form-field>
+</form>