@apia/api 4.0.15 → 4.0.17

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import * as React$1 from 'react';
-import React__default from 'react';
+import * as react from 'react';
+import react__default from 'react';
 import { AxiosResponse, AxiosRequestConfig } from 'axios';
 import * as _apia_util from '@apia/util';
-import { TModify, TApiaLoad, TApiaFormElement, TApiaFilterOption, TApiaFilter, TApiaFunction, TApiaFunctionPageInfo } from '@apia/util';
+import { TModify, TApiaLoad, TApiaFormElement, TApiaFilterOption, TApiaFilter, TApiaFunction, TApiaFunctionPageInfo, EventEmitter, UnSubscriber } from '@apia/util';
 import { TNotificationMessage, notify } from '@apia/notifications';
 import { TModal, TOpenModal, ApiaUtilModalHandler } from '@apia/components';
 import QueryString from 'qs';
@@ -225,14 +225,14 @@ type TApiaApiMethodHandler = {
     reset: () => void;
     setError: typeof notify;
     setMessage: (message: Record<string, unknown>) => unknown;
-    setState: React$1.Dispatch<React$1.SetStateAction<IApiaApiHandlerState>>;
+    setState: react.Dispatch<react.SetStateAction<IApiaApiHandlerState>>;
     state: IApiaApiHandlerState;
     setValue: (name: string, value: string) => void;
 };
 type TApiaApiMethod = (handler: TApiaApiMethodHandler, props: TMethod['props']) => Promise<void> | void;
 type TApiaApiField = TApiaApiMethodHandler & {
     element: TModify<TApiaFormElement, {
-        onChange: React$1.ChangeEventHandler;
+        onChange: react.ChangeEventHandler;
     }>;
 };
 type TStoredApiaApiMethod = (props?: TMethod['props']) => unknown;
@@ -257,7 +257,7 @@ interface IApiaApiHandlerState {
     errors: Record<string, string>;
     windowIndex: number;
 }
-declare const ApiaApiHandler: React$1.MemoExoticComponent<() => React$1.JSX.Element>;
+declare const ApiaApiHandler: react.MemoExoticComponent<() => react.JSX.Element>;
 
 declare global {
     interface Window {
@@ -272,13 +272,14 @@ declare global {
  * Permite cargar en forma asíncrona un modal que se encuentre dentro del
  * directorio /api/modals
  * */
-declare const getModal: (path: string) => React__default.LazyExoticComponent<React__default.ComponentType<TApiaApiField>>;
+declare const getModal: (path: string) => react__default.LazyExoticComponent<react__default.ComponentType<TApiaApiField>>;
 
 type TFilter = {
     avoidLabel?: boolean;
     column?: string;
     errorMessage?: string;
     id: string;
+    filterToId?: string;
     isAdditional?: boolean;
     isHidden?: boolean;
     onChange?: (queryController: QueryController) => unknown;
@@ -292,18 +293,27 @@ type TFilter = {
     isRange?: boolean;
     type?: 'date' | 'D' | 'S' | 'number' | 'N' | 'apiaNumber' | 'triple' | 'dateHour';
     value: any;
+    valueTo?: any;
     isSize?: boolean;
 };
 
-type FilterState = TFilter;
 declare class Filter {
-    private tableName?;
-    filterState: FilterState;
+    protected tableName?: string;
+    filterState: TFilter;
     focus(): void;
     constructor(properties: TFilter);
+    getInputRenderer({ filter }: {
+        filter: TApiaFilter;
+    }): react.JSX.Element;
+    getSelectRenderer({ filter }: {
+        filter: TApiaFilter;
+    }): react.JSX.Element;
+    getRangeRenderer({ filter }: {
+        filter: TApiaFilter;
+    }): react.JSX.Element;
     Component: (({ filter }: {
         filter: TApiaFilter;
-    }) => React$1.JSX.Element) & {
+    }) => react.JSX.Element) & {
         displayName: string;
     };
 }
@@ -356,7 +366,7 @@ declare class FilterTypes {
     conditions: TFilterTypesElementConditions[];
     constructor();
     protected getFilterTypes(): Promise<void>;
-    Component: () => React$1.JSX.Element;
+    Component: () => react.JSX.Element;
     initialLoad(): Promise<void>;
     setFilterOptions(): Promise<void>;
 }
@@ -373,12 +383,12 @@ declare class TableController {
     private parseFilters;
     Context: ({ children }: {
         children: React.ReactNode;
-    }) => React$1.JSX.Element;
+    }) => react.JSX.Element;
     getTableName(): string;
-    Pagination: (() => React$1.JSX.Element) & {
+    Pagination: (() => react.JSX.Element) & {
         displayName: string;
     };
-    Table: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<theme_ui.BoxProps & React$1.RefAttributes<HTMLDivElement>>>;
+    Table: react.MemoExoticComponent<react.ForwardRefExoticComponent<theme_ui.BoxProps & react.RefAttributes<HTMLDivElement>>>;
     on<K extends keyof TableControllerEvents>(ev: K, cb: (e: TableControllerEvents[K]) => unknown): _apia_util.UnSubscriber;
     updateState(newState: Partial<TableControllerState> | ((currentState: TableControllerState) => void)): void;
 }
@@ -400,6 +410,19 @@ declare class QueryController {
     private initializing;
     structure: QueryControllerStructure | null;
     tableController: TableController;
+    getTableControllerDefaultProps(): {};
+    protected getEventsHandlers(): {
+        onChangeSelection: (ev: TResponsiveTableRowsSelectionEvent) => void;
+        onFilterBlur: (_ev: TApiaFilter) => void;
+        onFilterChange: (_ev: TApiaFilter) => void;
+        onFilterPressEnter: (_ev: TApiaFilter) => void;
+        onRowClick: (_ev: TResponsiveTableRowsSelectionEvent[number]) => void;
+        onSelectRows: (_ev: TResponsiveTableRowsSelectionEvent) => void;
+        onSortChange: (ev: TResponsiveTableSortChangeEvent) => void;
+        onPage: (num: number) => Promise<void>;
+        onRefresh: () => Promise<void | undefined>;
+    };
+    protected buildTableController(): TableController;
     constructor(ajaxUrl: string);
     protected initEvents(): void;
     protected getLoadStructureParameters(): Record<string, unknown>;
@@ -431,17 +454,19 @@ type QueryModalControllerEvents = Pick<TableControllerEvents, 'onSelectRows'> &
     cancel: null;
 };
 declare class QueryModalController {
-    private emitter;
+    protected emitter: EventEmitter<QueryModalControllerEvents>;
     protected queryController: QueryController;
     private modalHandler;
-    private currentSelection;
+    protected currentSelection: TResponsiveTableRowsSelectionEvent | null;
     private additionalFiltersController;
     constructor(queryController: QueryController);
     protected getModalDefinition(): TOpenModal;
     getQueryController(): QueryController;
-    private on;
-    openModal(properties?: TOpenModal): Promise<QueryModalControllerEvents['onSelectRows']>;
+    protected on<K extends keyof QueryModalControllerEvents>(ev: K, cb: (e: QueryModalControllerEvents[K]) => unknown): UnSubscriber;
+    openModal<T = QueryModalControllerEvents['onSelectRows']>(properties?: TOpenModal): Promise<T>;
     getModalHandler(): ApiaUtilModalHandler | null;
+    protected onConfirm(): void;
+    protected onConfirmResolve<T>(): Promise<T>;
 }
 
 declare const ApiaUsersModal2: QueryModalController;
@@ -455,9 +480,9 @@ type TOpenMonDocModal = {
 };
 declare class ApiaMonDocModal extends QueryModalController {
     constructor();
-    openModal(properties: TOpenModal & {
+    openModal<T = TResponsiveTableRowsSelectionEvent>(properties: TOpenModal & {
         monitorProperties: TOpenMonDocModal;
-    }): Promise<TResponsiveTableRowsSelectionEvent>;
+    }): Promise<T>;
 }
 declare const ApiaMonDocModal2: ApiaMonDocModal;
 

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, Select as Select$1, Input as Input$1 } from '@apia/theme';
+import { Box, Label, spacing, getVariant, Input as Input$1, Select as Select$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,10 +11,11 @@ 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, useResponsiveTableContext, RangeFilter, getResponsiveTableContext, makeController2, responsiveTableActions, TableContextReproducer } from '@apia/table';
+import { ResponsiveTableContext, ResponsiveTable, Pagination, Sort, Responsive, Additional, responsiveTableStore, useResponsiveTableContext, getResponsiveTableContext, makeController2, responsiveTableActions, TableContextReproducer } from '@apia/table';
 import { makeObservable, observable, reaction, action, toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { throttle } from 'lodash-es';
+import { Icon } from '@apia/icons';
 
 const ApiaApiId = createContext("apiaApi");
 const ApiaApiContext = ({
@@ -3222,6 +3223,93 @@ const ApiaApiHandlerNonMemoized = () => {
 };
 const ApiaApiHandler = React.memo(ApiaApiHandlerNonMemoized);
 
+const units = ["B", "KB", "MB", "GB"];
+const RangeFilterRenderer = observer(
+  ({ filter, state }) => {
+    const { onFilterBlur, onFilterPressEnter, onFilterChange } = useResponsiveTableContext();
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          id: "range-filter-from",
+          value: state.value,
+          onChange: (ev) => {
+            state.value = ev.target.value;
+            onFilterChange?.(filter);
+          },
+          onKeyDown: (ev) => {
+            if (ev.code === "Enter") {
+              onFilterPressEnter?.(filter);
+            }
+          },
+          onBlur: () => {
+            onFilterBlur?.(filter);
+          }
+        }
+      ),
+      "-",
+      /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          tabIndex: 0,
+          id: "range-filter-to",
+          value: state.valueTo || "",
+          onChange: (e) => state.valueTo = e.target.value
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select$1,
+        {
+          onChange: (ev) => {
+          },
+          value: units[Math.log(1) / 10],
+          children: units.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
+        }
+      )
+    ] });
+  }
+);
+
+const SelectFilterRenderer = observer(
+  ({ filter, state }) => {
+    const { onFilterChange } = useResponsiveTableContext();
+    return /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+          onFilterChange?.(filter);
+        },
+        children: arrayOrArray(filter.options).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+      }
+    );
+  }
+);
+
+const InputFilterRenderer = observer(
+  ({ filter, state }) => {
+    const { onFilterBlur, onFilterPressEnter } = useResponsiveTableContext();
+    return /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+        },
+        onKeyDown: (ev) => {
+          if (ev.code === "Enter") {
+            onFilterPressEnter?.(filter);
+          }
+        },
+        onBlur: () => {
+          onFilterBlur?.(filter);
+        }
+      }
+    );
+  }
+);
+
 var __defProp$7 = Object.defineProperty;
 var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$7 = (obj, key, value) => {
@@ -3236,50 +3324,15 @@ class Filter {
       value: ""
     });
     __publicField$7(this, "Component", observer(({ filter }) => {
-      const { onFilterBlur, onFilterPressEnter, onFilterChange, name } = useResponsiveTableContext();
+      const { name } = useResponsiveTableContext();
       this.tableName = name;
-      if (this.filterState?.isRange) {
-        return /* @__PURE__ */ jsx(
-          RangeFilter,
-          {
-            filter: {
-              ...filter,
-              currentValue: this.filterState.value,
-              isSize: this.filterState.isSize
-            }
-          }
-        );
+      if (this.filterState.isRange) {
+        return this.getRangeRenderer({ filter });
       }
-      if (filter.options) {
-        return /* @__PURE__ */ jsx(
-          Select$1,
-          {
-            value: this.filterState.value,
-            onChange: (ev) => {
-              this.filterState.value = ev.target.value;
-              onFilterChange?.(filter);
-            },
-            children: filter.options.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
-          }
-        );
+      if (this.filterState.options) {
+        return this.getSelectRenderer({ filter });
       }
-      return /* @__PURE__ */ jsx(
-        Input$1,
-        {
-          value: this.filterState.value,
-          onChange: (ev) => {
-            this.filterState.value = ev.target.value;
-          },
-          onKeyDown: (ev) => {
-            if (ev.code === "Enter") {
-              onFilterPressEnter?.(filter);
-            }
-          },
-          onBlur: () => {
-            onFilterBlur?.(filter);
-          }
-        }
-      );
+      return this.getInputRenderer({ filter });
     }));
     Object.assign(this.filterState, properties);
     makeObservable(this, { filterState: observable });
@@ -3297,6 +3350,15 @@ class Filter {
   }
   focus() {
   }
+  getInputRenderer({ filter }) {
+    return /* @__PURE__ */ jsx(InputFilterRenderer, { filter, state: this.filterState });
+  }
+  getSelectRenderer({ filter }) {
+    return /* @__PURE__ */ jsx(SelectFilterRenderer, { filter, state: this.filterState });
+  }
+  getRangeRenderer({ filter }) {
+    return /* @__PURE__ */ jsx(RangeFilterRenderer, { filter, state: this.filterState });
+  }
 }
 
 const FilterTypesComponent = observer(
@@ -3496,7 +3558,9 @@ class TableController {
         id: c.filterState.id,
         column: c.filterState.column,
         asAdditional: c.filterState.isAdditional || this.state.columns.get(c.filterState.column || "")?.hidden,
-        options: c.filterState.options
+        options: c.filterState.options,
+        detectOnChange: c.filterState.runAutomatically,
+        runAutomatically: c.filterState.runAutomatically
       };
     });
   }
@@ -3527,7 +3591,7 @@ class QueryController {
     __publicField$4(this, "hasInited", false);
     __publicField$4(this, "initializing", false);
     __publicField$4(this, "structure", null);
-    __publicField$4(this, "tableController", new TableController());
+    __publicField$4(this, "tableController");
     /**
      * Allows to throttle calls to actual refresh method.
      */
@@ -3538,29 +3602,46 @@ class QueryController {
       300,
       { leading: false, trailing: true }
     ));
+    this.tableController = this.buildTableController();
     this.initEvents();
   }
+  getTableControllerDefaultProps() {
+    return {};
+  }
+  getEventsHandlers() {
+    return {
+      onChangeSelection: (ev) => {
+      },
+      onFilterBlur: (_ev) => {
+      },
+      onFilterChange: (_ev) => {
+        const filter = this.tableController.state.filters.get(_ev.id);
+        if (filter?.filterState.runAutomatically) {
+          this.refresh(false);
+        }
+      },
+      onFilterPressEnter: (_ev) => {
+        this.refresh(true);
+      },
+      onRowClick: (_ev) => {
+      },
+      onSelectRows: (_ev) => {
+      },
+      onSortChange: (ev) => {
+        this.sort(String(ev.columnIndex));
+      },
+      onPage: this.page.bind(this),
+      onRefresh: () => this.refresh(true)
+    };
+  }
+  buildTableController() {
+    return new TableController();
+  }
   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(false);
-      }
-    });
-    this.tableController.on("onFilterPressEnter", () => this.refresh(true));
-    this.tableController.on("onRowClick", (ev) => {
-    });
-    this.tableController.on("onSelectRows", (ev) => {
-    });
-    this.tableController.on("onSortChange", (ev) => {
-      this.sort(ev.column.name);
+    const handlers = this.getEventsHandlers();
+    Object.entries(handlers).forEach(([eventName, handler]) => {
+      this.tableController.on(eventName, handler.bind(this));
     });
-    this.tableController.on("onPage", this.page.bind(this));
-    this.tableController.on("onRefresh", () => this.refresh(true));
   }
   getLoadStructureParameters() {
     return {
@@ -3578,7 +3659,14 @@ class QueryController {
     };
   }
   getFiltersValuesMap() {
-    return [...this.tableController.state.filters.values()].reduce((r, c) => ({ ...r, [c.filterState.id]: c.filterState.value }), {});
+    return [...this.tableController.state.filters.values()].reduce((result, filterWrapper) => {
+      const { id, value, filterToId, valueTo } = filterWrapper.filterState;
+      result[id] = value;
+      if (filterToId !== void 0 && valueTo !== void 0) {
+        result[filterToId] = valueTo;
+      }
+      return result;
+    }, {});
   }
   getPageParameters() {
     return {
@@ -3628,6 +3716,8 @@ class QueryController {
           id: `filter${String(i + 1)}`,
           // Id generado en APIA
           value: f.currentValue,
+          filterToId: f?.filterToId,
+          valueTo: f?.filterToValue,
           avoidLabel: false,
           column: f.column,
           isAdditional: f.asAdditional,
@@ -3692,9 +3782,14 @@ class QueryController {
       arrayOrArray(structure.columns).map((c) => [c.name, c])
     );
     const filters = new Map(
-      arrayOrArray(structure.filters).map((f) => [f.id, new Filter(f)])
+      arrayOrArray(structure.filters).map((f) => {
+        return [f.id, new Filter(f)];
+      })
     );
-    this.tableController.updateState({ columns, filters });
+    this.tableController.updateState({
+      columns,
+      filters
+    });
   }
   updatePageState(pageInfo) {
     const currentPage = Number(pageInfo?.currentPage ?? 0);
@@ -3725,6 +3820,9 @@ class QueryController {
     if (!this.hasInited) {
       this.structure = await this.getStructure();
       this.parseStructure(this.structure);
+      this.tableController.updateState({
+        props: this.getTableControllerDefaultProps()
+      });
       this.hasInited = true;
       this.initializing = false;
     }
@@ -3928,7 +4026,7 @@ class QueryModalController {
       ] }),
       title: structure?.title,
       onConfirm: () => {
-        this.emitter.emit("onSelectRows", this.currentSelection || []);
+        this.onConfirm();
       },
       onCancel: () => {
         this.additionalFiltersController.closeModal();
@@ -3985,6 +4083,15 @@ class QueryModalController {
       ...this.getModalDefinition(),
       ...properties
     });
+    return this.onConfirmResolve();
+  }
+  getModalHandler() {
+    return this.modalHandler;
+  }
+  onConfirm() {
+    this.emitter.emit("onSelectRows", this.currentSelection || []);
+  }
+  onConfirmResolve() {
     return new Promise((resolve) => {
       let uns1 = () => {
       }, uns2 = () => {
@@ -4001,9 +4108,6 @@ class QueryModalController {
       });
     });
   }
-  getModalHandler() {
-    return this.modalHandler;
-  }
 }
 
 var __defProp$1 = Object.defineProperty;
@@ -4150,17 +4254,26 @@ class MonDocQuery extends QueryController {
     this.ajaxUrl = ajaxUrl;
     __publicField(this, "dynamicParams", {});
   }
-  initEvents() {
-    this.tableController = new TableController({
-      props: { isMultiple: true }
-    });
-    super.initEvents();
-    this.tableController.on("onFilterChange", (ev) => {
-      const filter = this.tableController.state.filters.get(ev.id);
-      if (filter?.filterState.runAutomatically) {
-        this.filter();
-      }
-    });
+  getTableControllerDefaultProps() {
+    return {
+      ...super.getTableControllerDefaultProps(),
+      isMultiple: false,
+      reserveColumnsForStates: 2,
+      statesColumns: [
+        {
+          Icon: () => /* @__PURE__ */ jsx(Icon, { icon: "Locked", title: "" }),
+          tooltip: getLabel("titDocLock").text
+        },
+        {
+          Icon: () => /* @__PURE__ */ jsx(Icon, { icon: "Readonly", title: "", size: 22 }),
+          tooltip: getLabel("lblReadOnly").text
+        }
+      ]
+    };
+  }
+  processFilterChangeEvent(ev) {
+    this.tableController.state.filters.get(ev.id);
+    this.filter();
   }
   getLoadStructureParameters() {
     return {
@@ -4191,6 +4304,14 @@ class MonDocQuery extends QueryController {
       isAjax: true
     };
   }
+  getEventsHandlers() {
+    return {
+      ...super.getEventsHandlers(),
+      onFilterChange: () => {
+        this.filter();
+      }
+    };
+  }
   async filter() {
     const filterResult = await ApiaApi.post(
       makeApiaUrl(this.getFilterParameters()),
@@ -4204,8 +4325,6 @@ class MonDocQuery extends QueryController {
     );
     if (!filterResult?.data)
       return;
-    const structure = this.parseLoadStructureResponse(filterResult.data);
-    this.parseStructure(structure);
     setTimeout(() => {
       this.parseRefreshResponse(filterResult.data);
     }, 200);
@@ -4219,7 +4338,6 @@ class MonDocQuery extends QueryController {
         (r) => ({
           rowProps: r,
           cells: [
-            {},
             ...arrayOrArray(r.cell).map((c) => {
               if (typeof c === "string") {
                 return { children: c };
@@ -4246,21 +4364,25 @@ class MonDocQuery extends QueryController {
     const retrievedFilters = arrayOrArray(typedResponse.filters);
     const returnObject = {
       columns: retrievedColumns.map((c) => {
+        if (c.name === "docFile")
+          return null;
         const column = {
           label: c.label,
           name: c.name,
           allowSorting: c.allowSorting,
           dataSortBy: c.dataSortBy,
-          minWidth: c.minWidth ?? "100px",
+          minWidth: "25%",
           sort: c.sort,
           toolTip: c.toolTip,
-          width: c.width
+          width: "25%"
         };
         return column;
-      }),
-      filters: arrayOrArray(retrievedFilters).map((f, i) => {
+      }).filter((c) => c !== null),
+      filters: arrayOrArray(retrievedFilters).map((f) => {
         const filter = {
-          id: `filter${String(i + 1)}`,
+          id: f.id,
+          filterToId: f?.filterToId,
+          valueTo: f?.filterToValue,
           value: f.currentValue,
           avoidLabel: false,
           column: f.column,
@@ -4286,7 +4408,7 @@ class MonDocQuery extends QueryController {
       hideFilterTypes: false,
       isDynamic: false,
       openFiltersAutomatically: false,
-      runFiltersAutomatically: false,
+      runFiltersAutomatically: true,
       title: ""
     };
     return returnObject;
@@ -4296,8 +4418,7 @@ class MonDocQuery extends QueryController {
       makeApiaUrl({ ...this.getSortParameters(), orderBy: column })
     );
     if (result?.data) {
-      const structure = this.parseLoadStructureResponse(result.data);
-      this.parseStructure(structure);
+      this.parseRefreshResponse(result.data);
     }
     return super.refresh();
   }