@gisce/react-ooui 1.2.0-rc.8 → 1.2.0-rc.82

package/src/actionbar/FormActionBar.tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { Space, Spin } from "antd";
+import React, { useContext, useEffect, useRef } from "react";
+import { Space, Spin, message } from "antd";
 import {
   SaveOutlined,
   RightOutlined,
@@ -63,7 +63,6 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
     attachments,
     formRef,
     setFormHasChanges,
-    searchTreeRef,
     previousView,
     setPreviousView,
     goToResourceId,
@@ -331,11 +330,19 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
         disabled={mustDisableButtons}
         tooltip={t("actions")}
         items={toolbar?.action}
-        onItemClick={(action: any) => {
+        onItemClick={async (action: any) => {
           if (!action) {
             return;
           }
 
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
+
           runAction(action);
         }}
       />
@@ -344,14 +351,24 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
         disabled={mustDisableButtons}
         tooltip={t("reports")}
         items={toolbar?.print}
-        onItemClick={(report: any) => {
+        onItemClick={async (report: any) => {
           if (!report) {
             return;
           }
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
 
           runAction({
             ...report,
-            datas: { ...(report.datas || {}), ids: [currentId as number] },
+            datas: {
+              ...(report.datas || {}),
+              ids: [result.currentId as number],
+            },
           });
         }}
       />
@@ -365,6 +382,14 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
             return;
           }
 
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
+
           openRelate({
             relateData: relate,
             values: (formRef.current as any).getValues(),
@@ -377,8 +402,16 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
       <AttachmentsButton
         disabled={mustDisableButtons}
         attachments={attachments}
-        onAddNewAttachment={() => {
-          const res_id = currentId as number;
+        onAddNewAttachment={async () => {
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
+
+          const res_id = result.currentId as number;
           const res_model = currentModel as string;
           openDefaultActionForModel({
             model: "ir.attachment",
@@ -392,8 +425,16 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
             initialViewType: "form",
           });
         }}
-        onListAllAttachments={() => {
-          const res_id = currentId as number;
+        onListAllAttachments={async () => {
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
+
+          const res_id = result.currentId as number;
           const res_model = currentModel as string;
           openDefaultActionForModel({
             model: "ir.attachment",
@@ -404,7 +445,15 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
             initialViewType: "tree",
           });
         }}
-        onViewAttachmentDetails={(attachment: Attachment) => {
+        onViewAttachmentDetails={async (attachment: Attachment) => {
+          const result = await saveDocument({
+            onFormSave,
+          });
+
+          if (!result.succeed) {
+            return;
+          }
+
           openDefaultActionForModel({
             model: "ir.attachment",
             res_id: attachment.id,
@@ -420,4 +469,17 @@ function separator() {
   return <div className="inline-block w-2" />;
 }
 
+async function saveDocument({
+  onFormSave,
+}: {
+  onFormSave?: () => Promise<{ succeed: boolean; id: number }>;
+}): Promise<{ succeed: boolean; currentId?: number }> {
+  const result = await onFormSave?.();
+  if (result?.succeed) {
+    return { succeed: true, currentId: result.id };
+  } else {
+    return { succeed: false, currentId: undefined };
+  }
+}
+
 export default FormActionBar;

package/src/actionbar/TreeActionBar.tsx

@@ -30,6 +30,7 @@ import { showLogInfo } from "@/helpers/logInfoHelper";
 import SearchBar from "./SearchBar";
 import { ExportModal } from "..";
 import { mergeParams } from "@/helpers/searchHelper";
+import { ConfigContext } from "@/context/ConfigContext";
 
 type Props = {
   parentContext?: any;
@@ -61,10 +62,11 @@ function TreeActionBar(props: Props) {
     previousView,
     results,
     limit,
+    totalItems,
   } = useContext(ActionViewContext) as ActionViewContextType;
 
   const { parentContext = {}, treeExpandable, toolbar } = props;
-
+  const { previewFeatures } = useContext(ConfigContext);
   const { t, lang } = useContext(LocaleContext) as LocaleContextType;
   const contentRootContext = useContext(
     ContentRootContext
@@ -162,9 +164,24 @@ function TreeActionBar(props: Props) {
               }
             }}
           />
+          {!treeExpandable && (
+            <ButtonWithBadge
+              icon={
+                <FilterOutlined
+                  style={{ color: searchVisible ? "white" : undefined }}
+                />
+              }
+              tooltip={t("advanced_search")}
+              type={searchVisible ? "primary" : "default"}
+              onClick={() => {
+                setSearchVisible?.(!searchVisible);
+              }}
+              disabled={duplicatingItem || removingItem || treeIsLoading}
+              badgeNumber={searchParams?.length}
+            />
+          )}
           {separator()}
           <NewButton disabled={treeIsLoading} />
-          {separator()}
           <ActionButton
             icon={<CopyOutlined />}
             tooltip={t("duplicate")}
@@ -190,22 +207,6 @@ function TreeActionBar(props: Props) {
           {separator()}
         </>
       )}
-      {!treeExpandable && (
-        <ButtonWithBadge
-          icon={
-            <FilterOutlined
-              style={{ color: searchVisible ? "white" : undefined }}
-            />
-          }
-          tooltip={t("advanced_search")}
-          type={searchVisible ? "primary" : "default"}
-          onClick={() => {
-            setSearchVisible?.(!searchVisible);
-          }}
-          disabled={duplicatingItem || removingItem || treeIsLoading}
-          badgeNumber={searchParams?.length}
-        />
-      )}
       <ActionButton
         icon={<InfoCircleOutlined />}
         tooltip={t("showLogs")}
@@ -278,89 +279,90 @@ 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"
-                stroke-width="1.5"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="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) || [];
+      {previewFeatures && (
+        <>
+          {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={results?.length || 0}
-        selectedRegistersToExport={
-          selectedRowItems &&
-          selectedRowItems.length &&
-          selectedRowItems.length > 0
-            ? selectedRowItems.length
-            : undefined
-        }
-        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

@@ -1,28 +1,29 @@
-import { DatePicker as AntDatePicker } from "antd";
+import { DatePicker as AntDatePicker, theme } from "antd";
 
 import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { Date as DateOoui } from "@gisce/ooui";
-import moment from "moment";
+import dayjs from "dayjs";
+const { useToken } = theme;
 
 type DatePickerProps = WidgetProps & {
   showTime?: boolean;
 };
 
-const DatePickerConfig = {
+export const DatePickerConfig = {
   date: {
     placeholder: "__/__/____",
-    dateDisplayFormat: "YYYY-MM-DD",
+    dateDisplayFormat: "DD/MM/YYYY",
     dateInternalFormat: "YYYY-MM-DD",
   },
   time: {
     placeholder: "__/__/____ __:__:__",
-    dateDisplayFormat: "YYYY-MM-DD HH:mm:ss",
+    dateDisplayFormat: "DD/MM/YYYY HH:mm:ss",
     dateInternalFormat: "YYYY-MM-DD HH:mm:ss",
   },
 };
+
 const DatePicker = (props: DatePickerProps) => {
   const { ooui, showTime = false } = props;
   const { required } = ooui;
@@ -46,8 +47,12 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
 ) => {
   const { value, onChange, ooui, showTime } = props;
   const { id, readOnly, required } = ooui as DateOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
 
   const mode = showTime ? "time" : "date";
 
@@ -65,15 +70,15 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
   };
 
   const showTimeParms = showTime
-    ? { defaultValue: moment("00:00:00", "HH:mm:ss") }
+    ? { defaultValue: dayjs("00:00:00", "HH:mm:ss") }
     : undefined;
   const dateValue = value
-    ? moment(value, DatePickerConfig[mode].dateInternalFormat)
+    ? dayjs(value, DatePickerConfig[mode].dateInternalFormat)
     : undefined;
 
   return (
     <AntDatePicker
-      style={{ width: "100%" }}
+      style={{ width: "100%", ...requiredStyle }}
       placeholder={
         showTime
           ? DatePickerConfig.time.placeholder
@@ -81,12 +86,12 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
       }
       disabled={readOnly}
       id={id}
+      picker={showTime ? "time" : "date"}
       showTime={showTimeParms}
-      className={requiredClass}
       format={DatePickerConfig[mode].dateDisplayFormat}
       value={dateValue}
       onChange={onValueStringChange}
-    ></AntDatePicker>
+    />
   );
 };
 

package/src/context/ActionViewContext.tsx

@@ -11,7 +11,7 @@ export type ActionViewContextType = {
   setFormIsSaving?: (value: boolean) => void;
   formHasChanges?: boolean;
   setFormHasChanges?: (value: boolean) => void;
-  onFormSave?: () => void;
+  onFormSave?: () => Promise<{ succeed: boolean; id: number }>;
   formRef?: any;
   searchTreeRef?: any;
   onNewClicked: () => void;
@@ -53,6 +53,7 @@ export type ActionViewContextType = {
   setSearchValues?: (value: any) => void;
   limit?: number;
   setLimit?: (value: number) => void;
+  setTitle?: (value: string) => void;
 };
 
 export const ActionViewContext =
@@ -66,7 +67,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const {
     children,
     currentView,
-    title,
+    title: titleProps,
     setCurrentView,
     availableViews,
     formRef,
@@ -106,6 +107,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const [limit, setLimit] = useState<number>(
     limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT
   );
+  const [title, setTitle] = useState<string>(titleProps);
 
   useEffect(() => {
     if (results && results.length > 0 && !currentItemIndex) {
@@ -139,8 +141,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
     }
   }, [currentView]);
 
-  const callOnFormSave = () => {
-    (formRef.current as any)?.submitForm();
+  const callOnFormSave = async () => {
+    return await (formRef.current as any)?.submitForm();
   };
 
   return (
@@ -196,6 +198,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         setSearchValues,
         limit,
         setLimit,
+        setTitle,
       }}
     >
       {children}

package/src/context/ConfigContext.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+interface ConfigContextProps {
+  previewFeatures: boolean;
+}
+
+export const ConfigContext = React.createContext<ConfigContextProps>({
+  previewFeatures: false,
+});