ngx-techlify-core 11.4.8 → 11.5.2

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

@@ -0,0 +1,47 @@
+<form [formGroup]="emailSubscriptionTypeFormGroup" (ngSubmit)="submit()" class="mat-typography">
+    <div fxLayout="column">
+        <div mat-dialog-title class="text-center">
+            <div>Email Subscription Type</div>
+        </div>
+
+        <div mat-dialog-content fxLayout="column">
+            <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+
+                <mat-form-field fxFlex="100%" class="mt-1">
+                    <input matInput formControlName="title" placeholder="Title" autocomplete="off" required />
+                    <mat-error *ngIf="isFieldValid('title')">{{getErrorMessage('title')}}</mat-error>
+                </mat-form-field>
+
+                <mat-form-field fxFlex="100%" class="mt-1">
+                    <input matInput formControlName="code" placeholder="Code" autocomplete="off" required />
+                    <mat-hint align="end">Unique Value</mat-hint>
+                    <mat-error *ngIf="isFieldValid('code')">{{getErrorMessage('code')}}</mat-error>
+                </mat-form-field>
+
+                <mat-form-field fxFlex="100%" class="mt-1">
+                    <mat-label>Frequency</mat-label>
+                    <app-searchable-selector formControlName="frequency_id" apiUrl="api/email-subscription-frequencies"
+                        [(selectedValue)]="selectedFrequency" [enableSearch]="false" required>
+                    </app-searchable-selector>
+                    <mat-error *ngIf="isFieldValid('frequency_id')">{{getErrorMessage('frequency_id')}}
+                    </mat-error>
+                </mat-form-field>
+
+                <mat-form-field fxFlex="100%" class="mt-1">
+                    <textarea matInput formControlName="description" placeholder="Description"
+                        autocomplete="off"></textarea>
+                </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-type/email-subscription-type-form/email-subscription-type-form.component.spec.ts

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

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

@@ -0,0 +1,113 @@
+import { Component, Inject, OnInit } 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';
+
+const errorMessages: any = {
+  title: {
+    required: "Title is required"
+  },
+  code: {
+    required: "Code is required"
+  },
+  frequency_id: {
+    required: "Frequency is required"
+  },
+};
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email-subscription-type-form',
+  templateUrl: './email-subscription-type-form.component.html',
+  styleUrls: ['./email-subscription-type-form.component.scss']
+})
+export class EmailSubscriptionTypeFormComponent implements OnInit {
+
+  updateMode: boolean;
+  emailSubscriptionTypeFormGroup: FormGroup;
+  emailSubscriptionTypeFormFirstAttempt: boolean;
+  emailSubscriptionType: any;
+  selectedFrequency: any;
+  isLoading: boolean;
+  isSubmitLoading: boolean;
+
+  constructor(private fb: FormBuilder,
+    private formValidatorService: FormValidatorService,
+    private alertService: AlertService,
+    public dialogRef: MatDialogRef<EmailSubscriptionTypeFormComponent>,
+    @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.emailSubscriptionTypeFormGroup = this.fb.group({
+      id: [''],
+      title: ['', Validators.compose([Validators.required])],
+      code: ['', Validators.compose([Validators.required])],
+      frequency_id: ['', Validators.required],
+      description: [''],
+    });
+  }
+
+  ngOnInit() {
+    if (this.data.emailSubscriptionType?.id) {
+      this.isLoading = true;
+      this.emailSubscriptionType = this.data?.emailSubscriptionType;
+      this.updateMode = true;
+      this.selectedFrequency = this.emailSubscriptionType?.frequency || {};
+      this.emailSubscriptionTypeFormGroup.patchValue(this.emailSubscriptionType);
+    }
+  }
+
+  //Method to trigger login
+  submit() {
+    this.emailSubscriptionTypeFormGroup.markAllAsTouched();
+    this.emailSubscriptionTypeFormFirstAttempt = true;
+    if (this.emailSubscriptionTypeFormGroup.valid) {
+      this.isSubmitLoading = true;
+      const model = this.emailSubscriptionTypeFormGroup.value;
+      (
+        this.updateMode ?
+          this.http.put(`api/email-subscription-types/${model?.id}`, model) :
+          this.http.post(`api/email-subscription-types`, model)
+      )
+        .pipe(
+          finalize(() => this.isSubmitLoading = false),
+          untilDestroyed(this)
+        ).subscribe(result => {
+          this.alertService.addAlert("Email Type 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.emailSubscriptionTypeFormGroup, this.emailSubscriptionTypeFormFirstAttempt);
+  }
+
+  /**Method to find error in form fields*/
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(field, this.emailSubscriptionTypeFormGroup, errorMessages);
+  }
+
+  ngOnDestroy() {
+    // Needed for automatic unsubscribe with untilDestroyed
+  }
+
+}

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionTypeFormRoutingModule } from './email-subscription-type-form-routing.module';
+import { EmailSubscriptionTypeFormComponent } from './email-subscription-type-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: [EmailSubscriptionTypeFormComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+    EmailSubscriptionTypeFormRoutingModule,
+    LoaderModule
+  ],
+  exports: [EmailSubscriptionTypeFormComponent],
+  entryComponents: [EmailSubscriptionTypeFormComponent]
+})
+export class EmailSubscriptionTypeFormModule { }

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthenticationGuard } from '../../../core/authentication.guard';
+
+import { EmailSubscriptionTypeListComponent } from './email-subscription-type-list.component';
+
+export const estlr = {
+  title: 'Email Subscription Type',
+  permissions: {
+    only: ['client_admin'],
+    redirectTo: '/'
+  }
+};
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmailSubscriptionTypeListComponent,
+    canActivate: [AuthenticationGuard],
+    data: estlr
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmailSubscriptionTypeListRoutingModule { }

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

@@ -0,0 +1,76 @@
+<div class="mat-typography m-4">
+    <div fxLayout="row wrap" fxLayoutAlign="start center">
+        <mat-form-field>
+            <input matInput [formControl]="search" placeholder="Email Type" autocomplete="off" />
+            <button mat-button matSuffix mat-icon-button>
+                <mat-icon>search</mat-icon>
+            </button>
+            <button mat-button *ngIf="search.value" matSuffix mat-icon-button (click)="search.setValue('')">
+                <mat-icon>close</mat-icon>
+            </button>
+        </mat-form-field>
+        <div class="ml-2">
+            <button mat-raised-button color="primary" type="button" (click)="addEmailSubscriptionType()">+ Email
+                Type</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]="emailSubscriptionTypeList" matSort class="w-100 mt-1" multiTemplateDataRows
+                id="email-subscription-type-table">
+
+                <!-- Index Column -->
+                <ng-container matColumnDef="index">
+                    <th mat-header-cell *matHeaderCellDef> # </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType; let i = dataIndex"> {{ i+1 }} </td>
+                </ng-container>
+                <ng-container matColumnDef="title">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType;"> {{ emailSubscriptionType?.title }} </td>
+                </ng-container>
+                <ng-container matColumnDef="code">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType;"> {{ emailSubscriptionType?.code }}
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="frequency.title">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType;"> {{ emailSubscriptionType?.frequency?.title }}
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="description">
+                    <th mat-header-cell *matHeaderCellDef> Description </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType;"> {{ emailSubscriptionType?.description }}
+                    </td>
+                </ng-container>
+
+                <!-- Actions Column -->
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef> Actions </th>
+                    <td mat-cell *matCellDef="let emailSubscriptionType">
+                        <button type="button" mat-icon-button
+                            (click)="deleteEmailSubscriptionType($event,emailSubscriptionType)">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                        <button type="button" mat-icon-button
+                            (click)="editEmailSubscriptionType($event,emailSubscriptionType)">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+    </section>
+</div>

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

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

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

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

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

@@ -0,0 +1,170 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
+import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { MatSort } from '@angular/material/sort';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { EmailSubscriptionTypeFormComponent } from '../email-subscription-type-form/email-subscription-type-form.component';
+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';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email-subscription-type-list',
+  templateUrl: './email-subscription-type-list.component.html',
+  styleUrls: ['./email-subscription-type-list.component.scss']
+})
+export class EmailSubscriptionTypeListComponent implements OnInit {
+
+  emailSubscriptionTypeList: any[] = [];
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+  filters: any = {
+    sort_by: 'created_at|desc',
+    isLoadRelations: true,
+    relations: ['frequency']
+  };
+  search: FormControl = new FormControl('');
+
+
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  displayColumns: FormControl = new FormControl(['index', 'title', 'frequency.title', 'description', 'actions']);
+  displayedColumns: any[] = [];
+  availableDisplayColumns: any[] = [
+    { order: 1, value: 'index', name: 'Index' },
+    { order: 2, value: 'title', name: 'Title' },
+    { order: 3, value: 'code', name: 'Code' },
+    { order: 4, value: 'frequency.title', name: 'Frequency' },
+    { order: 5, value: 'description', name: 'Description' },
+    { order: 6, value: 'actions', name: 'Actions' }
+  ];
+
+  constructor(
+    private dialog: MatDialog,
+    private http: HttpService,
+  ) { }
+
+  ngOnInit() {
+    this.displayedColumns = this.displayColumns.value;
+    this.initializeData();
+    this.search.valueChanges.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      untilDestroyed(this)
+    ).subscribe(value => {
+      this.filters.search = value;
+      this.reload();
+    });
+
+    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-types`, { params: { ...this.filters, ...this.pageEvent } })
+      .pipe(untilDestroyed(this))
+      .subscribe((result: any) => {
+        this.emailSubscriptionTypeList = this.emailSubscriptionTypeList.concat(result.data);
+        this.pageEvent.page = result.current_page;
+        this.pageEvent.lastPage = result.last_page;
+      });
+  }
+
+  addEmailSubscriptionType() {
+    const dialogRef = this.dialog.open(EmailSubscriptionTypeFormComponent, {
+      width: '400px',
+      autoFocus: false,
+      data: {} // Any data passed here will be injected into the model
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+
+
+  editEmailSubscriptionType(event: any, emailSubscriptionType: any) {
+    event.stopPropagation();
+    const dialogRef = this.dialog.open(EmailSubscriptionTypeFormComponent, {
+      width: '400px',
+      autoFocus: false,
+      data: {
+        emailSubscriptionType: emailSubscriptionType
+      } // Any data passed here will be injected into the model
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+
+  deleteEmailSubscriptionType(event: any, emailSubscriptionType: any) {
+    event.stopPropagation();
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: '400px',
+      data: <ActionPopup>{
+        title: 'Delete Email Type',
+        message: `Are you sure to proceed delete the Email Type ${emailSubscriptionType.title}?`
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        //Action confirmed
+        this.http.delete(`api/email-subscription-types/${emailSubscriptionType?.id}`)
+          .pipe(untilDestroyed(this))
+          .subscribe((result: any) => {
+            this.emailSubscriptionTypeList = this.emailSubscriptionTypeList.filter(x => x.id !== emailSubscriptionType.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.emailSubscriptionTypeList = [];
+    this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    this.initializeData();
+  }
+
+  ngOnDestroy() {
+    //Until destroyed uses it
+  }
+
+}

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();
+  });
+});