sanity-plugin-workflow 1.0.0-beta.5 → 1.0.0-beta.7

package/lib/index.js

@@ -646,7 +646,7 @@ function useWorkflowDocuments(schemaTypes) {
       setLocalDocuments(data);
     }
   }, [data]);
-  const move = React__default.default.useCallback((draggedId, destination, states, newOrder) => {
+  const move = React__default.default.useCallback(async (draggedId, destination, states, newOrder) => {
     const currentLocalData = localDocuments;
     const newLocalDocuments = localDocuments.map(item => {
       var _a;
@@ -693,25 +693,28 @@ function useWorkflowDocuments(schemaTypes) {
       _type
     } = document;
     const {
-      _rev,
-      documentId
+      documentId,
+      _rev
     } = document._metadata || {};
-    client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
+    await client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
       state: newStateId,
       orderRank: newOrder
-    }).commit().then(() => {
+    }).commit().then(res => {
       var _a;
-      return toast.push({
+      toast.push({
         title: "Moved to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
         status: "success"
       });
-    }).catch(() => {
+      return res;
+    }).catch(err => {
       var _a;
       setLocalDocuments(currentLocalData);
-      return toast.push({
+      toast.push({
         title: "Failed to move to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
+        description: err.message,
         status: "error"
       });
+      return null;
     });
     return {
       _id,
@@ -825,31 +828,44 @@ function CompleteButton(props) {
     apiVersion: API_VERSION
   });
   const toast = ui.useToast();
-  const handleComplete = React__default.default.useCallback(id => {
+  const handleComplete = React__default.default.useCallback(event => {
+    const id = event.currentTarget.value;
+    if (!id) {
+      return;
+    }
     client.delete("workflow-metadata.".concat(id)).then(() => {
       toast.push({
         status: "success",
-        title: "Workflow completed",
-        description: id
+        title: "Workflow completed"
       });
     }).catch(() => {
       toast.push({
         status: "error",
-        title: "Could not complete Workflow",
-        description: id
+        title: "Could not complete Workflow"
       });
     });
   }, [client, toast]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-    onClick: () => handleComplete(documentId),
-    text: "Complete",
-    icon: icons.CheckmarkIcon,
-    tone: "positive",
-    mode: "ghost",
-    fontSize: 1,
-    padding: 2,
-    tabIndex: -1,
-    disabled
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+        size: 1,
+        children: "Remove this document from Workflow"
+      })
+    }),
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      value: documentId,
+      onClick: handleComplete,
+      text: "Complete",
+      icon: icons.CheckmarkIcon,
+      tone: "positive",
+      mode: "ghost",
+      fontSize: 1,
+      padding: 2,
+      tabIndex: -1,
+      disabled
+    })
   });
 }
 function TimeAgo(_ref2) {
@@ -966,6 +982,7 @@ function DocumentCard(props) {
   var _a, _b;
   const {
     isDragDisabled,
+    isPatching,
     userRoleCanDrop,
     isDragging,
     item,
@@ -999,6 +1016,7 @@ function DocumentCard(props) {
     let tone = defaultCardTone;
     if (!userRoleCanDrop) return isDarkMode ? "default" : "transparent";
     if (!documentId) return tone;
+    if (isPatching) tone = isDarkMode ? "default" : "transparent";
     if (isDragging) tone = "positive";
     if ((state == null ? void 0 : state.requireValidation) && !isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
@@ -1008,7 +1026,7 @@ function DocumentCard(props) {
       }
     }
     return tone;
-  }, [defaultCardTone, userRoleCanDrop, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
+  }, [defaultCardTone, userRoleCanDrop, isPatching, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
   React.useEffect(() => {
     if (!isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
@@ -1054,7 +1072,7 @@ function DocumentCard(props) {
               children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsxRuntime.jsx(sanity.Preview, {
-                  layout: "default",
+                  layout: "block",
                   value: item,
                   schemaType: schema.get(item._type)
                 })
@@ -1062,14 +1080,14 @@ function DocumentCard(props) {
                 style: {
                   flexShrink: 0
                 },
-                children: hasError || isDragDisabled ? null : /* @__PURE__ */jsxRuntime.jsx(icons.DragHandleIcon, {})
+                children: hasError || isDragDisabled || isPatching ? null : /* @__PURE__ */jsxRuntime.jsx(icons.DragHandleIcon, {})
               })]
             })
-          }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
             padding: 2,
             radius: 2,
             tone: "inherit",
-            children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+            children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
               align: "center",
               justify: "space-between",
               gap: 3,
@@ -1091,11 +1109,17 @@ function DocumentCard(props) {
                 id: item._id,
                 type: item._type,
                 disabled: !userRoleCanDrop
-              }), isLastState ? /* @__PURE__ */jsxRuntime.jsx(CompleteButton, {
+              }), isLastState && states.length <= 3 ? /* @__PURE__ */jsxRuntime.jsx(CompleteButton, {
                 documentId,
                 disabled: !userRoleCanDrop
               }) : null]
-            })
+            }), isLastState && states.length > 3 ? /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
+              paddingTop: 2,
+              children: /* @__PURE__ */jsxRuntime.jsx(CompleteButton, {
+                documentId,
+                disabled: !userRoleCanDrop
+              })
+            }) : null]
           })]
         })
       })
@@ -1106,6 +1130,7 @@ function DocumentList(props) {
   const {
     data = [],
     invalidDocumentIds,
+    patchingIds,
     selectedSchemaTypes,
     selectedUserIds,
     state,
@@ -1127,7 +1152,7 @@ function DocumentList(props) {
       return (_c = (_b = (_a = dataFiltered[index]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.documentId) != null ? _c : index;
     },
     estimateSize: () => 113,
-    overscan: 5
+    overscan: 10
   });
   if (!data.length) {
     return null;
@@ -1154,7 +1179,7 @@ function DocumentList(props) {
       }
       const isInvalid = invalidDocumentIds.includes(documentId);
       const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
-      const isDragDisabled = !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
+      const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
       return /* @__PURE__ */jsxRuntime.jsx(dnd.Draggable, {
         draggableId: documentId,
         index: virtualItem.index,
@@ -1166,6 +1191,7 @@ function DocumentList(props) {
           children: /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
             userRoleCanDrop,
             isDragDisabled,
+            isPatching: patchingIds.includes(documentId),
             isDragging: draggableSnapshot.isDragging,
             item,
             toggleInvalidDocumentId,
@@ -1291,7 +1317,7 @@ function Filters(props) {
             icon: icons.ResetIcon
           }) : null]
         })
-      }), schemaTypes.length > 0 ? /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+      }), schemaTypes.length > 1 ? /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
         align: "center",
         gap: 1,
         children: schemaTypes.map(typeName => {
@@ -1339,7 +1365,8 @@ function StateTitle(props) {
     requireAssignment,
     userRoleCanDrop,
     isDropDisabled,
-    draggingFrom
+    draggingFrom,
+    documentCount
   } = props;
   let tone = "default";
   const isSource = draggingFrom === state.id;
@@ -1364,7 +1391,15 @@ function StateTitle(props) {
       }), requireAssignment ? /* @__PURE__ */jsxRuntime.jsx(Status, {
         text: "You must be assigned to the document to move documents to this State",
         icon: icons.UserIcon
-      }) : null]
+      }) : null, /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        flex: 1,
+        children: documentCount > 0 ? /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          weight: "semibold",
+          align: "right",
+          size: 1,
+          children: documentCount
+        }) : null
+      })]
     })
   });
 }
@@ -1434,6 +1469,17 @@ function Verify(props) {
     } = (_a = cur._metadata) != null ? _a : {};
     return !orderRank && documentId ? [...acc, documentId] : acc;
   }, []) : [];
+  const documentsWithDuplicatedOrderIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
+    var _a;
+    const {
+      documentId,
+      orderRank
+    } = (_a = cur._metadata) != null ? _a : {};
+    return orderRank && data.filter(d => {
+      var _a2;
+      return ((_a2 = d._metadata) == null ? void 0 : _a2.orderRank) === orderRank;
+    }).length > 1 && documentId ? [...acc, documentId] : acc;
+  }, []) : [];
   const correctDocuments = React__default.default.useCallback(async ids => {
     toast.push({
       title: "Correcting...",
@@ -1481,16 +1527,21 @@ function Verify(props) {
     });
   }, [client, data, toast, userList]);
   const addOrderToDocuments = React__default.default.useCallback(async ids => {
-    var _a, _b;
     toast.push({
       title: "Adding ordering...",
       status: "info"
     });
-    const firstOrder = (_b = (_a = data[0]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.orderRank;
-    let newLexo = firstOrder && data.length !== ids.length ? lexorank.LexoRank.parse(firstOrder) : lexorank.LexoRank.min();
+    const [firstOrder, secondOrder] = [...data].slice(0, 2).map(d => {
+      var _a;
+      return (_a = d._metadata) == null ? void 0 : _a.orderRank;
+    });
+    const minLexo = firstOrder && data.length !== ids.length ? lexorank.LexoRank.parse(firstOrder) : lexorank.LexoRank.min();
+    const maxLexo = secondOrder && data.length !== ids.length ? lexorank.LexoRank.parse(secondOrder) : lexorank.LexoRank.max();
+    let newLexo = minLexo.between(maxLexo);
+    const lastLexo = maxLexo;
     const tx = client.transaction();
     for (let index = 0; index < ids.length; index += 1) {
-      newLexo = newLexo.genNext().genNext();
+      newLexo = newLexo.between(lastLexo);
       tx.patch("workflow-metadata.".concat(ids[index]), {
         set: {
           orderRank: newLexo.toString()
@@ -1534,6 +1585,10 @@ function Verify(props) {
       tone: "caution",
       onClick: () => addOrderToDocuments(documentsWithoutOrderIds),
       text: documentsWithoutOrderIds.length === 1 ? "Set Order for 1 Document" : "Set Order for ".concat(documentsWithoutOrderIds.length, " Documents")
+    }) : null, documentsWithDuplicatedOrderIds.length > 0 ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      tone: "caution",
+      onClick: () => addOrderToDocuments(documentsWithDuplicatedOrderIds),
+      text: documentsWithDuplicatedOrderIds.length === 1 ? "Set Unique Order for 1 Document" : "Set Unique Order for ".concat(documentsWithDuplicatedOrderIds.length, " Documents")
     }) : null, orphanedMetadataDocumentIds.length > 0 ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
       text: "Cleanup orphaned metadata",
       onClick: handleOrphans,
@@ -1549,6 +1604,7 @@ function WorkflowTool(props) {
   } = (_b = (_a = props == null ? void 0 : props.tool) == null ? void 0 : _a.options) != null ? _b : {};
   const isDarkMode = ui.useTheme().sanity.color.dark;
   const defaultCardTone = isDarkMode ? "default" : "transparent";
+  const toast = ui.useToast();
   const userList = sanityPluginUtils.useProjectUsers({
     apiVersion: API_VERSION
   });
@@ -1558,6 +1614,7 @@ function WorkflowTool(props) {
     workflowData,
     operations
   } = useWorkflowDocuments(schemaTypes);
+  const [patchingIds, setPatchingIds] = React__default.default.useState([]);
   const {
     data,
     loading,
@@ -1605,7 +1662,7 @@ function WorkflowTool(props) {
       setUndroppableStates(undroppableExceptSelf);
     }
   }, [data, states, user]);
-  const handleDragEnd = React__default.default.useCallback(result => {
+  const handleDragEnd = React__default.default.useCallback(async result => {
     var _a2, _b2, _c2, _d, _e, _f;
     setUndroppableStates([]);
     setDraggingFrom("");
@@ -1622,26 +1679,65 @@ function WorkflowTool(props) {
       return;
     }
     const destinationStateItems = [...filterItemsAndSort(data, destination.droppableId, [], null)];
+    const destinationStateIndex = states.findIndex(s => s.id === destination.droppableId);
+    const globalStateMinimumRank = data[0]._metadata.orderRank;
+    const globalStateMaximumRank = data[data.length - 1]._metadata.orderRank;
     let newOrder;
     if (!destinationStateItems.length) {
-      newOrder = lexorank.LexoRank.min().toString();
+      if (destinationStateIndex === 0) {
+        newOrder = lexorank.LexoRank.min().toString();
+      } else {
+        newOrder = lexorank.LexoRank.parse(globalStateMinimumRank).between(lexorank.LexoRank.min()).toString();
+      }
     } else if (destination.index === 0) {
       const firstItemOrderRank = (_b2 = (_a2 = [...destinationStateItems].shift()) == null ? void 0 : _a2._metadata) == null ? void 0 : _b2.orderRank;
-      newOrder = firstItemOrderRank && typeof firstItemOrderRank === "string" ? lexorank.LexoRank.parse(firstItemOrderRank).genPrev().toString() : lexorank.LexoRank.min().toString();
+      if (firstItemOrderRank && typeof firstItemOrderRank === "string") {
+        newOrder = lexorank.LexoRank.parse(firstItemOrderRank).genPrev().toString();
+      } else if (destinationStateIndex === 0) {
+        newOrder = lexorank.LexoRank.min().toString();
+      } else {
+        newOrder = lexorank.LexoRank.parse(globalStateMinimumRank).between(lexorank.LexoRank.min()).toString();
+      }
     } else if (destination.index + 1 === destinationStateItems.length) {
       const lastItemOrderRank = (_d = (_c2 = [...destinationStateItems].pop()) == null ? void 0 : _c2._metadata) == null ? void 0 : _d.orderRank;
-      newOrder = lastItemOrderRank && typeof lastItemOrderRank === "string" ? lexorank.LexoRank.parse(lastItemOrderRank).genNext().toString() : lexorank.LexoRank.min().toString();
+      if (lastItemOrderRank && typeof lastItemOrderRank === "string") {
+        newOrder = lexorank.LexoRank.parse(lastItemOrderRank).genNext().toString();
+      } else if (destinationStateIndex === states.length - 1) {
+        newOrder = lexorank.LexoRank.max().toString();
+      } else {
+        newOrder = lexorank.LexoRank.parse(globalStateMaximumRank).between(lexorank.LexoRank.min()).toString();
+      }
     } else {
       const itemBefore = destinationStateItems[destination.index - 1];
       const itemBeforeRank = (_e = itemBefore == null ? void 0 : itemBefore._metadata) == null ? void 0 : _e.orderRank;
-      const itemBeforeRankParsed = itemBeforeRank ? lexorank.LexoRank.parse(itemBeforeRank) : lexorank.LexoRank.min();
+      let itemBeforeRankParsed;
+      if (itemBeforeRank) {
+        itemBeforeRankParsed = lexorank.LexoRank.parse(itemBeforeRank);
+      } else if (destinationStateIndex === 0) {
+        itemBeforeRankParsed = lexorank.LexoRank.min();
+      } else {
+        itemBeforeRankParsed = lexorank.LexoRank.parse(globalStateMinimumRank);
+      }
       const itemAfter = destinationStateItems[destination.index];
       const itemAfterRank = (_f = itemAfter == null ? void 0 : itemAfter._metadata) == null ? void 0 : _f.orderRank;
-      const itemAfterRankParsed = itemAfterRank ? lexorank.LexoRank.parse(itemAfterRank) : lexorank.LexoRank.max();
+      let itemAfterRankParsed;
+      if (itemAfterRank) {
+        itemAfterRankParsed = lexorank.LexoRank.parse(itemAfterRank);
+      } else if (destinationStateIndex === states.length - 1) {
+        itemAfterRankParsed = lexorank.LexoRank.max();
+      } else {
+        itemAfterRankParsed = lexorank.LexoRank.parse(globalStateMaximumRank);
+      }
       newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString();
     }
-    move(draggableId, destination, states, newOrder);
-  }, [data, move, states]);
+    setPatchingIds([...patchingIds, draggableId]);
+    toast.push({
+      status: "info",
+      title: "Updating document state..."
+    });
+    await move(draggableId, destination, states, newOrder);
+    setPatchingIds(ids => ids.filter(id => id !== draggableId));
+  }, [data, patchingIds, toast, move, states]);
   const uniqueAssignedUsers = React__default.default.useMemo(() => {
     const uniqueUserIds = data.reduce((acc, item) => {
       var _a2;
@@ -1668,6 +1764,30 @@ function WorkflowTool(props) {
   const toggleInvalidDocumentId = React__default.default.useCallback((docId, action) => {
     setInvalidDocumentIds(prev => action === "ADD" ? [...prev, docId] : prev.filter(id => id !== docId));
   }, []);
+  const Clone = React__default.default.useCallback((provided, snapshot, rubric) => {
+    const item = data.find(doc => {
+      var _a2;
+      return ((_a2 = doc == null ? void 0 : doc._metadata) == null ? void 0 : _a2.documentId) === rubric.draggableId;
+    });
+    return /* @__PURE__ */jsxRuntime.jsx("div", {
+      ...provided.draggableProps,
+      ...provided.dragHandleProps,
+      ref: provided.innerRef,
+      children: item ? /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
+        isDragDisabled: false,
+        isPatching: false,
+        userRoleCanDrop: true,
+        isDragging: snapshot.isDragging,
+        item,
+        states,
+        toggleInvalidDocumentId,
+        userList
+      }) : /* @__PURE__ */jsxRuntime.jsx(sanityPluginUtils.Feedback, {
+        title: "Item not found",
+        tone: "caution"
+      })
+    });
+  }, [data, states, toggleInvalidDocumentId, userList]);
   if (!(states == null ? void 0 : states.length)) {
     return /* @__PURE__ */jsxRuntime.jsx(ui.Container, {
       width: 1,
@@ -1726,36 +1846,15 @@ function WorkflowTool(props) {
                 requireAssignment: (_b2 = state.requireAssignment) != null ? _b2 : false,
                 userRoleCanDrop,
                 isDropDisabled,
-                draggingFrom
+                draggingFrom,
+                documentCount: filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes).length
               }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsxRuntime.jsx(dnd.Droppable, {
                   droppableId: state.id,
                   isDropDisabled,
                   mode: "virtual",
-                  renderClone: (provided, snapshot, rubric) => {
-                    const item = data.find(doc => {
-                      var _a3;
-                      return ((_a3 = doc == null ? void 0 : doc._metadata) == null ? void 0 : _a3.documentId) === rubric.draggableId;
-                    });
-                    return /* @__PURE__ */jsxRuntime.jsx("div", {
-                      ...provided.draggableProps,
-                      ...provided.dragHandleProps,
-                      ref: provided.innerRef,
-                      children: item ? /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
-                        isDragDisabled: false,
-                        userRoleCanDrop,
-                        isDragging: snapshot.isDragging,
-                        item,
-                        states,
-                        toggleInvalidDocumentId,
-                        userList
-                      }) : /* @__PURE__ */jsxRuntime.jsx(sanityPluginUtils.Feedback, {
-                        title: "Item not found",
-                        tone: "caution"
-                      })
-                    });
-                  },
+                  renderClone: Clone,
                   children: (provided, snapshot) => /* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
                     ref: provided.innerRef,
                     tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
@@ -1771,6 +1870,7 @@ function WorkflowTool(props) {
                     }) : null, /* @__PURE__ */jsxRuntime.jsx(DocumentList, {
                       data,
                       invalidDocumentIds,
+                      patchingIds,
                       selectedSchemaTypes,
                       selectedUserIds,
                       state,