@gisce/react-ooui 2.0.0-alpha.5 → 2.0.0-alpha.50

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;

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/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) {

package/src/helpers/dayjs.ts

@@ -0,0 +1,21 @@
+import dayjs from "dayjs";
+
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import isoWeek from "dayjs/plugin/isoWeek";
+import timezone from "dayjs/plugin/timezone";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+
+dayjs.extend(advancedFormat);
+dayjs.extend(customParseFormat);
+dayjs.extend(isoWeek);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+
+export default dayjs;

package/src/helpers/dynamicColumnsHelper.ts

@@ -20,7 +20,7 @@ const getTextWidth = (text: string, font = "14px -apple-system") => {
 export const calculateColumnsWidth = (
   columns: any,
   source: any,
-  maxWidthPerCell = 500
+  maxWidthPerCell = 500,
 ) => {
   if (columns.length === 0) {
     return { columns };
@@ -32,7 +32,7 @@ export const calculateColumnsWidth = (
   const columnsWithWidth = columns.map((column: any) =>
     Object.assign(column, {
       width: getTextWidth(column.title),
-    })
+    }),
   );
 
   // Since we have a minimum width (column's width already calculated),

package/src/helpers/iconMapper.ts

@@ -102,7 +102,7 @@ const iconMapping: { [key: string]: string } = {
 
 export default (
   key: string,
-  props?: { className?: any; style: CSSProperties }
+  props?: { className?: any; style: CSSProperties },
 ) => {
   if (key.indexOf("gtk-") !== -1) {
     const rootIcon = key.replace("gtk-", "").replace(/\-/g, "_");
@@ -122,15 +122,15 @@ function toCamelCase(key: string): string {
     .map((word) =>
       word.replace(
         /\w\S*/g,
-        (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
-      )
+        (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase(),
+      ),
     )
     .join("")}`;
 }
 
 function getIconForKey(
   key: string,
-  props?: { className?: any; style: CSSProperties }
+  props?: { className?: any; style: CSSProperties },
 ) {
   let IconCamelCase = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter
   if (IconCamelCase.indexOf("-") !== -1) {
@@ -150,7 +150,7 @@ function getIconForKey(
     const TablerIcon = () =>
       React.createElement(TablerIcons[tablerKey] as any, {
         fill: "transparent",
-        size: props?.style?.fontSize || 17
+        size: props?.style?.fontSize || 17,
       });
     const CustomIcon = () =>
       React.createElement(Icon, {

package/src/helpers/logInfoHelper.tsx

@@ -5,12 +5,14 @@ import showInfo from "@/ui/InfoDialog";
 async function showLogInfo(
   model: string,
   currentId: number,
-  translateFn: Function
+  translateFn: Function,
 ) {
-  const logInfo = ((await ConnectionProvider.getHandler().getLogInfo({
-    model,
-    ids: [currentId],
-  })) as any)[0];
+  const logInfo = (
+    (await ConnectionProvider.getHandler().getLogInfo({
+      model,
+      ids: [currentId],
+    })) as any
+  )[0];
 
   const { create_date, create_uid, id, write_date, write_uid } = logInfo;
 
@@ -21,7 +23,7 @@ async function showLogInfo(
       {translateFn("creationDate") + ": " + create_date} <br />
       {translateFn("lastUpdatedBy") + ": " + write_uid[1]} <br />
       {translateFn("lastUpdatedDate") + ": " + write_date}
-    </div>
+    </div>,
   );
 }
 

package/src/helpers/timeHelper.ts

@@ -8,7 +8,7 @@ function parseStringToFloat(text?: string) {
       const splitted = text.trim().split(":");
       return (
         Math.round(
-          (parseInt(splitted[0]) + parseInt(splitted[1]) / 60.0) * 10000
+          (parseInt(splitted[0]) + parseInt(splitted[1]) / 60.0) * 10000,
         ) / 10000
       );
     } else {
@@ -55,4 +55,4 @@ function parseFloatToString(num?: number) {
   return finalString;
 }
 
-export { parseStringToFloat, parseFloatToString };
+export { parseStringToFloat, parseFloatToString };

package/src/hooks/useEffectDebugger.ts

@@ -11,7 +11,7 @@ const usePrevious = (value: any, initialValue: any) => {
 const useEffectDebugger = (
   effectHook: any,
   dependencies: any,
-  dependencyNames = []
+  dependencyNames = [],
 ) => {
   const previousDeps = usePrevious(dependencies, []);
 
@@ -30,7 +30,7 @@ const useEffectDebugger = (
 
       return accum;
     },
-    {}
+    {},
   );
 
   if (Object.keys(changedDeps).length) {

package/src/hooks/useExport.ts

@@ -70,7 +70,7 @@ export const useExport = ({
       const fileType: any = await getMimeType(datas);
       openBase64InNewTab(datas, fileType.mime);
     },
-    [locale, model, domain, limit, context, onClose]
+    [locale, model, domain, limit, context, onClose],
   );
 
   const onGetFields = useCallback(async () => {
@@ -109,7 +109,7 @@ export const useExport = ({
         parentKey: key,
       });
     },
-    [fields.current, model, context]
+    [fields.current, model, context],
   );
 
   const onGetPredefinedExports = useCallback(async () => {
@@ -171,12 +171,12 @@ export const useExport = ({
             fields: fieldsForExportLine,
             context,
           });
-        })
+        }),
       );
 
       return { ...pExport, id: exportId };
     },
-    []
+    [],
   );
 
   const onRemovePredefinedExport = useCallback(
@@ -184,9 +184,10 @@ export const useExport = ({
       await ConnectionProvider.getHandler().deleteObjects({
         model: "ir.exports",
         ids: [pExport.id!],
+        context,
       });
     },
-    []
+    [],
   );
 
   const getModelFields = useCallback(
@@ -203,7 +204,7 @@ export const useExport = ({
 
       exportModelFields.current.set(model, fieldsForModel);
     },
-    [exportModelFields, context]
+    [exportModelFields, context],
   );
 
   return {
@@ -352,7 +353,7 @@ const getKeysWithoutChildsInFields = ({
             return !fields?.[getParentKey(key)]?.[key];
           }
         })
-        .map((key) => getParentKey(key))
+        .map((key) => getParentKey(key)),
     ),
   ]);
 };
@@ -367,7 +368,7 @@ const retrieveKeyFieldsForPredefinedExports = async ({
   onGetFieldChilds: (key: string) => Promise<ExportField[]>;
 }) => {
   const allPredefinedExportKeys = predefinedExports.flatMap(
-    (exp: PredefinedExport) => exp.fields.map((field: any) => field.key)
+    (exp: PredefinedExport) => exp.fields.map((field: any) => field.key),
   );
 
   const keysWithoutChildsInFields = getKeysWithoutChildsInFields({

package/src/hooks/useWindowDimensions.ts

@@ -12,7 +12,7 @@ function getWindowDimensions() {
 
 export default function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState(
-    getWindowDimensions()
+    getWindowDimensions(),
   );
 
   useEffect(() => {

package/src/locales/ca_ES.tsx

@@ -71,6 +71,7 @@ export default {
   lastUpdatedDate: "Data última modificació",
   goToResourceId: "Vés al recurs amb ID",
   searchId: "ID de cerca:",
+  searchIdHelp: "Es pot utiltizar un ID o una llista d'IDs separats per comes",
   idNotFound: "No es troba aquesta id de recurs per l'objecte",
   selectedRegisters: "registres seleccionats",
   translate: "Traduïr",

package/src/locales/en_US.tsx

@@ -69,6 +69,7 @@ export default {
   lastUpdatedDate: "Date of last modification",
   goToResourceId: "Go to resource ID",
   searchId: "Search ID:",
+  searchIdHelp: "You can use an ID or a list of IDs separated by commas.",
   idNotFound: "Resource ID does not exist for this object!",
   selectedRegisters: "selected registers",
   translate: "Translate",

package/src/locales/es_ES.tsx

@@ -72,6 +72,8 @@ export default {
   lastUpdatedDate: "Fecha última modificación",
   goToResourceId: "Ir al recurso con ID",
   searchId: "ID de búsqueda:",
+  searchIdHelp:
+    "Se puede utilizar un ID o una lista de IDs separados por comas",
   idNotFound: "No se encuentra ésta ID de recursos para el objeto",
   selectedRegisters: "registros seleccionados",
   translate: "Traducir",

package/src/stories/Char.stories.tsx

@@ -47,3 +47,30 @@ export const Translatable = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const Tooltip = (): React.ReactElement => {
+  const ooui = new CharOoui({
+    name: "field",
+    string: "Lorem ipsum",
+    help: "This is a simple help",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Char ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};
+
+export const TooltipInline = (): React.ReactElement => {
+  const ooui = new CharOoui({
+    name: "field",
+    string: "Lorem ipsum",
+    help: "This is a simple help",
+    help_inline: "true",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Char ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};