@apia/api 3.0.9 → 3.0.11

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useCallback, useEffect, useId } from 'react';
-import { Box, Label, spacing, getVariant } from '@apia/theme';
+import { Box, Label, spacing, getVariant, Input as Input$1 } from '@apia/theme';
 import { debugDispatcher, parseXmlAsync, EventEmitter, arrayOrArray, useMount, encrypt, noNaN, getIndex, getLabel, StatefulEmitter, focus, focusSelector, useLatest } from '@apia/util';
 import { notify, getNotificationMessageObj, dispatchNotifications } from '@apia/notifications';
 import { classToValidate, Checkbox, FileInput, classToValidationFunction, Input, Radio, Select, Textarea, useFormContext, validationsStore, hasSucceedFormValidation, Form } from '@apia/validations';
@@ -11,7 +11,10 @@ import merge from 'lodash-es/merge';
 import QueryString from 'qs';
 import { session } from '@apia/session';
 import uniqueId from 'lodash-es/uniqueId';
-import { ResponsiveTableContext, ResponsiveTable, Pagination, Sort, Responsive, Additional, responsiveTableStore } from '@apia/table';
+import { ResponsiveTableContext, ResponsiveTable, Pagination, Sort, Responsive, Additional, responsiveTableStore, TableContextReproducer, makeController2, useResponsiveTableContext } from '@apia/table';
+import { toJS, makeObservable, observable, action } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { throttle } from 'lodash-es';
 
 const ApiaApiId = createContext("apiaApi");
 const ApiaApiContext = ({
@@ -3184,30 +3187,537 @@ const ApiaApiHandlerNonMemoized = () => {
     },
     [currentForm2?.form.onLoad, getHandler]
   );
-  return /* @__PURE__ */ jsx(ApiaApiContext$1, { id: apiaApiForm, children: /* @__PURE__ */ jsx(Modal, { ...modalProps, ref: modalRef, children: currentForm2 && /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.modals.apiaApi"), children: /* @__PURE__ */ jsxs(
-    Form,
+  return /* @__PURE__ */ jsx(ApiaApiContext$1, { id: apiaApiForm, children: /* @__PURE__ */ jsx(
+    Modal,
     {
-      name: apiaApiForm,
-      unregisterOnUnmount: true,
-      avoidFieldsOverride: true,
-      className: "handler__form",
-      children: [
-        /* @__PURE__ */ jsx(ApiaApiFieldsContainer, { definition: currentForm2, ...handler }),
-        state.isMultipart && state.progress > 0 && /* @__PURE__ */ jsx(Box, { className: "progressBox", children: /* @__PURE__ */ jsx(
-          ProgressBar,
-          {
-            id: "ApiaApiHandler progress",
-            progress: state.progress,
-            loading: true
-          }
-        ) }),
-        /* @__PURE__ */ jsx(ApiaApiButtonsContainer, { definition: currentForm2, ...handler }),
-        /* @__PURE__ */ jsx(Box, { ref: formRef, sx: { display: "none" } })
-      ]
+      ...modalProps,
+      ref: modalRef,
+      variant: "layout.common.modals.apiaApi",
+      children: currentForm2 && /* @__PURE__ */ jsxs(
+        Form,
+        {
+          name: apiaApiForm,
+          unregisterOnUnmount: true,
+          avoidFieldsOverride: true,
+          className: "handler__form",
+          children: [
+            /* @__PURE__ */ jsx(ApiaApiFieldsContainer, { definition: currentForm2, ...handler }),
+            state.isMultipart && state.progress > 0 && /* @__PURE__ */ jsx(Box, { className: "progressBox", children: /* @__PURE__ */ jsx(
+              ProgressBar,
+              {
+                id: "ApiaApiHandler progress",
+                progress: state.progress,
+                loading: true
+              }
+            ) }),
+            /* @__PURE__ */ jsx(ApiaApiButtonsContainer, { definition: currentForm2, ...handler }),
+            /* @__PURE__ */ jsx(Box, { ref: formRef, sx: { display: "none" } })
+          ]
+        }
+      )
     }
-  ) }) }) });
+  ) });
 };
 const ApiaApiHandler = React.memo(ApiaApiHandlerNonMemoized);
 
-export { ApiaApi$1 as ApiaApi, ApiaApiHandler, getFunction, getModal, makeApiaUrl };
+const AdditionalFiltersComponent = ({
+  tableController
+}) => {
+  const filterTitle = getLabel("sbtFilters").text;
+  const sortTitle = getLabel("titOrderBy").text;
+  const filterTypes = getLabel("btnFilterType").text;
+  return /* @__PURE__ */ jsx(TableContextReproducer, { tableName: tableController.getTableName(), children: /* @__PURE__ */ jsx(Box, { className: "additionalFiltersContent", children: /* @__PURE__ */ jsxs(Accordion, { children: [
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        id: "Responsive",
+        buttonProps: { ariaLabel: filterTitle, label: filterTitle },
+        children: /* @__PURE__ */ jsx(Responsive, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        id: "Additional",
+        buttonProps: { ariaLabel: sortTitle, label: sortTitle },
+        children: /* @__PURE__ */ jsx(Additional, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        id: "Sort",
+        buttonProps: { ariaLabel: filterTypes, label: filterTypes },
+        children: /* @__PURE__ */ jsx(Sort, {})
+      }
+    )
+  ] }) }) });
+};
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AdditionalFiltersModalController {
+  constructor(tableController) {
+    this.tableController = tableController;
+    __publicField$4(this, "modalHandler", null);
+  }
+  getModalDefinition() {
+    return {
+      children: /* @__PURE__ */ jsx(AdditionalFiltersComponent, { tableController: this.tableController }),
+      onConfirm: () => {
+      },
+      confirmProps: {
+        hideConfirmButton: true,
+        hideCancelButton: true,
+        additionalButtons: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SimpleButton, { children: "TODO:BUSCAR" }),
+          ",",
+          /* @__PURE__ */ jsx(SimpleButton, { variant: "outline", children: "TODO:FILTER" })
+        ] })
+      },
+      draggable: true,
+      size: "lg"
+    };
+  }
+  async openModal(properties) {
+    this.modalHandler = ApiaUtil.instance.modals.open({
+      ...this.getModalDefinition(),
+      ...properties
+    });
+  }
+  closeModal() {
+    this.modalHandler?.close();
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class QueryModalController {
+  constructor(queryController) {
+    __publicField$3(this, "emitter", new EventEmitter());
+    __publicField$3(this, "queryController");
+    __publicField$3(this, "modalHandler", null);
+    __publicField$3(this, "currentSelection", null);
+    __publicField$3(this, "additionalFiltersController");
+    __publicField$3(this, "openModal", async (properties) => {
+      await this.queryController.initialLoad();
+      this.modalHandler = ApiaUtil.instance.modals.open({
+        ...this.getModalDefinition(),
+        ...properties
+      });
+    });
+    if (!queryController) {
+      throw new Error("QueryController instance is required");
+    }
+    this.queryController = queryController;
+    this.additionalFiltersController = new AdditionalFiltersModalController(
+      this.queryController.tableController
+    );
+    this.queryController.tableController.state.props = {
+      isMultiple: false
+    };
+    this.queryController.tableController.on("onSelectRows", (ev) => {
+      this.emitter.emit("onSelectRows", ev);
+      this.modalHandler?.close();
+    });
+    this.queryController.tableController.on("onChangeSelection", (ev) => {
+      this.currentSelection = ev;
+    });
+  }
+  getModalDefinition() {
+    const tableController = this.queryController.tableController;
+    const structure = this.queryController.structure;
+    return {
+      children: /* @__PURE__ */ jsxs(tableController.Context, { children: [
+        /* @__PURE__ */ jsx(tableController.Table, {}),
+        /* @__PURE__ */ jsx(tableController.Pagination, {})
+      ] }),
+      title: structure?.title,
+      onConfirm: () => {
+        this.emitter.emit("onSelectRows", this.currentSelection || []);
+      },
+      onCancel: () => {
+        this.additionalFiltersController.closeModal();
+      },
+      confirmProps: {
+        confirmButtonText: getLabel("btnCon").text,
+        cancelButtonText: getLabel("btnCan").text
+      },
+      NavBar: /* @__PURE__ */ jsx(
+        SimpleButton,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => this.additionalFiltersController.openModal(),
+          children: "Additional filters"
+        }
+      ),
+      size: "finder"
+    };
+  }
+  getQueryController() {
+    return this.queryController;
+  }
+  on(ev, cb) {
+    return this.emitter.on(ev, cb);
+  }
+  getModalHandler() {
+    return this.modalHandler;
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+let controllerCount = 0;
+class TableController {
+  constructor(initialState) {
+    __publicField$2(this, "emitter", new EventEmitter());
+    __publicField$2(this, "tableName", `TableController${controllerCount++}`);
+    __publicField$2(this, "tableSelectionController");
+    __publicField$2(this, "controllerComponent", () => null);
+    __publicField$2(this, "state", {
+      columns: /* @__PURE__ */ new Map(),
+      filters: /* @__PURE__ */ new Map(),
+      pagination: { currentPage: 0, totalPages: 0, totalRecords: 0 },
+      props: {},
+      rows: []
+    });
+    __publicField$2(this, "Context", observer(({ children }) => {
+      const props = toJS(this.state.props);
+      return /* @__PURE__ */ jsx(
+        ResponsiveTableContext,
+        {
+          ...props,
+          columns: [...toJS(this.state.columns).values()],
+          rows: toJS(this.state.rows),
+          filters: [...toJS(this.state.filters).values()].map((c) => {
+            return {
+              id: c.filterState.id,
+              column: c.filterState.column,
+              asAdditional: c.filterState.isAdditional || this.state.columns.get(c.filterState.column || "")?.hidden
+            };
+          }),
+          FiltersRenderer: (filterId) => this.state.filters.get(filterId).Component,
+          name: this.tableName,
+          SelectionHandler: this.controllerComponent,
+          onSortChange: () => {
+            this.emitter.emit.bind(this.emitter, "onSortChange");
+          },
+          onChangeSelection: this.emitter.emit.bind(
+            this.emitter,
+            "onChangeSelection"
+          ),
+          onFilterBlur: this.emitter.emit.bind(this.emitter, "onFilterBlur"),
+          onFilterChange: this.emitter.emit.bind(this.emitter, "onFilterChange"),
+          onFilterPressEnter: this.emitter.emit.bind(
+            this.emitter,
+            "onFilterPressEnter"
+          ),
+          onRowClick: this.emitter.emit.bind(this.emitter, "onRowClick"),
+          onSelectRows: this.emitter.emit.bind(this.emitter, "onSelectRows"),
+          children
+        }
+      );
+    }));
+    __publicField$2(this, "Pagination", observer(() => {
+      return /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          currentPage: this.state.pagination.currentPage,
+          pageCount: this.state.pagination.totalPages,
+          recordsCount: this.state.pagination.totalRecords,
+          onPageChange: this.emitter.emit.bind(this.emitter, "onPage"),
+          onRefresh: this.emitter.emit.bind(this.emitter, "onRefresh", null)
+        }
+      );
+    }));
+    __publicField$2(this, "Table", ResponsiveTable);
+    makeObservable(this, {
+      state: observable,
+      updateState: action
+    });
+    const [controller, controllerComponent] = makeController2(this.tableName);
+    this.tableSelectionController = controller;
+    this.controllerComponent = controllerComponent;
+    if (initialState) {
+      Object.assign(this.state, initialState);
+    }
+  }
+  getTableName() {
+    return this.tableName;
+  }
+  on(ev, cb) {
+    return this.emitter.on(ev, cb);
+  }
+  updateState(newState) {
+    if (newState instanceof Function) {
+      newState(this.state);
+    } else {
+      Object.assign(this.state, newState);
+    }
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Filter {
+  constructor(properties) {
+    __publicField$1(this, "filterState", {
+      runAutomatically: false,
+      value: ""
+    });
+    __publicField$1(this, "Component", observer(({ filter }) => {
+      const { onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext();
+      return /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          value: this.filterState.value,
+          onChange: (ev) => {
+            this.filterState.value = ev.target.value;
+            onFilterChange?.(filter);
+          },
+          onKeyDown: (ev) => {
+            if (ev.code === "Enter") {
+              onFilterPressEnter?.(filter);
+            }
+          },
+          onBlur: () => {
+            onFilterBlur?.(filter);
+          }
+        }
+      );
+    }));
+    Object.assign(this.filterState, properties);
+    makeObservable(this, { filterState: observable });
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class QueryController {
+  constructor(ajaxUrl) {
+    this.ajaxUrl = ajaxUrl;
+    __publicField(this, "hasInited", false);
+    __publicField(this, "initializing", false);
+    __publicField(this, "structure", null);
+    __publicField(this, "tableController", new TableController());
+    __publicField(this, "executeRefresh", throttle(
+      async () => {
+        const refresh = await ApiaApi$1.post(
+          makeApiaUrl(this.getRefreshParameters())
+        );
+        this.parseRefreshResponse(refresh?.data);
+      },
+      300,
+      { leading: false, trailing: true }
+    ));
+    this.initEvents();
+  }
+  initEvents() {
+    this.tableController.on("onChangeSelection", (ev) => {
+    });
+    this.tableController.on("onFilterBlur", (ev) => {
+    });
+    this.tableController.on("onFilterChange", (ev) => {
+      const filter = this.tableController.state.filters.get(ev.id);
+      if (filter?.filterState.runAutomatically) {
+        this.refresh();
+      }
+    });
+    this.tableController.on("onFilterPressEnter", this.refresh.bind(this));
+    this.tableController.on("onRowClick", (ev) => {
+    });
+    this.tableController.on("onSelectRows", (ev) => {
+    });
+    this.tableController.on("onSortChange", (ev) => {
+      this.sort(ev.column.name);
+    });
+    this.tableController.on("onPage", this.page.bind(this));
+    this.tableController.on("onRefresh", this.refresh.bind(this));
+  }
+  getLoadStructureParameters() {
+    return {
+      ajaxUrl: this.ajaxUrl,
+      action: "init",
+      react: true,
+      //Importante para forzar paginacion en querys de modal ya que no existe parametro aún
+      forcePagination: true
+    };
+  }
+  getPageParameters() {
+    return {
+      ajaxUrl: this.ajaxUrl,
+      action: "page"
+    };
+  }
+  getRefreshParameters() {
+    return {
+      ajaxUrl: this.ajaxUrl,
+      action: "refresh",
+      react: true
+    };
+  }
+  getSortParameters() {
+    return {
+      ajaxUrl: this.ajaxUrl,
+      action: "sort",
+      react: true,
+      orderJustThisColumn: true
+    };
+  }
+  parseLoadStructureResponse(response) {
+    const typedResponse = response;
+    const retrievedColumns = arrayOrArray(typedResponse.columns.column);
+    return {
+      columns: retrievedColumns.map((c) => {
+        const column = {
+          label: c.title,
+          name: c.name,
+          additionalData: c,
+          allowSorting: c.enableOrder === "1",
+          ariaLabel: c.title,
+          currentSorting: c.order,
+          hidden: c.hide === "1",
+          hideFromAccordion: c.hide === "1",
+          id: c.name,
+          showAsAdditional: c.asMoreInformation,
+          title: c.title,
+          width: c.width
+        };
+        return column;
+      }),
+      description: typedResponse.queryData.description,
+      filters: arrayOrArray(typedResponse.filters.filter).filter((f) => !!f.column).map((f, i) => {
+        const filter = {
+          id: `filter${String(i + 1)}`,
+          // Id generado en APIA
+          value: f.currentValue,
+          avoidLabel: false,
+          column: f.column,
+          isAdditional: f.asAdditional,
+          isHidden: f.hideFilterOption,
+          title: f.title,
+          tooltip: f.toolTip,
+          type: f.type,
+          onChange: () => {
+          },
+          options: [],
+          placeholder: f.title,
+          readonly: f.readonly,
+          required: f.required === "true",
+          runAutomatically: typedResponse?.filters.runFiltersAutomatically || f.detectOnChange
+        };
+        return filter;
+      }),
+      hasAdditionalInformation: !!retrievedColumns.find(
+        (c) => c.asMoreInformation
+      ),
+      isDynamic: false,
+      title: typedResponse.queryData.title,
+      openFiltersAutomatically: typedResponse.filters.openFiltersAutomatically,
+      runFiltersAutomatically: typedResponse.filters.runFiltersAutomatically
+    };
+  }
+  parseRefreshResponse(response) {
+    const columns = [...this.tableController.state.columns.values()];
+    const rows = response?.function?.messages?.result?.table?.row;
+    const pageState = response?.function.messages.result.pageInfo;
+    this.updatePageState(pageState);
+    this.updateRows([
+      ...arrayOrArray(rows).map((r) => {
+        return {
+          forbidSelection: r.unselectableTR,
+          initiallySelected: r.selected,
+          isLocked: r.isLocked,
+          rowProps: r,
+          cells: [
+            columns.find((c) => c.showAsAdditional) ? {} : void 0,
+            ...columns.filter((c) => c.hidden).map(() => ({})),
+            ...arrayOrArray(r.cell).map((c) => ({ children: c }))
+          ].filter(Boolean),
+          className: r.classToAdd,
+          id: r.id
+        };
+      })
+    ]);
+  }
+  async getStructure() {
+    const result = await ApiaApi$1.post(
+      makeApiaUrl(this.getLoadStructureParameters())
+    );
+    if (!result?.data) {
+      throw new Error("Cannot load Input query structure");
+    }
+    return this.parseLoadStructureResponse(result.data);
+  }
+  parseStructure(structure) {
+    const columns = new Map(
+      arrayOrArray(structure.columns).map((c) => [c.name, c])
+    );
+    const filters = new Map(
+      arrayOrArray(structure.filters).map((f) => [f.id, new Filter(f)])
+    );
+    this.tableController.updateState({ columns, filters });
+  }
+  updatePageState(pageInfo) {
+    const currentPage = Number(pageInfo?.currentPage ?? 0);
+    const totalPages = Number(pageInfo?.pageCount ?? 0);
+    const totalRecords = Number(pageInfo?.totalRecords ?? 0);
+    this.tableController.updateState({
+      pagination: { currentPage, totalPages, totalRecords }
+    });
+  }
+  updateRows(rows) {
+    this.tableController.state.rows = rows;
+  }
+  async initialLoad() {
+    if (this.initializing && !this.hasInited) {
+      throw new Error("Cannot initialize the query twice");
+    }
+    this.initializing = true;
+    if (!this.hasInited) {
+      this.structure = await this.getStructure();
+      this.parseStructure(this.structure);
+      this.hasInited = true;
+      this.initializing = false;
+    }
+  }
+  async page(num) {
+    const page = await ApiaApi$1.post(
+      makeApiaUrl({ ...this.getPageParameters(), pageNumber: num })
+    );
+    this.parseRefreshResponse(page?.data);
+  }
+  async refresh() {
+    return this.executeRefresh();
+  }
+  async sort(column) {
+    await ApiaApi$1.post(
+      makeApiaUrl({ ...this.getSortParameters(), orderBy: column })
+    );
+    this.refresh();
+  }
+}
+
+export { ApiaApi$1 as ApiaApi, ApiaApiHandler, QueryController, QueryModalController, getFunction, getModal, makeApiaUrl };
 //# sourceMappingURL=index.js.map