react-hook-core 0.1.0 → 0.1.4

package/src/components.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {RouteComponentProps} from 'react-router';
 import {clone, diff, makeDiff} from 'reflectx';
-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 {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResults, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, reset, Searchable, showPaging, validate} from 'search-core';
+import {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, handleToggle, hideLoading, showLoading} from './core';
+import {Attributes, buildId, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, initForm, LoadingService, Locale, message, messageByHttpStatus, PageChange, pageSizes, 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';
@@ -47,27 +47,27 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
     this.showModel = this.showModel.bind(this);
     this.ref = React.createRef();
   }
-  protected name?: string;
-  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>;
+  name?: string;
+  running?: boolean;
+  resourceService: ResourceService;
+  resource: StringMap;
+  loading?: LoadingService;
+  showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
+  getLocale?: (profile?: string) => Locale;
+  loadData?: (id: ID) => Promise<T|null>;
   // protected service: ViewService<T, ID>;
-  protected form?: HTMLFormElement;
-  protected ref: any;
-  protected keys?: string[];
-  protected metadata?: Attributes;
+  form?: HTMLFormElement;
+  ref: any;
+  keys?: string[];
+  metadata?: Attributes;
 
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
-  protected getModelName(): string {
+  getModelName(): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -115,7 +115,7 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
       });
     }
   }
-  protected handleNotFound(form?: HTMLFormElement): void {
+  handleNotFound(form?: HTMLFormElement): void {
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     if (form) {
       readOnly(form);
@@ -133,9 +133,9 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
   }
 }
 
-export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S> {
+export class BaseComponent<P, S> extends React.Component<P, S> {
   constructor(props: P,
-      protected getLocale?: () => Locale,
+      public getLocale?: () => Locale,
       private removeErr?: (ctrl: HTMLInputElement) => void) {
     super(props);
     this.getModelName = this.getModelName.bind(this);
@@ -145,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|null;
+  running?: boolean;
+  form?: HTMLFormElement|null;
   /*
   protected handleSubmitForm(e) {
     if (e.which === 13) {
@@ -163,7 +163,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
 
   prepareCustomData(data: any) { }
 
-  protected updatePhoneState = (event: any) => {
+  updatePhoneState = (event: any) => {
     const re = /^[0-9\b]+$/;
     const target = event.currentTarget as HTMLInputElement;
     const value = removePhoneFormat(target.value);
@@ -182,7 +182,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
     }
   }
 
-  protected updateDateState = (name: string, value: any) => {
+  updateDateState = (name: string, value: any) => {
     const props: any = this.props;
     const modelName = this.getModelName(this.form);
     const state = (this.state as any)[modelName];
@@ -194,7 +194,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
       this.setState(objSet);
     }
   }
-  protected getModelName(f?: HTMLFormElement|null): string {
+  getModelName(f?: HTMLFormElement|null): string {
     let f2 = f;
     if (!f2) {
       f2 = this.form;
@@ -207,14 +207,14 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
     }
     return 'model';
   }
-  protected updateState = (e: any, callback?: () => void, lc?: Locale) => {
+  updateState = (e: any, callback?: () => void, lc?: Locale) => {
     const ctrl = e.currentTarget as HTMLInputElement;
     const modelName = this.getModelName(ctrl.form);
     const l = localeOf(lc, this.getLocale);
     const props = this.props;
     handleEvent(e, this.removeErr);
-    if (props.setGlobalState) {
-      handleProps(e, props, ctrl, modelName, l, this.prepareCustomData);
+    if ((props as any).setGlobalState) {
+      handleProps(e, props as any, ctrl, modelName, l, this.prepareCustomData);
     } else {
       const objSet: any = buildState(e, this.state, ctrl, modelName, l);
       if (objSet) {
@@ -226,7 +226,7 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
       }
     }
   }
-  protected updateFlatState(e: any, callback?: () => void, lc?: Locale) {
+  updateFlatState(e: any, callback?: () => void, lc?: Locale) {
     const l = localeOf(lc, this.getLocale);
     const objSet: any = buildFlatState(e, this.state, l);
     if (objSet != null) {
@@ -238,10 +238,10 @@ export class BaseComponent<P extends ModelProps, S> extends React.Component<P, S
     }
   }
 }
-export interface MessageOnlyState extends ModelProps {
+export interface MessageOnlyState {
   message?: string;
 }
-export class MessageComponent<P extends MessageOnlyState, S extends MessageOnlyState> extends BaseComponent<P, S> {
+export class MessageComponent<S extends MessageOnlyState, P> extends BaseComponent<P, S> {
   constructor(props: P,
     getLocale?: () => Locale,
     removeErr?: (ctrl: HTMLInputElement) => void) {
@@ -255,7 +255,7 @@ export class MessageComponent<P extends MessageOnlyState, S extends MessageOnlyS
   ref: any;
   name?: string;
   alertClass = '';
-  protected getModelName(f?: HTMLFormElement|null): string {
+  getModelName(f?: HTMLFormElement|null): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -291,7 +291,7 @@ export class MessageComponent<P extends MessageOnlyState, S extends MessageOnlyS
     this.setState({ message: '' });
   }
 }
-export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
+export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T, F>> extends BaseComponent<P, I> implements Searchable {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -301,12 +301,12 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
       protected listFormId?: string) {
     super(props, getLocale, (ui ? ui.removeError : undefined));
     this.resource = resourceService.resource();
+    this.hideFilter = true;
     this.getModelName = this.getModelName.bind(this);
     this.showMessage = this.showMessage.bind(this);
 
     this.toggleFilter = this.toggleFilter.bind(this);
     this.load = this.load.bind(this);
-    this.add = this.add.bind(this);
     this.getSearchForm = this.getSearchForm.bind(this);
     this.setSearchForm = this.setSearchForm.bind(this);
 
@@ -316,7 +316,7 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
 
     this.pageSizeChanged = this.pageSizeChanged.bind(this);
     this.clearQ = this.clearQ.bind(this);
-    this.searchOnClick = this.searchOnClick.bind(this);
+    this.search = this.search.bind(this);
 
     this.resetAndSearch = this.resetAndSearch.bind(this);
     this.doSearch = this.doSearch.bind(this);
@@ -329,7 +329,8 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     this.showMore = this.showMore.bind(this);
     this.pageChanged = this.pageChanged.bind(this);
 
-    this.url = (props.match ? props.match.url : (props as any)['props'].match.url);
+    const currentUrl = window.location.host + window.location.pathname;
+    this.url = removeUrlParams(currentUrl);
     /*
     this.locationSearch = '';
     const location = (props.location ? props.location : props['props'].location);
@@ -338,16 +339,17 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     }
     */
   }
-  protected resource: StringMap;
-  protected url: string;
+  resource: StringMap;
+  url: string;
 
+  filter?: F;
   // Pagination
-  initPageSize = 20;
-  pageSize = 20;
+  initPageSize = 24;
+  pageSize = 24;
   pageIndex?: number = 1;
   nextPageToken?: string;
-  itemTotal = 0;
-  pageTotal = 0;
+  total = 0;
+  pages = 0;
   showPaging?: boolean;
   append?: boolean;
   appendMode?: boolean;
@@ -367,7 +369,7 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
   tmpPageIndex?: number = 1;
 
   pageMaxSize = 7;
-  pageSizes: number[] = [10, 20, 40, 60, 100, 200, 400, 800];
+  pageSizes: number[] = pageSizes;
 
   list?: T[];
   excluding?: string[]|number[];
@@ -383,19 +385,16 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
   approvable?: boolean;
   deletable?: boolean;
 
-  protected getModelName(): string {
+  getModelName(): string {
     return 'filter';
   }
 
-  toggleFilter(event: any): void {
-    this.hideFilter = !this.hideFilter;
-  }
-  protected add = (event: any) => {
-    event.preventDefault();
-    const url = (this.props as any)['props'].match.url + '/add';
-    this.props.history.push(url);
+  toggleFilter(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
+    const x = !this.hideFilter;
+    handleToggle(event.target as HTMLInputElement, !x);
+    this.hideFilter = x;
   }
-  load(s: S, autoSearch: boolean): void {
+  load(s: F, autoSearch: boolean): void {
     const obj2 = initFilter(s, this);
     this.setFilter(obj2);
     const com = this;
@@ -406,23 +405,26 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     }
   }
 
-  protected setSearchForm(form: HTMLFormElement): void {
+  setSearchForm(form: HTMLFormElement): void {
     this.form = form;
   }
 
-  protected getSearchForm(): HTMLFormElement|undefined|null {
+  getSearchForm(): HTMLFormElement|undefined|null {
     if (!this.form && this.listFormId) {
       this.form = document.getElementById(this.listFormId) as HTMLFormElement;
     }
     return this.form;
   }
-  setFilter(filter: S): void {
-    this.setState(filter as any);
+  setFilter(filter: F): void {
+    const modelName = this.getModelName();
+    const objSet: any = {};
+    objSet[modelName] = filter;
+    this.setState(objSet);
   }
-  protected getCurrencyCode(): string|undefined {
+  getCurrencyCode(): string|undefined {
     return getCurrencyCode(this.form);
   }
-  getFilter(): S {
+  getFilter(): F {
     const name = this.getModelName();
     let lc: Locale|undefined;
     if (this.getLocale) {
@@ -436,10 +438,10 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     const l = this.getList();
     const f = this.getSearchForm();
     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);
+    const obj3 = getModel<T, F>(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
     return obj3;
   }
-  protected getFields(): string[]|undefined {
+  getFields(): string[]|undefined {
     const fs = getFieldsFromForm(this.fields, this.initFields, this.form);
     this.initFields = true;
     return fs;
@@ -450,11 +452,11 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     this.pageSizeChanged(size);
   }
 */
-  protected pageSizeOnClick = () => {
+  pageSizeOnClick = () => {
     this.setState(prevState => ({ isPageSizeOpenDropDown: !(prevState as any).isPageSizeOpenDropDown } as any));
   }
 
-  protected clearQ(): void {
+  clearQ(): void {
     const m = this.state.model;
     if (m) {
       m.q = '';
@@ -465,7 +467,7 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
       });
     }
   }
-  searchOnClick(event: any): void {
+  search(event: any): void {
     if (event) {
       event.preventDefault();
       if (!this.getSearchForm()) {
@@ -509,26 +511,27 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     });
   }
 
-  call(s: S): void {
+  call(s: F): void {
 
   }
 
-  validateSearch(se: S, callback: () => void): void {
+  validateSearch(se: F, callback: () => void): void {
     const u = this.ui;
     const vl = (u ? u.validateForm : undefined);
     validate(se, callback, this.getSearchForm(), localeOf(undefined, this.getLocale), vl);
   }
-  showResults(s: S, sr: SearchResult<T>) {
+  showResults(s: F, sr: SearchResult<T>) {
     const com = this;
     const results = sr.list;
     if (results && results.length > 0) {
       const lc = localeOf(undefined, this.getLocale);
-      formatResultsByComponent(results, com, lc);
+      // formatResultsByComponent(results, com, lc);
+      formatResults(results, com.pageIndex, com.pageSize, com.pageSize, com.sequenceNo, com.format, lc);
     }
     const am = com.appendMode;
     com.pageIndex = (s.page && s.page >= 1 ? s.page : 1);
     if (sr.total) {
-      com.itemTotal = sr.total;
+      com.total = sr.total;
     }
     if (am) {
       let limit = s.limit;
@@ -610,13 +613,13 @@ export class BaseSearchComponent<T, S extends Filter, P extends ModelHistoryProp
     this.doSearch();
   }
 
-  pageChanged(data: any) {
-    const { currentPage, itemsPerPage } = data;
-    changePage(this, currentPage, itemsPerPage);
+  pageChanged(data: PageChange) {
+    const { page, size } = data;
+    changePage(this, page, size);
     this.doSearch();
   }
 }
-export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
+export class SearchComponent<T, S extends Filter, P extends RouteComponentProps, 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,
@@ -630,14 +633,15 @@ export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I
     if (sv) {
       if (typeof sv === 'function') {
         const x: any = sv;
-        this.search = x;
+        this.service = x;
       } else {
-        this.search = sv.search;
+        this.service = sv.search;
         if (sv.keys) {
           this.keys = sv.keys();
         }
       }
     }
+    this.add = this.add.bind(this);
     this.call = this.call.bind(this);
     this.showError = getErrorFunc(param, showError);
     this.componentDidMount = this.componentDidMount.bind(this);
@@ -646,7 +650,7 @@ export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I
     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?: (s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>;
   // protected service: SearchService<T, S>;
   protected ref: any;
   protected autoSearch: boolean;
@@ -663,6 +667,11 @@ export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I
     const s: any = {};
     return s;
   }
+  add = (event: any) => {
+    event.preventDefault();
+    const url = this.url + '/add';
+    this.props.history.push(url);
+  }
   call(se: S) {
     this.running = true;
     const s = clone(se);
@@ -687,8 +696,8 @@ export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I
     delete se['firstLimit'];
     showLoading(this.loading);
     const com = this;
-    if (this.search) {
-      this.search(s, limit, next, fields).then(sr => {
+    if (this.service) {
+      this.service(s, limit, next, fields).then(sr => {
         com.showResults(s, sr);
         com.running = undefined;
         hideLoading(com.loading);
@@ -702,7 +711,7 @@ export class SearchComponent<T, S extends Filter, P extends ModelHistoryProps, I
   }
 }
 
-export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> extends BaseComponent<P, S> {
+export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> extends BaseComponent<P, S> {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -738,11 +747,11 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     this.getModel = this.getModel.bind(this);
     this.createModel = this.createModel.bind(this);
 
-    this.newOnClick = this.newOnClick.bind(this);
-    this.saveOnClick = this.saveOnClick.bind(this);
+    this.create = this.create.bind(this);
+    this.save = this.save.bind(this);
     this.onSave = this.onSave.bind(this);
     this.validate = this.validate.bind(this);
-    this.save = this.save.bind(this);
+    this.doSave = this.doSave.bind(this);
     this.succeed = this.succeed.bind(this);
     this.fail = this.fail.bind(this);
     this.postSave = this.postSave.bind(this);
@@ -766,25 +775,25 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
 
   insertSuccessMsg: string;
   updateSuccessMsg: string;
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
-  protected resetState(newMod: boolean, model: T, originalModel?: T) {
+  resetState(newMod: boolean, model: T, originalModel?: T) {
     this.newMode = newMod;
     this.orginalModel = originalModel;
     this.showModel(model);
   }
-  protected handleNotFound(form?: HTMLFormElement|null): void {
+  handleNotFound(form?: HTMLFormElement|null): void {
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     if (form) {
       readOnly(form);
     }
     this.showError(msg.message, msg.title);
   }
-  protected getModelName(f?: HTMLFormElement): string {
+  getModelName(f?: HTMLFormElement): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -807,7 +816,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
   }
 
   // end of: can be in ViewComponent
-  protected createModel(): T {
+  createModel(): T {
     if (this.metadata) {
       const obj = createModel2<T>(this.metadata);
       return obj;
@@ -817,7 +826,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     }
   }
 
-  newOnClick = (event: any) => {
+  create = (event: any) => {
     if (event) {
       event.preventDefault();
     }
@@ -834,7 +843,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
       }, 100);
     }
   }
-  protected saveOnClick = (event: any) => {
+  save = (event: any) => {
     event.preventDefault();
     (event as any).persist();
     if (!this.form && event && event.target) {
@@ -862,7 +871,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
         com.validate(obj, () => {
           const msg = message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           this.confirm(msg.message, msg.title, () => {
-            com.save(obj, obj, isBack);
+            com.doSave(obj, obj, isBack);
           }, msg.no, msg.yes);
         });
       } else {
@@ -874,14 +883,14 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
           com.validate(obj, () => {
             const msg = message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             this.confirm(msg.message, msg.title, () => {
-              com.save(obj, diffObj, isBack);
+              com.doSave(obj, diffObj, isBack);
             }, msg.no, msg.yes);
           });
         }
       }
     }
   }
-  protected validate(obj: T, callback: (obj2?: T) => void) {
+  validate(obj: T, callback: (obj2?: T) => void) {
     if (this.ui && this.form) {
       const valid = this.ui.validateForm(this.form, localeOf(undefined, this.getLocale));
       if (valid) {
@@ -892,10 +901,10 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     }
   }
 
-  protected save(obj: T, dif?: T, isBack?: boolean) {
+  doSave(obj: T, dif?: T, isBack?: boolean) {
   }
 
-  protected succeed(msg: string, isBack?: boolean, result?: ResultInfo<T>) {
+  succeed(msg: string, isBack?: boolean, result?: ResultInfo<T>) {
     if (result) {
       const model = result.value;
       this.newMode = false;
@@ -913,7 +922,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
       this.back(null);
     }
   }
-  protected fail(result: ResultInfo<T>) {
+  fail(result: ResultInfo<T>) {
     const errors = result.errors;
     const f = this.form;
     const u = this.ui;
@@ -936,7 +945,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
     }
   }
 
-  protected postSave(res: number|string|ResultInfo<T>, backOnSave?: boolean) {
+  postSave(res: number|string|ResultInfo<T>, backOnSave?: boolean) {
     this.running = false;
     hideLoading(this.loading);
     const st = this.status;
@@ -972,7 +981,7 @@ export abstract class BaseEditComponent<T, P extends ModelHistoryProps, S> exten
       }
     }
   }
-  protected handleDuplicateKey(result?: ResultInfo<T>) {
+  handleDuplicateKey(result?: ResultInfo<T>) {
     const msg = message(this.resourceService.value, 'error_duplicate_key', 'error');
     this.showError(msg.message, msg.title);
   }
@@ -1008,20 +1017,18 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
       this.keys = [];
     }
     this.load = this.load.bind(this);
-    this.save = this.save.bind(this);
+    this.doSave = this.doSave.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.ref = React.createRef();
   }
-  protected ref: any;
+  ref: any;
   componentDidMount() {
     const k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = initForm(this.ref.current, k);
     const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
+    this.load(id);
   }
-  load(_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) {
+  load(_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '') {
       const com = this;
@@ -1073,7 +1080,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
       }
     }
   }
-  protected save(obj: T, body?: T, isBack?: boolean) {
+  doSave(obj: T, body?: T, isBack?: boolean) {
     this.running = true;
     showLoading(this.loading);
     const isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);
@@ -1098,7 +1105,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
   }
 }
 
-export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends BaseDiffState> extends React.Component<P, S & any> {
+export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S extends BaseDiffState> extends React.Component<P, S & any> {
   constructor(props: P, protected keys: string[], protected resourceService: ResourceService,
       protected showMessage: (msg: string, option?: string) => void,
       protected showError: (m: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -1122,25 +1129,25 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
       disabled: false
     };
   }
-  protected status: DiffStatusConfig;
-  protected id?: ID;
-  protected form?: HTMLFormElement;
-  protected running?: boolean;
-  protected resource: StringMap;
+  status: DiffStatusConfig;
+  id?: ID;
+  form?: HTMLFormElement;
+  running?: boolean;
+  resource: StringMap;
 
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
 
-  protected initModel(): T {
+  initModel(): T {
     const x: any = {};
     return x;
   }
 
-  protected postApprove(s: number|string, err?: any) {
+  postApprove(s: number|string, err?: any) {
     this.setState({ disabled: true });
     const r = this.resourceService;
     const st = this.status;
@@ -1156,7 +1163,7 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
     }
   }
 
-  protected postReject(status: number|string, err?: any) {
+  postReject(status: number|string, err?: any) {
     this.setState({ disabled: true });
     const r = this.resourceService;
     const st = this.status;
@@ -1211,7 +1218,7 @@ export class BaseDiffApprComponent<T, ID, P extends HistoryProps, S extends Base
     }
   }
 
-  protected handleNotFound() {
+  handleNotFound() {
     this.setState({ disabled: true });
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     this.showError(msg.message, msg.title);
@@ -1235,7 +1242,7 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
       disabled: false,
     };
   }
-  protected ref: any;
+  ref: any;
 
   componentDidMount() {
     this.form = this.ref.current;
@@ -1317,3 +1324,7 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
     }
   }
 }
+export function removeUrlParams(url: string): string {
+  const startParams = url.indexOf('?');
+  return startParams !== -1 ? url.substring(0, startParams) : url;
+}