retriving single model when accesing model info (#974)

* retriving single model when accesing model info

* Fixed spelling mistake

Author: smchedlidze826

ui/src/app/core/model/model.service.ts

@@ -44,6 +44,10 @@ export class ModelService {
     );
   }
 
+  getModel(applicationId: string, currentModelId: string): Observable<Model> {
+    return this.http.get<Model>(`${environment.adminApiUrl}app/${applicationId}/model/${currentModelId}`);
+  }
+
   getAll(applicationId: string): Observable<Model[]> {
     return this.http
       .get<Model[]>(`${environment.adminApiUrl}app/${applicationId}/models`)

ui/src/app/features/model-info/model-info.component.ts

@@ -15,7 +15,6 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 import { ServiceTypes } from 'src/app/data/enums/service-types.enum';
@@ -34,17 +33,13 @@ export class ModelInfoComponent implements OnInit, OnDestroy {
   recognition = ServiceTypes.Recognition;
   statistics$: Observable<Statistics[]>;
 
-  constructor(private modelInfoFacade: ModelInfoFacade, private route: ActivatedRoute) {
+  constructor(private modelInfoFacade: ModelInfoFacade) {
     this.statistics$ = this.modelInfoFacade.statistics$.pipe(shareReplay());
   }
 
   ngOnInit(): void {
-    const modelId = this.route.snapshot.queryParams.model;
-    const app = this.route.snapshot.queryParams.app;
-
     this.modelInfoFacade.statistics$.subscribe();
 
-    this.modelInfoFacade.loadModels(app, modelId);
     this.subs = this.modelInfoFacade.currentModel$.subscribe(model => (this.currentModel = model));
   }
 

ui/src/app/features/model-info/model-info.facade.ts

@@ -21,8 +21,7 @@ import { filter } from 'rxjs/operators';
 import { Application } from 'src/app/data/interfaces/application';
 import { Model } from 'src/app/data/interfaces/model';
 import { Statistics } from 'src/app/data/interfaces/statistics';
-import { selectCurrentApp } from 'src/app/store/application/selectors';
-import { loadModels, setSelectedModelIdEntityAction } from 'src/app/store/model/action';
+import { loadModel, setSelectedModelIdEntityAction } from 'src/app/store/model/action';
 import { selectCurrentModel } from 'src/app/store/model/selectors';
 import { loadModelStatistics } from 'src/app/store/statistics/actions';
 import { selectModelStatistics } from 'src/app/store/statistics/selectors';
@@ -37,10 +36,4 @@ export class ModelInfoFacade {
     this.currentModel$ = this.store.select(selectCurrentModel).pipe(filter(model => !!model));
     this.statistics$ = this.store.select(selectModelStatistics).pipe(filter(data => !!data[0]));
   }
-
-  loadModels(applicationId: string, selectedModelId: string): void {
-    this.store.dispatch(loadModels({ applicationId }));
-    this.store.dispatch(setSelectedModelIdEntityAction({ selectedModelId }));
-    this.store.dispatch(loadModelStatistics({ appId: applicationId, modelId: selectedModelId }));
-  }
 }

ui/src/app/features/password-recovery-dialog/password-recovery.component.html

@@ -36,7 +36,7 @@ <h1 mat-dialog-title class="dialog__header--title">{{ 'recovery.password_recover
         {{ 'common.capital.cancel' | translate | titlecase }}
       </button>
       <button type="submit" [mat-dialog-close]="email" class="save-btn" [disabled]="!form.valid">
-        {{ 'common.capital.create' | translate | titlecase }}
+        {{ 'common.capital.submit' | translate | titlecase }}
       </button>
     </div>
   </form>

ui/src/app/pages/manage-collection/manage-collection.service.ts

@@ -19,7 +19,7 @@ import { Store } from '@ngrx/store';
 
 import { loadApplications, setSelectedAppIdEntityAction } from '../../store/application/action';
 import { getUserInfo } from '../../store/userInfo/action';
-import { loadModels, setSelectedModelIdEntityAction } from '../../store/model/action';
+import { loadModel, setSelectedModelIdEntityAction } from '../../store/model/action';
 import { Routes } from '../../data/enums/routers-url.enum';
 import { resetSubjects } from '../../store/manage-collectiom/action';
 
@@ -35,7 +35,7 @@ export class ManageCollectionPageService {
     this.modelId = this.route.snapshot.queryParams.model;
 
     if (this.appId && this.modelId) {
-      this.store.dispatch(loadModels({ applicationId: this.appId }));
+      this.store.dispatch(loadModel({ applicationId: this.appId, selectedModelId: this.modelId }));
       this.store.dispatch(setSelectedAppIdEntityAction({ selectedAppId: this.appId }));
       this.store.dispatch(setSelectedModelIdEntityAction({ selectedModelId: this.modelId }));
       this.store.dispatch(loadApplications());

ui/src/app/store/auth/effects.ts

@@ -67,7 +67,6 @@ export class AuthEffects {
     ofType(logIn),
     switchMap(action =>
       this.authService.logIn(action.email, action.password, GranTypes.Password).pipe(
-        tap(() => 'from login'),
         map(() => logInSuccess()),
         catchError(error => observableOf(logInFail(error)))
       )
@@ -136,9 +135,7 @@ export class AuthEffects {
     ofType(signUpSuccess),
     withLatestFrom(this.store.select(selectMailStatus)),
     map(([action, mailStatus]) =>
-      mailStatus.mailServiceEnabled
-        ? this.store.dispatch(confirmEmailMessage())
-        : this.store.dispatch(logIn({ email: action.email, password: action.password }))
+      mailStatus.mailServiceEnabled ? confirmEmailMessage() : logIn({ email: action.email, password: action.password })
     )
   );
 

ui/src/app/store/model/action.ts

@@ -17,6 +17,10 @@
 import { createAction, props } from '@ngrx/store';
 import { Model, ModelUpdate } from 'src/app/data/interfaces/model';
 
+export const loadModel = createAction('[Model] Load Model', props<{ applicationId: string; selectedModelId: string }>());
+export const loadModelSuccess = createAction('[Model] Load Model Success', props<{ model: Model }>());
+export const loadModelFail = createAction('[Model] Load Model Fail', props<{ error: any }>());
+
 export const loadModels = createAction('[Model] Load Models', props<{ applicationId: string }>());
 export const loadModelsSuccess = createAction('[Model] Load Models Success', props<{ models: Model[] }>());
 export const loadModelsFail = createAction('[Model] Load Models Fail', props<{ error: any }>());

ui/src/app/store/model/effects.ts

@@ -38,6 +38,9 @@ import {
   updateModel,
   updateModelFail,
   updateModelSuccess,
+  loadModel,
+  loadModelFail,
+  loadModelSuccess,
 } from './action';
 import { ServiceTypes } from 'src/app/data/enums/service-types.enum';
 import { Store } from '@ngrx/store';
@@ -51,7 +54,18 @@ export class ModelEffects {
     private snackBarService: SnackBarService,
     private router: Router,
     private store: Store<any>
-  ) { }
+  ) {}
+
+  @Effect()
+  loadModel$ = this.actions.pipe(
+    ofType(loadModel),
+    switchMap(action =>
+      this.modelService.getModel(action.applicationId, action.selectedModelId).pipe(
+        map(model => loadModelSuccess({ model })),
+        catchError(error => of(loadModelFail({ error })))
+      )
+    )
+  );
 
   @Effect()
   loadModels$ = this.actions.pipe(
@@ -69,8 +83,8 @@ export class ModelEffects {
   @Effect()
   createModel$ = this.actions.pipe(
     ofType(createModel),
-    tap(({ model }) => this.isFirtsService = model.isFirstService),
-    switchMap((action) =>
+    tap(({ model }) => (this.isFirtsService = model.isFirstService)),
+    switchMap(action =>
       this.modelService.create(action.model.applicationId, action.model.name, action.model.type).pipe(
         map(model => createModelSuccess({ model })),
         catchError(error => of(createModelFail({ error })))
@@ -83,24 +97,25 @@ export class ModelEffects {
     ofType(createModelSuccess),
     withLatestFrom(this.store.select(selectCurrentApp)),
     tap(([{ model }, app]) => {
-      if(this.isFirtsService){
-        model.type === ServiceTypes.Recognition ?
-        this.router.navigate([Routes.ManageCollection], {
-          queryParams: {
-            app: app.id,
-            model: model.id,
-            type: model.type,
-          },
-        }) : this.router.navigate([Routes.TestModel], {
-          queryParams: {
-            app: app.id,
-            model: model.id,
-            type: model.type,
-          },
-        });
+      if (this.isFirtsService) {
+        model.type === ServiceTypes.Recognition
+          ? this.router.navigate([Routes.ManageCollection], {
+              queryParams: {
+                app: app.id,
+                model: model.id,
+                type: model.type,
+              },
+            })
+          : this.router.navigate([Routes.TestModel], {
+              queryParams: {
+                app: app.id,
+                model: model.id,
+                type: model.type,
+              },
+            });
       }
     })
-  )
+  );
 
   @Effect()
   updateModel$ = this.actions.pipe(

ui/src/app/store/model/reducers.ts

@@ -34,6 +34,8 @@ import {
   updateModel,
   updateModelFail,
   updateModelSuccess,
+  loadModelFail,
+  loadModelSuccess,
 } from './action';
 
 export interface ModelEntityState extends EntityState<Model> {
@@ -51,8 +53,12 @@ const initialState: ModelEntityState = modelAdapter.getInitialState({
 const reducer: ActionReducer<ModelEntityState> = createReducer(
   initialState,
   on(loadModels, createModel, cloneModel, updateModel, deleteModel, state => ({ ...state, isPending: true })),
-  on(loadModelsFail, createModelFail, cloneModelFail, updateModelFail, deleteModelFail, state => ({ ...state, isPending: false })),
+  on(loadModelFail, loadModelsFail, createModelFail, cloneModelFail, updateModelFail, deleteModelFail, state => ({
+    ...state,
+    isPending: false,
+  })),
   on(loadModelsSuccess, (state, { models }) => modelAdapter.setAll(models, { ...state, isPending: false })),
+  on(loadModelSuccess, (state, { model }) => modelAdapter.upsertOne(model, state)),
   on(createModelSuccess, cloneModelSuccess, (state, { model }) => modelAdapter.addOne(model, { ...state, isPending: false })),
   on(updateModelSuccess, (state, { model }) => modelAdapter.updateOne({ id: model.id, changes: model }, { ...state, isPending: false })),
   on(deleteModelSuccess, (state, { modelId }) => modelAdapter.removeOne(modelId, { ...state, isPending: false })),