@gisce/react-ooui 1.2.0-rc.7 → 1.2.0-rc.71

package/src/widgets/views/Tree.tsx

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
+import { Pagination, Checkbox, Space, Row, Col, Spin, Tag } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
 import { TreeView, Column } from "@/types";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { Many2oneSuffix } from "../base/many2one/Many2oneSuffix";
 import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
 import { parseFloatToString } from "@/helpers/timeHelper";
 import { ProgressBarInput } from "../base/ProgressBar";
@@ -16,6 +15,15 @@ import {
   LoadingOutlined,
 } from "@ant-design/icons";
 import { One2manyValue } from "../base/one2many/One2manyInput";
+import { Interweave } from "interweave";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import { Many2oneTree } from "../base/many2one/Many2oneTree";
+import { ReferenceTree } from "../base/ReferenceTree";
+import moment from "moment";
+import { DatePickerConfig } from "@/common/DatePicker";
 
 type Props = {
   total?: number;
@@ -34,6 +42,8 @@ type Props = {
   sorter?: any;
   onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
   childField?: string;
+  rootTree?: boolean;
+  context?: any;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -51,18 +61,30 @@ const booleanComponentFn = (value: boolean): React.ReactElement => {
 };
 
 const many2OneComponentFn = (m2oField: any): React.ReactElement => {
-  if (!m2oField) {
-    return <></>;
-  }
-  return (
-    <Space>
-      <>{m2oField.value}</>
-      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
-    </Space>
-  );
+  return <Many2oneTree m2oField={m2oField} />;
 };
+
 const textComponentFn = (value: any): React.ReactElement => {
-  return <div style={{ whiteSpace: "pre-line" }}>{value}</div>;
+  return <Interweave content={value?.replace(/(?:\r\n|\r|\n)/g, "<br>")} />;
+};
+
+const dateComponentFn = (value: any): React.ReactElement => {
+  if (!value || (value && value.length === 0)) return <></>;
+
+  const formattedValue = moment(
+    value,
+    DatePickerConfig.date.dateInternalFormat
+  ).format(DatePickerConfig.date.dateDisplayFormat);
+  return <>{formattedValue}</>;
+};
+
+const dateTimeComponentFn = (value: any): React.ReactElement => {
+  if (!value || (value && value.length === 0)) return <></>;
+  const formattedValue = moment(
+    value,
+    DatePickerConfig.time.dateInternalFormat
+  ).format(DatePickerConfig.time.dateDisplayFormat);
+  return <>{formattedValue}</>;
 };
 
 const one2ManyComponentFn = (value: One2manyValue): React.ReactElement => {
@@ -91,6 +113,47 @@ const imageComponent = (value: string): React.ReactElement => {
   );
 };
 
+const TagComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      {value ? <Tag color={ooui.colors[value]}>{ooui.selectionValues.get(value)}</Tag> : null}
+    </>
+  );
+};
+
+const SelectionComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>{ooui.selectionValues.get(value)}</>
+  );
+};
+
+const referenceComponent = (
+  value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      <ReferenceTree
+        value={value}
+        selectionValues={ooui.selectionValues}
+        context={context}
+      />
+    </>
+  );
+};
+
 function Tree(props: Props): React.ReactElement {
   const {
     page = 1,
@@ -109,6 +172,8 @@ function Tree(props: Props): React.ReactElement {
     sorter,
     onFetchChildrenForRecord,
     childField,
+    rootTree = false,
+    context,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -121,23 +186,42 @@ function Tree(props: Props): React.ReactElement {
   const { t } = useContext(LocaleContext) as LocaleContextType;
   const internalLimit = useRef(limit);
 
+  const actionViewContext = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { title = undefined, setTitle = undefined } =
+    (rootTree ? actionViewContext : {}) || {};
+
   useEffect(() => {
     treeOoui.current = getTree(treeView);
 
-    const columns = getTableColumns(treeOoui.current, {
-      boolean: booleanComponentFn,
-      many2one: many2OneComponentFn,
-      text: textComponentFn,
-      one2many: one2ManyComponentFn,
-      many2many: one2ManyComponentFn,
-      progressbar: progressBarComponentFn,
-      float_time: floatTimeComponent,
-      image: imageComponent,
-      integer: numberComponent,
-      float: numberComponent,
-    });
+    const columns = getTableColumns(
+      treeOoui.current,
+      {
+        boolean: booleanComponentFn,
+        many2one: many2OneComponentFn,
+        text: textComponentFn,
+        one2many: one2ManyComponentFn,
+        many2many: one2ManyComponentFn,
+        progressbar: progressBarComponentFn,
+        float_time: floatTimeComponent,
+        image: imageComponent,
+        integer: numberComponent,
+        float: numberComponent,
+        reference: referenceComponent,
+        tag: TagComponent,
+        selection: SelectionComponent,
+        date: dateComponentFn,
+        datetime: dateTimeComponentFn,
+      },
+      context
+    );
 
     setColumns(columns);
+
+    if (treeOoui.current.string && title !== treeOoui.current.string) {
+      setTitle?.(treeOoui.current.string);
+    }
   }, [treeView]);
 
   useEffect(() => {
@@ -171,7 +255,9 @@ function Tree(props: Props): React.ReactElement {
         <Col span={12}>
           <Pagination
             total={total}
-            pageSize={internalLimit.current}
+            pageSize={
+              internalLimit.current === 0 ? total : internalLimit.current
+            }
             current={page}
             showSizeChanger={false}
             onChange={onRequestPageChange}

package/src/widgets/views/searchFilter/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Form, Row, Col, Alert } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
@@ -30,6 +30,7 @@ type Props = {
   searchError?: string;
   searchValues?: any;
   showLimitOptions?: boolean;
+  formXml: string;
 };
 
 function SearchFilter(props: Props) {
@@ -47,11 +48,13 @@ function SearchFilter(props: Props) {
     searchError,
     searchValues,
     showLimitOptions = true,
+    formXml,
   } = props;
 
   const [simpleSearchFields, setSimpleSearchFields] = useState<Container>();
   const [advancedSearchFields, setAdvancedSearchFields] = useState<Container>();
   const [advancedFilter, setAdvancedFilter] = useState(false);
+  const sfo = useRef<SearchFilterOoui>();
 
   const [form] = Form.useForm();
 
@@ -84,10 +87,10 @@ function SearchFilter(props: Props) {
 
   useDeepCompareEffect(() => {
     setAdvancedFilter(false);
-    const sfo = new SearchFilterOoui(searchFields, fields);
-    sfo.parse();
-    setSimpleSearchFields(sfo._simpleSearchContainer);
-    setAdvancedSearchFields(sfo._advancedSearchContainer);
+    sfo.current = new SearchFilterOoui(searchFields, fields, formXml);
+    sfo.current.parse();
+    setSimpleSearchFields(sfo.current._simpleSearchContainer);
+    setAdvancedSearchFields(sfo.current._advancedSearchContainer);
   }, [fields, searchFields]);
 
   const rows = getRowsAndCols();
@@ -96,7 +99,10 @@ function SearchFilter(props: Props) {
     const { limit, offset } = values;
     delete values.offset;
     delete values.limit;
-    const newParams = getParamsForFields(values, fields);
+    const newParams = getParamsForFields(
+      values,
+      sfo.current?._advancedSearchContainer
+    );
 
     onSubmit({ params: newParams, offset, limit, searchValues: values });
   };

package/dist/helpers/icons/antd_icons.d.ts

@@ -1,4 +0,0 @@
-export declare const AntIcons: {
-    [key: string]: any;
-};
-//# sourceMappingURL=antd_icons.d.ts.map

package/dist/helpers/icons/antd_icons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"antd_icons.d.ts","sourceRoot":"","sources":["antd_icons.ts"],"names":[],"mappings":"AAwxBA,eAAO,MAAM,QAAQ,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAsxB1C,CAAC"}

package/dist/helpers/icons/tabler_icons.d.ts

@@ -1,4 +0,0 @@
-export declare const TablerIcons: {
-    [key: string]: any;
-};
-//# sourceMappingURL=tabler_icons.d.ts.map

package/dist/helpers/icons/tabler_icons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabler_icons.d.ts","sourceRoot":"","sources":["tabler_icons.ts"],"names":[],"mappings":"AA4nFA,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CA0nF7C,CAAC"}

package/dist/ui/Fieldset.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-declare type Props = {
-    label: string;
-    children: any;
-};
-declare const Fieldset: (props: Props) => React.ReactElement;
-export default Fieldset;
-//# sourceMappingURL=Fieldset.d.ts.map

package/dist/ui/Fieldset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,aAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,QAAQ,UAAW,KAAK,KAAG,MAAM,YAqBtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}