Added documents without a workflowStatus to the configurable no status column

Author: DennisSnijder

src/components/Board/Board.tsx

@@ -3,19 +3,26 @@ import { DragDropContext, Droppable, DropResult } from "react-beautiful-dnd";
 import BoardColumn from "./../BoardColumn/BoardColumn";
 import { CollectionConfig, SelectField } from "payload/types";
 import { LexoRank } from "lexorank";
-import { sortAndFilterDocumentsForStatus } from "../../utils/documents.util";
+import { sortAndFilterDocumentsForStatus, sortAndFilterDocumentsWithoutStatus } from "../../utils/documents.util";
 
 import './styles.scss';
 
 interface BoardInterface {
   collection: CollectionConfig;
   statusDefinition: SelectField;
+  hideNoStatusColumn?: boolean;
   documents: any[];
   onDocumentWorkflowStatusChange: (documentId: string, workflowStatus: string, orderRank: string) => void;
 }
 
 const Board = (props: BoardInterface) => {
-  const {statusDefinition, documents: initDocuments, onDocumentWorkflowStatusChange, collection} = props;
+  const {
+    statusDefinition,
+    documents: initDocuments,
+    hideNoStatusColumn,
+    onDocumentWorkflowStatusChange,
+    collection
+  } = props;
   const [ documents, setDocuments ] = useState(initDocuments ?? []);
 
   useEffect(() => {
@@ -139,16 +146,19 @@ const Board = (props: BoardInterface) => {
         >
           <div className="scrumboard-body">
 
-            <BoardColumn
-              collection={collection}
-              title={'No status'}
-              identifier={'null'} contents={[]}
-              collapsible={true}
-            />
+            { !hideNoStatusColumn &&
+                <BoardColumn
+                    collection={ collection }
+                    title={ 'No status' }
+                    identifier={ 'null' }
+                    contents={ sortAndFilterDocumentsWithoutStatus(documents) }
+                    collapsible={ true }
+                />
+            }
 
             { statusDefinition.options.map((status: any) => (
               <BoardColumn
-                collection={collection}
+                collection={ collection }
                 key={ status.value }
                 title={ status.label }
                 identifier={ status.value }

src/components/WorkflowView/WorkflowView.tsx

@@ -13,12 +13,13 @@ import DefaultList from "payload/dist/admin/components/views/collections/List/De
 import WorkflowViewHeader from "../WorkflowViewHeader/WorkflowViewHeader";
 import { requests } from "payload/dist/admin/api";
 import Board from "../Board/Board";
+import { PluginCollectionConfig } from "../../index";
 
 import './styles.scss';
 
 const baseClass = 'scrumboard';
 
-export const WorkflowView = (props: ListProps) => {
+export const WorkflowView = (config: PluginCollectionConfig) => (props: ListProps) => {
 
   const {
     collection,
@@ -55,7 +56,7 @@ export const WorkflowView = (props: ListProps) => {
   const handleDocumentWorkflowStatusChange = (documentId: string, workflowStatus: string, workflowOrderRank: string) => {
     requests.patch(`${ serverURL }${ api }/${ collectionSlug }/${ documentId }`, {
       body: JSON.stringify({
-        workflowStatus: workflowStatus,
+        workflowStatus: workflowStatus === 'null' ? null : workflowStatus,
         workflowOrderRank: workflowOrderRank
       }),
       headers: {
@@ -110,6 +111,7 @@ export const WorkflowView = (props: ListProps) => {
         <Board
           collection={ collection }
           documents={ data.docs }
+          hideNoStatusColumn={config.hideNoStatusColumn}
           statusDefinition={ statusDefinition }
           onDocumentWorkflowStatusChange={ handleDocumentWorkflowStatusChange }
         />

src/index.ts

@@ -7,6 +7,7 @@ import { generateOrderRank } from "./hooks/generateOrderRank";
 export interface PluginCollectionConfig {
   statuses: OptionObject[],
   defaultStatus?: string;
+  hideNoStatusColumn?: boolean;
 }
 
 
@@ -57,7 +58,7 @@ const extendCollectionConfig = (
       },
       components: {
         views: {
-          List: WorkflowView
+          List: WorkflowView(collectionPluginConfig)
         }
       }
     }

src/utils/documents.util.ts

@@ -7,4 +7,15 @@ export const sortAndFilterDocumentsForStatus = (documents: any[] = [], status: s
 
       return aOrderRank.localeCompare(bOrderRank)
     });
-};
+};
+
+export const sortAndFilterDocumentsWithoutStatus = (documents: any[] = []) => {
+  return documents
+    .filter((_doc) => !_doc.workflowStatus || _doc.workflowStatus === 'null')
+    .sort((a, b) => {
+      const aOrderRank = a.workflowOrderRank || '0'
+      const bOrderRank = b.workflowOrderRank || '0'
+
+      return aOrderRank.localeCompare(bOrderRank)
+    });
+}