Clone Settings complete reimbursable export settings (#285)

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
 import { MatLegacySnackBarModule as MatSnackBarModule, MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/legacy-snack-bar';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 
 import * as Sentry from '@sentry/angular';
 
@@ -24,7 +25,8 @@ import { GlobalErrorHandler } from './app.errorhandling';
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatDialogModule,
   ],
   providers: [
     {

src/app/auth/auth.module.ts

@@ -2,14 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-
 import { LoginComponent } from './login/login.component';
 import { LogoutComponent } from './logout/logout.component';
 import { FyleCallbackComponent } from './fyle-callback/fyle-callback.component';
 import { AuthComponent } from './auth.component';
 import { AuthRoutingModule } from './auth-routing.module';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { SharedLoginComponent } from './shared-login/shared-login.component';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 
 
 @NgModule({
@@ -25,7 +24,8 @@ import { SharedLoginComponent } from './shared-login/shared-login.component';
     AuthRoutingModule,
     FlexLayoutModule,
     MatButtonModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatButtonModule
   ]
 })
 export class AuthModule { }

src/app/core/core.module.ts

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { EmailMultiSelectComponent } from './email-multi-select/email-multi-select.component';
 
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    EmailMultiSelectComponent
+  ],
   imports: [
-    CommonModule
+    CommonModule,
+    MatDialogModule
   ]
 })
 export class CoreModule { }

src/app/core/email-multi-select/email-multi-select.component.html

@@ -0,0 +1,57 @@
+<div [formGroup]="form">
+  <mat-form-field floatLabel="always" appearance="outline" class="configuration--form-field">
+      <mat-select [placeholder]="placeholder" [formControlName]="formControllerName"
+          [compareWith]="helperService.compareObjects" multiple>
+          <app-simple-text-search [placeholder]="'Search by Name'" [page]="SimpleSearchPage.CONFIGURATION"
+              [searchType]="SimpleSearchType.SELECT_FIELD" [form]="form"></app-simple-text-search>
+          <mat-select-trigger fxLayout="row" fxLayoutAlign="space-between center">
+              <div fxLayout="row">
+                  <div fxLayout="row" fxLayoutAlign="space-between center"
+                      class="email-multi-select--selected-email">
+                      <div class="email-multi-select--display-email">
+                          {{form.value.emails ? form.value.emails[0] : ''}}
+                      </div>
+                      <div fxLayout="column" class="email-multi-select--vertical"></div>
+                      <div class="mat-icon-close" (click)="delete($event, form.value.emails[0])">
+                          <img src="assets/images/svgs/actions/close.svg">
+                      </div>
+                  </div>
+                  <div *ngIf="form.value.emails?.length > 1" class="example-additional-selection">
+                      <div class="email-multi-select--email-number">
+                          +{{form.value.emails.length - 1}}
+                      </div>
+                  </div>
+              </div>
+              <div *ngIf="form.value.emails?.length > 1" [ngClass]="[isCloneSettings ? 'email-multi-select--delele-all-icon-clone-settings' : 'email-multi-select--delele-all-icon']"
+                  (click)="delete($event, form.value.emails[0], true)">
+                  <img src="assets/images/svgs/actions/close.svg">
+              </div>
+          </mat-select-trigger>
+          <div *ngFor="let option of options | search : form.value.searchOption">
+              <p (click)="$event.stopPropagation()" *ngIf="option.name === 'No result found' "
+                  class="align-center italic email-multi-select--no-result">No result
+                  found</p>
+              <mat-option *ngIf="option.name !== 'No result found' " [matTooltip]="option.email"
+                  [matTooltipDisabled]="option.email.length <= 40" matTooltipPosition="above" matTooltipClass="above"
+                  (click)="helperService.clearSearchText(form)" [value]="option.email" class="multiline-mat-option"
+                  fxLayout="row" fxLayoutAlign="start">
+                  <div *ngIf="option.name !== 'No result found' ">
+                      <div class="email-multi-select--head-name ">
+                          {{option.name}}
+                      </div>
+                      <div class="email-multi-select--bottom-name">
+                          {{option.email}}
+                      </div>
+                  </div>
+                  <img *ngIf="(form.value[formControllerName] | json) === ({name: option.name, email: option.email} | json) && (option.name !== 'No result found')"
+                      src="assets/images/svgs/general/tick-pink.svg" class="selected-value-check-mark">
+              </mat-option>
+          </div>
+
+      </mat-select>
+      <div class="mat-select-arrow-closed"></div>
+  </mat-form-field>
+  <app-mandatory-error-message
+      *ngIf="isFieldMandatory && form.controls[formControllerName].touched && !form.controls[formControllerName].valid && !form.controls[formControllerName].disabled"
+      [listName]="mandatoryErrorListName" [customErrorMessage]="customErrorMessage"></app-mandatory-error-message>
+</div>

src/app/core/email-multi-select/email-multi-select.component.scss

@@ -0,0 +1,111 @@
+.email-multi-select {
+  &--email-number {
+      margin-top: 5px;
+  }
+
+  &--delele-all-icon {
+      margin-right: 5px;
+      color: #5a5d72;
+  }
+
+  &--delele-all-icon-clone-settings {
+      margin-right: 25px;
+      color: #5a5d72;
+  }
+
+  &--delele-all-icon img {
+      height: 10px;
+      width: 10px;
+  }
+
+  &--delele-all-icon-clone-settings img {
+      height: 10px;
+      width: 10px;
+  }
+
+  &--selected-email {
+      background-color: #ffffff;
+      border: 1px solid #dfdfe2;
+      border-radius: 12px;
+      padding: 10px;
+      height: 15px;
+      font-size: 12px;
+      margin-top: 2px;
+  }
+
+  &--vertical {
+      border-left: 1px solid #dfdfe2;
+      height: 20px;
+      margin-left: 10px;
+  }
+
+  &--display-email {
+      display: block;
+      max-width: 160px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+  }
+
+  &--bottom-name {
+      font-size: 12px;
+      line-height: 15px;
+      color: #A9ACBC;
+  }
+
+  &--head-name {
+      font-size: 14px;
+      line-height: 18px;
+      color: #414562;
+      flex: none;
+      order: 1;
+      flex-grow: 0;
+  }
+
+  &--no-result {
+      padding: 8px 16px;
+      margin: 10px;
+  }
+}
+
+.configuration {
+  &--field-section {
+      padding: 0px 32px;
+  }
+}
+
+p {
+  margin: 0;
+}
+
+.mat-icon-close {
+  color: #a9acbc;
+  padding-left: 5px;
+  padding-top: 5px;
+}
+
+.mat-icon-close img {
+  height: 10px;
+  width: 10px;
+}
+
+.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+  color: #e91e63;
+}
+
+.multiline-mat-option.mat-option {
+  white-space: normal;
+  line-height: normal;
+  height: auto !important;
+  font-size: none !important;
+}
+
+.mat-option {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin: 10px;
+}
+
+.example-additional-selection {
+  margin-left: 10px;
+}

src/app/core/email-multi-select/email-multi-select.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailMultiSelectComponent } from './email-multi-select.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { SearchPipe } from 'src/app/shared/pipes/search.pipe';
+import { FormBuilder } from '@angular/forms';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
+describe('EmailMultiSelectComponent', () => {
+  let component: EmailMultiSelectComponent;
+  let fixture: ComponentFixture<EmailMultiSelectComponent>;
+  const routerSpy = { navigate: jasmine.createSpy('navigate'), url: '/path' };
+  let router: Router;
+  let formBuilder: FormBuilder;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatDialogModule, NoopAnimationsModule],
+      declarations: [ EmailMultiSelectComponent, SearchPipe ],
+      providers: [
+        FormBuilder,
+        { provide: Router, useValue: routerSpy }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailMultiSelectComponent);
+    component = fixture.componentInstance;
+    formBuilder = TestBed.inject(FormBuilder);
+    const form = formBuilder.group({
+      searchOption: [],
+      emails: [['[email protected]', '[email protected]']],
+      employeeMapping: [['EMPLOYEE']]
+    });
+    component.form = form;
+    const adminEmails: any[] = [{name: 'fyle', email: '[email protected]'}, {name: 'dhaara', email: '[email protected]'}];
+    component.options = adminEmails;
+    component.formControllerName = 'employeeMapping';
+    component.isFieldMandatory = true;
+    component.placeholder = 'Select representation';
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('delete function check', () => {
+    const event = new Event("click", undefined);
+    expect(component.delete(event, '[email protected]')).toBeUndefined();
+    fixture.detectChanges();
+    expect(component.form.controls.emails.value).toEqual(['[email protected]']);
+    expect(component.delete(event, '[email protected]', true)).toBeUndefined();
+    fixture.detectChanges();
+    expect(component.form.controls.emails.value).toBeNull();
+  });
+});

src/app/core/email-multi-select/email-multi-select.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AdvancedSettingFormOption } from 'src/app/core/models/configuration/advanced-setting.model';
+import { ExportSettingFormOption } from 'src/app/core/models/configuration/export-setting.model';
+import { SimpleSearchPage, SimpleSearchType } from 'src/app/core/models/enum/enum.model';
+import { HelperService } from 'src/app/core/services/core/helper.service';
+
+@Component({
+  selector: 'app-email-multi-select',
+  templateUrl: './email-multi-select.component.html',
+  styleUrls: ['./email-multi-select.component.scss']
+})
+export class EmailMultiSelectComponent implements OnInit {
+
+  @Input() form: FormGroup;
+
+  @Input() options: ExportSettingFormOption[] | AdvancedSettingFormOption[] | any[];
+
+  @Input() placeholder: string;
+
+  @Input() formControllerName: string;
+
+  @Input() isFieldMandatory: boolean;
+
+  @Input() mandatoryErrorListName: string;
+
+  @Input() customErrorMessage: string;
+
+  @Input() isCloneSettings: boolean;
+
+  SimpleSearchPage = SimpleSearchPage;
+
+  SimpleSearchType = SimpleSearchType;
+
+  constructor(
+    public helperService: HelperService
+  ) { }
+
+  delete(event: Event, email: string, deleteAll: boolean = false) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (deleteAll) {
+      this.form.controls.emails.patchValue(null);
+    } else {
+      const emails = this.form.value.emails.filter((value: string) => value !== email);
+      this.form.controls.emails.patchValue(emails);
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+}