@apia/api 4.0.46 → 4.0.50

package/dist/index.d.ts

@@ -303,6 +303,21 @@ type TFilter = {
     icon?: string;
 };
 
+declare class Filter {
+    protected tableName?: string;
+    filterState: TFilter;
+    focus(): void;
+    constructor(properties: TFilter);
+    getInputRenderer(): react.JSX.Element;
+    getSelectRenderer(): react.JSX.Element;
+    getRangeRenderer(): react.JSX.Element;
+    getDateRenderer(): react.JSX.Element;
+    getDoubleRenderer(): react.JSX.Element;
+    Component: (() => react.JSX.Element) & {
+        displayName: string;
+    };
+}
+
 type TFilterTypesElementConditions = {
     onChange: string;
     readonly: boolean;
@@ -324,21 +339,6 @@ type TFilterTypesElementConditions = {
     };
 };
 
-declare class Filter {
-    protected tableName?: string;
-    filterState: TFilter;
-    focus(): void;
-    constructor(properties: TFilter);
-    getInputRenderer(): react.JSX.Element;
-    getSelectRenderer(): react.JSX.Element;
-    getRangeRenderer(): react.JSX.Element;
-    getDateRenderer(): react.JSX.Element;
-    getDoubleRenderer(): react.JSX.Element;
-    Component: (() => react.JSX.Element) & {
-        displayName: string;
-    };
-}
-
 type TableControllerState = {
     finishedFirstLoad: boolean;
     columns: Map<string, TResponsiveTableColumn>;
@@ -426,7 +426,7 @@ declare class QueryController {
     conditions: TFilterTypesElementConditions[];
     constructor(ajaxUrl: string);
     protected actualRefreshMethod(serverFirstRefresh?: boolean): Promise<void>;
-    protected areRequiredFilters(): boolean;
+    protected areRequiredFilters(): false | Filter[];
     protected buildTableController(): TableController;
     clearFilters(): Promise<void>;
     private timeout;

package/dist/index.js

@@ -5,7 +5,7 @@ import { Box, Label, spacing, getVariant, Input as Input$1, Select as Select$1,
 import { debugDispatcher, parseXmlAsync, arrayOrArray, EventEmitter, useMount, encrypt, noNaN, getIndex, getLabel, StatefulEmitter, focus, focusSelector, useLatest, useIntermediateValue, formatMessage, getDateFormat, Mutex, uniqueId as uniqueId$1 } 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';
-import { Accordion, AccordionItem, useModal, LabelBox, SimpleButton, ApiaUtil, Modal, ProgressBar, DateInput, AutocompleteController, Autocomplete, IconButton } from '@apia/components';
+import { Accordion, AccordionItem, useModal, LabelBox, SimpleButton, ApiaUtil, Modal, ProgressBar, RequiredMark, DateInput, AutocompleteController, Autocomplete, IconButton } from '@apia/components';
 import axios, { AxiosError } from 'axios';
 import merge from 'lodash-es/merge';
 import QueryString from 'qs';
@@ -3244,7 +3244,7 @@ const RangeFilterRenderer = observer(({ state }) => {
   const lastEmittedMultiplier = useRef(1);
   if (lastEmittedLow.current !== state.value) {
     lastEmittedLow.current = state.value;
-    lastEmittedHigh.current = state.valueTo || "";
+    lastEmittedHigh.current = state.filterToValue || "";
   }
   const emitLow = (currentValue) => {
     const numberValue = currentValue ?? "";
@@ -3265,11 +3265,11 @@ const RangeFilterRenderer = observer(({ state }) => {
     lastEmittedHigh.current = numberValue;
     lastEmittedMultiplier.current = multiplier.current;
     const emitValue = numberValue;
-    state.valueTo = emitValue;
+    state.filterToValue = String(emitValue);
     state.multiplier = multiplier.current;
   };
   const [lowValue, setLowValue] = useIntermediateValue(state.value);
-  const [highValue, setHighValue] = useIntermediateValue(state.valueTo);
+  const [highValue, setHighValue] = useIntermediateValue(state.filterToValue);
   const [unit, setUnit] = useIntermediateValue(state.multiplier);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -3301,6 +3301,7 @@ const RangeFilterRenderer = observer(({ state }) => {
           Input$1,
           {
             disabled: state.readonly,
+            required: state.required,
             onChange: ({ target: { value: currentValue } }) => {
               setHighValue(currentValue);
               emitHigh(currentValue);
@@ -3340,39 +3341,45 @@ const RangeFilterRenderer = observer(({ state }) => {
 });
 
 const SelectFilterRenderer = observer(({ state }) => {
-  return /* @__PURE__ */ jsx(
-    Select$1,
-    {
-      disabled: state.readonly,
-      value: state.value,
-      onChange: (ev) => {
-        state.value = ev.target.value;
-      },
-      children: arrayOrArray(state.options).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
-    }
-  );
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    state.required && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { position: "absolute", left: 2 } }),
+    /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        disabled: state.readonly,
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+        },
+        children: arrayOrArray(state.options).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+      }
+    )
+  ] });
 });
 
 const InputFilterRenderer = observer(({ state }) => {
   const { onFilterBlur, onFilterPressEnter } = useResponsiveTableContext();
-  return /* @__PURE__ */ jsx(
-    Input$1,
-    {
-      disabled: state.readonly,
-      value: state.value,
-      onChange: (ev) => {
-        state.value = ev.target.value;
-      },
-      onKeyDown: (ev) => {
-        if (ev.code === "Enter") {
-          onFilterPressEnter?.(state);
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    state.required && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { position: "absolute", left: 2 } }),
+    /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        disabled: state.readonly,
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+        },
+        onKeyDown: (ev) => {
+          if (ev.code === "Enter") {
+            onFilterPressEnter?.(state);
+          }
+        },
+        onBlur: () => {
+          onFilterBlur?.(state);
         }
-      },
-      onBlur: () => {
-        onFilterBlur?.(state);
       }
-    }
-  );
+    )
+  ] });
 });
 
 const dateFormat = getDateFormat();
@@ -3387,24 +3394,40 @@ function controlDatesOrder(first, last) {
 const DateFilterRenderer = observer(({ state }) => {
   const { onFilterBlur, onFilterChange } = useResponsiveTableContext();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { as: "span", children: state?.filterToId ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
-      TOK1: state.title ?? ""
-    }) : state.title }),
-    /* @__PURE__ */ jsx(
-      DateInput,
-      {
-        disabled: state.readonly,
-        value: state.value,
-        onChange: (date) => {
-          state.value = date;
-          onFilterChange?.(state);
-        },
-        onBlur: () => {
-          onFilterBlur?.(state);
+    /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+      state.required && /* @__PURE__ */ jsx(
+        RequiredMark,
+        {
+          isRequired: true,
+          sx: { position: "absolute", left: 2, top: 6, zIndex: 1 }
         }
-      }
-    ),
-    (state?.isAdditional || state.group) && state?.filterToId && /* @__PURE__ */ jsxs(Fragment, { children: [
+      ),
+      /* @__PURE__ */ jsx(Box, { as: "span", children: state?.filterToId ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
+        TOK1: state.title ?? ""
+      }) : state.title }),
+      /* @__PURE__ */ jsx(
+        DateInput,
+        {
+          disabled: state.readonly,
+          value: state.value,
+          onChange: (date) => {
+            state.value = date;
+            onFilterChange?.(state);
+          },
+          onBlur: () => {
+            onFilterBlur?.(state);
+          }
+        }
+      )
+    ] }),
+    (state?.isAdditional || state.group) && state?.filterToId && /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+      state.required && /* @__PURE__ */ jsx(
+        RequiredMark,
+        {
+          isRequired: true,
+          sx: { position: "absolute", left: 2, top: 6, zIndex: 1 }
+        }
+      ),
       /* @__PURE__ */ jsx(Box, { as: "span", children: formatMessage(window.LBL_DATE_FILTER_TO_TXT, {
         TOK1: state.title ?? ""
       }) }),
@@ -3414,9 +3437,9 @@ const DateFilterRenderer = observer(({ state }) => {
           disabled: state.readonly,
           value: state.filterToValue,
           onChange: (date) => {
-            const result = controlDatesOrder(state.value, date);
+            const result = controlDatesOrder(state.value, date ?? "");
             if (result) {
-              state.filterToValue = date;
+              state.filterToValue = date ?? "";
               onFilterChange?.(state);
             } else {
               state.filterToValue = void 0;
@@ -3854,7 +3877,8 @@ class QueryController {
   }
   async actualRefreshMethod(serverFirstRefresh) {
     const newValues = this.getFiltersValuesMap();
-    if (!this.areRequiredFilters()) {
+    const required = this.areRequiredFilters();
+    if (!required) {
       await this.mutex.acquire();
       try {
         this.tableController.state.finishedFirstLoad = false;
@@ -3876,11 +3900,28 @@ class QueryController {
         this.mutex.release();
       }
     }
+    if (required) {
+      const names = required.map(
+        (f) => f.filterState.title ?? f.filterState.column ?? f.filterState.id ?? ""
+      ).filter(Boolean).join(", ");
+      ApiaUtil.instance.notifications.notify({
+        message: getLabel("msgQryFilterRequiredList", {
+          text: { TOK1: names }
+        }).text,
+        type: "warning"
+      });
+    }
   }
   areRequiredFilters() {
-    return !![...this.tableController.state.filters.values()].find(
+    const requiredFilters = [
+      ...this.tableController.state.filters.values()
+    ].filter(
       (c) => c.filterState.required && !c.filterState.value && !c.filterState.isHidden
     );
+    if (requiredFilters.length > 0) {
+      return requiredFilters;
+    }
+    return false;
   }
   buildTableController() {
     return new TableController();
@@ -4093,7 +4134,7 @@ class QueryController {
           ] : void 0,
           placeholder: f.title,
           readonly: f.readonly,
-          required: f.required === "true",
+          required: f.required === "true" || f.required === "1" || f.dateRequired === "1",
           runAutomatically: typedResponse?.filters.runFiltersAutomatically || f.detectOnChange
         };
         return filter;
@@ -4260,7 +4301,7 @@ const AdditionalFiltersComponent = observer(
       );
       return [...byGroup.values()];
     })();
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { sx: { ".requiredMark": { display: "none" } }, children: /* @__PURE__ */ jsx(
       TableContextReproducer,
       {
         tableName: queryController.tableController.getTableName(),
@@ -4343,7 +4384,7 @@ const AdditionalFiltersComponent = observer(
           )
         ] })
       }
-    );
+    ) });
   }
 );
 
@@ -4398,7 +4439,7 @@ class AdditionalFiltersModal {
       },
       draggable: true,
       variant: "layout.common.modals.apiaFinder.additionalFiltersModal",
-      size: "xl"
+      size: "lg"
     };
   }
   async openModal(properties) {
@@ -4430,6 +4471,7 @@ const NavBarRenderer = observer(
         onClick: () => {
           queryController.refresh();
         },
+        "data-test-id": "btn_search",
         children: queryController.tableController.state.isLoading ? /* @__PURE__ */ jsx(Spinner, { sx: { color: "white", height: "17px" } }) : getLabel("btnSearch").text
       }
     ),
@@ -4441,6 +4483,7 @@ const NavBarRenderer = observer(
         onClick: async () => {
           additionalFiltersController.openModal();
         },
+        "data-test-id": "btn-additional-filters",
         children: getLabel("titAdmAdtFilter").text
       }
     ),
@@ -4450,6 +4493,7 @@ const NavBarRenderer = observer(
         size: "sm",
         variant: "outline",
         onClick: () => queryController.clearFilters(),
+        "data-test-id": "btn-clear-filters",
         children: getLabel("btnClearFilter").text
       }
     )