react-hook-core 0.0.1 → 0.1.0

package/src/components.ts

@@ -1,16 +1,17 @@
 import * as React from 'react';
+import {RouteComponentProps} from 'react-router';
 import {clone, diff, makeDiff} from 'reflectx';
-import {addParametersIntoUrl, append, buildSearchMessage, changePage, changePageSize, formatResultsByComponent, getDisplayFieldsFromForm, getModel, handleAppend, handleSortEvent, initSearchable, mergeSearchModel as mergeSearchModel2, more, reset, Searchable, showPaging, validate} from 'search-utilities';
-import {BaseDiffState, createDiffStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig} from './core';
-import {Attributes, buildId, EditStatusConfig, error, getCurrencyCode, getModelName as getModelName2, HistoryProps, initForm, LoadingService, Locale, message, messageByHttpStatus, ModelHistoryProps, ModelProps, removePhoneFormat, ResourceService, SearchModel, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
+import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResultsByComponent, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, reset, Searchable, showPaging, validate} from 'search-core';
+import {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, hideLoading, showLoading} from './core';
+import {Attributes, buildId, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, HistoryProps, initForm, LoadingService, Locale, message, messageByHttpStatus, ModelHistoryProps, ModelProps, removePhoneFormat, ResourceService, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
 import {formatDiffModel, getDataFields} from './diff';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
 import {focusFirstError, readOnly} from './formutil';
 import {getAutoSearch, getConfirmFunc, getDiffStatusFunc, getEditStatusFunc, getErrorFunc, getLoadingFunc, getLocaleFunc, getMsgFunc, getResource, getUIService} from './input';
 import {buildFromUrl} from './route';
-import {buildFlatState, buildState, handleEvent, handleProps, localeOf} from './state';
+import {buildFlatState, buildState, enLocale, handleEvent, handleProps, localeOf} from './state';
 
-export class ViewComponent<T, ID, P extends HistoryProps, S> extends React.Component<P, S> {
+export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends React.Component<P, S> {
   constructor(props: P, sv: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
       param: ResourceService|ViewParameter,
       showError?: (msg: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -26,13 +27,15 @@ export class ViewComponent<T, ID, P extends HistoryProps, S> extends React.Compo
       if (typeof sv === 'function') {
         this.loadData = sv;
       } else {
-        this.service = sv;
-        if (this.service.metadata) {
-          const m = this.service.metadata();
+        this.loadData = sv.load;
+        if (sv.metadata) {
+          const m = sv.metadata();
           if (m) {
             this.metadata = m;
             const meta = build(m);
-            this.keys = meta.keys;
+            if (meta) {
+              this.keys = meta.keys;
+            }
           }
         }
       }
@@ -45,15 +48,15 @@ export class ViewComponent<T, ID, P extends HistoryProps, S> extends React.Compo
     this.ref = React.createRef();
   }
   protected name?: string;
-  protected running: boolean;
+  protected running?: boolean;
   protected resourceService: ResourceService;
   protected resource: StringMap;
   protected loading?: LoadingService;
   protected showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
   protected getLocale?: (profile?: string) => Locale;
-  protected loadData: (id: ID, ctx?: any) => Promise<T>;
-  protected service: ViewService<T, ID>;
-  protected form: HTMLFormElement;
+  protected loadData?: (id: ID, ctx?: any) => Promise<T>;
+  // protected service: ViewService<T, ID>;
+  protected form?: HTMLFormElement;
   protected ref: any;
   protected keys?: string[];
   protected metadata?: Attributes;
@@ -71,50 +74,45 @@ export class ViewComponent<T, ID, P extends HistoryProps, S> extends React.Compo
     const n = getModelName2(this.form);
     if (!n || n.length === 0) {
       return 'model';
+    } else {
+      return n;
     }
   }
   componentDidMount() {
     this.form = this.ref.current;
     const id = buildId<ID>(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   }
-  async load(_id: ID, callback?: (m: T, showF: (model: T) => void) => void) {
+  load(_id: ID, callback?: (m: T, showF: (model: T) => void) => void) {
     const id: any = _id;
-    if (id != null && id !== '') {
+    if (id != null && id !== '' && this.loadData) {
       this.running = true;
-      if (this.loading) {
-        this.loading.showLoading();
-      }
-      try {
-        const ctx: any = {};
-        let obj: T;
-        if (this.loadData) {
-          obj = await this.loadData(id, ctx);
-        } else {
-          obj = await this.service.load(id, ctx);
-        }
+      showLoading(this.loading);
+      const com = this;
+      this.loadData(id).then(obj => {
         if (!obj) {
-          this.handleNotFound(this.form);
+          com.handleNotFound(com.form);
         } else {
           if (callback) {
-            callback(obj, this.showModel);
+            callback(obj, com.showModel);
           } else {
-            this.showModel(obj);
+            com.showModel(obj);
           }
         }
-      } catch (err) {
+        com.running = false;
+        hideLoading(com.loading);
+      }).catch(err => {
         const data = (err &&  err.response) ? err.response : err;
         if (data && data.status === 404) {
-          this.handleNotFound(this.form);
+          com.handleNotFound(com.form);
         } else {
-          error(err, this.resourceService.value, this.showError);
+          error(err, com.resourceService.value, com.showError);
         }
-      } finally {
-        this.running = false;
-        if (this.loading) {
-          this.loading.hideLoading();
-        }
-      }
+        com.running = false;
+        hideLoading(com.loading);
+      });
     }
   }
   protected handleNotFound(form?: HTMLFormElement): void {
@@ -125,7 +123,7 @@ export class ViewComponent<T, ID, P extends HistoryProps, S> extends React.Compo
     this.showError(msg.message, msg.title);
   }
   getModel(): T {
-    return this.state[this.getModelName()];
+    return (this.state as any)[this.getModelName()];
   }
   showModel(model: T) {
     const modelName = this.getModelName();
@@ -147,8 +145,8 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
     this.updateDateState = this.updateDateState.bind(this);
     this.prepareCustomData = this.prepareCustomData.bind(this);
   }
-  protected running: boolean;
-  protected form: HTMLFormElement;
+  protected running?: boolean;
+  protected form?: HTMLFormElement|null;
   /*
   protected handleSubmitForm(e) {
     if (e.which === 13) {
@@ -187,7 +185,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
   protected updateDateState = (name: string, value: any) => {
     const props: any = this.props;
     const modelName = this.getModelName(this.form);
-    const state = this.state[modelName];
+    const state = (this.state as any)[modelName];
     if (props.setGlobalState) {
       const data = props.shouldBeCustomized ? this.prepareCustomData({ [name]: value }) : { [name]: value };
       props.setGlobalState({ [modelName]: { ...state, ...data } });
@@ -196,7 +194,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
       this.setState(objSet);
     }
   }
-  protected getModelName(f?: HTMLFormElement): string {
+  protected getModelName(f?: HTMLFormElement|null): string {
     let f2 = f;
     if (!f2) {
       f2 = this.form;
@@ -240,7 +238,60 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
     }
   }
 }
-export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
+export interface MessageOnlyState extends ModelProps {
+  message?: string;
+}
+export class MessageComponent<P extends MessageOnlyState, S extends MessageOnlyState> extends BaseComponent<P, S> {
+  constructor(props: P,
+    getLocale?: () => Locale,
+    removeErr?: (ctrl: HTMLInputElement) => void) {
+    super(props, getLocale, removeErr);
+    this.getModelName = this.getModelName.bind(this);
+    this.showMessage = this.showMessage.bind(this);
+    this.showError = this.showError.bind(this);
+    this.hideMessage = this.hideMessage.bind(this);
+    this.ref = React.createRef();
+  }
+  ref: any;
+  name?: string;
+  alertClass = '';
+  protected getModelName(f?: HTMLFormElement|null): string {
+    if (this.name && this.name.length > 0) {
+      return this.name;
+    }
+    let f2 = f;
+    if (!f2) {
+      f2 = this.form;
+    }
+    if (f2) {
+      const a = getModelName2(f2);
+      if (a && a.length > 0) {
+        return a;
+      }
+    }
+    return 'model';
+  }
+  showMessage = (msg: string) => {
+    this.alertClass = 'alert alert-info';
+    this.setState({ message: msg });
+  }
+  showError = (msg: string|ErrorMessage[]) => {
+    this.alertClass = 'alert alert-error';
+    if (typeof msg === 'string') {
+      this.setState({ message: msg });
+    } else if (Array.isArray(msg) && msg.length > 0) {
+      this.setState({ message: msg[0].message });
+    } else {
+      const x = JSON.stringify(msg);
+      this.setState({ message: x });
+    }
+  }
+  hideMessage = () => {
+    this.alertClass = '';
+    this.setState({ message: '' });
+  }
+}
+export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -248,7 +299,7 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
       protected ui?: UIService,
       protected loading?: LoadingService,
       protected listFormId?: string) {
-    super(props, getLocale, (ui ? ui.removeError : null));
+    super(props, getLocale, (ui ? ui.removeError : undefined));
     this.resource = resourceService.resource();
     this.getModelName = this.getModelName.bind(this);
     this.showMessage = this.showMessage.bind(this);
@@ -259,12 +310,12 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     this.getSearchForm = this.getSearchForm.bind(this);
     this.setSearchForm = this.setSearchForm.bind(this);
 
-    this.setSearchModel = this.setSearchModel.bind(this);
-    this.getSearchModel = this.getSearchModel.bind(this);
-    this.getDisplayFields = this.getDisplayFields.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.getFilter = this.getFilter.bind(this);
+    this.getFields = this.getFields.bind(this);
 
     this.pageSizeChanged = this.pageSizeChanged.bind(this);
-    this.clearKeyword = this.clearKeyword.bind(this);
+    this.clearQ = this.clearQ.bind(this);
     this.searchOnClick = this.searchOnClick.bind(this);
 
     this.resetAndSearch = this.resetAndSearch.bind(this);
@@ -278,7 +329,7 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     this.showMore = this.showMore.bind(this);
     this.pageChanged = this.pageChanged.bind(this);
 
-    this.url = (props.match ? props.match.url : props['props'].match.url);
+    this.url = (props.match ? props.match.url : (props as any)['props'].match.url);
     /*
     this.locationSearch = '';
     const location = (props.location ? props.location : props['props'].location);
@@ -293,36 +344,36 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
   // Pagination
   initPageSize = 20;
   pageSize = 20;
-  pageIndex = 1;
+  pageIndex?: number = 1;
   nextPageToken?: string;
   itemTotal = 0;
   pageTotal = 0;
-  showPaging: boolean;
-  append: boolean;
-  appendMode: boolean;
-  appendable: boolean;
+  showPaging?: boolean;
+  append?: boolean;
+  appendMode?: boolean;
+  appendable?: boolean;
 
   // Sortable
-  sortField: string;
-  sortType: string;
-  sortTarget: HTMLElement;
+  sortField?: string;
+  sortType?: string;
+  sortTarget?: HTMLElement;
 
-  keys: string[];
-  format?: (obj: T, locale: Locale) => T;
-  displayFields: string[];
-  initDisplayFields: boolean;
+  keys?: string[];
+  format?: (obj: T, locale?: Locale) => T;
+  fields?: string[];
+  initFields?: boolean;
   sequenceNo = 'sequenceNo';
-  triggerSearch: boolean;
-  tmpPageIndex = 1;
+  triggerSearch?: boolean;
+  tmpPageIndex?: number = 1;
 
   pageMaxSize = 7;
   pageSizes: number[] = [10, 20, 40, 60, 100, 200, 400, 800];
 
-  private list: T[];
-  excluding: any;
-  hideFilter: boolean;
+  list?: T[];
+  excluding?: string[]|number[];
+  hideFilter?: boolean;
 
-  ignoreUrlParam: boolean;
+  ignoreUrlParam?: boolean;
   // locationSearch: string;
   // _currentSortField: string;
 
@@ -333,7 +384,7 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
   deletable?: boolean;
 
   protected getModelName(): string {
-    return 'model';
+    return 'filter';
   }
 
   toggleFilter(event: any): void {
@@ -341,12 +392,12 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
   }
   protected add = (event: any) => {
     event.preventDefault();
-    const url = this.props['props'].match.url + '/add';
+    const url = (this.props as any)['props'].match.url + '/add';
     this.props.history.push(url);
   }
   load(s: S, autoSearch: boolean): void {
-    const obj2 = initSearchable(s, this);
-    this.setSearchModel(obj2);
+    const obj2 = initFilter(s, this);
+    this.setFilter(obj2);
     const com = this;
     if (autoSearch) {
       setTimeout(() => {
@@ -359,45 +410,51 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     this.form = form;
   }
 
-  protected getSearchForm(): HTMLFormElement {
+  protected getSearchForm(): HTMLFormElement|undefined|null {
     if (!this.form && this.listFormId) {
       this.form = document.getElementById(this.listFormId) as HTMLFormElement;
     }
     return this.form;
   }
-  setSearchModel(searchModel: S): void {
-    this.setState(searchModel as any);
+  setFilter(filter: S): void {
+    this.setState(filter as any);
   }
-  protected getCurrencyCode(): string {
+  protected getCurrencyCode(): string|undefined {
     return getCurrencyCode(this.form);
   }
-  getSearchModel(): S {
+  getFilter(): S {
     const name = this.getModelName();
-    const lc = this.getLocale();
+    let lc: Locale|undefined;
+    if (this.getLocale) {
+      lc = this.getLocale();
+    }
+    if (!lc) {
+      lc = enLocale;
+    }
     const cc = this.getCurrencyCode();
-    const fields = this.getDisplayFields();
+    const fields = this.getFields();
     const l = this.getList();
     const f = this.getSearchForm();
-    const dc = (this.ui ? this.ui.decodeFromForm : null);
+    const dc = (this.ui ? this.ui.decodeFromForm : undefined);
     const obj3 = getModel<T, S>(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
     return obj3;
   }
-  protected getDisplayFields(): string[] {
-    const fs = getDisplayFieldsFromForm(this.displayFields, this.initDisplayFields, this.form);
-    this.initDisplayFields = true;
+  protected getFields(): string[]|undefined {
+    const fs = getFieldsFromForm(this.fields, this.initFields, this.form);
+    this.initFields = true;
     return fs;
   }
-
+/*
   protected pagingOnClick = (size, e) => {
     this.setState(prevState => ({ isPageSizeOpenDropDown: !(prevState as any).isPageSizeOpenDropDown } as any));
     this.pageSizeChanged(size);
   }
-
+*/
   protected pageSizeOnClick = () => {
     this.setState(prevState => ({ isPageSizeOpenDropDown: !(prevState as any).isPageSizeOpenDropDown } as any));
   }
 
-  protected clearKeyword(): void {
+  protected clearQ(): void {
     const m = this.state.model;
     if (m) {
       m.q = '';
@@ -437,16 +494,14 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     if (listForm && this.ui) {
       this.ui.removeFormError(listForm);
     }
-    const s = this.getSearchModel();
+    const s = this.getFilter();
     const com = this;
     this.validateSearch(s, () => {
       if (com.running === true) {
         return;
       }
       com.running = true;
-      if (this.loading) {
-        this.loading.showLoading();
-      }
+      showLoading(this.loading);
       if (!this.ignoreUrlParam) {
         addParametersIntoUrl(s, isFirstLoad);
       }
@@ -460,14 +515,14 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
 
   validateSearch(se: S, callback: () => void): void {
     const u = this.ui;
-    const vl = (u ? u.validateForm : null);
-    validate(se, callback, this.getSearchForm(), this.getLocale(), vl);
+    const vl = (u ? u.validateForm : undefined);
+    validate(se, callback, this.getSearchForm(), localeOf(undefined, this.getLocale), vl);
   }
   showResults(s: S, sr: SearchResult<T>) {
     const com = this;
     const results = sr.list;
     if (results && results.length > 0) {
-      const lc = this.getLocale();
+      const lc = localeOf(undefined, this.getLocale);
       formatResultsByComponent(results, com, lc);
     }
     const am = com.appendMode;
@@ -477,29 +532,28 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     }
     if (am) {
       let limit = s.limit;
-      if (s.page <= 1 && s.firstLimit && s.firstLimit > 0) {
+      if ((!s.page || s.page <= 1) && s.firstLimit && s.firstLimit > 0) {
         limit = s.firstLimit;
       }
       com.nextPageToken = sr.nextPageToken;
-      handleAppend(com, limit, sr.list, sr.nextPageToken);
-      if (com.append && s.page > 1) {
+      handleAppend(com, sr.list, limit, sr.nextPageToken);
+      if (com.append && (s.page && s.page > 1)) {
         com.appendList(results);
       } else {
         com.setList(results);
       }
     } else {
-      showPaging(com, s.limit, sr.list, sr.total);
+      showPaging(com, sr.list, s.limit, sr.total);
       com.setList(results);
       com.tmpPageIndex = s.page;
-      const m1 = buildSearchMessage(this.resourceService, s.page, s.limit, sr.list, sr.total);
-      this.showMessage(m1);
-    }
-    com.running = false;
-    if (this.loading) {
-      this.loading.hideLoading();
+      if (s.limit) {
+        this.showMessage(buildMessage(this.resourceService, s.page, s.limit, sr.list, sr.total));
+      }
     }
+    com.running = undefined;
+    hideLoading(com.loading);
     if (com.triggerSearch) {
-      com.triggerSearch = false;
+      com.triggerSearch = undefined;
       com.resetAndSearch();
     }
   }
@@ -530,7 +584,7 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     }
   }
 
-  getList(): T[] {
+  getList(): T[]|undefined {
     return this.list;
   }
 
@@ -550,19 +604,19 @@ export class BaseSearchComponent<T, S extends SearchModel, P extends ModelHistor
     this.doSearch();
   }
   pageSizeChanged = (event: any) => {
-    const size = parseInt((event.currentTarget as HTMLInputElement).value, null);
+    const size = parseInt((event.currentTarget as HTMLInputElement).value, 10);
     changePageSize(this, size);
     this.tmpPageIndex = 1;
     this.doSearch();
   }
 
-  pageChanged(data) {
+  pageChanged(data: any) {
     const { currentPage, itemsPerPage } = data;
     changePage(this, currentPage, itemsPerPage);
     this.doSearch();
   }
 }
-export class SearchComponent<T, S extends SearchModel, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
+export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
   constructor(props: P, sv: ((s: S, ctx?: any) => Promise<SearchResult<T>>) | SearchService<T, S>,
       param: ResourceService|SearchParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -578,76 +632,72 @@ export class SearchComponent<T, S extends SearchModel, P extends ModelHistoryPro
         const x: any = sv;
         this.search = x;
       } else {
-        this.service = sv;
-        if (this.service.keys) {
-          this.keys = this.service.keys();
+        this.search = sv.search;
+        if (sv.keys) {
+          this.keys = sv.keys();
         }
       }
     }
     this.call = this.call.bind(this);
     this.showError = getErrorFunc(param, showError);
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.mergeSearchModel = this.mergeSearchModel.bind(this);
-    this.createSearchModel = this.createSearchModel.bind(this);
+    this.mergeFilter = this.mergeFilter.bind(this);
+    this.createFilter = this.createFilter.bind(this);
     this.ref = React.createRef();
   }
   protected showError: (m: string, header?: string, detail?: string, callback?: () => void) => void;
   protected search?: (s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>;
-  protected service: SearchService<T, S>;
+  // protected service: SearchService<T, S>;
   protected ref: any;
   protected autoSearch: boolean;
   componentDidMount() {
-    const k = (this.ui ? this.ui.registerEvents : null);
+    const k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = initForm(this.ref.current, k);
-    const s = this.mergeSearchModel(buildFromUrl<S>(), this.createSearchModel());
+    const s = this.mergeFilter(buildFromUrl<S>(), this.createFilter());
     this.load(s, this.autoSearch);
   }
-  mergeSearchModel(obj: S, b?: S, arrs?: string[]|any): S {
-    return mergeSearchModel2<S>(obj, b, this.pageSizes, arrs);
+  mergeFilter(obj: S, b?: S, arrs?: string[]|any): S {
+    return mergeFilter2<S>(obj, b, this.pageSizes, arrs);
   }
-  createSearchModel(): S {
+  createFilter(): S {
     const s: any = {};
     return s;
   }
-  async call(se: S) {
-    try {
-      this.running = true;
-      const s = clone(se);
-      let page = this.pageIndex;
-      if (!page || page < 1) {
-        page = 1;
-      }
-      let offset: number;
+  call(se: S) {
+    this.running = true;
+    const s = clone(se);
+    let page = this.pageIndex;
+    if (!page || page < 1) {
+      page = 1;
+    }
+    let offset: number|undefined;
+    if (se.limit) {
       if (se.firstLimit && se.firstLimit > 0) {
         offset = se.limit * (page - 2) + se.firstLimit;
       } else {
         offset = se.limit * (page - 1);
       }
-      const limit = (page <= 1 && se.firstLimit && se.firstLimit > 0 ? se.firstLimit : se.limit);
-      const next = (this.nextPageToken && this.nextPageToken.length > 0 ? this.nextPageToken : offset);
-      const fields = se.fields;
-      delete se['page'];
-      delete se['fields'];
-      delete se['limit'];
-      delete se['firstLimit'];
-      if (this.loading) {
-        this.loading.showLoading();
-      }
-      if (this.search) {
-        const sr = await this.search(s, limit, next, fields);
-        this.showResults(s, sr);
-      } else {
-        const sr = await this.service.search(s, limit, next, fields);
-        this.showResults(s, sr);
-      }
-    } catch (err) {
-      this.pageIndex = this.tmpPageIndex;
-      error(err, this.resourceService.value, this.showError);
-    } finally {
-      this.running = false;
-      if (this.loading) {
-        this.loading.hideLoading();
-      }
+    }
+    const limit = (page <= 1 && se.firstLimit && se.firstLimit > 0 ? se.firstLimit : se.limit);
+    const next = (this.nextPageToken && this.nextPageToken.length > 0 ? this.nextPageToken : offset);
+    const fields = se.fields;
+    delete se['page'];
+    delete se['fields'];
+    delete se['limit'];
+    delete se['firstLimit'];
+    showLoading(this.loading);
+    const com = this;
+    if (this.search) {
+      this.search(s, limit, next, fields).then(sr => {
+        com.showResults(s, sr);
+        com.running = undefined;
+        hideLoading(com.loading);
+      }).catch(err => {
+        com.pageIndex = com.tmpPageIndex;
+        error(err, com.resourceService.value, com.showError);
+        com.running = undefined;
+        hideLoading(com.loading);
+      });
     }
   }
 }
@@ -661,10 +711,11 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
       getLocale?: () => Locale,
       protected ui?: UIService,
       protected loading?: LoadingService,
-      protected status?: EditStatusConfig,
+      status?: EditStatusConfig,
       patchable?: boolean, backOnSaveSuccess?: boolean) {
-    super(props, getLocale, (ui ? ui.removeError : null));
+    super(props, getLocale, (ui ? ui.removeError : undefined));
     this.resource = resourceService.resource();
+    this.status = createEditStatus(status);
     if (patchable === false) {
       this.patchable = patchable;
     }
@@ -697,16 +748,17 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     this.postSave = this.postSave.bind(this);
     this.handleDuplicateKey = this.handleDuplicateKey.bind(this);
   }
+  status: EditStatusConfig;
   protected name?: string;
   protected backOnSuccess = true;
   protected resource: StringMap;
   protected metadata?: Attributes;
   protected keys?: string[];
   protected version?: string;
-  protected newMode: boolean;
-  protected setBack: boolean;
+  protected newMode?: boolean;
+  protected setBack?: boolean;
   protected patchable = true;
-  protected orginalModel: T;
+  protected orginalModel?: T;
 
   addable?: boolean = true;
   readOnly?: boolean;
@@ -720,12 +772,12 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     }
     this.props.history.goBack();
   }
-  protected resetState(newMod: boolean, model: T, originalModel: T) {
+  protected resetState(newMod: boolean, model: T, originalModel?: T) {
     this.newMode = newMod;
     this.orginalModel = originalModel;
     this.showModel(model);
   }
-  protected handleNotFound(form?: HTMLFormElement): void {
+  protected handleNotFound(form?: HTMLFormElement|null): void {
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     if (form) {
       readOnly(form);
@@ -740,7 +792,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
   }
   getModel(): T {
     const n = this.getModelName();
-    return this.props[n] || this.state[n];
+    return (this.props as any)[n] || (this.state as any)[n];
   }
   showModel(model: T) {
     const f = this.form;
@@ -773,10 +825,10 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
       this.form = (event.target as HTMLInputElement).form;
     }
     const obj = this.createModel();
-    this.resetState(true, obj, null);
+    this.resetState(true, obj, undefined);
     const u = this.ui;
-    if (u) {
-      const f = this.form;
+    const f = this.form;
+    if (u && f) {
       setTimeout(() => {
         u.removeFormError(f);
       }, 100);
@@ -830,8 +882,8 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     }
   }
   protected validate(obj: T, callback: (obj2?: T) => void) {
-    if (this.ui) {
-      const valid = this.ui.validateForm(this.form, this.getLocale());
+    if (this.ui && this.form) {
+      const valid = this.ui.validateForm(this.form, localeOf(undefined, this.getLocale));
       if (valid) {
         callback(obj);
       }
@@ -865,7 +917,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     const errors = result.errors;
     const f = this.form;
     const u = this.ui;
-    if (u) {
+    if (u && f) {
       const unmappedErrors = u.showFormError(f, errors);
       if (!result.message) {
         if (errors && errors.length === 1) {
@@ -878,15 +930,15 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     } else if (errors && errors.length === 1) {
       result.message = errors[0].message;
     }
-    const t = this.resourceService.value('error');
-    this.showError(result.message, t);
+    if (result.message) {
+      const t = this.resourceService.value('error');
+      this.showError(result.message, t);
+    }
   }
 
   protected postSave(res: number|string|ResultInfo<T>, backOnSave?: boolean) {
     this.running = false;
-    if (this.loading) {
-      this.loading.hideLoading();
-    }
+    hideLoading(this.loading);
     const st = this.status;
     const newMod = this.newMode;
     const successMsg = (newMod ? this.insertSuccessMsg : this.updateSuccessMsg);
@@ -925,7 +977,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     this.showError(msg.message, msg.title);
   }
 }
-export class EditComponent<T, ID, P extends ModelHistoryProps, S> extends BaseEditComponent<T, P, S>  {
+export class EditComponent<T, ID, P extends RouteComponentProps, S> extends BaseEditComponent<T, P, S>  {
   constructor(props: P, protected service: GenericService<T, ID, number|ResultInfo<T>>,
       param: ResourceService|EditParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -939,8 +991,10 @@ export class EditComponent<T, ID, P extends ModelHistoryProps, S> extends BaseEd
       const metadata = service.metadata();
       if (metadata) {
         const meta = build(metadata);
-        this.keys = meta.keys;
-        this.version = meta.version;
+        if (meta) {
+          this.keys = meta.keys;
+          this.version = meta.version;
+        }
         this.metadata = metadata;
       }
     }
@@ -960,59 +1014,57 @@ export class EditComponent<T, ID, P extends ModelHistoryProps, S> extends BaseEd
   }
   protected ref: any;
   componentDidMount() {
-    const k = (this.ui ? this.ui.registerEvents : null);
+    const k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = initForm(this.ref.current, k);
     const id = buildId<ID>(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   }
-  async load(_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) {
+  load(_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '') {
-      try {
-        this.running = true;
-        if (this.loading) {
-          this.loading.showLoading();
-        }
-        const ctx: any = {};
-        const obj = await this.service.load(id, ctx);
+      const com = this;
+      this.running = true;
+      showLoading(com.loading);
+      this.service.load(id).then(obj => {
         if (!obj) {
-          this.handleNotFound(this.form);
+          com.handleNotFound(this.form);
         } else {
-          this.newMode = false;
-          this.orginalModel = clone(obj);
+          com.newMode = false;
+          com.orginalModel = clone(obj);
           if (!callback) {
-            this.showModel(obj);
+            com.showModel(obj);
           } else {
-            callback(obj, this.showModel);
+            callback(obj, com.showModel);
           }
         }
-      } catch (err) {
+        com.running = false;
+        hideLoading(com.loading);
+      }).catch(err => {
         const data = (err &&  err.response) ? err.response : err;
-        const r = this.resourceService;
+        const r = com.resourceService;
         const gv = r.value;
         const title = gv('error');
         let msg = gv('error_internal');
         if (data && data.status === 404) {
-          this.handleNotFound(this.form);
+          com.handleNotFound(com.form);
         } else {
           if (data.status && !isNaN(data.status)) {
             msg = messageByHttpStatus(data.status, gv);
           }
           if (data && (data.status === 401 || data.status === 403)) {
-            readOnly(this.form);
+            readOnly(com.form);
           }
-          this.showError(msg, title);
+          com.showError(msg, title);
         }
-      } finally {
-        this.running = false;
-        if (this.loading) {
-          this.loading.hideLoading();
-        }
-      }
+        com.running = false;
+        hideLoading(com.loading);
+      });
     } else {
       // Call service state
       this.newMode = true;
-      this.orginalModel = null;
+      this.orginalModel = undefined;
       const obj = this.createModel();
       if (callback) {
         callback(obj, this.showModel);
@@ -1021,35 +1073,28 @@ export class EditComponent<T, ID, P extends ModelHistoryProps, S> extends BaseEd
       }
     }
   }
-  protected async save(obj: T, body?: T, isBack?: boolean) {
+  protected save(obj: T, body?: T, isBack?: boolean) {
     this.running = true;
-    if (this.loading) {
-      this.loading.showLoading();
-    }
+    showLoading(this.loading);
     const isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);
     const com = this;
-    try {
-      const ctx: any = {};
-      if (!this.newMode) {
-        if (this.patchable === true && this.service.patch && body && Object.keys(body).length > 0) {
-          const result = await this.service.patch(body, ctx);
-          com.postSave(result, isBackO);
-        } else {
-          const result = await this.service.update(obj, ctx);
-          com.postSave(result, isBackO);
-        }
-      } else {
-        const result = await this.service.insert(obj, ctx);
-        com.postSave(result, isBackO);
-      }
-    } catch (err) {
-      error(err, this.resourceService.value, this.showError);
-    } finally {
-      this.running = false;
-      if (this.loading) {
-        this.loading.hideLoading();
+    let m = obj;
+    let fn = this.newMode ? this.service.insert : this.service.update;
+    if (!this.newMode) {
+      if (this.patchable === true && this.service.patch && body && Object.keys(body).length > 0) {
+        m = body;
+        fn = this.service.patch;
       }
     }
+    fn(m).then(result => {
+      com.postSave(result, isBackO);
+      com.running = false;
+      hideLoading(com.loading);
+    }).then(err => {
+      error(err, com.resourceService.value, com.showError);
+      com.running = false;
+      hideLoading(com.loading);
+    });
   }
 }
 
@@ -1058,7 +1103,7 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
       protected showMessage: (msg: string, option?: string) => void,
       protected showError: (m: string, title?: string, detail?: string, callback?: () => void) => void,
       protected loading?: LoadingService,
-      protected status?: DiffStatusConfig,
+      status?: DiffStatusConfig,
     ) {
     super(props);
     // this._id = props['props'].match.params.id || props['props'].match.params.cId || props.match.params.cId;
@@ -1072,16 +1117,15 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
     this.postReject = this.postReject.bind(this);
     this.format = this.format.bind(this);
     this.handleNotFound = this.handleNotFound.bind(this);
-    if (!this.status) {
-      this.status = createDiffStatus();
-    }
+    this.status = createDiffStatus(status);
     this.state = {
       disabled: false
     };
   }
-  protected id: ID;
-  protected form: HTMLFormElement;
-  protected running: boolean;
+  protected status: DiffStatusConfig;
+  protected id?: ID;
+  protected form?: HTMLFormElement;
+  protected running?: boolean;
   protected resource: StringMap;
 
   protected back(event: any) {
@@ -1135,12 +1179,15 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
       const differentKeys = diff(diffModel.origin, diffModel.value);
       const dataFields = getDataFields(this.form);
       dataFields.forEach(e => {
-        if (differentKeys.indexOf(e.getAttribute('data-field')) >= 0) {
-          if (e.childNodes.length === 3) {
-            (e.childNodes[1] as HTMLElement).classList.add('highlight');
-            (e.childNodes[2] as HTMLElement).classList.add('highlight');
-          } else {
-            e.classList.add('highlight');
+        const x = e.getAttribute('data-field');
+        if (x) {
+          if (differentKeys.indexOf(x) >= 0) {
+            if (e.childNodes.length === 3) {
+              (e.childNodes[1] as HTMLElement).classList.add('highlight');
+              (e.childNodes[2] as HTMLElement).classList.add('highlight');
+            } else {
+              e.classList.add('highlight');
+            }
           }
         }
       });
@@ -1149,12 +1196,15 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
       const differentKeys = diff(origin, value);
       const dataFields = getDataFields(this.form);
       dataFields.forEach(e => {
-        if (differentKeys.indexOf(e.getAttribute('data-field')) >= 0) {
-          if (e.childNodes.length === 3) {
-            (e.childNodes[1] as HTMLElement).classList.add('highlight');
-            (e.childNodes[2] as HTMLElement).classList.add('highlight');
-          } else {
-            e.classList.add('highlight');
+        const x = e.getAttribute('data-field');
+        if (x) {
+          if (differentKeys.indexOf(x) >= 0) {
+            if (e.childNodes.length === 3) {
+              (e.childNodes[1] as HTMLElement).classList.add('highlight');
+              (e.childNodes[2] as HTMLElement).classList.add('highlight');
+            } else {
+              e.classList.add('highlight');
+            }
           }
         }
       });
@@ -1167,8 +1217,7 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
     this.showError(msg.message, msg.title);
   }
 }
-
-export class DiffApprComponent<T, ID, P extends HistoryProps, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
+export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
   constructor(props: P, protected service: DiffApprService<T, ID>,
       param: ResourceService|DiffParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -1191,85 +1240,80 @@ export class DiffApprComponent<T, ID, P extends HistoryProps, S extends DiffStat
   componentDidMount() {
     this.form = this.ref.current;
     const id = buildId<ID>(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   }
 
   formatFields(value: T): T {
     return value;
   }
 
-  async load(_id: ID) {
+  load(_id: ID) {
     const id: any = _id;
     if (id != null && id !== '') {
       this.id = _id;
-      try {
-        this.running = true;
-        if (this.loading) {
-          this.loading.showLoading();
-        }
-        const dobj = await this.service.diff(id);
+      const com = this;
+      this.running = true;
+      showLoading(this.loading);
+      this.service.diff(id).then(dobj => {
         if (!dobj) {
-          this.handleNotFound();
+          com.handleNotFound();
         } else {
-          const formatdDiff = formatDiffModel(dobj, this.formatFields);
-          this.setState({
+          const formatdDiff = formatDiffModel(dobj, com.formatFields);
+          com.setState({
             origin: formatdDiff.origin,
             value: formatdDiff.value
-          }, this.format);
+          }, com.format);
         }
-      } catch (err) {
+        com.running = false;
+        hideLoading(com.loading);
+      }).catch(err => {
         const data = (err &&  err.response) ? err.response : err;
         if (data && data.status === 404) {
-          this.handleNotFound();
+          com.handleNotFound();
         } else {
-          error(err, this.resourceService.value, this.showError);
+          error(err, com.resourceService.value, com.showError);
         }
-      } finally {
-        this.running = false;
-        if (this.loading) {
-          this.loading.hideLoading();
-        }
-      }
+        com.running = false;
+        hideLoading(com.loading);
+      });
     }
   }
 
-  async approve(event: any) {
+  approve(event: any) {
     event.preventDefault();
-    try {
-      this.running = true;
-      if (this.loading) {
-        this.loading.showLoading();
-      }
-      const id = this.id;
-      const status = await this.service.approve(id);
-      this.postApprove(status, null);
-    } catch (err) {
-      this.postApprove(4, err);
-    } finally {
-      this.running = false;
-      if (this.loading) {
-        this.loading.hideLoading();
-      }
+    const com = this;
+    this.running = true;
+    showLoading(this.loading);
+    if (this.id) {
+      this.service.approve(this.id).then(status => {
+        com.postApprove(status, null);
+        com.running = false;
+        hideLoading(com.loading);
+      }).catch(err => {
+        com.postApprove(4, err);
+        com.running = false;
+        hideLoading(com.loading);
+      });
     }
   }
 
-  async reject(event: any) {
+  reject(event: any) {
     event.preventDefault();
-    try {
-      this.running = true;
-      if (this.loading) {
-        this.loading.showLoading();
-      }
-      const id = this.id;
-      const status = await this.service.reject(id);
-      this.postReject(status, null);
-    } catch (err) {
-      this.postReject(4, err);
-    } finally {
-      this.running = false;
-      if (this.loading) {
-        this.loading.hideLoading();
-      }
+    const com = this;
+    this.running = true;
+    showLoading(this.loading);
+    if (this.id) {
+      this.service.reject(this.id).then(status => {
+        com.postReject(status, null);
+        com.running = false;
+        hideLoading(com.loading);
+      }).catch(err => {
+        com.postReject(4, err);
+        com.running = false;
+        hideLoading(com.loading);
+      });
     }
   }
 }