Docopsv2/views managing columns

package.json

@@ -182,6 +182,7 @@
     "is-svg": "^4.3.1",
     "js-yaml": "^4.0.0",
     "ky": "^0.26.0",
+    "lexorank": "^1.0.4",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",

src/cloud/components/DashboardPage/index.tsx

@@ -142,12 +142,13 @@ const SmartViewPage = ({ data }: SmartViewListPageResponseBody) => {
               <Icon path={mdiChevronDown} />
             </Button>
           </Flexbox>
-          {selectedSmartView != null ? (
+          {selectedSmartView != null && team != null ? (
             <>
               {sendingMap.get(selectedSmartView.id) === 'list-views' ? (
                 <Spinner />
               ) : (
                 <Views
+                  team={team}
                   views={selectedSmartViewViews}
                   parent={{ type: 'smartView', target: selectedSmartView }}
                   docs={selectedSmartViewDocs}

src/cloud/components/Props/Pickers/AssigneeSelect.tsx

@@ -16,13 +16,15 @@ interface AssigneeSelectProps {
   update: (value: string[]) => void
   isLoading: boolean
   readOnly: boolean
+  isErrored?: boolean
   popupAlignment?: 'bottom-left' | 'top-left'
 }
 
 const AssigneeSelect = ({
   disabled = false,
   defaultValue,
   isLoading,
+  isErrored,
   readOnly,
   update,
   popupAlignment = 'bottom-left',
@@ -60,6 +62,7 @@ const AssigneeSelect = ({
       <PropertyValueButton
         disabled={disabled}
         sending={isLoading}
+        isErrored={isErrored}
         empty={defaultValue.length === 0}
         isReadOnly={readOnly}
         iconPath={

src/cloud/components/Props/Pickers/DueDateSelect.tsx

@@ -22,13 +22,15 @@ interface DueDateSelectProps {
   disabled?: boolean
   shortenedLabel?: boolean
   portalId?: string
+  isErrored?: boolean
 }
 
 const DueDateSelect = ({
   className,
   sending,
   disabled,
   isReadOnly,
+  isErrored,
   shortenedLabel,
   dueDate: dueDateString,
   onDueDateChange,
@@ -71,6 +73,7 @@ const DueDateSelect = ({
             sending={sending}
             empty={dueDate == null}
             isReadOnly={isReadOnly}
+            isErrored={isErrored}
             iconPath={
               !isDue ? mdiCalendarMonthOutline : mdiCalendarRemoveOutline
             }

src/cloud/components/Props/Pickers/PropertyValueButton.tsx

@@ -12,6 +12,7 @@ interface PropertyValueButtonProps {
   sending?: boolean
   empty?: boolean
   isReadOnly: boolean
+  isErrored?: boolean
   id?: string
   className?: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
@@ -30,6 +31,7 @@ const PropertyValueButton = forwardRef<
       empty,
       onClick,
       isReadOnly,
+      isErrored,
       className,
       id,
     },
@@ -45,6 +47,7 @@ const PropertyValueButton = forwardRef<
           'item__property__button',
           empty && 'item__property__button--empty',
           isReadOnly && 'item__property__button--readOnly',
+          isErrored && 'item__property__button--errored',
           className,
         ])}
       >
@@ -127,4 +130,12 @@ const ButtonContainer = styled.button`
       }
     }
   }
+
+  &.item__property__button--errored {
+    background-color: rgba(100, 4, 4, 0.2) !important;
+
+    &:hover {
+      background-color: rgba(100, 4, 4, 0.2) !important;
+    }
+  }
 `

src/cloud/components/Props/Pickers/StatusSelect.tsx

@@ -23,6 +23,7 @@ interface StatusSelectProps {
   sending?: boolean
   status?: DocStatus | null
   disabled?: boolean
+  isErrored?: boolean
   isReadOnly: boolean
   onClick?: (event: React.MouseEvent) => void
   onStatusChange: (status: DocStatus | null) => void
@@ -32,6 +33,7 @@ const StatusSelect = ({
   status,
   sending,
   disabled,
+  isErrored,
   isReadOnly,
   onStatusChange,
   onClick,
@@ -41,6 +43,7 @@ const StatusSelect = ({
     <Container className='item__status__select prop__margin'>
       <PropertyValueButton
         sending={sending}
+        isErrored={isErrored}
         isReadOnly={isReadOnly}
         empty={status == null}
         disabled={disabled}

src/cloud/components/Props/Pickers/TimePeriodPicker.tsx

@@ -20,6 +20,7 @@ interface TimePeriodPickerProps {
   value?: number | null
   disabled?: boolean
   isReadOnly?: boolean
+  isErrored?: boolean
   onPeriodChange: (newVal: number | null) => void
   popupAlignment?: 'bottom-left' | 'top-left'
 }
@@ -29,6 +30,7 @@ const TimePeriodPicker = ({
   disabled,
   sending,
   value,
+  isErrored,
   isReadOnly = false,
   popupAlignment = 'bottom-left',
   onPeriodChange,
@@ -70,6 +72,7 @@ const TimePeriodPicker = ({
         disabled={disabled}
         empty={parsedValue == null}
         isReadOnly={isReadOnly}
+        isErrored={isErrored}
         iconPath={mdiClockOutline}
         sending={sending}
         onClick={(e) =>

src/cloud/components/Props/PropPicker.tsx

@@ -18,6 +18,7 @@ interface PropPickerProps {
   propName: string
   propData: SerializedPropData
   readOnly?: boolean
+  isErrored?: boolean
   onUpdate?: (newProps: Props) => void
   portalId?: string
 }
@@ -28,6 +29,7 @@ const PropPicker = ({
   propData,
   onUpdate,
   readOnly = false,
+  isErrored,
   portalId,
 }: PropPickerProps) => {
   const { sendingMap, updateDocPropsApi } = useCloudApi()
@@ -52,6 +54,7 @@ const PropPicker = ({
         <AssigneeSelect
           disabled={sendingMap.get(parent.target.id) != null || readOnly}
           isLoading={sendingMap.get(parent.target.id) === propName}
+          isErrored={isErrored}
           readOnly={readOnly}
           defaultValue={
             propData.data != null
@@ -76,6 +79,7 @@ const PropPicker = ({
         <DueDateSelect
           disabled={sendingMap.get(parent.target.id) != null || readOnly}
           sending={sendingMap.get(parent.target.id) === propName}
+          isErrored={isErrored}
           isReadOnly={readOnly}
           portalId={portalId}
           dueDate={propData.data == null ? null : propData.data.toString()}
@@ -105,6 +109,7 @@ const PropPicker = ({
                 ? (propData.data as DocStatus)
                 : null
             }
+            isErrored={isErrored}
             sending={sendingMap.get(parent.target.id) === 'status'}
             disabled={sendingMap.get(parent.target.id) != null || readOnly}
             isReadOnly={readOnly}
@@ -133,6 +138,7 @@ const PropPicker = ({
           <TimePeriodPicker
             label={getLabelOfProp(propName)}
             isReadOnly={readOnly}
+            isErrored={isErrored}
             sending={sendingMap.get(parent.target.id) === propName}
             disabled={sendingMap.get(parent.target.id) != null || readOnly}
             value={propData.data.data}

src/cloud/components/Views/Table/ColSettingsContext.tsx

@@ -0,0 +1,91 @@
+import { mdiArrowLeft, mdiArrowRight, mdiTrashCanOutline } from '@mdi/js'
+import React, { useCallback, useState } from 'react'
+import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
+import MetadataContainerRow from '../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { Column, ColumnMoveType } from '../../../lib/views/table'
+
+interface ColumnSettingsContextProps {
+  column: Column
+  moveColumn: (move: ColumnMoveType) => void
+  removeColumn: (col: Column) => void
+  close: () => void
+}
+
+const ColumnSettingsContext = ({
+  column,
+  removeColumn,
+  moveColumn,
+  close,
+}: ColumnSettingsContextProps) => {
+  const [sending, setSending] = useState<string>()
+
+  const action = useCallback(
+    async (type: 'move-left' | 'move-right' | 'delete') => {
+      if (sending != null) {
+        return
+      }
+
+      setSending(type)
+
+      switch (type) {
+        case 'move-left':
+          await moveColumn('before')
+          break
+        case 'move-right':
+          await moveColumn('after')
+          break
+        case 'delete':
+        default:
+          await removeColumn(column)
+          break
+      }
+
+      setSending(undefined)
+      close()
+    },
+    [sending, close, removeColumn, moveColumn, column]
+  )
+
+  return (
+    <MetadataContainer>
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            iconPath: mdiArrowLeft,
+            label: 'Move Left',
+            spinning: sending === 'move-left',
+            onClick: () => action('move-left'),
+            disabled: sending != null,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            iconPath: mdiArrowRight,
+            label: 'Move Right',
+            spinning: sending === 'move-right',
+            onClick: () => action('move-right'),
+            disabled: sending != null,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            iconPath: mdiTrashCanOutline,
+            label: 'Delete',
+            spinning: sending === 'delete',
+            onClick: () => action('delete'),
+            disabled: sending != null,
+          },
+        }}
+      />
+    </MetadataContainer>
+  )
+}
+
+export default ColumnSettingsContext