SHIBUI-1385 Implemented version restore editing

ui/src/app/metadata/configuration/action/restore.action.ts

@@ -10,6 +10,9 @@ export enum RestoreActionTypes {
     UPDATE_RESTORATION_REQUEST = '[Restore Version] Update Changes Request',
     UPDATE_RESTORATION_SUCCESS = '[Restore Version] Update Changes Success',
 
+    UPDATE_STATUS = '[Restore Version] Update Restore Form Status',
+    SET_SAVING_STATUS = '[Restore Version] Set Saving Status',
+
     CLEAR_VERSION = '[Restore Version] Clear Versions',
     CANCEL_RESTORE = '[Restore Version] Cancel Restore'
 }
@@ -39,6 +42,18 @@ export class UpdateRestorationChangesSuccess implements Action {
     constructor(public payload: any) { }
 }
 
+export class UpdateRestoreFormStatus implements Action {
+    readonly type = RestoreActionTypes.UPDATE_STATUS;
+
+    constructor(public payload: { [key: string]: string }) { }
+}
+
+export class SetSavingStatus implements Action {
+    readonly type = RestoreActionTypes.SET_SAVING_STATUS;
+
+    constructor(public payload: boolean) { }
+}
+
 export class CancelRestore implements Action {
     readonly type = RestoreActionTypes.CANCEL_RESTORE;
     constructor() { }
@@ -50,4 +65,6 @@ export type RestoreActionsUnion =
     | RestoreVersionError
     | UpdateRestorationChangesRequest
     | UpdateRestorationChangesSuccess
+    | UpdateRestoreFormStatus
+    | SetSavingStatus
     | CancelRestore;

ui/src/app/metadata/configuration/component/editor.component.html

@@ -11,4 +11,4 @@
     [validators]="validators"
     [bindings]="bindings"
     (onChange)="change.emit($event.value)"
-    (onError)="status.emit($event)"></sf-form>
+    (onErrorChange)="status.emit($event)"></sf-form>

ui/src/app/metadata/configuration/component/editor.component.ts

@@ -18,9 +18,12 @@ export class MetadataEditorComponent {
 
     @Output() change: EventEmitter<any> = new EventEmitter();
     @Output() status: EventEmitter<any> = new EventEmitter();
+    @Output() onLockChange: EventEmitter<any> = new EventEmitter();
 
     lock: FormControl = new FormControl(true);
 
-    constructor() {}
+    constructor() {
+        this.lock.valueChanges.subscribe(locked => this.onLockChange.emit(locked));
+    }
 }
 

ui/src/app/metadata/configuration/component/metadata-header.component.spec.ts

@@ -9,7 +9,6 @@ import { MetadataHeaderComponent } from './metadata-header.component';
         <metadata-header
             [isEnabled]="isEnabled"
             [version]="version"
-            [versionNumber]="versionNumber"
             [isCurrent]="isCurrent"
             ></metadata-header>
     `
@@ -25,7 +24,6 @@ class TestHostComponent {
         creator: 'foobar',
         date: new Date().toDateString()
     };
-    versionNumber = 1;
     isCurrent = false;
 }
 

ui/src/app/metadata/configuration/container/configuration.component.spec.ts

@@ -59,12 +59,4 @@ describe('Metadata Configuration Page Component', () => {
     it('should load metadata objects', async(() => {
         expect(app).toBeTruthy();
     }));
-
-    describe('hasVersion function', () => {
-        it('should determine if a version is defined', () => {
-            expect(app.hasVersion([[{id: 'foo'}], { version: 'foo' }])).toBe('foo');
-            expect(app.hasVersion([[{ id: 'foo' }], {}])).toBe('foo');
-            expect(app.hasVersion([[], {}])).toBeNull();
-        });
-    });
 });

ui/src/app/metadata/configuration/container/restore-edit-step.component.html

@@ -2,5 +2,8 @@
     [schema]="schema$ | async"
     [model]="model$ | async"
     [validators]="validators$ | async"
+    [lockable]="lockable$ | async"
     (change)="onChange($event)"
+    (status)="statusChange$.next($event)"
+    (onLockChange)="lockChange$.next($event)"
 ></metadata-editor>

ui/src/app/metadata/configuration/container/restore-edit-step.component.ts

@@ -1,30 +1,38 @@
-import { Component } from '@angular/core';
-import { Observable, combineLatest, of } from 'rxjs';
+import { Component, OnDestroy } from '@angular/core';
+import { Observable, combineLatest, of, Subject } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import {
-    ConfigurationState,
-    getFormattedModel,
-    getRestorationChanges
+    ConfigurationState, getFormattedModel
 } from '../reducer';
-import { getWizardDefinition, getSchema, getValidators } from '../../../wizard/reducer';
-import { Wizard } from '../../../wizard/model';
+import { getWizardDefinition, getSchema, getValidators, getCurrent, getWizardIndex } from '../../../wizard/reducer';
+import { Wizard, WizardStep } from '../../../wizard/model';
 import { Metadata } from '../../domain/domain.type';
-import { map, switchMap } from 'rxjs/operators';
+import { map, switchMap, withLatestFrom } from 'rxjs/operators';
 import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
-import { UpdateRestorationChangesRequest } from '../action/restore.action';
+import { UpdateRestorationChangesRequest, UpdateRestoreFormStatus } from '../action/restore.action';
+import { LockEditor, UnlockEditor } from '../../../wizard/action/wizard.action';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'restore-edit-step',
     templateUrl: './restore-edit-step.component.html',
     styleUrls: []
 })
 
-export class RestoreEditStepComponent {
+export class RestoreEditStepComponent implements OnDestroy {
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+    readonly lockChange$: Subject<boolean> = new Subject<boolean>();
+    readonly statusChange$: Subject<any> = new Subject<any>();
 
     definition$: Observable<Wizard<Metadata>> = this.store.select(getWizardDefinition);
     schema$: Observable<any> = this.store.select(getSchema);
     model$: Observable<Metadata> = this.store.select(getFormattedModel);
+    step$: Observable<WizardStep> = this.store.select(getCurrent);
+
+    lockable$: Observable<boolean> = this.step$.pipe(map(step => step.locked));
 
     validators$: Observable<any>;
 
@@ -40,29 +48,31 @@ export class RestoreEditStepComponent {
             switchMap(selections => this.store.select(getValidators(selections)))
         );
 
-        this.store.select(getRestorationChanges).subscribe(console.log);
+        this.step$
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(s => this.lockChange$.next(s && s.locked ? true : false));
+
+        this.lockChange$
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(locked => this.store.dispatch(locked ? new LockEditor() : new UnlockEditor()));
+
+        this.statusChange$
+            .pipe(
+                takeUntil(this.ngUnsubscribe),
+                withLatestFrom(this.store.select(getWizardIndex))
+            )
+            .subscribe(([errors, currentPage]) => {
+                const status = { [currentPage]: !(errors.value) ? 'VALID' : 'INVALID' };
+                this.store.dispatch(new UpdateRestoreFormStatus(status));
+            });
     }
 
     onChange(changes: any): void {
         this.store.dispatch(new UpdateRestorationChangesRequest(changes));
     }
-}
 
-/*
-this.valueChangeEmitted$.pipe(
-            map(changes => changes.value),
-            withLatestFrom(this.definition$, this.store.select(fromProvider.getSelectedProvider)),
-            filter(([changes, definition, provider]) => definition && changes && provider),
-            map(([changes, definition, provider]) => {
-                const parsed = definition.parser(changes);
-                return ({
-                    ...parsed,
-                    metadataFilters: [
-                        ...provider.metadataFilters,
-                        ...(parsed.metadataFilters || [])
-                    ]
-                });
-            })
-        )
-            .subscribe(changes => this.store.dispatch(new UpdateProvider(changes)));
-*/
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}

ui/src/app/metadata/configuration/container/restore-edit.component.html

@@ -4,14 +4,6 @@
             <editor-nav
                 [format]="formats.DROPDOWN"
                 [status]="status$ | async">
-                <a class="dropdown-item"
-                    *ngIf="canFilter$ | async"
-                    [routerLink]="['../', 'filters']"
-                    routerLinkActive="active"
-                    [attr.aria-label]="'label.filter-list' | translate"
-                    role="button">
-                    <translate-i18n key="label.filter-list"></translate-i18n>
-                </a>
             </editor-nav>
         </div>
         <div class="col-6 col-lg-3 order-2 text-right">
@@ -46,15 +38,8 @@
     <div class="row">
         <div class="col-lg-3 d-none d-lg-block">
             <editor-nav
+                [status]="status$ | async"
                 [format]="formats.TABS">
-                <a class="nav-link"
-                    *ngIf="canFilter$ | async"
-                    [routerLink]="['../', 'filters']"
-                    routerLinkActive="active"
-                    [attr.aria-label]="'label.filter-list' | translate"
-                    role="button">
-                    <translate-i18n key="label.filter-list"></translate-i18n>
-                </a>
             </editor-nav>
         </div>
         <div class="col-lg-9">

ui/src/app/metadata/configuration/container/restore-edit.component.ts

@@ -2,12 +2,17 @@ import { Component } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Store } from '@ngrx/store';
 import {
-    ConfigurationState, getConfigurationModelKind
+    ConfigurationState,
+    getConfigurationModelKind,
+    getRestorationIsSaving,
+    getRestorationIsValid,
+    getInvalidRestorationForms
 } from '../../configuration/reducer';
 import { RestoreVersionRequest, CancelRestore } from '../action/restore.action';
 import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
 import { Metadata } from '../../domain/domain.type';
 import { getVersionModel } from '../reducer';
+import { map } from 'rxjs/operators';
 
 
 @Component({
@@ -21,18 +26,19 @@ export class RestoreEditComponent {
     model$: Observable<Metadata> = this.store.select(getVersionModel);
     kind$: Observable<string> = this.store.select(getConfigurationModelKind);
 
-    isInvalid$: Observable<boolean> = of(false);
-    canFilter$: Observable<boolean> = of(false);
-    status$: Observable<string> = of('VALID');
-    isSaving$: Observable<boolean> = of(false);
+    isInvalid$: Observable<boolean> = this.store.select(getRestorationIsValid).pipe(map(v => !v));
+    status$: Observable<any> = this.store.select(getInvalidRestorationForms);
+    isSaving$: Observable<boolean> = this.store.select(getRestorationIsSaving);
 
     validators$: Observable<any>;
 
     formats = NAV_FORMATS;
 
     constructor(
         private store: Store<ConfigurationState>
-    ) {}
+    ) {
+        // this.status$.subscribe(console.log);
+    }
 
     save() {
         this.store.dispatch(new RestoreVersionRequest());

ui/src/app/metadata/configuration/container/restore.component.spec.ts

@@ -11,6 +11,7 @@ import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { RestoreComponent } from './restore.component';
 import { of } from 'rxjs';
 import { DatePipe } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
     template: `
@@ -28,6 +29,7 @@ describe('Metadata Restore Page Component', () => {
     let instance: TestHostComponent;
     let app: RestoreComponent;
     let store: Store<fromConfiguration.State>;
+    let router: Router;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -51,6 +53,7 @@ describe('Metadata Restore Page Component', () => {
         }).compileComponents();
 
         store = TestBed.get(Store);
+        router = TestBed.get(Router);
         spyOn(store, 'dispatch');
         spyOn(store, 'select').and.callFake(() => of(new Date().toDateString()));
 
@@ -62,15 +65,15 @@ describe('Metadata Restore Page Component', () => {
 
     it('should load metadata objects', async(() => {
         expect(app).toBeTruthy();
-        expect(store.select).toHaveBeenCalledTimes(4);
+        expect(store.select).toHaveBeenCalledTimes(1);
         expect(store.dispatch).not.toHaveBeenCalled();
     }));
 
     describe('restore method', () => {
-        it('should emit a value from the restore subject', () => {
-            spyOn(app.subj, 'next').and.callThrough();
+        it('should navigate to the restore edit page', () => {
+            spyOn(router, 'navigate').and.callThrough();
             app.restore();
-            expect(app.subj.next).toHaveBeenCalled();
+            expect(router.navigate).toHaveBeenCalled();
         });
     });
 });

ui/src/app/metadata/configuration/effect/restore.effect.ts

@@ -9,7 +9,8 @@ import {
     RestoreVersionError,
     CancelRestore,
     UpdateRestorationChangesRequest,
-    UpdateRestorationChangesSuccess
+    UpdateRestorationChangesSuccess,
+    SetSavingStatus
 } from '../action/restore.action';
 import { MetadataHistoryService } from '../service/history.service';
 import { of } from 'rxjs';
@@ -28,6 +29,7 @@ import {
 } from '../reducer';
 import { SetMetadata } from '../action/configuration.action';
 import { removeNulls } from '../../../shared/util';
+import { getModel } from '../../../wizard/reducer';
 
 
 @Injectable()
@@ -53,6 +55,24 @@ export class RestoreEffects {
         )
     );
 
+    @Effect()
+    restoreVersionSaving$ = this.actions$.pipe(
+        ofType<RestoreVersionRequest>(RestoreActionTypes.RESTORE_VERSION_REQUEST),
+        map(() => new SetSavingStatus(true))
+    );
+
+    @Effect()
+    restoreVersionSaved$ = this.actions$.pipe(
+        ofType<RestoreVersionSuccess>(RestoreActionTypes.RESTORE_VERSION_SUCCESS),
+        map(() => new SetSavingStatus(false))
+    );
+
+    @Effect()
+    restoreVersionError$ = this.actions$.pipe(
+        ofType<RestoreVersionError>(RestoreActionTypes.RESTORE_VERSION_ERROR),
+        map(() => new SetSavingStatus(false))
+    );
+
     @Effect({ dispatch: false })
     restoreVersionCancel$ = this.actions$.pipe(
         ofType<CancelRestore>(RestoreActionTypes.CANCEL_RESTORE),

ui/src/app/metadata/configuration/reducer/configuration.reducer.spec.ts

@@ -27,7 +27,7 @@ describe('Configuration Reducer', () => {
 
     describe('SET_DEFINITION action', () => {
         it('should set the state definition', () => {
-            const action = new actions.SetDefinition(definition);
+            const action = new actions.SetConfigurationDefinition(definition);
             const result = reducer(initialState, action);
 
             expect(result).toEqual({ ...initialState, definition });
@@ -36,7 +36,7 @@ describe('Configuration Reducer', () => {
 
     describe('SET_SCHEMA action', () => {
         it('should set the state schema', () => {
-            const action = new actions.SetSchema(schema);
+            const action = new actions.SetConfigurationSchema(schema);
             const result = reducer(initialState, action);
 
             expect(result).toEqual({ ...initialState, schema });