Merge branch 'master' of https://github.com/CarnegieLearningWeb/educa…

…tional-experiment-client

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ab-testing",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "license": "MIT",
     "scripts": {
         "ng": "ng",
@@ -62,6 +62,7 @@
         "lodash.groupby": "^4.6.0",
         "ng-pick-datetime": "^7.0.0",
         "ngx-skeleton-loader": "^2.2.0",
+        "papaparse": "^5.3.0",
         "rxjs": "~6.5.0",
         "tslib": "^1.9.0",
         "upgrade_types": "^1.0.4",

projects/abtesting/src/app/core/experiments/experiments.data.service.ts

@@ -27,6 +27,11 @@ export class ExperimentDataService {
     return this.http.post(url, { ...experiment });
   }
 
+  importExperiment(experiment: Experiment) {
+    const url = environment.api.importExperiment;
+    return this.http.post(url, {...experiment});
+  }
+
   updateExperiment(experiment: Experiment) {
     const url = `${environment.api.updateExperiments}/${experiment.id}`;
     return this.http.put(url, { ...experiment });

projects/abtesting/src/app/core/experiments/experiments.service.ts

@@ -91,6 +91,12 @@ export class ExperimentService {
     );
   }
 
+  importExperiment(experiment: Experiment) {
+    this.store$.dispatch(
+      experimentAction.actionUpsertExperiment({ experiment, actionType: UpsertExperimentType.IMPORT_EXPERIMENT })
+    );
+  }
+
   updateExperiment(experiment: ExperimentVM) {
     delete experiment.stat;
     this.store$.dispatch(

projects/abtesting/src/app/core/experiments/store/experiments.effects.ts

@@ -28,14 +28,16 @@ import {
 } from './experiments.selectors';
 import { combineLatest } from 'rxjs';
 import { selectCurrentUser } from '../../auth/store/auth.selectors';
+import { MatSnackBar } from '@angular/material';
 
 @Injectable()
 export class ExperimentEffects {
   constructor(
     private actions$: Actions,
     private store$: Store<AppState>,
     private experimentDataService: ExperimentDataService,
-    private router: Router
+    private router: Router,
+    private _snackBar: MatSnackBar
   ) {}
 
   getPaginatedExperiment$ = createEffect(() =>
@@ -129,10 +131,11 @@ export class ExperimentEffects {
         const experimentMethod =
           actionType === UpsertExperimentType.CREATE_NEW_EXPERIMENT
             ? this.experimentDataService.createNewExperiment(experiment)
+            : actionType === UpsertExperimentType.IMPORT_EXPERIMENT
+            ? this.experimentDataService.importExperiment(experiment)
             : this.experimentDataService.updateExperiment(experiment);
         return experimentMethod.pipe(
-          switchMap((data: Experiment) =>
-            this.experimentDataService.getAllExperimentsStats([data.id]).pipe(
+          switchMap((data: Experiment) => this.experimentDataService.getAllExperimentsStats([data.id]).pipe(
               switchMap((experimentStat: IExperimentEnrollmentStats) => {
                 const stats = { ...experimentStats, [data.id]: experimentStat[0] };
                 const queryIds = data.queries.map(query => query.id);
@@ -145,7 +148,10 @@ export class ExperimentEffects {
               })
             )
           ),
-          catchError(() => [experimentAction.actionUpsertExperimentFailure()])
+          catchError((error) => {
+            this._snackBar.open(error.error.message, null, { duration: 2000 });
+            return [experimentAction.actionUpsertExperimentFailure()];
+          })
         );
       })
     )

projects/abtesting/src/app/core/experiments/store/experiments.model.ts

@@ -71,7 +71,8 @@ export enum DateType {
 
 export enum UpsertExperimentType {
   CREATE_NEW_EXPERIMENT = 'Create new experiment',
-  UPDATE_EXPERIMENT = 'Update experiment'
+  UPDATE_EXPERIMENT = 'Update experiment',
+  IMPORT_EXPERIMENT = 'Import experiment'
 }
 
 export enum EndExperimentCondition {

projects/abtesting/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.html

@@ -24,16 +24,28 @@
         <mat-icon matSuffix>search</mat-icon>
       </mat-form-field>
     </div>
-    <button
-      mat-flat-button
-      color="primary"
-      class="ft-14-700"
-      (click)="openNewExperimentDialog()"
-      *ngIf="(permissions$ | async)?.experiments.create"
-    >
-      <mat-icon>add</mat-icon>
-      <span>{{ 'home.experiment.add-experiment.text' | translate }}</span>
-    </button>
+    <div>
+      <button
+        (click)="openImportExperimentDialog()"
+        mat-flat-button
+        color="primary"
+        class="ft-14-700 import-experiment"
+        *ngIf="(permissions$ | async)?.experiments.create"
+      >
+        <mat-icon>add</mat-icon>
+        <span>{{ 'home.experiment.import-experiment.text' | translate }}</span>
+      </button>
+      <button
+        mat-flat-button
+        color="primary"
+        class="ft-14-700"
+        (click)="openNewExperimentDialog()"
+        *ngIf="(permissions$ | async)?.experiments.create"
+      >
+        <mat-icon>add</mat-icon>
+        <span>{{ 'home.experiment.add-experiment.text' | translate }}</span>
+      </button>
+    </div>
   </div>
 
   <div

projects/abtesting/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.scss

@@ -33,6 +33,10 @@ $experiment-state-light-color: #8f9bb3;
       height: 40px;
       color: var(--white);
     }
+
+    .import-experiment{
+      margin-right: 20px;
+    }
   }
 
   ::ng-deep .mat-form-field-suffix {

projects/abtesting/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts

@@ -19,6 +19,7 @@ import { UserPermission } from '../../../../../core/auth/store/auth.models';
 import { AuthService } from '../../../../../core/auth/auth.service';
 import { SettingsService } from '../../../../../core/settings/settings.service';
 import { ThemeOptions } from '../../../../../core/settings/store/settings.model';
+import { ImportExperimentComponent } from '../modal/import-experiment/import-experiment.component';
 
 @Component({
   selector: 'home-experiment-list',
@@ -170,6 +171,16 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
     });
   }
 
+  openImportExperimentDialog() {
+    const dialogRef = this.dialog.open(ImportExperimentComponent, {
+      panelClass: 'import-experiment-modal'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // Code will be executed after closing dialog
+    });
+  }
+
   setChipsVisible(experimentId: string, type: string) {
     const index = this[type].findIndex(
       data => data.experimentId === experimentId

projects/abtesting/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.html

@@ -0,0 +1,33 @@
+<div class="import-experiment-container">
+  <span class="ft-24-700 title">{{ 'home.experiment.import-experiment.text' | translate | titlecase }}</span>
+
+  <div class="import-experiment-body">
+    <p class="ft-16-400">
+      {{ 'home.import-experiment.message.text' | translate }}
+    </p>
+    <input
+        accept=".json"
+        type="file"
+        class="ft-14-400 file-input"
+        (change)="uploadFile($event)"
+      />
+      <span class="error-msg" *ngIf="!isExperimentJSONValid">
+        {{ 'home.import-experiment.error.message.text' | translate }}
+      </span>
+  </div>
+
+  <div class="button-container">
+    <button class="modal-btn" mat-raised-button (click)="onCancelClick()">
+      {{ 'global.cancel.text' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      class="modal-btn default-button"
+      [ngClass]="{ 'default-button--disabled': !experimentInfo }"
+      [disabled]="!experimentInfo"
+      (click)="importExperiment()"
+    >
+      {{ 'global.import.text' | translate }}
+    </button>
+  </div>
+</div>

projects/abtesting/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.scss

@@ -0,0 +1,33 @@
+.import-experiment-container {
+  .title {
+    display: block;
+    padding: 30px 40px 0;
+    height: 88px;
+  }
+
+  .import-experiment-body {
+    margin: 20px 0;
+    padding: 0 40px;
+
+    .file-input {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .error-msg {
+      display: block;
+      padding-top: 10px;
+    }
+
+    .error-msg {
+      color: var(--red);
+    }
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 40px 40px;
+  }
+}

projects/abtesting/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportExperimentComponent } from './import-experiment.component';
+import { TestingModule } from '../../../../../../../testing/testing.module';
+import { ExperimentService } from '../../../../../../core/experiments/experiments.service';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+describe('ImportExperimentComponent', () => {
+  let component: ImportExperimentComponent;
+  let fixture: ComponentFixture<ImportExperimentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportExperimentComponent ],
+      imports: [TestingModule],
+      providers: [
+        ExperimentService,
+        { provide: MatDialogRef, useValue: {} },
+	      { provide: MAT_DIALOG_DATA, useValue: [] },
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportExperimentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});