Implement form actions

sources/index.ts

@@ -10,9 +10,11 @@ export * from "./core/field-types/number";
 export * from "./core/find";
 
 export * from "./table";
+export * from "./table/row";
 export * from "./table/cell";
 export * from "./table/column";
 export * from "./table/summary";
+export * from "./table/search";
 export * from "./table/column-filter";
 export * from "./table/column-filter-item";
 export * from "./table/filter-default";
@@ -37,4 +39,4 @@ export * from "./table/editor-row";
 export * from "./utils/array-data-provider";
 export * from "./utils/remote-data-provider";
 export * from "./utils/utils";
-export * from "./icons"
+export * as Icons from "./icons";

sources/knockout/widgets/form.html

@@ -1,6 +1,12 @@
 <div class="table4js-form">
+  <div className="table4js-form__header">
+  </div>
   <!-- ko foreach: properties -->
     <!-- ko component: { name: "table4js-property-editor", params: { property: $data } } -->
     <!-- /ko -->
   <!-- /ko -->
+  <div class="table4js-form__footer">
+    <table4js-actions class="table4js-actions" params="model: $data, options: { action: 'bottomActions' }">
+    </table4js-actions>
+  </div>
 </div>

sources/react/widgets/form.tsx

@@ -5,6 +5,7 @@ import { makeReactive } from "../reactivity";
 import { Editor } from "../../widgets/editor";
 import { Property } from "../../widgets/property";
 import { Form } from "../../widgets/form";
+import { AbrisActions } from "../core/actions";
 
 export interface IFormProps {
   form: Form;
@@ -15,9 +16,17 @@ export function Form4({ form }: IFormProps) {
 
   return (
     <div className="table4js-form">
+      <div className="table4js-form__header">
+      </div>
       {form.properties.map(property => (
         <AbrisComponent key={property.name} componentName={"table4js-property-editor"} componentProps={{property}} />
       ))}
+      <div className="table4js-form__footer">
+        <AbrisActions
+          className="table4js-actions"
+          actions={form.bottomActions}
+        />
+      </div>
     </div>
   );
 }

sources/widgets/form.ts

@@ -1,6 +1,7 @@
+import { IAction } from "../core/action";
 import { Base } from "../core/base";
-import { property } from "../core/property";
 import { IFieldDescription } from "../core/domain";
+import { property } from "../core/property";
 import { Property } from "./property";
 
 import "./form.scss";
@@ -16,6 +17,7 @@ export interface IFormLayout {
 
 export class Form extends Base {
     private _properties: {[index: string]: Property } = {};
+    private innerActions: Array<IAction> = []; // TODO: elimitane duplication with table object
 
     constructor(private fields: Array<IFieldDescription>, private layout?: IFormLayout) {
         super();
@@ -37,4 +39,31 @@ export class Form extends Base {
     public complete(commit: boolean) {
         Object.keys(this._properties).forEach(name => this._properties[name].complete(commit));
     }
+
+    get bottomActions() {
+        return this.getActions('bottom');
+    }
+    getActions = (container?: string) => {
+        const actions = [].concat(this.innerActions);
+        return actions.filter(action => action.container === container);
+    }
+    public addAction(action: IAction) {
+        const oldOne: IAction = this.removeAction(action.name);
+        this.innerActions.push(action);
+        return oldOne;
+    }
+    public removeAction(actionName: string): IAction {
+        let oldOneIndex = -1;
+        for(let i=0; i<this.innerActions.length; i++) {
+            if(this.innerActions[i].name === actionName) {
+                oldOneIndex = i;
+                break;
+            }
+        }
+        let oldOne: IAction = undefined;
+        if(oldOneIndex >= 0) {
+            oldOne = this.innerActions.splice(oldOneIndex, 1)[0];
+        }
+        return oldOne;
+    }
 }