Merge pull request #2976 from serge-web/2947_We_need_to_fix_some_rema…

…ining_Issues_on_collab_channel

2947_We_need_to_fix_some_remaining_Issues_on_collab_channel

client/src/Components/CollabChannel.tsx

@@ -19,13 +19,17 @@ const CollabChannel: React.FC<{ channelId: string }> = ({ channelId }) => {
   const playerUiDispatch = usePlayerUiDispatch()
   const dispatch = useDispatch()
   const [channelTabClass, setChannelTabClass] = useState<string>('')
+  const [expandedRowId, setExpandedRowId] = useState('')
+
   const { selectedForce, selectedRole, selectedRoleName, gameDate } = state
   const isUmpire = selectedForce && selectedForce.umpire
   const selectedForceId = state.selectedForce ? state.selectedForce.uniqid : ''
   if (selectedForce === undefined) throw new Error('selectedForce is undefined')
 
   const channelUI = state.channels[channelId]
+
   const channel = channelUI.cData as ChannelCollab
+
   if (!channel) {
     console.warn('failed to receive v3 data')
     return (
@@ -67,6 +71,7 @@ const CollabChannel: React.FC<{ channelId: string }> = ({ channelId }) => {
   // The prop should be optimized in the future.
   const handleChange = (nextMsg: MessageCustom, messageType: TypeOfCustomMessage): void => {
     const { details } = nextMsg
+    setExpandedRowId(nextMsg._id)
     saveMessage(state.currentWargame, details, nextMsg.message, nextMsg.templateId, messageType)()
     const saveMessageInt: MessageSentInteraction = {
       aType: MESSAGE_SENT_INTERACTION
@@ -113,7 +118,6 @@ const CollabChannel: React.FC<{ channelId: string }> = ({ channelId }) => {
     console.warn('Problem - new message template not specified')
   }
   const trimmedTemplates = channel.newMessageTemplate ? [allTemplates[channel.newMessageTemplate._id]] : []
-
   const observing = !!channelUI.observing
 
   const isCollabEdit = channel.channelType === CHANNEL_COLLAB
@@ -142,6 +146,7 @@ const CollabChannel: React.FC<{ channelId: string }> = ({ channelId }) => {
             onMessageRead={handleOpenMessage}
             onMarkAllAsRead={markAllMsgAsRead}
             onMarkAllAsUnRead={handleUnreadAllMessage}
+            expandedRowId={expandedRowId}
             templates={state.allTemplatesByKey}
             messages={messages as MessageCustom[]}
             role={role}

client/src/Components/local/atoms/split-button/index.tsx

@@ -47,6 +47,7 @@ export const SplitButton: React.FC<Props> = ({ label, options = [], onClick }: P
   const handleMenuItemClick = (index: number): void => {
     setSelectedIndex(index)
     setOpen(false)
+    onClick && onClick(options[index])
   }
 
   const handleToggle = (): void => {

client/src/Components/local/collab-status-board/__snapshots__/index.spec.tsx.snap

@@ -138,9 +138,9 @@ Array [
     </div>
   </div>,
   <div
-    className="sc-dmlpXa MBFhO"
+    className="sc-dmlpXa ffRrGl"
     fixedHeader={true}
-    fixedHeaderScrollHeight="100vh"
+    fixedHeaderScrollHeight="86vh"
     responsive={true}
   >
     <div

client/src/Components/local/collab-status-board/helpers/gen-data.tsx

@@ -49,9 +49,44 @@ export const genData = (
   const assignees: ForceRole[] = getAssignees(channelColb.participants, forces)
   const isCollaborating = permission > CollaborativePermission.CannotCollaborate || isObserver
 
-  const sortCol = (str1: string, str2: string): number => {
-    const a = str1.toLowerCase()
-    const b = str2.toLowerCase()
+  const findFirstAlphabeticCharacter = (str: string): string => {
+    for (const char of str) {
+      if (/[a-zA-Z]/.test(char)) {
+        return char.toLowerCase()
+      }
+    }
+    return '' 
+  }
+
+  const sortCol = (str1: string | null | undefined, str2: string | null | undefined, date = false): number => {
+    if (str1 == null && str2 == null) return 0
+    if (str1 == null) return 1 
+    if (str2 == null) return -1 
+
+    let a = str1.toLowerCase()
+    let b = str2.toLowerCase()
+
+    if (date) {
+      const durationA = moment.duration(a)
+      const durationB = moment.duration(b)
+
+      if (!durationA.isValid() || !durationB.isValid()) {
+        throw new Error('Invalid date format')
+      }
+
+      a = moment().subtract(durationA).toISOString()
+      b = moment().subtract(durationB).toISOString()
+    } else {
+      const firstLetterA = findFirstAlphabeticCharacter(a)
+      const firstLetterB = findFirstAlphabeticCharacter(b)
+
+      if (firstLetterA && firstLetterB) {
+        if (firstLetterA !== firstLetterB) {
+          a = firstLetterA
+          b = firstLetterB
+        }
+      }
+    }
 
     return a > b ? 1 : -1
   }
@@ -111,6 +146,8 @@ export const genData = (
     {
       name: 'Updated',
       selector: (row: Row): string => row.updated,
+      sortFunction: (rowA: Row, rowB: Row): number => sortCol(rowA.status, rowB.status, true),
+
       sortable: true,
       center: true
     }
@@ -141,7 +178,7 @@ export const genData = (
     extraCols.push(...newCols)
   }
   columns.push(...extraCols)
-
+  
   const rows: Row[] = messages.map((message): Row => {
     const collab = message.details.collaboration
     const ownerRole = (collab && collab.owner) || undefined

client/src/Components/local/collab-status-board/index.tsx

@@ -18,10 +18,10 @@ export interface ForceColor {
 /* Render component */
 export const CollabStatusBoard: React.FC<CollabStatusBoardProps> = ({
   templates, messages, channelColb, isObserver, isUmpire, onChange, role, forces,
-  gameDate, phase, onMessageRead, onMarkAllAsRead, onMarkAllAsUnRead, currentWargame, collabActivity
+  gameDate, phase, onMessageRead, onMarkAllAsRead, onMarkAllAsUnRead, currentWargame, collabActivity, expandedRowId
 }) => {
   const [showArchived, setShowArchived] = useState<boolean>(false)
-
+  
   const participationsForMyForce = channelColb.participants.filter((p: ParticipantCollab) => p.forceUniqid === role.forceId)
   // participations relate to me if they contain no roles, or if they contain my role
   const myParticipations = participationsForMyForce.filter((p: ParticipantCollab) => (p.roles.length === 0 || p.roles.includes(role.roleId)))
@@ -67,7 +67,7 @@ export const CollabStatusBoard: React.FC<CollabStatusBoardProps> = ({
     }
     onMarkAllAsRead && onMarkAllAsRead()
   }, [filteredDoc])
-  
+
   const handleArchiveDoc = useCallback(() => {
     setShowArchived(!showArchived)
   }, [showArchived])
@@ -79,6 +79,7 @@ export const CollabStatusBoard: React.FC<CollabStatusBoardProps> = ({
       tableActivity={collabActivity}
       customStyles={customStyles}
       showArchived={showArchived}
+      expandedRowId={expandedRowId}
       handleArchiveDoc={handleArchiveDoc}
       handleMarkAllAsRead={handleMarkAllAsRead}
       handleMarkAllAsUnread={onMarkAllAsUnRead}
@@ -89,6 +90,7 @@ export const CollabStatusBoard: React.FC<CollabStatusBoardProps> = ({
       defaultSortAsc={true}
       persistTableHead={true}
       expandableRowsHideExpander={true}
+      fixedHeaderScrollHeight='86vh'
       highlightOnHover={true}
     />
   )

client/src/Components/local/collab-status-board/types/props.d.ts

@@ -21,6 +21,7 @@ export type CollabStatusBoardProps = {
   /** role of logged in player */
   role: ForceRole
   templates: TemplateBodysByKey
+  expandedRowId?: string
   /** list of forces */
   forces: ForceData[]
   /** current game time, used for initialising date-time controls */
@@ -33,6 +34,5 @@ export type CollabStatusBoardProps = {
   onMarkAllAsRead?: () => void
   /** mark message unread */
   onMarkAllAsUnRead?: () => void
-
   collabActivity: (getRoleId: string, activityType: string) => void
 }

client/src/Components/local/form-elements/message-creator/index.tsx

@@ -47,7 +47,6 @@ const MessageCreator: React.FC<PropTypes> = ({
   if (selectedForce === undefined) { throw new Error('selectedForce is undefined') }
 
   const messageBeingEdited = useRef<Record<string, any> | string>('')
-
   const sendMessage = (e: React.MouseEvent<HTMLButtonElement>): void => {
     e.persist()
     const details: MessageDetails = {
@@ -141,7 +140,6 @@ const MessageCreator: React.FC<PropTypes> = ({
       }
     }
   }, [draftMessage])
-
   return (
     <>
       <Confirm

client/src/Components/local/form-elements/new-message/index.tsx

@@ -37,7 +37,6 @@ const NewMessage: React.FC<PropTypes> = ({
   const [updateNewMessage, setUpdateNewMessage] = useState(false)
 
   const tab = useRef<any>(null)
-
   const schemaTitle = useMemo(() => getCachedNewMessagevalue && getCachedNewMessagevalue(UNSENT_SELECT_BY_DEFAULT_VALUE), [channelId, updateNewMessage])
 
   const setTemplate = (templateData: TemplateBody): void => {
@@ -55,31 +54,40 @@ const NewMessage: React.FC<PropTypes> = ({
 
   useEffect(() => {
     const allTemplates: TemplateBody[] = (templates && templates.length > 0) ? templates : []
-    if (!prevTemplates || updateNewMessage || draftMessage) {
-      if (allTemplates.length) {
-        if (schemaTitle) {
-          const findColumn = templates.find(find => find.title === schemaTitle)
-          if (findColumn) {
-            setSelectedSchema(findColumn.details)
-            setSelectedType(findColumn.title)
-          }
+    const checkTitle = selectedSchema && templates[0]?.title !== selectedSchema.title
+
+    const updateSchema = (schema: any) => {
+      setSelectedSchema(schema.details)
+      setSelectedType(schema.title)
+    }
+
+    const handleTemplateSelection = () => {
+      if (schemaTitle) {
+        const findColumn = templates.find(find => find.title === schemaTitle)
+        if (findColumn) {
+          updateSchema(findColumn)
+        } else {
+          setUpdateNewMessage(false)
+          updateSchema(templates[0])
+        }
+      } else if (draftMessage) {
+        const msg = draftMessage as CoreMessage
+        const schemaId = msg.templateId
+        const template = templates.find((tmpl: TemplateBody) => tmpl._id === schemaId)
+        if (template) {
+          updateSchema(template)
         } else {
-          if (draftMessage) {
-            const msg = draftMessage as CoreMessage
-            const schemaId = msg.templateId
-            const template = templates.find((tmpl: TemplateBody) => tmpl._id === schemaId)
-            if (template) {
-              setSelectedSchema(template.details)
-              setSelectedType(template.title)
-            } else {
-              console.warn('failed to find schema', schemaId, templates)
-            }
-          } else {
-            setUpdateNewMessage(false)
-            setSelectedSchema(templates[0].details)
-            setSelectedType(templates[0].title)
-          }
+          console.warn('failed to find schema', schemaId, templates)
         }
+      } else {
+        setUpdateNewMessage(false)
+        updateSchema(templates[0])
+      }
+    }
+
+    if (!prevTemplates || updateNewMessage || draftMessage || checkTitle || templates) {
+      if (allTemplates.length) {
+        handleTemplateSelection()
       } else {
         console.warn('Zero templates received for channel ', channel)
       }

client/src/Components/local/molecules/collab-message-detail/index.tsx

@@ -67,13 +67,13 @@ export const CollabMessageDetail: React.FC<Props> = ({
   }
 
   const channelCollab = channelGeneric as ChannelCollab
-
+  
   if (collaboration === undefined) {
     console.warn('not rendering message, collaborative details missing')
     return <></>
   }
 
-  const isResponse = !!channelCollab.responseTemplate
+  const isResponse = !!channelCollab.responseTemplate?._id
   const canSeeResponse = permission > CollaborativePermission.CannotCollaborate || state === CollaborativeMessageStates.Released || isObserver
 
   /**
@@ -217,7 +217,7 @@ export const CollabMessageDetail: React.FC<Props> = ({
   /** any feedback in the message */
   const feedback = collaboration.feedback
   const haveData = state !== undefined && permission !== undefined
-
+  
   // special case. If the message is `in-progress`, we only generate actions for `save` or `submit` if this is the owner
   const inProgress = state === CollaborativeMessageStates.InProgress
   const saveOrSubmit = permission >= CollaborativePermission.CanEdit

client/src/Components/local/molecules/collab-message-detail/styles.module.scss

@@ -5,6 +5,7 @@
   padding-top: 10px;
 }
 
+
 .actions {
   display: flex;
   justify-content: flex-end;

client/src/Components/local/molecules/json-editor/index.tsx

@@ -8,7 +8,6 @@ import { Button } from '../../atoms/button'
 import { Confirm } from '../../atoms/confirm'
 import setupEditor from './helpers/setupEditor'
 import Props from './types/props'
-
 const alwaysShowEditorErrors = 'always'
 
 // keydown listener should works only for defined tags
@@ -39,7 +38,7 @@ export const JsonEditor: React.FC<Props> = ({
   const [beingEdited, setBeingEdited] = useState<boolean>(false)
   const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false)
   const [originalMessage] = useState<string>(JSON.stringify(messageContent))
-
+  
   const prevTemplates: TemplateBody = usePrevious(messageId)
   if (!template) {
     const styles = {

client/src/Components/local/organisms/setting-channels/channels/collab.tsx

@@ -37,21 +37,19 @@ export const CollabChannel: React.FC<CollabChannelProps> = ({
   const [localChannelUpdates, setLocalChannelUpdates] = useState(channel)
   const [participantKey, confirmRemoveParticipant] = useState<number>(-1)
   const [postRemoveActionConfirmed, setPostRemoveActionConfirmed] = useState<boolean>(false)
-
   const messageTemplatesOptions: Array<Option> = messageTemplates.map(template => ({
     name: template.title,
     uniqid: template._id,
     value: template
   }))
-
   const messagesValues = getMessagesValues(localChannelUpdates)
   const [messageLocal, setMessageLocal] = useState<MessagesValues>(messagesValues)
-
   useEffect(() => {
     setLocalChannelUpdates(channel)
   }, [channel])
 
   useEffect(() => {
+    setMessageLocal(messagesValues)
     onChange(localChannelUpdates)
   }, [localChannelUpdates])
 
@@ -298,7 +296,7 @@ export const CollabChannel: React.FC<CollabChannelProps> = ({
       setMessageLocal(nextMsgLocal)
       handleUpdateCollabChannel(nextMsgLocal)
     }
-
+    
     return (
       <div>
         <div className={styles.row}>

client/src/Components/local/organisms/setting-channels/helpers/messageCollabUtils.ts

@@ -108,10 +108,10 @@ export const integrateWithLocalChanges = (options: Option[], channelData: Channe
   const nextChannel: ChannelCollab = ({ ...channelData }) as unknown as ChannelCollab
 
   const msgTpl = filterInByUniqId(messageUpdates, options, 'messageTemplate')
-  nextChannel.newMessageTemplate = msgTpl
+  nextChannel.newMessageTemplate = msgTpl._id ? msgTpl : undefined
 
   const resTpl = filterInByUniqId(messageUpdates, options, 'responseTemplate')
-  nextChannel.responseTemplate = resTpl
+  nextChannel.responseTemplate = resTpl._id ? resTpl : undefined
 
   nextChannel.initialState = getInitialState(messageUpdates.documentStatus[0])
   nextChannel.requestChangesVerbs = messageUpdates.requestChanges
@@ -160,6 +160,6 @@ export const onMessageValuesChanged = (messageLocal: MessagesValues, value: stri
     default:
       return nextMessageLocal
   }
-
+  
   return nextMessageLocal
 }

client/src/Components/local/organisms/setting-channels/index.tsx

@@ -157,7 +157,7 @@ export const SettingChannels: React.FC<PropTypes> = ({
       </Popper>
     </div>
   }, [open])
-
+  
   return (
     <AdminContent>
       <LeftSide>