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

package/src/ui/ConfirmDialog.tsx

@@ -8,7 +8,7 @@ const { confirm } = Modal;
 const showDialog = ({
   onOk,
   confirmMessage,
-  lang
+  lang,
 }: {
   onOk: () => void;
   confirmMessage: string;

package/src/ui/GoToResourceModal.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useRef } from "react";
-import { Button, Col, Form, InputNumber, Modal, Row, Space } from "antd";
+import { Button, Col, Form, Input, Modal, Row, Space } from "antd";
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
 type Props = {
   visible: boolean;
-  onIdSubmitted: (id: number) => void;
+  onIdSubmitted: (ids: number[]) => void;
   onCancel: () => void;
   isSearching: boolean;
 };
@@ -18,11 +18,12 @@ export const GoToResourceModal = (props: Props) => {
   const inputRef = useRef<null | HTMLElement>();
 
   function handleSubmit(values: any) {
-    onIdSubmitted(values.id);
+    const ids = values.id.split(",").map((id: string) => parseInt(id.trim()));
+    onIdSubmitted(ids);
   }
 
   return (
-    (<Modal
+    <Modal
       title={t("goToResourceId")}
       centered
       open={visible}
@@ -39,11 +40,11 @@ export const GoToResourceModal = (props: Props) => {
           rules={[
             {
               required: true,
-              type: "number",
             },
           ]}
+          help={t("searchIdHelp")}
         >
-          <InputNumber style={{ width: "100%" }} autoFocus ref={inputRef as any}/>
+          <Input style={{ width: "100%" }} autoFocus ref={inputRef as any} />
         </Form.Item>
         <Row align="middle" justify="end">
           <Col>
@@ -70,6 +71,6 @@ export const GoToResourceModal = (props: Props) => {
           </Col>
         </Row>
       </Form>
-    </Modal>)
+    </Modal>
   );
 };

package/src/ui/TitleHeader.tsx

@@ -82,13 +82,20 @@ function TitleHeader(props: Props) {
     return null;
   }
   return (
-    <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
+    <div
+      style={{
+        position: "sticky",
+        top: 80,
+        zIndex: 3,
+      }}
+    >
       <Row
         className="shadow-md"
         style={{
           padding: "1em",
           borderRadius: token.borderRadius,
           backgroundColor: token.colorPrimaryBg,
+          minHeight: "82px",
         }}
         align="middle"
       >

package/src/views/ActionView.tsx

@@ -319,52 +319,59 @@ function ActionView(props: Props, ref: any) {
     setGtResourceModalVisible(true);
   }
 
-  async function goToResourceId(id: number) {
+  async function goToResourceId(ids: number[]) {
     setSearchingForResourceId(true);
 
-    const itemIndex = results!.findIndex((item: any) => {
-      return item.id === id;
-    });
-
-    let resource;
-
-    if (itemIndex === -1) {
-      try {
-        resource = (
-          await ConnectionProvider.getHandler().readObjects({
-            model,
-            ids: [id],
-            context,
-          })
-        )?.[0];
-      } catch (err) {}
-
-      if (!resource) {
-        setSearchingForResourceId(false);
-        setGtResourceModalVisible(false);
-        showInfo(t("idNotFound"));
-        return;
+    let mode: ViewType;
+    let domain: any[];
+    if (ids.length === 1) {
+      mode = "form";
+      domain = [];
+      const id = ids[0];
+      const itemIndex = results!.findIndex((item: any) => {
+        return item.id === id;
+      });
+      let resource;
+
+      if (itemIndex === -1) {
+        try {
+          resource = (
+            await ConnectionProvider.getHandler().readObjects({
+              model,
+              ids: [id],
+              context,
+            })
+          )?.[0];
+        } catch (err) {}
+
+        if (!resource) {
+          setSearchingForResourceId(false);
+          setGtResourceModalVisible(false);
+          showInfo(t("idNotFound"));
+          return;
+        }
+      } else {
+        resource = results[itemIndex];
       }
     } else {
-      resource = results[itemIndex];
+      mode = "tree";
+      domain = [["id", "in", ids]];
     }
 
     setSearchingForResourceId(false);
     setGtResourceModalVisible(false);
-
-    const viewForm = views.find((v) => v[1] === "form");
-
+    const viewForm = views.find((v) => v[1] === mode);
     openAction({
-      domain: [],
+      domain,
       context,
       model,
       views,
       title,
       target: "current",
-      initialView: { id: viewForm?.[0]!, type: "form" },
+      initialView: { id: viewForm?.[0]!, type: mode },
       action_id,
       action_type,
-      res_id: id,
+      res_id: ids[0],
     });
   }
 
@@ -445,6 +452,10 @@ function ActionView(props: Props, ref: any) {
             <DashboardActionView
               key={`${view.type}-${view.view_id}`}
               dashboardData={view as DashboardView}
+              visible={
+                currentView!.type === view.type &&
+                currentView!.view_id === view.view_id
+              }
             />
           );
         }

package/src/views/CurrentTabContent.tsx

@@ -8,7 +8,7 @@ import TabContent from "./TabContent";
 
 function CurrentTabContent() {
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { tabs } = tabManagerContext || {};
 

package/src/views/TabContent.tsx

@@ -13,7 +13,7 @@ function TabContent(props: Props) {
   const { tab } = props;
 
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { activeKey } = tabManagerContext || {};
 

package/src/views/TabSelector.tsx

@@ -8,7 +8,7 @@ import Tab from "./tabs/Tab";
 
 function TabSelector() {
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { activeKey, tabs, onRemoveTab, onChangeTab } = tabManagerContext || {};
 

package/src/views/actionViews/DashboardActionView.tsx

@@ -11,13 +11,14 @@ import { DashboardProps } from "@/types";
 
 export type DashboardActionViewProps = {
   dashboardData: DashboardProps;
+  visible: boolean;
 };
 
 export const DashboardActionView = (props: DashboardActionViewProps) => {
-  const { dashboardData } = props;
+  const { dashboardData, visible } = props;
   const dashboardRef = useRef();
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { openShortcut } = tabManagerContext || {};
 
@@ -25,6 +26,10 @@ export const DashboardActionView = (props: DashboardActionViewProps) => {
     return null;
   }
 
+  if (!visible) {
+    return null;
+  }
+
   return (
     <DashboardActionProvider
       dashboardRef={dashboardRef}

package/src/views/actionViews/GraphActionView.tsx

@@ -29,7 +29,7 @@ export const GraphActionView = (props: GraphActionViewProps) => {
   const graphRef = useRef();
 
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const {
     setResults: setResultsActionView = undefined,

package/src/views/actionViews/TreeActionView.tsx

@@ -43,7 +43,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
   } = props;
 
   const { currentView, setPreviousView } = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
 
   if (!visible) {
@@ -77,7 +77,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
           setPreviousView?.(currentView);
           setCurrentItemIndex(itemIndex);
           const formView = availableViews.find(
-            (v) => v.type === "form"
+            (v) => v.type === "form",
           ) as FormView;
           setCurrentView(formView);
         }}

package/src/widgets/WidgetFactory.tsx

@@ -38,7 +38,7 @@ import {
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
 import { Timeline } from "./custom/Timeline";
-import { Indicator} from "./custom/Indicator";
+import { Indicator } from "./custom/Indicator";
 import { Tags } from "./custom/Tags";
 
 const getWidgetType = (type: string) => {

package/src/widgets/base/Button.tsx

@@ -63,7 +63,7 @@ export const Button = (props: Props) => {
     <Field ooui={ooui}>
       <AntButton
         block
-        disabled={!activated || readOnly}
+        disabled={!activated || readOnly || isRunning}
         onClick={onClick}
         icon={getButtonIcon()}
         type={ooui.primary ? "primary" : "default"}

package/src/widgets/base/Float.tsx

@@ -30,7 +30,6 @@ export const Float = (props: WidgetProps) => {
         formatter={(value) => {
           return `${value}`.replace(/[^0-9\.\-]+/g, "");
         }}
-        defaultValue={0}
         decimalSeparator={"."}
         onBlur={elementHasLostFocus}
       />

package/src/widgets/base/FloatTime.tsx

@@ -25,7 +25,7 @@ interface FloatTimeInputProps {
 }
 
 export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
-  props: FloatTimeInputProps
+  props: FloatTimeInputProps,
 ) => {
   const { ooui, value, onChange } = props;
   const { id, readOnly, required } = ooui as FloatOoui;

package/src/widgets/base/Integer.tsx

@@ -46,7 +46,6 @@ export const Integer = (props: IntegerProps) => {
           const newNumber = newValue as number;
           onChange?.(newNumber);
         }}
-        defaultValue={0}
         onBlur={elementHasLostFocus}
         precision={0}
         style={requiredStyle}

package/src/widgets/base/Reference.tsx

@@ -37,7 +37,7 @@ interface ReferenceInputProps {
 }
 
 export const ReferenceInput: React.FC<ReferenceInputProps> = (
-  props: ReferenceInputProps
+  props: ReferenceInputProps,
 ) => {
   const { value, onChange, ooui } = props;
   const { required, selectionValues, readOnly } = ooui;

package/src/widgets/base/ReferenceTree.tsx

@@ -11,7 +11,7 @@ export type ReferenceTreeProps = {
 };
 
 export const ReferenceTree = (
-  props: ReferenceTreeProps
+  props: ReferenceTreeProps,
 ): React.ReactElement => {
   const { value, context, selectionValues } = props;
   const [name, setName] = useState();

package/src/widgets/base/Separator.tsx

@@ -10,17 +10,16 @@ type Props = {
 export const Separator = (props: Props) => {
   const { ooui } = props;
   const { label, icon } = ooui;
-  const Icon : React.ElementType | undefined = iconMapper(icon || "");
-
+  const Icon: React.ElementType | undefined = iconMapper(icon || "");
 
   return (
     <Divider orientation="left" className="text-sm">
-      { (Icon || label) &&
+      {(Icon || label) && (
         <Space>
           {Icon ? <Icon /> : null}
           {label}
         </Space>
-      }
+      )}
     </Divider>
   );
 };

package/src/widgets/base/Time.tsx

@@ -1,12 +1,9 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { TimePicker, theme } from "antd";
 import Field from "@/common/Field";
 import { Time as TimeOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import dayjs, { Dayjs } from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-
-dayjs.extend(customParseFormat);
+import dayjs from "@/helpers/dayjs";
+import { Dayjs } from "dayjs";
+import { TimePicker } from "../../common/TimePicker";
 
 const Time = (props: WidgetProps) => {
   const { ooui } = props;
@@ -25,7 +22,7 @@ type TimeInputProps = {
 };
 
 export const TimeInput = (props: TimeInputProps) => {
-  const onChange = (time: Dayjs | null, timestring: string) => {
+  const onChange = (time: Dayjs | null, timestring?: string) => {
     if (props.onChange) {
       props.onChange(timestring);
     }
@@ -34,6 +31,7 @@ export const TimeInput = (props: TimeInputProps) => {
   return (
     <TimePicker
       onChange={onChange}
+      numberOfSelectsToHide={3} // Since it has hours, minutes, and seconds
       value={props.value ? dayjs(props.value, "HH:mm:ss") : undefined}
     />
   );

package/src/widgets/base/many2one/Many2oneSuffixModal.tsx

@@ -14,7 +14,7 @@ export const Many2oneSuffixModal = (props: Props) => {
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   return (
-    (<Modal
+    <Modal
       title={t("selectAction")}
       centered
       open={visible}
@@ -37,6 +37,6 @@ export const Many2oneSuffixModal = (props: Props) => {
           );
         })}
       </Space>
-    </Modal>)
+    </Modal>
   );
 };

package/src/widgets/base/one2many/One2many.tsx

@@ -47,9 +47,9 @@ export const One2many = (props: Props) => {
       if (mode && mode.length > 0) {
         for (const m of mode as ViewType[]) {
           const v = await getViewData(m);
-          views.set(m, v)
+          views.set(m, v);
         }
-        setViews(views)
+        setViews(views);
       } else {
         const formView = await getViewData("form");
         const treeView = await getViewData("tree");

package/src/widgets/base/one2many/One2manyInput.tsx

@@ -124,6 +124,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
 
     fetchDataIfNeeded();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, currentView]);
 
   const fetchDataIfNeeded = useCallback(() => {
@@ -135,10 +136,12 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     ) {
       fetchData();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, currentView]);
 
   useEffect(() => {
     parseDomain();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domain]);
 
   const triggerChange = (changedValue: One2manyItem[]) => {
@@ -626,10 +629,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
               : undefined
           }
           showPagination={false}
-          rowSelection={{
-            selectedRowKeys,
-            onChange: setSelectedRowKeys,
-          }}
+          selectedRowKeys={selectedRowKeys}
+          onRowSelectionChange={setSelectedRowKeys}
           sorter={sorter}
           onChangeSort={setSorter}
           context={{ ...getContext?.(), ...context }}
@@ -670,7 +671,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       <One2manyTopBar
         mode={currentView}
         title={getTitle()}
-        readOnly={readOnly}
+        readOnly={readOnly || false}
         isMany2Many={isMany2many}
         formHasChanges={formHasChanges}
         totalItems={itemsToShow.length}

package/src/widgets/custom/Avatar.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import {WidgetProps} from "@/types";
+import { WidgetProps } from "@/types";
 import { Avatar as AntdAvatar, Tooltip } from "antd";
-import { Avatar as AvatarOoui} from "@gisce/ooui";
+import { Avatar as AvatarOoui } from "@gisce/ooui";
 import { colorFromString } from "@/helpers/formHelper";
 
 type AvatarProps = WidgetProps & {
-  ooui: AvatarOoui
+  ooui: AvatarOoui;
   value?: any;
 };
 
 const Avatar = (props: AvatarProps): React.ReactElement | null => {
-  const {ooui, value} = props;
+  const { ooui, value } = props;
   if (!value) {
     return null;
   }
@@ -20,13 +20,21 @@ const Avatar = (props: AvatarProps): React.ReactElement | null => {
   } else if (Array.isArray(value)) {
     formattedValue = value[1];
   }
-  const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
+  const text = formattedValue
+    .toString()
+    .split(" ")
+    .filter((word: string) => word.length > 1)
+    .slice(0, 3)
+    .map((word: string) => word[0].toUpperCase())
+    .join("");
   const backgroundColor = colorFromString(formattedValue);
   return (
     <Tooltip title={formattedValue}>
-      <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
+      <AntdAvatar alt={formattedValue} style={{ backgroundColor }}>
+        {text}
+      </AntdAvatar>
     </Tooltip>
   );
-}
+};
 
 export default Avatar;

package/src/widgets/custom/Comments.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { Fragment, useContext } from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import {
@@ -12,15 +12,12 @@ import {
 } from "antd";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
+import dayjs from "@/helpers/dayjs";
 import md5 from "md5";
 
 const { Meta } = Card;
 const { Text } = Typography;
 
-dayjs.extend(relativeTime);
-
 type GravatarProps = {
   email: string;
   size?: number;
@@ -75,10 +72,10 @@ function TextWithNewlines({ text }: { text: string }) {
   return (
     <div>
       {textParts.map((part, index) => (
-        <React.Fragment key={index}>
+        <Fragment key={index}>
           {part}
           {index !== textParts.length - 1 && <br />}
-        </React.Fragment>
+        </Fragment>
       ))}
     </div>
   );

package/src/widgets/custom/Markdown.tsx

@@ -1,9 +1,10 @@
 import Field from "@/common/Field";
 import ReactMarkdown from "react-markdown";
 import React from "react";
-import {WidgetProps} from "@/types";
+import { WidgetProps } from "@/types";
+import remarkGfm from "remark-gfm";
 
-export  const Markdown = (props: WidgetProps) => {
+export const Markdown = (props: WidgetProps) => {
   return (
     <Field {...props}>
       <MarkdownInput {...props} />
@@ -12,11 +13,20 @@ export  const Markdown = (props: WidgetProps) => {
 };
 
 export const MarkdownInput = (props: any) => {
-  const {value, ooui} = props;
+  const { value, ooui } = props;
   return (
-    <div style={{height: ooui.height ? ooui.height + 'px' : '100%', overflow: 'auto'}}>
-      <ReactMarkdown children={value} className="ant-typography"/>
+    <div
+      style={{
+        height: ooui?.height ? ooui.height + "px" : "100%",
+        overflow: "auto",
+      }}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        className="markdown-typography"
+      >
+        {value}
+      </ReactMarkdown>
     </div>
-
-  )
-}
+  );
+};

package/src/widgets/custom/MultiCheckbox.tsx

@@ -71,7 +71,7 @@ export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
       const optionsRead = await ConnectionProvider.getHandler().search({
         model: relation,
         params,
-        fields: [field],
+        fieldsToRetrieve: [field],
         context: { ...getContext?.(), ...context },
       });
       const options = optionsRead.map((item: any) => {

package/src/widgets/custom/Radio.tsx

@@ -41,9 +41,7 @@ export const SelectionInput = (props: RadioInputProps) => {
 
   return (
     <RadioAnt.Group disabled={readOnly} onChange={onChange} value={value}>
-      <Space direction={direction}>
-        {options}
-      </Space>
+      <Space direction={direction}>{options}</Space>
     </RadioAnt.Group>
   );
-};
+};

package/src/widgets/custom/Steps.tsx

@@ -6,11 +6,10 @@ import { Steps as StepsOoui } from "@gisce/ooui";
 
 type StepsProps = {
   ooui: StepsOoui;
-  value: any,
-}
-
-type StatusType = 'wait' | 'process' | 'finish' | 'error';
+  value: any;
+};
 
+type StatusType = "wait" | "process" | "finish" | "error";
 
 export const Steps = (props: StepsProps) => {
   const { ooui } = props;
@@ -33,10 +32,10 @@ export const StepsInput = (props: StepsInputProps) => {
   const formContext = useContext(FormContext) as FormContextType;
 
   const values = Array.from(selectionValues.entries());
-  const current = values.map(val => val[0]).indexOf(value);
+  const current = values.map((val) => val[0]).indexOf(value);
   let status: StatusType = "process";
   let error = "";
-  
+
   if (errorField) {
     error = formContext.getFieldValue(errorField);
     if (error) {
@@ -44,12 +43,14 @@ export const StepsInput = (props: StepsInputProps) => {
     }
   }
 
-
   return (
     <AntdSteps current={current} status={status}>
       {values.map((val, idx) => (
-        <AntdSteps.Step title={val[1]} description={idx === current && status === "error" ? error : null}/>
+        <AntdSteps.Step
+          title={val[1]}
+          description={idx === current && status === "error" ? error : null}
+        />
       ))}
     </AntdSteps>
   );
-};
+};