@gisce/react-ooui 0.8.3 → 0.8.6

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

@@ -26,7 +26,7 @@ import { readObjectValues, getNextPendingId } from "@/helpers/one2manyHelper";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import { ViewModes } from "@/widgets/base/one2many/One2many";
-import { sortResults } from "@/helpers/treeHelper";
+import { sortResults, sortResultsWithOrder } from "@/helpers/treeHelper";
 
 type One2manyValue = {
   fields?: any;
@@ -95,6 +95,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   );
   const transformedDomain = useRef<any[]>([]);
   const [sorter, setSorter] = useState<any>();
+  const originalSortItemIds = useRef<number[]>();
 
   const {
     readOnly,
@@ -108,14 +109,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     (item) => item.values && item.operation !== "pendingRemove"
   );
 
-  const noFieldsTree = views.get("tree")?.fields === undefined;
-  const noFieldsForm = views.get("form")?.fields === undefined;
-
   useEffect(() => {
-    if (noFieldsForm || noFieldsTree) {
-      return;
-    }
-
     if (items.some((item) => !item.values)) {
       fetchData();
     }
@@ -127,7 +121,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
 
   const triggerChange = (changedValue: Array<One2manyItem>) => {
     onChange?.({
-      fields: views.get("form").fields,
+      fields: views.get("form")?.fields || views.get("tree")?.fields,
       items: filterDuplicateItems(changedValue),
     });
   };
@@ -147,12 +141,16 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     try {
       const itemsWithValues = await readObjectValues({
         treeFields: views.get("tree").fields,
-        formFields: views.get("form").fields,
+        formFields: views.get("form")?.fields || {},
         model: relation,
         items,
         context: { ...getContext?.(), ...context },
       });
 
+      if (!originalSortItemIds.current) {
+        originalSortItemIds.current = itemsWithValues.map((item) => item.id!);
+      }
+
       triggerChange(itemsWithValues);
     } catch (err) {
       setError(err as any);
@@ -438,7 +436,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
   };
 
-  const onTreeRowClicked = (itemId: number) => {
+  const onTreeRowClicked = (record: any) => {
+    const { id: itemId } = record;
     // We show the detail for the clicked item in a Form modal
     setModalItem(items.find((item) => item.id === itemId));
     setContinuousEntryMode(false);
@@ -544,14 +543,19 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       );
     }
 
-    const resultsToShow = sortResults({
-      resultsToSort: itemsToShow.map((item) => item.treeValues),
-      sorter,
-      fields: {
-        ...views.get("tree").fields,
-        ...views.get("form").fields,
-      },
-    });
+    const resultsToShow = sorter
+      ? sortResults({
+          resultsToSort: itemsToShow.map((item) => item.treeValues),
+          sorter,
+          fields: {
+            ...views.get("tree").fields,
+            ...(views.get("form")?.fields || {}),
+          },
+        })
+      : sortResultsWithOrder(
+          itemsToShow.map((item) => item.treeValues),
+          originalSortItemIds.current!
+        );
 
     if (currentView === "tree") {
       return (
@@ -561,7 +565,11 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           treeView={views.get("tree")}
           results={resultsToShow}
           loading={isLoading}
-          onRowClicked={onTreeRowClicked}
+          onRowClicked={
+            views.get("form")?.fields !== undefined
+              ? onTreeRowClicked
+              : undefined
+          }
           showPagination={false}
           rowSelection={{
             selectedRowKeys,
@@ -590,18 +598,6 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     return <Alert className="mt-10" message={error} type="error" banner />;
   }
 
-  if (noFieldsForm || noFieldsTree) {
-    const mode = noFieldsTree ? "tree" : "form";
-    return (
-      <Alert
-        className="mt-10"
-        message={`No fields in ${mode} view for model ${relation}`}
-        type="error"
-        banner
-      />
-    );
-  }
-
   // If we are in create mode we have to show the modal in continuous mode.
   // This means the modal won't close after clicking OK, the modal will add the new item
   // and will reset to defaults to let the user add a new item.
@@ -628,6 +624,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         onNextItem={nextItem}
         onSearchItem={searchItem}
         selectedRowKeys={selectedRowKeys}
+        showCreateButton={views.get("form")?.fields !== undefined}
+        showToggleButton={views.size > 1}
       />
       {content()}
       <FormModal

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

@@ -27,6 +27,8 @@ type One2manyTopBarProps = {
   onNextItem: () => void;
   onSearchItem: () => void;
   selectedRowKeys: string[];
+  showToggleButton: boolean;
+  showCreateButton: boolean;
 };
 
 export const One2manyTopBar = (props: One2manyTopBarProps) => {
@@ -44,6 +46,8 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
     isMany2Many,
     onSearchItem,
     selectedRowKeys,
+    showCreateButton,
+    showToggleButton,
   } = props;
 
   function separator() {
@@ -112,7 +116,7 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
     <div className="flex mb-2">
       {title()}
       <div className="h-8 flex-none pl-2">
-        {mode !== "graph" && (
+        {mode !== "graph" && showCreateButton && (
           <ButtonWithTooltip
             tooltip={"Create new item"}
             icon={<FileAddOutlined />}
@@ -120,7 +124,7 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
             onClick={onCreateItem}
           />
         )}
-        {isMany2Many && (
+        {isMany2Many && showCreateButton && (
           <ButtonWithTooltip
             tooltip={"Search existing item"}
             icon={<SearchOutlined />}
@@ -132,11 +136,13 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
         {mode !== "graph" && deleteButton()}
         {mode === "form" && itemBrowser()}
         {separator()}
-        <ButtonWithTooltip
-          tooltip={"Toggle view mode"}
-          icon={<AlignLeftOutlined />}
-          onClick={onToggleViewMode}
-        />
+        {showToggleButton && (
+          <ButtonWithTooltip
+            tooltip={"Toggle view mode"}
+            icon={<AlignLeftOutlined />}
+            onClick={onToggleViewMode}
+          />
+        )}
       </div>
     </div>
   );

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -208,7 +208,8 @@ function DashboardTree(props: Props) {
     }
   }, [action, model]);
 
-  const onRowClickedHandler = (id: number) => {
+  const onRowClickedHandler = (record: any) => {
+    const { id } = record;
     onRowClicked({
       id,
       model: currentModel!,

package/src/widgets/views/SearchTree.tsx

@@ -430,7 +430,8 @@ function SearchTree(props: Props, ref: any) {
     internalLimit.current = newLimit;
   };
 
-  const onRowClickedHandler = (id: number) => {
+  const onRowClickedHandler = (record: any) => {
+    const { id } = record;
     onRowClicked({
       id,
       model: currentModel!,

package/src/widgets/views/Tree.tsx

@@ -21,7 +21,7 @@ type Props = {
   results: Array<any>;
   showPagination?: boolean;
   onRequestPageChange?: (page: number, pageSize?: number) => void;
-  onRowClicked?: (id: number) => void;
+  onRowClicked?: (record: any) => void;
   rowSelection?: any;
   scrollY?: number;
   colorsForResults?: { [key: number]: string };
@@ -234,20 +234,13 @@ function Tree(props: Props): React.ReactElement {
         dataSource={items}
         loading={loading}
         loadingComponent={<Spin />}
-        onRow={(record: any) => {
-          let style = undefined;
-
+        onRowStyle={(record: any) => {
           if (colorsForResults![record.id]) {
-            style = { color: colorsForResults![record.id] };
+            return { color: colorsForResults![record.id] };
           }
-
-          return {
-            style,
-            onDoubleClick: () => {
-              if (onRowClicked) onRowClicked(record.id);
-            },
-          };
+          return undefined;
         }}
+        onRowDoubleClick={onRowClicked}
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}
         sorter={sorter}