@gisce/react-ooui 1.2.0-rc.9 → 1.2.0-rc.90

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 dayjs from "dayjs";
+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 = dayjs(
+    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 = dayjs(
+    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}
@@ -216,7 +302,7 @@ function Tree(props: Props): React.ReactElement {
     });
 
     return (
-      <div className="p-1 pb-0 pl-2 mt-2 bg-gray-50">{summary.join(", ")}</div>
+      <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>
     );
   }
 

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

@@ -8,27 +8,13 @@ import { PairFields } from "./PairFields";
 
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
-import { Field, Selection as SelectionOoui } from "@gisce/ooui";
+import { Field, SearchFieldTypes, Selection as SelectionOoui } from "@gisce/ooui";
 import { MultiSelection } from "@/widgets/base/MultiSelection";
 
 type Props = {
   field: Field;
 };
 
-const types = {
-  text: "text",
-  many2one: "many2one",
-  char: "char",
-  boolean: "boolean",
-  selection: "selection",
-  float: "float",
-  float_time: "float_time",
-  progressbar: "progressbar",
-  integer: "integer",
-  date: "date",
-  datetime: "datetime",
-};
-
 export function SearchField(props: Props) {
   const { field } = props;
   field.readOnly = false;
@@ -39,7 +25,7 @@ export function SearchField(props: Props) {
   const widgetType = field.type;
 
   switch (widgetType) {
-    case types.boolean: {
+    case SearchFieldTypes.boolean: {
       const ooui = new SelectionOoui({
         name: field._id,
         string: field.label,
@@ -51,19 +37,19 @@ export function SearchField(props: Props) {
 
       return <Selection layout="vertical" ooui={ooui} showLabel />;
     }
-    case types.float:
-    case types.progressbar:
-    case types.float_time:
-    case types.integer: {
+    case SearchFieldTypes.float:
+    case SearchFieldTypes.progressbar:
+    case SearchFieldTypes.float_time:
+    case SearchFieldTypes.integer: {
       return <PairFields ooui={field} showLabel />;
     }
-    case types.date: {
+    case SearchFieldTypes.date: {
       return <DateRangePicker ooui={field} layout="vertical" showLabel />;
     }
-    case types.datetime: {
+    case SearchFieldTypes.datetime: {
       return <DateTimeRangePicker ooui={field} layout="vertical" showLabel />;
     }
-    case types.selection: {
+    case SearchFieldTypes.selection: {
       return <MultiSelection layout="vertical" ooui={field} showLabel />;
     }
     default: {

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Form, Row, Col, Alert } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { Form, Row, Col, Alert, theme } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
 import {
@@ -15,6 +15,7 @@ import { SearchParams } from "./SearchParams";
 
 import { getParamsForFields } from "@/helpers/searchHelper";
 import Measure from "react-measure";
+const { useToken } = theme;
 
 type Props = {
   fields: any;
@@ -30,6 +31,7 @@ type Props = {
   searchError?: string;
   searchValues?: any;
   showLimitOptions?: boolean;
+  formXml: string;
 };
 
 function SearchFilter(props: Props) {
@@ -47,11 +49,14 @@ 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 { token } = useToken();
 
   const [form] = Form.useForm();
 
@@ -84,10 +89,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 +101,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 });
   };
@@ -112,7 +120,8 @@ function SearchFilter(props: Props) {
         <div ref={measureRef}>
           <div style={{ display: searchVisible ? "block" : "none" }}>
             <Form
-              className="p-3 rounded shadow-md bg-gray-50"
+              className="p-3 shadow-md"
+              style={{ borderRadius: token.borderRadius }}
               form={form}
               onFinish={onFinish}
               initialValues={{ offset, limit }}

package/dist/Config.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    requiredClass: string;
-    requiredColor: string;
-};
-export default _default;
-//# sourceMappingURL=Config.d.ts.map

package/dist/Config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.ts"],"names":[],"mappings":";;;;AAAA,wBAGE"}

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/main.css

@@ -1 +0,0 @@
-.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.react-resizable-handle-e{right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.react-grid-item.resizing{z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-o-user-select:none;user-select:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;-webkit-transform:rotate(225deg);transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}

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"}

package/src/Config.ts

@@ -1,4 +0,0 @@
-export default {
-  requiredClass: "bg-blue-100",
-  requiredColor: "#DBEAFE",
-};