Merged in bugfix/SHIBUI-441 (pull request #61)

SHIBUI-441: Fixed issue with minimum four characters * Fixed issue with minimum four characters * Implemented save stop for filters * Fixed issue with reset entity id
TIER · Apr 27, 2018 · a9f5dcc · a9f5dcc
1 parent dbe0136
commit a9f5dcc
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 29 deletions.
diff --git a/ui/src/app/metadata-filter/component/search-dialog.component.html b/ui/src/app/metadata-filter/component/search-dialog.component.html
@@ -17,12 +17,16 @@ <h4 class="modal-title">
                         class="form-control"
                         aria-label="Entity ID search text box"
                     />
+                    <small class="form-text text-muted" i18n="@@label--min-4-chars">
+                        Minimum 4 characters.
+                    </small>
                 </div>
                 <div class="form-group col-3">
                     <button class="btn btn-primary btn-block"
                         (click)="search(form.get('search').value)"
                         aria-label="Search Entity ID"
-                        [ngSwitch]="loading$ | async">
+                        [ngSwitch]="loading$ | async"
+                        [disabled]="form.get('search').invalid">
                         <i class="fa fa-search" *ngSwitchDefault></i>
                         <i class="fa fa-spinner fa-pulse fa-fw" *ngSwitchCase="true"></i>
                         <ng-container i18n="@@action--search">Search</ng-container>

diff --git a/ui/src/app/metadata-filter/component/search-dialog.component.ts b/ui/src/app/metadata-filter/component/search-dialog.component.ts
@@ -5,7 +5,8 @@ import { Store } from '@ngrx/store';
 
 import * as fromFilter from '../reducer';
 import { QueryEntityIds } from '../action/search.action';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'search-dialog',
@@ -26,7 +27,7 @@ export class SearchDialogComponent implements OnInit, AfterViewInit {
     dbounce = 500;
 
     form: FormGroup = this.fb.group({
-        search: [''],
+        search: ['', [Validators.minLength(4)]],
         entityId: ['']
     });
 

diff --git a/ui/src/app/metadata-filter/container/edit-filter.component.html b/ui/src/app/metadata-filter/container/edit-filter.component.html
@@ -58,16 +58,27 @@
                                 </div>
                                 <label for="entityId" class="sr-only">Search Entity ID</label>
                                 <div class="row">
-                                    <auto-complete id="entityId"
-                                        #entityInput
-                                        class="component-control col-9"
-                                        formControlName="entityId"
-                                        limit="10"
-                                        [matches]="entityIds$ | async"
-                                        [required]="true"
-                                        [processing]="(processing$ | async)"
-                                        (more)="onViewMore($event)">
-                                    </auto-complete>
+                                    <div class="col-9">
+                                        <auto-complete id="entityId"
+                                            #entityInput
+                                            class="component-control"
+                                            formControlName="entityId"
+                                            limit="10"
+                                            [matches]="entityIds$ | async"
+                                            [required]="true"
+                                            [processing]="(processing$ | async)"
+                                            (more)="onViewMore($event)">
+                                        </auto-complete>
+                                        <small class="form-text text-muted" i18n="@@label--min-4-chars">
+                                            Minimum 4 characters.
+                                        </small>
+                                        <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
+                                            <small class="form-text text-danger">
+                                                <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
+                                                <ng-container *ngIf="form.get('entityId').hasError('exists')" i18n="@@message--entity-id-not-found">Entity ID not found</ng-container>
+                                            </small>
+                                        </ng-container>
+                                    </div>
                                     <div class="col-3">
                                         <button
                                             *ngIf="form.get('entityId').disabled"
@@ -85,12 +96,6 @@
                                         </button>
                                     </div>
                                 </div>
-                                <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
-                                    <small class="form-text text-danger">
-                                        <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
-                                        <ng-container *ngIf="form.get('entityId').hasError('exists')" i18n="@@message--entity-id-not-found">Entity ID not found</ng-container>
-                                    </small>
-                                </ng-container>
                             </div>
                         </fieldset>
                     </div>
@@ -99,11 +104,24 @@
                             <i class="fa fa-eye fa-lg"></i>
                             <ng-container i18n="@@action--save-changes">Preview XML</ng-container>
                         </button>
-                        <button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                            <i class="fa fa-save fa-lg"></i>
+                        <button
+                            (click)="this.save()"
+                            type="submit"
+                            class="btn btn-primary"
+                            [disabled]="form.invalid || (isSaving$ | async)">
+                            <i class="fa fa-lg"
+                                [ngClass]="{
+                                    'fa-save': !(isSaving$ | async),
+                                    'fa-spinner': (isSaving$ | async),
+                                    'fa-pulse': (isSaving$ | async)
+                                }"></i>
                             <ng-container i18n="@@action--save-changes">Save Changes</ng-container>
                         </button>
-                        <button (click)="this.cancel()" type="reset" class="btn btn-secondary">
+                        <button
+                            (click)="this.cancel()"
+                            type="reset"
+                            class="btn btn-secondary"
+                            [disabled]="isSaving$ | async   ">
                             <ng-container i18n="@@action--cancel">Cancel</ng-container>
                         </button>
                     </div>

diff --git a/ui/src/app/metadata-filter/container/edit-filter.component.ts b/ui/src/app/metadata-filter/container/edit-filter.component.ts
@@ -47,6 +47,7 @@ export class EditFilterComponent implements OnInit, OnDestroy {
     loading$: Observable<boolean>;
     processing$: Observable<boolean>;
     preview$: Observable<MDUI>;
+    isSaving$: Observable<boolean>;
 
     form: FormGroup = this.fb.group({
         entityId: ['', [Validators.required]],
@@ -55,6 +56,7 @@ export class EditFilterComponent implements OnInit, OnDestroy {
     });
 
     filter: MetadataFilter;
+    filterEntity: Filter;
 
     isValid = false;
 
@@ -75,6 +77,7 @@ export class EditFilterComponent implements OnInit, OnDestroy {
         this.loading$ = this.store.select(fromFilter.getIsLoading);
         this.processing$ = this.loading$.withLatestFrom(this.showMore$, (l, s) => !s && l);
         this.preview$ = this.store.select(fromFilter.getPreview);
+        this.isSaving$ = this.store.select(fromFilter.getSaving);
 
         this.entityIds$.subscribe(ids => this.ids = ids);
 
@@ -86,6 +89,7 @@ export class EditFilterComponent implements OnInit, OnDestroy {
                 filterEnabled
             });
             this.filter = filter;
+            this.filterEntity = new Filter(filter);
 
             this.store.dispatch(new SelectId(entityId));
         });
@@ -139,7 +143,7 @@ export class EditFilterComponent implements OnInit, OnDestroy {
         const input = this.form.get('entityId');
         input.disable();
         input.clearAsyncValidators();
-        input.reset(this.filter.entityId);
+        input.setValue(this.filterEntity.entityId);
     }
 
     searchEntityIds(term: string): void {

diff --git a/ui/src/app/metadata-filter/container/new-filter.component.html b/ui/src/app/metadata-filter/container/new-filter.component.html
@@ -60,6 +60,9 @@
                                 <auto-complete id="entityId" class="component-control" formControlName="entityId" limit="10" [matches]="entityIds$ | async"
                                     [required]="true" [processing]="(processing$ | async)" (more)="onViewMore($event)">
                                 </auto-complete>
+                                <small class="form-text text-muted" i18n="@@label--min-4-chars">
+                                    Minimum 4 characters.
+                                </small>
                                 <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
                                     <small class="form-text text-danger">
                                         <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
@@ -70,11 +73,22 @@
                         </fieldset>
                     </div>
                     <div class="col-lg-6 col-xs-3 text-right">
-                        <button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                            <i class="fa fa-save fa-lg"></i>
+                        <button (click)="this.save()"
+                            type="submit"
+                            class="btn btn-primary"
+                            [disabled]="form.invalid || (isSaving$ | async)">
+                            <i class="fa fa-lg"
+                                [ngClass]="{
+                                    'fa-save': !(isSaving$ | async),
+                                    'fa-spinner': (isSaving$ | async),
+                                    'fa-pulse': (isSaving$ | async)
+                                }"></i>
                             <ng-container i18n="@@action--save-changes">Save Changes</ng-container>
                         </button>
-                        <button (click)="this.cancel()" type="reset" class="btn btn-secondary">
+                        <button (click)="this.cancel()"
+                            type="reset"
+                            class="btn btn-secondary"
+                            [disabled]="isSaving$ | async">
                             <ng-container i18n="@@action--cancel">Cancel</ng-container>
                         </button>
                     </div>

diff --git a/ui/src/app/metadata-filter/container/new-filter.component.ts b/ui/src/app/metadata-filter/container/new-filter.component.ts
@@ -54,6 +54,7 @@ export class NewFilterComponent implements OnInit, OnDestroy {
     loading$: Observable<boolean>;
     processing$: Observable<boolean>;
     preview$: Observable<MDUI>;
+    isSaving$: Observable<boolean>;
 
     form: FormGroup = this.fb.group({
         entityId: ['', [Validators.required], [
@@ -79,6 +80,7 @@ export class NewFilterComponent implements OnInit, OnDestroy {
         this.loading$ = this.store.select(fromFilter.getIsLoading);
         this.processing$ = this.loading$.withLatestFrom(this.showMore$, (l, s) => !s && l);
         this.preview$ = this.store.select(fromFilter.getPreview);
+        this.isSaving$ = this.store.select(fromFilter.getSaving);
 
         this.entityIds$.subscribe(ids => this.ids = ids);
     }

diff --git a/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts b/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts
@@ -5,7 +5,8 @@ import * as actions from '../action/filter.action';
 const snapshot: fromFilter.FilterState = {
     selected: null,
     changes: null,
-    preview: null
+    preview: null,
+    saving: false
 };
 
 describe('Filter Reducer', () => {

diff --git a/ui/src/app/metadata-filter/reducer/filter.reducer.ts b/ui/src/app/metadata-filter/reducer/filter.reducer.ts
@@ -9,12 +9,14 @@ export interface FilterState {
     selected: string | null;
     changes: MetadataFilter | null;
     preview: MDUI | null;
+    saving: boolean;
 }
 
 export const initialState: FilterState = {
     selected: null,
     changes: null,
-    preview: null
+    preview: null,
+    saving: false
 };
 
 export function reducer(state = initialState, action: filter.Actions | FilterCollectionActionsUnion): FilterState {
@@ -46,6 +48,13 @@ export function reducer(state = initialState, action: filter.Actions | FilterCol
                 }
             };
         }
+        case FilterCollectionActionTypes.ADD_FILTER:
+        case FilterCollectionActionTypes.UPDATE_FILTER_REQUEST: {
+            return {
+                ...initialState,
+                saving: true
+            };
+        }
         case FilterCollectionActionTypes.ADD_FILTER_SUCCESS:
         case FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS:
         case filter.CANCEL_CREATE_FILTER: {
@@ -62,3 +71,4 @@ export function reducer(state = initialState, action: filter.Actions | FilterCol
 export const getSelected = (state: FilterState) => state.selected;
 export const getFilterChanges = (state: FilterState) => state.changes;
 export const getPreview = (state: FilterState) => state.preview;
+export const getSaving = (state: FilterState) => state.saving;
diff --git a/ui/src/app/metadata-filter/reducer/index.ts b/ui/src/app/metadata-filter/reducer/index.ts
@@ -25,6 +25,7 @@ export const getFilterFromState = createSelector(getFilterState, getFiltersFromS
 export const getSelected = createSelector(getFilterFromState, fromFilter.getSelected);
 export const getFilter = createSelector(getFilterFromState, fromFilter.getFilterChanges);
 export const getPreview = createSelector(getFilterFromState, fromFilter.getPreview);
+export const getSaving = createSelector(getFilterFromState, fromFilter.getSaving);
 
 export const getSearchFromState = createSelector(getFilterState, getSearchFromStateFn);
 export const getEntityCollection = createSelector(getSearchFromState, fromSearch.getEntityIds);

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss
@@ -1,3 +1,8 @@
+.dropdown.form-group {
+    margin-bottom: 0px;
+}
+
 .dropdown-menu {
-    width: 100%;
+    min-width: 100%;
+    width: auto;
 }
diff --git a/ui/src/locale/en.xlf b/ui/src/locale/en.xlf
@@ -2103,6 +2103,14 @@
           <context context-type="linenumber">93</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="label--min-4-chars" datatype="html">
+        <source>Minimum 4 characters.</source>
+        <target>Minimum 4 characters.</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/metadata-filter/container/new-filter.component.ts</context>
+          <context context-type="linenumber">93</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="tooltip--entity-preview" datatype="html">
         <source>Entity Preview</source>
         <target>Entity Preview</target>

diff --git a/ui/src/locale/es.xlf b/ui/src/locale/es.xlf
@@ -2071,6 +2071,14 @@
           <context context-type="linenumber">93</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="label--min-4-chars" datatype="html">
+        <source>Minimum 4 characters.</source>
+        <target>Minimum 4 characters. (es)</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/metadata-filter/container/new-filter.component.ts</context>
+          <context context-type="linenumber">93</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="tooltip--entity-preview" datatype="html">
         <source>Entity Preview</source>
         <target>Entity Preview</target>