@gisce/react-ooui 2.0.0-alpha.6 → 2.0.0-alpha.60

package/src/actionbar/DropdownButton.tsx

@@ -1,7 +1,9 @@
-import React from "react";
-import { Menu, Dropdown, Button } from "antd";
+import { memo, useState, useMemo, useCallback } from "react";
+import { Menu, Dropdown, Button, Input } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 
+const { Search } = Input;
+
 type Props = {
   onItemClick: (event: any) => void;
   items: any[];
@@ -9,53 +11,114 @@ type Props = {
   icon: any;
   label?: string;
   disabled?: boolean;
+  searchable?: true | false | "auto";
 };
 
-function DropdownButton(props: Props) {
-  const {
+const DropdownButton: React.FC<Props> = memo(
+  ({
     icon,
     tooltip,
     items = [],
     onItemClick,
     label,
     disabled = false,
-  } = props;
+    searchable = "auto",
+  }: Props) => {
+    const [searchValue, setSearchValue] = useState<string>();
+
+    const mustShowSearch =
+      searchable === true || (searchable === "auto" && items.length > 3);
+
+    const onSearch = useCallback((value?: string) => {
+      const sanitizedValue = value?.trim();
+      if (sanitizedValue && sanitizedValue.length > 0) {
+        setSearchValue(sanitizedValue);
+        return;
+      }
+      setSearchValue(undefined);
+    }, []);
 
-  function getMenu() {
-    const menuItems = items?.map((item, idx) => {
-      if (item.name === "divider") {
-        return <Menu.Divider key={"divider" + idx} />;
+    const filteredItems = useMemo(() => {
+      if (searchValue) {
+        return items
+          .map((item) => {
+            if (item.name.toLowerCase().includes(searchValue.toLowerCase())) {
+              return { ...item };
+            }
+            return { ...item, name: "no_match" };
+          })
+          .sort((a, b) => {
+            // all the items with name "no_match" have to be in the end of the array
+            if (a.name === "no_match") return 1;
+            if (b.name === "no_match") return -1;
+            return 0;
+          });
       }
-      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
-    });
+      return items;
+    }, [items, searchValue]);
+
+    const handleMenuClick = useCallback(
+      (event: any) => {
+        const itemClicked = filteredItems.find(
+          (item: any) => item.id.toString() === event.key,
+        );
+        if (itemClicked && itemClicked.name !== "no_match")
+          onItemClick(itemClicked);
+      },
+      [onItemClick, filteredItems],
+    );
+
+    const getMenu = useMemo(() => {
+      const menuItems = filteredItems.map((item, idx) => {
+        if (item.name === "divider")
+          return <Menu.Divider key={"divider" + idx} />;
+        if (item.name === "no_match")
+          return (
+            <Menu.Item
+              key={"no_match" + idx}
+              style={{ cursor: "auto", pointerEvents: "none", opacity: 0 }}
+            >
+              {item.name}
+            </Menu.Item>
+          );
+        return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
+      });
+
+      return (
+        <Menu onClick={handleMenuClick}>
+          {mustShowSearch && (
+            <div style={{ padding: 5 }}>
+              <Search
+                onChange={(e) => onSearch(e.target.value)}
+                onSearch={onSearch}
+                allowClear
+              />
+            </div>
+          )}
+          <div
+            style={{
+              width: 300,
+              maxHeight: 300,
+              overflowY: "auto",
+            }}
+          >
+            <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
+          </div>
+        </Menu>
+      );
+    }, [filteredItems, handleMenuClick, mustShowSearch, onSearch, tooltip]);
 
     return (
-      <Menu onClick={handleMenuClick}>
-        <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
-      </Menu>
+      <>
+        <Dropdown overlay={getMenu} disabled={disabled || items.length === 0}>
+          <Button>
+            {icon} {label} <DownOutlined />
+          </Button>
+        </Dropdown>
+      </>
     );
-  }
-
-  function handleMenuClick(event: any) {
-    const itemClicked = items.find((item: any) => {
-      return !isNaN(event.key)
-        ? item.id === parseInt(event.key)
-        : item.id === event.key;
-    });
-
-    onItemClick(itemClicked);
-  }
-
-  return (
-    <Dropdown
-      overlay={getMenu()}
-      disabled={disabled || !items || items.length === 0}
-    >
-      <Button>
-        {icon} {label} <DownOutlined />
-      </Button>
-    </Dropdown>
-  );
-}
+  },
+);
+DropdownButton.displayName = "DropdownButton";
 
 export default DropdownButton;

package/src/actionbar/FormActionBar.tsx

@@ -70,12 +70,12 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
   const { t, lang } = useContext(LocaleContext) as LocaleContextType;
 
   const contentRootContext = useContext(
-    ContentRootContext
+    ContentRootContext,
   ) as ContentRootContextType;
   const { processAction } = contentRootContext || {};
 
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { openRelate, openDefaultActionForModel } = tabManagerContext || {};
 
@@ -144,6 +144,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
       await ConnectionProvider.getHandler().deleteObjects({
         model: currentModel!,
         ids: [currentId!],
+        context: (formRef.current as any).getContext(),
       });
 
       const filteredResults = results?.filter((item: any) => {
@@ -182,7 +183,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
       });
 
       if (newId) {
-        await goToResourceId?.(newId);
+        await goToResourceId?.([newId]);
       }
     } catch (e) {
       showErrorDialog(JSON.stringify(e));
@@ -414,14 +415,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
           const res_id = result.currentId as number;
           const res_model = currentModel as string;
           openDefaultActionForModel({
-            model: "ir.attachment",
-            values: {
-              selection_associated_object: `${res_model},${res_id}`,
-            },
-            forced_values: {
-              res_model,
-              res_id,
-            },
+            ...getAttachmentActionPayload(res_model, res_id),
             initialViewType: "form",
           });
         }}
@@ -437,11 +431,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
           const res_id = result.currentId as number;
           const res_model = currentModel as string;
           openDefaultActionForModel({
-            model: "ir.attachment",
-            domain: [
-              ["res_model", "=", `${res_model}`],
-              ["res_id", "=", `${res_id}`],
-            ],
+            ...getAttachmentActionPayload(res_model, res_id),
             initialViewType: "tree",
           });
         }}
@@ -482,4 +472,20 @@ async function saveDocument({
   }
 }
 
+function getAttachmentActionPayload(res_model: string, res_id: number) {
+  return {
+    model: "ir.attachment",
+    domain: [
+      ["res_model", "=", `${res_model}`],
+      ["res_id", "=", `${res_id}`],
+    ],
+    values: {
+      selection_associated_object: `${res_model},${res_id}`,
+    },
+    forced_values: {
+      res_model,
+      res_id,
+    },
+  };
+}
 export default FormActionBar;

package/src/actionbar/NewButton.tsx

@@ -16,7 +16,7 @@ function NewButton(props: Props) {
   const { disabled = false } = props;
 
   const { formHasChanges, onNewClicked: onNewClickedProps } = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const { t, lang } = useContext(LocaleContext) as LocaleContextType;
 

package/src/actionbar/TreeActionBar.tsx

@@ -30,7 +30,7 @@ import { showLogInfo } from "@/helpers/logInfoHelper";
 import SearchBar from "./SearchBar";
 import { ExportModal } from "..";
 import { mergeParams } from "@/helpers/searchHelper";
-import { ConfigContext } from "@/context/ConfigContext";
+import { ErpFeatureKeys, useFeatureIsEnabled } from "@/context/ConfigContext";
 
 type Props = {
   parentContext?: any;
@@ -66,10 +66,12 @@ function TreeActionBar(props: Props) {
   } = useContext(ActionViewContext) as ActionViewContextType;
 
   const { parentContext = {}, treeExpandable, toolbar } = props;
-  const { previewFeatures } = useContext(ConfigContext);
+  const advancedExportEnabled = useFeatureIsEnabled(
+    ErpFeatureKeys.FEATURE_ADVANCED_EXPORT,
+  );
   const { t, lang } = useContext(LocaleContext) as LocaleContextType;
   const contentRootContext = useContext(
-    ContentRootContext
+    ContentRootContext,
   ) as ContentRootContextType;
   const { processAction } = contentRootContext || {};
   const [exportModalVisible, setExportModalVisible] = useState(false);
@@ -95,6 +97,7 @@ function TreeActionBar(props: Props) {
       await ConnectionProvider.getHandler().deleteObjects({
         model: currentModel!,
         ids: selectedRowItems!.map((item) => item.id),
+        context: { ...parentContext },
       });
 
       setCurrentId?.(undefined);
@@ -286,85 +289,89 @@ function TreeActionBar(props: Props) {
           });
         }}
       />
-
-      {separator()}
-      <DropdownButton
-        icon={
-          <Icon
-            component={() => (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="icon icon-tabler icon-tabler-database-export"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-                strokeWidth="1.5"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <ellipse cx="12" cy="6" rx="8" ry="3" />
-                <path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302 -.267m4.698 -2.733v-6" />
-                <path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995m8.462 -6.995v-2m-6 7h7m-3 -3l3 3l-3 3" />
-              </svg>
-            )}
-          />
-        }
-        tooltip={t("export")}
-        items={[
-          {
-            id: "print_screen",
-            name: t("printScreen"),
-          },
-          {
-            id: "export",
-            name: t("advancedExport"),
-          },
-        ]}
-        onItemClick={(itemClicked: any) => {
-          if (itemClicked.id === "print_screen") {
-            let idsToExport = selectedRowItems?.map((item) => item.id) || [];
-
-            if (idsToExport.length === 0) {
-              idsToExport = results?.map((item) => item.id) || [];
+      {advancedExportEnabled && (
+        <>
+          {separator()}
+          <DropdownButton
+            icon={
+              <Icon
+                component={() => (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="icon icon-tabler icon-tabler-database-export"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1.5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <ellipse cx="12" cy="6" rx="8" ry="3" />
+                    <path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302 -.267m4.698 -2.733v-6" />
+                    <path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995m8.462 -6.995v-2m-6 7h7m-3 -3l3 3l-3 3" />
+                  </svg>
+                )}
+              />
             }
-
-            runAction({
-              id: -1,
-              model: currentModel,
-              report_name: "printscreen.list",
-              type: "ir.actions.report.xml",
-              datas: {
-                model: currentModel,
-                ids: idsToExport,
+            tooltip={t("export")}
+            items={[
+              {
+                id: "print_screen",
+                name: t("printScreen"),
               },
-            });
-            return;
-          }
+              {
+                id: "export",
+                name: t("advancedExport"),
+              },
+            ]}
+            onItemClick={(itemClicked: any) => {
+              if (itemClicked.id === "print_screen") {
+                let idsToExport =
+                  selectedRowItems?.map((item) => item.id) || [];
 
-          setExportModalVisible(true);
-        }}
-        disabled={
-          duplicatingItem || removingItem || treeIsLoading || hasNameSearch
-        }
-      />
-      <ExportModal
-        visible={exportModalVisible}
-        locale={lang}
-        onClose={() => setExportModalVisible(false)}
-        model={currentModel!}
-        domain={mergeParams(
-          searchTreeRef?.current?.getDomain() || [],
-          searchParams || []
-        )}
-        limit={limit}
-        totalRegisters={totalItems || 0}
-        selectedRegistersToExport={selectedRowItems}
-        visibleRegisters={results?.length || 0}
-        context={parentContext}
-      />
+                if (idsToExport.length === 0) {
+                  idsToExport = results?.map((item) => item.id) || [];
+                }
+
+                runAction({
+                  id: -1,
+                  model: currentModel,
+                  report_name: "printscreen.list",
+                  type: "ir.actions.report.xml",
+                  datas: {
+                    model: currentModel,
+                    ids: idsToExport,
+                  },
+                });
+                return;
+              }
+
+              setExportModalVisible(true);
+            }}
+            disabled={
+              duplicatingItem || removingItem || treeIsLoading || hasNameSearch
+            }
+          />
+          <ExportModal
+            visible={exportModalVisible}
+            locale={lang}
+            onClose={() => setExportModalVisible(false)}
+            model={currentModel!}
+            domain={mergeParams(
+              searchTreeRef?.current?.getDomain() || [],
+              searchParams || [],
+            )}
+            limit={limit}
+            totalRegisters={totalItems || 0}
+            selectedRegistersToExport={selectedRowItems}
+            visibleRegisters={results?.length || 0}
+            context={parentContext}
+          />
+        </>
+      )}
     </Space>
   );
 }

package/src/common/DatePicker.tsx

@@ -4,12 +4,8 @@ import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { Date as DateOoui } from "@gisce/ooui";
-import dayjs from "dayjs";
-import weekday from "dayjs/plugin/weekday";
-import localeData from "dayjs/plugin/localeData";
+import dayjs from "@/helpers/dayjs";
 const { useToken } = theme;
-dayjs.extend(weekday);
-dayjs.extend(localeData);
 
 type DatePickerProps = WidgetProps & {
   showTime?: boolean;
@@ -92,6 +88,9 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
       format={DatePickerConfig[mode].dateDisplayFormat}
       value={dateValue}
       onChange={onValueStringChange}
+      showNow={false}
+      showToday={false}
+      changeOnBlur={true}
     />
   );
 };

package/src/common/Field.tsx

@@ -45,6 +45,7 @@ export default function Field({
       name={id}
       valuePropName={valuePropName}
       rules={rules}
+      help={ooui.tooltipInline ? ooui.tooltip : null}
     >
       {children}
     </Form.Item>
@@ -60,7 +61,7 @@ export default function Field({
         new LabelOoui({
           name: id + "_label",
           string: label,
-          help: tooltip,
+          help: ooui.tooltipInline ? false : tooltip,
           fieldForLabel: id,
         })
       }

package/src/common/TimePicker.tsx

@@ -0,0 +1,38 @@
+import { TimePicker as AntTimePicker } from "antd";
+import { useRef } from "react";
+import { Dayjs } from "dayjs";
+
+interface TimePickerProps {
+  value?: Dayjs | null;
+  onChange: (newValue: Dayjs | null, timestring?: string) => void;
+  numberOfSelectsToHide?: number;
+  [key: string]: any; // Accept any additional props
+}
+
+export const TimePicker = ({
+  value,
+  onChange,
+  numberOfSelectsToHide = 2,
+  ...rest
+}: TimePickerProps) => {
+  const picker = useRef<any>();
+  const pickerSelectedTimes = useRef(0);
+  return (
+    <AntTimePicker
+      {...rest}
+      ref={picker}
+      value={value}
+      onChange={onChange}
+      showNow={false}
+      changeOnBlur={true}
+      onSelect={(newValue) => {
+        onChange?.(newValue);
+        pickerSelectedTimes.current += 1;
+        if (pickerSelectedTimes.current === numberOfSelectsToHide) {
+          picker.current?.blur();
+          pickerSelectedTimes.current = 0;
+        }
+      }}
+    />
+  );
+};

package/src/context/ActionViewContext.tsx

@@ -48,7 +48,7 @@ export type ActionViewContextType = {
   setSearchTreeNameSearch?: (searchString?: string) => void;
   previousView?: View;
   setPreviousView?: (view: View) => void;
-  goToResourceId?: (id: number) => Promise<void>;
+  goToResourceId?: (ids: number[]) => Promise<void>;
   searchValues?: any;
   setSearchValues?: (value: any) => void;
   limit?: number;
@@ -105,7 +105,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const [previousView, setPreviousView] = useState<View>();
   const [searchValues, setSearchValues] = useState<any>({});
   const [limit, setLimit] = useState<number>(
-    limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT
+    limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT,
   );
   const [title, setTitle] = useState<string>(titleProps);
 
@@ -125,7 +125,9 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
       setPreviousView(availableViews[0]);
     } else if (availableViews.length > 1) {
       setPreviousView(
-        availableViews.filter((view) => view.view_id !== currentView.view_id)[0]
+        availableViews.filter(
+          (view) => view.view_id !== currentView.view_id,
+        )[0],
       );
     }
   }, [availableViews]);
@@ -136,7 +138,9 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
       availableViews.length > 1
     ) {
       setPreviousView(
-        availableViews.filter((view) => view.view_id !== currentView.view_id)[0]
+        availableViews.filter(
+          (view) => view.view_id !== currentView.view_id,
+        )[0],
       );
     }
   }, [currentView]);

package/src/context/ConfigContext.tsx

@@ -1,9 +1,28 @@
-import React from "react";
+import React, { useContext } from "react";
 
 interface ConfigContextProps {
-  previewFeatures: boolean;
+  erpFeatures: ErpFeaturesMap;
 }
 
 export const ConfigContext = React.createContext<ConfigContextProps>({
-  previewFeatures: false,
+  erpFeatures: {},
 });
+
+// TODO: this should be defined in a third package, because we are duplicating it both in webclient and here
+export enum ErpFeatureKeys {
+  FEATURE_ADVANCED_EXPORT = "export_data2",
+  // ... add more features here
+}
+// TODO: this should be defined in a third package, because we are duplicating it both in webclient and here
+export type ErpFeaturesMap = {
+  [key in ErpFeatureKeys]?: boolean;
+};
+
+export const useConfigContext = () => {
+  return useContext(ConfigContext);
+};
+
+export const useFeatureIsEnabled = (featureKey: ErpFeatureKeys): boolean => {
+  const { erpFeatures } = useConfigContext();
+  return !!erpFeatures[featureKey];
+};

package/src/context/DashboardActionContext.tsx

@@ -10,9 +10,8 @@ export type DashboardActionContextType = {
   setMoveItemsEnabled: (value: boolean) => void;
 };
 
-export const DashboardActionContext = React.createContext<DashboardActionContextType | null>(
-  null
-);
+export const DashboardActionContext =
+  React.createContext<DashboardActionContextType | null>(null);
 
 type DashboardActionProviderProps = {
   children: React.ReactNode;

package/src/context/FormModalContext.tsx

@@ -4,9 +4,8 @@ export type FormModalContextType = {
   setTitle?: (title: string) => void;
 };
 
-export const FormModalContext = React.createContext<FormModalContextType | null>(
-  null
-);
+export const FormModalContext =
+  React.createContext<FormModalContextType | null>(null);
 
 type FormModalProviderProps = FormModalContextType & {
   children: React.ReactNode;

package/src/context/LocaleContext.tsx

@@ -15,7 +15,7 @@ export type LocaleContextType = {
 };
 
 export const LocaleContext = React.createContext<LocaleContextType | null>(
-  null
+  null,
 );
 
 type LocaleContextProps = {

package/src/context/One2manyContext.tsx

@@ -11,7 +11,7 @@ export type One2manyContextType = {
 };
 
 export const One2manyContext = React.createContext<One2manyContextType | null>(
-  null
+  null,
 );
 
 const One2manyProvider = ({
@@ -23,9 +23,8 @@ const One2manyProvider = ({
 }): any => {
   const [currentView, setCurrentView] = useState<ViewType>(initialView);
   const [itemIndex, setItemIndex] = useState<number>(0);
-  const [manualTriggerChange, setManualTriggerChange] = useState<boolean>(
-    false
-  );
+  const [manualTriggerChange, setManualTriggerChange] =
+    useState<boolean>(false);
 
   return (
     <One2manyContext.Provider

package/src/helpers/containerHelper.ts

@@ -72,7 +72,7 @@ const expandWidgetsIfNeeded = ({
 
 const getSingleRowTemplateColumns = (
   row: Widget[],
-  numberOfColumns: number
+  numberOfColumns: number,
 ) => {
   const gridOptions = row.map((item: Widget) => {
     if (item instanceof Label && (item as Label).fieldForLabel) {