add minimal table, checkbox widgets to json factory - version 0.150

data/templates/common/helpers/StrongFB-json.ts

@@ -37,6 +37,11 @@ import { StrongFBEditorWidget } from "../../widgets/editor/editor.header";
 import { StrongFBTagsListWidget } from "../../widgets/tags-list/tags-list.header";
 {% endif %}
 
+// table
+{% if (loadedWidgets.includes('table')) %}
+import { StrongFBTableWidget } from "../../widgets/table/table.header";
+{% endif %}
+
 export function json2WidgetClass(json: StrongFBJsonLayoutBuilderWidget) {
     let res: StrongFBBaseWidgetHeader;
     {% if (loadedWidgets.includes('card')) %}
@@ -87,6 +92,13 @@ export function json2WidgetClass(json: StrongFBJsonLayoutBuilderWidget) {
     }
     {% endif %}
 
+    {% if (loadedWidgets.includes('table')) %}
+    // =>check form field widget
+    if (json.type === 'table') {
+        res = new StrongFBTableWidget();
+    }
+    {% endif %}
+
     // =>parse json
     if (res) {
         res['_isJsonMode'] = true;

data/templates/widgets/check-box/json/check-box.header.ts

@@ -0,0 +1,49 @@
+import { StrongFBBaseWidgetHeader } from "../../common/StrongFB-widget-header";
+import { ChecKBoxChangeEvent, CheckBoxOptionsDirection, CheckBoxSchema, CheckBoxStatus, CheckOption } from "./check-box-interfaces";
+
+
+
+export class StrongFBCheckBoxWidget<FIELDS = { [k: string]: any }> extends StrongFBBaseWidgetHeader {
+
+    protected override _schema: CheckBoxSchema = {};
+
+
+    override get widgetName(): string {
+        return 'check-box';
+    }
+
+    status(status: CheckBoxStatus) {
+        this._schema.status = status;
+        return this;
+    }
+
+    formFieldName(name: keyof FIELDS) {
+        this._formFieldName = name as any;
+        return this;
+    }
+
+    options(options: CheckOption[] | CheckOption) {
+        this._schema.options = options;
+        return this;
+    }
+
+    optionsDirection(dir: CheckBoxOptionsDirection) {
+        this._schema.optionsDirection = dir;
+        return this;
+    }
+
+    disabled(is = true) {
+        this._schema.disabled = is;
+        return this;
+    }
+    /********************************* */
+    /*************EVENTS************** */
+    /********************************* */
+    // change(change: ChecKBoxChangeEvent) {
+    //     this._schema.change = change;
+    //     return this;
+    // }
+
+
+
+}

data/templates/widgets/table/json/table-interfaces.ts

@@ -0,0 +1,97 @@
+import { APIRequest } from "../../common/StrongFB-interfaces";
+import { StrongFBJsonApiRequestSchema } from "../../common/StrongFB-interfaces";
+import { StrongFBJsonApiRequest } from "../../common/StrongFB-json-api-request";
+export interface JsonTableSchema<
+  COL extends string = string,
+  ROW extends object = object
+> {
+  columns?: TableColumn<COL, ROW>[];
+  loadRowsByApi?: {
+    options: APIRequest;
+    /**
+     * like 'data' property that real data items on it
+     */
+    responseKey?: string;
+    request?: any; //(req: APIRequest<ROW>, page?: number) => Promise<APIResponse<ROW[]>> | Promise<ROW[]>;
+  };
+  mapApiPagination?: TableMapApiPagination;
+}
+
+export interface TableTagColumnMapValue {
+  value: string;
+  /**
+   * @default basic
+   */
+  status?: "basic" | "primary" | "info" | "success" | "warning" | "danger";
+}
+
+export type TableColumnMapValueType =
+  | string
+  | TableTagColumnMapValue
+  | TableTagColumnMapValue[];
+
+export type TableColumnMapValue<
+  T = TableColumnMapValueType,
+  R extends object = object
+> = (row?: R, index?: number, self?: any) => Promise<T> | T;
+
+export interface TableColumn<
+  N extends string = string,
+  R extends object = object
+> {
+  name: N;
+  title?: string;
+  /**
+   * @default string
+   */
+  type?: "string" | "actions" | "tag" | "tagsList" | "selectRow";
+  /**
+   * normalize value of row for this column
+   * not exist for 'actions' type
+   */
+  mapValue?: TableColumnMapValue<TableColumnMapValueType, R>;
+
+  hasSort?: boolean;
+}
+
+export interface TableLoadByApi<
+  ROW extends object = object,
+  COL extends string = string,
+  BODY_REQUEST = any,
+  RESPONSE = ROW[]
+> {
+  //   prepareRequest?: StrongFBJsonApiRequest;
+  callRequest?: StrongFBJsonApiRequest;
+  /**
+   * like 'data' property that real data items on it
+   */
+  responseKey?: string;
+  //   prepareRows?: StrongFBJsonApiRequestSchema;
+}
+
+export interface TableMapApiPagination {
+  /**
+   * @default 10
+   */
+  pageSize?: number;
+  /**
+   * field name in api response like 'meta.pagination.count'
+   */
+  pageCountResponse: string;
+  /**
+   * page size in api param
+   * @default page_size
+   */
+  pageSizeParam?: string;
+  /**
+   * page in api param
+   * @default page
+   */
+  pageParam?: string;
+
+  /**
+   * auto filled
+   * no need to filled!
+   */
+  __pageCountResponse?: number;
+}

data/templates/widgets/table/json/table.header.ts

@@ -0,0 +1,75 @@
+import { StrongFBBaseWidgetHeader } from "../../common/StrongFB-widget-header";
+
+import {
+  JsonTableSchema,
+  TableColumn,
+  TableColumnMapValue,
+  TableLoadByApi,
+  TableMapApiPagination,
+} from "./table-interfaces";
+
+export class StrongFBTableWidget<
+  COL extends string = string,
+  ROW extends object = object
+> extends StrongFBBaseWidgetHeader<JsonTableSchema<COL>> {
+  protected override _schema: JsonTableSchema<COL> = {};
+
+  override get widgetName(): string {
+    return "table";
+  }
+
+  columns(columns: TableColumn<COL>[]) {
+    this._schema.columns = columns;
+    return this;
+  }
+
+  /**
+   *
+   * you can directly define map in 'columns' function or use this method
+   * if not exist column, create it!
+   */
+  mapColumnValue<T = TableColumnMapValue>(
+    column: COL,
+    map: TableColumnMapValue<T, ROW>
+  ) {
+    if (!this._schema.columns) this._schema.columns = [];
+    // =>find column by name
+    let columnObject = this._schema.columns?.find((i) => i.name === column);
+    if (!columnObject) {
+      this._schema.columns.push({
+        name: column,
+        mapValue: map as any,
+      });
+    } else {
+      columnObject.mapValue = map as any;
+    }
+    return this;
+  }
+
+  loadTableByApi<BODY_REQUEST = {}, RESPONSE = ROW[]>(
+    options: TableLoadByApi<ROW, COL, BODY_REQUEST, RESPONSE>
+  ) {
+    if (!options) return this;
+    this._schema.loadRowsByApi = {
+      options: { method: "GET", path: "/" },
+      request: options.callRequest
+        ? options.callRequest.toJson()
+        : (undefined as any),
+      responseKey: options.responseKey,
+    };
+    return this;
+  }
+
+  mapPaginationByApi(pagination: TableMapApiPagination) {
+    this._schema.mapApiPagination = pagination;
+    return this;
+  }
+
+  /********************************* */
+  /*************EVENTS************** */
+  /********************************* */
+  // click(click: StrongFBJsonApiRequest) {
+  //     this._schema.click = click.toJson();
+  //     return this;
+  // }
+}

data/templates/widgets/table/table-interfaces.ts

@@ -158,4 +158,4 @@ export interface TableSchema<COL extends string = string, ROW extends object = o
     notFound?: TableNotFound;
 
     responsive?: TableResponsive;
-}
+}