@gisce/react-ooui 2.0.0-rc.6 → 2.0.0-rc.8

package/src/widgets/custom/Comments.tsx

@@ -0,0 +1,144 @@
+import React, {useContext} from "react";
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import {Card, Space, Typography, Avatar, Tag, Timeline, TimelineItemProps} from "antd"
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+const { Meta } = Card;
+const { Text} = Typography;
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import md5 from "md5";
+
+
+dayjs.extend(relativeTime);
+
+type GravatarProps = {
+  email: string,
+  size?: number,
+  theme: string,
+}
+
+type CommentDataType = {
+  id: number,
+  isSender: boolean,
+  isAuthor: boolean,
+  text: string,
+  email: string,
+  date: string,
+  author: string,
+}
+
+type CommentProps = {
+  data: CommentDataType,
+  style?: any,
+}
+
+type CommentsTypeProps = {
+  data: CommentDataType[],
+}
+
+type CommentsTimelineProps = {
+  value?: EventsType[],
+}
+
+
+type EventActionType = {
+  date: string,
+  action: string,
+}
+
+export type EventsType = {
+  type: "action" | "comment",
+  event: EventActionType | CommentDataType
+
+}
+
+const Gravatar = ({ email, size = 40, theme = '' } : GravatarProps) => {
+  // Genera el enlace de Gravatar utilizando el email
+  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${theme}`;
+
+  return (
+    <Avatar src={gravatarUrl} size={size} />
+  );
+};
+
+
+function TextWithNewlines({ text }:{text: string}) {
+  const textParts = text.split('\n');
+
+  return (
+    <div>
+      {textParts.map((part, index) => (
+        <React.Fragment key={index}>
+          {part}
+          {index !== textParts.length - 1 && <br />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export const Comment = (props: CommentProps) => {
+  const {data, style} = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  return (
+    <Card key={data.id} style={{...style, ...{textAlign: 'start'}}}>
+      <Meta avatar={<Gravatar email={data.email} theme='mp'/>}
+            title={data.author}
+            description={(
+              <Space direction="horizontal">
+                <span title={data.date}>{dayjs(data.date).fromNow()}</span>
+                {data.isAuthor && <Tag color="blue">{t('author')}</Tag>}
+              </Space>
+            )} style={{marginBottom: '5px'}}/>
+      <Text>
+        <TextWithNewlines text={data.text} />
+      </Text>
+    </Card>
+  )
+}
+
+export const Comments = (props: CommentsTypeProps) => {
+  const { data = [] } = props;
+  const comments = data.map((c) => {
+      const style = {float: c.isSender ? 'right' : 'left', width: '60%'};
+      return <Comment data={c} style={style}/>
+    });
+  return (
+    <div>
+      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+        {comments}
+      </Space>
+    </div>
+  )
+}
+
+
+export const CommentsTimeline = (props: CommentsTimelineProps) => {
+  const { value } = props;
+  const items = (value || []).map(i => {
+    if (i.type === 'action') {
+      return {
+        children: `${i.event.date} - ${(i.event as EventActionType).action}`
+      }
+    } else if (i.type === "comment") {
+      return {
+        color: 'gray',
+        position: (i.event as CommentDataType).isSender ? 'left' : 'right',
+        label: i.event.date,
+        children: <Comment data={i.event as CommentDataType} />,
+      }
+    }
+  })
+  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />
+}
+
+export const CommentsTimelineField = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <CommentsTimeline />
+    </Field>
+  );
+}

package/src/widgets/views/Form.tsx

@@ -705,15 +705,17 @@ function Form(props: FormProps, ref: any) {
     fields,
     arch,
     values,
+    operationInProgress = false,
   }: {
     arch: string;
     fields: any;
     values: any;
+    operationInProgress?: boolean;
   }) => {
     const ooui = new FormOoui(fields);
     // TODO: Here we must inject `values` to the ooui parser in order to evaluate arch+values and get the new form container
     ooui.parse(arch, {
-      readOnly,
+      readOnly: readOnly || operationInProgress,
       values: convertToPlain2ManyValues(
         {
           ...values,
@@ -980,6 +982,15 @@ function Form(props: FormProps, ref: any) {
     checkFieldsChanges({ elementHasLostFocus: true });
   }
 
+  function updateOperationInProgress(value: boolean) {
+    parseForm({
+      fields,
+      arch: arch!,
+      values: getCurrentValues(fields),
+      operationInProgress: value,
+    });
+  }
+
   async function executeButtonAction({
     type,
     action,
@@ -1001,8 +1012,12 @@ function Form(props: FormProps, ref: any) {
       return;
     }
 
+    let mustBlockButtons = false;
+
     try {
       if (formHasChanges() || getCurrentId() === undefined) {
+        mustBlockButtons = true;
+        updateOperationInProgress(true);
         if (submitMode === "2many") {
           await submitApi({ callOnSubmitSucceed: false });
           x2manyPendingLink.current = true;
@@ -1024,7 +1039,9 @@ function Form(props: FormProps, ref: any) {
       } else if (type === "action") {
         await runActionButton({ action, context: updatedContext });
       }
+      mustBlockButtons && updateOperationInProgress(false);
     } catch (err) {
+      mustBlockButtons && updateOperationInProgress(false);
       showErrorDialog(err);
     }
   }

package/src/widgets/views/Graph/GraphIndicator.tsx

@@ -297,7 +297,7 @@ function CommonIndicator({
     fontSize = maxFontSize;
   }
 
-  const IconElement: any = icon && iconMapper(icon);
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize: fontSize * 0.7}});
 
   return (
     <div
@@ -373,13 +373,13 @@ function PercentageIndicator({
     tw = tw * 1.5;
   }
 
-  const IconElement: any = icon && iconMapper(icon);
-
   if (tw >= width * 0.85 || fontSize * 2 < twoLinesHeight) {
     const maxFontSize = ((width * 0.85) / tw) * fontSize;
     fontSize = maxFontSize;
   }
 
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize}});
+
   return (
     <div
       ref={measureRef}

package/src/widgets/views/SearchTree.tsx

@@ -125,6 +125,7 @@ function SearchTree(props: Props, ref: any) {
     colorsForResults,
     statusForResults,
     totalItems,
+    getAllIds,
   } = useSearch({
     model: currentModel!,
     setSearchTreeNameSearch,
@@ -269,13 +270,16 @@ function SearchTree(props: Props, ref: any) {
   };
 
   function changeSelectedRowKeys(selectedRowKeys: any[]) {
-    const selectedRowItems = getResults().filter((entry: any) =>
-      selectedRowKeys.includes(entry.id)
-    );
-    setSelectedRowItems?.(selectedRowItems);
+    setSelectedRowItems?.(selectedRowKeys.map((id: number) => ({ id })));
     onChangeSelectedRowKeys?.(selectedRowKeys);
   }
 
+  async function selectAllRecords() {
+    const allIds = await getAllIds();
+    setSelectedRowItems?.(allIds.map((id: number) => ({ id })));
+    onChangeSelectedRowKeys?.(allIds);
+  }
+
   function calculateTableHeight() {
     if (treeView?.isExpandable) {
       return height - 160;
@@ -331,6 +335,7 @@ function SearchTree(props: Props, ref: any) {
           }
           childField={treeView.field_parent}
           rootTree={rootTree}
+          onSelectAllRecords={selectAllRecords}
         />
       </>
     );

package/src/widgets/views/Tree.tsx

@@ -53,6 +53,7 @@ type Props = {
   rootTree?: boolean;
   context?: any;
   readonly?: boolean;
+  onSelectAllRecords?: () => Promise<void>;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -190,6 +191,7 @@ function Tree(props: Props): React.ReactElement {
     rootTree = false,
     context,
     readonly,
+    onSelectAllRecords,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -382,6 +384,13 @@ function Tree(props: Props): React.ReactElement {
               }
             : undefined
         }
+        onSelectAllRecords={onSelectAllRecords}
+        totalItems={total || 0}
+        translations={{
+          recordsSelected: t("recordsSelected"),
+          selectAllRecords: t("selectAllRecords"),
+          allRecordsSelected: t("allRecordsSelected"),
+        }}
       />
       {getSums()}
     </div>