Merge pull request #1 from DennisSnijder/feature/no-status-column

[Feature] Collapsible "No status" column

Author: DennisSnijder

README.md

@@ -25,7 +25,8 @@ const config = buildConfig({
           {value: 'ready-for-review', label: 'Ready for review'},
           {value: 'published', label: 'Published'},
         ],
-        defaultStatus: 'draft'
+        defaultStatus: 'draft',
+        hideNoStatusColumn: false
       }
     })
   ],
@@ -44,7 +45,7 @@ Upcoming Features / Ideas. Have a suggestion for the plugin? Feel free to open a
 
 - [ ] Customize card properties (currently displays `title` and `createdAt`)
 - [ ] Edit relationships directly from the card (e.g., assigning users to a document)
-- [ ] Toggleable column for posts without a workflow status (Currently, documents lacking `workflowStatus` aren't visible on the board)
+- [X] Toggleable column for posts without a workflow status (Currently, documents lacking `workflowStatus` aren't visible on the board)
 - [ ] Lazy loading of column contents when scrolling (Currently, board only shows `defaultLimit` amount of cards)
 - [ ] Permissions for changing statuses
 - [ ] Allowed transitions between statuses

dev/src/payload.config.ts

@@ -41,7 +41,8 @@ export default buildConfig({
           {value: 'ready-for-review', label: 'Ready for review'},
           {value: 'published', label: 'Published'},
         ],
-        defaultStatus: 'draft'
+        defaultStatus: 'draft',
+        hideNoStatusColumn: false
       }
     })
   ],

preview.png

@@ -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(() => {
@@ -138,9 +145,20 @@ const Board = (props: BoardInterface) => {
           { ...provided.droppableProps }
         >
           <div className="scrumboard-body">
+
+            { !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/Board/Board.tsx

@@ -1,33 +1,43 @@
-import React from 'react'
+import React, { useState } from 'react'
 import BoardCardList from "./../BoardCardList/BoardCardList";
 
 import './styles.scss';
 import { CollectionConfig } from "payload/types";
+import { Chevron } from "payload/components";
+
 const baseClass = 'board-column';
 
 interface BoardColumProps {
   collection: CollectionConfig;
   title: string;
   identifier: string;
-  contents: any[]
+  contents: any[];
+  collapsible?: boolean;
 }
 
 const BoardColumn = (props: BoardColumProps) => {
-  const {title, identifier, contents, collection} = props
+  const {title, identifier, contents, collection, collapsible} = props
+
+  const [ isCollapsed, setCollapsed ] = useState(!!collapsible);
 
   return (
     <div
-      className={`${baseClass}__wrapper`}
+      className={ `${ baseClass }__wrapper ${ isCollapsed ? `${ baseClass }__collapsed` : '' }` }
     >
-      <div className={`${baseClass}__header`}>
+      <div
+        className={ `${ baseClass }__header ${ isCollapsed ? `${ baseClass }__header_collapsed` : '' }` }
+      >
         <h4>{ title } <span>{ contents?.length }</span></h4>
+        { collapsible && <div onClick={ () => setCollapsed(!isCollapsed) } className={ `${ baseClass }__collapse` }>
+            <Chevron/>
+        </div> }
       </div>
 
-      <BoardCardList
-        listId={ identifier }
-        contents={ contents }
-        collection={collection}
-      />
+      { !isCollapsed && <BoardCardList
+          listId={ identifier }
+          contents={ contents }
+          collection={ collection }
+      /> }
     </div>
   )
 }

src/components/BoardColumn/BoardColumn.tsx

@@ -3,6 +3,10 @@
 .board-column {
 
   &__wrapper {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+
     display: flex;
     flex-direction: column;
     margin-bottom: 3rem;
@@ -13,9 +17,48 @@
     border-right: 1px solid var(--theme-elevation-100);
   }
 
+  &__collapsed {
+    min-width: auto;
+    width: base(2.25);
+    white-space: nowrap;
+  }
+
+  &__collapse {
+    cursor: pointer;
+
+    svg {
+      margin-right: 1rem;
+      transform: rotate(90deg);
+    }
+  }
+
+  &__header_collapsed {
+    transform: translateY(-(base(1.125))) rotate(90deg); /* Rotate the container 90 degrees */
+    transform-origin: bottom left; /* Set the rotation origin to the top left corner */
+    margin: 0;
+    flex-direction: row-reverse;
+    justify-content: flex-end !important;
+
+    h4 {
+      padding-left: 0 !important;
+    }
+
+    svg {
+      margin-right: 1rem;
+      transform: rotate(180deg);
+    }
+
+
+  }
+
   &__header {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 $baseline;
+
     h4 {
       padding-left: 1rem;
+      margin-bottom: 0;
 
       span {
         font-size: 0.9em;

src/components/BoardColumn/styles.scss

@@ -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/components/WorkflowView/WorkflowView.tsx

@@ -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/index.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)
+    });
+}