admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Update the look and feel of the chat message list (prevents breaking when zoomed in and out like previous implementation)

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-16 14:02:54 -05:00
parent 0d0f24802f
commit b6b445dc21
2 changed files with 101 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -1,19 +1,14 @@
import {Badge, List, Space, Tag} from "antd"; import {Badge, Card, List, Space, Tag} from "antd";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import {connect} from "react-redux";
import { import {AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList,} from "react-virtualized";
AutoSizer, import {createStructuredSelector} from "reselect";
CellMeasurer, import {setSelectedConversation} from "../../redux/messaging/messaging.actions";
CellMeasurerCache, import {selectSelectedConversation} from "../../redux/messaging/messaging.selectors";
List as VirtualizedList, import {TimeAgoFormatter} from "../../utils/DateFormatter";
} from "react-virtualized";
import { createStructuredSelector } from "reselect";
import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
import { TimeAgoFormatter } from "../../utils/DateFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter"; import PhoneFormatter from "../../utils/PhoneFormatter";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component"; import OwnerNameDisplay, {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
import _ from "lodash";
import "./chat-conversation-list.styles.scss"; import "./chat-conversation-list.styles.scss";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
@@ -30,14 +25,40 @@ function ChatConversationListComponent({
selectedConversation, selectedConversation,
setSelectedConversation, setSelectedConversation,
loadMoreConversations, loadMoreConversations,
}) { }) {
const cache = new CellMeasurerCache({ const cache = new CellMeasurerCache({
fixedWidth: true, fixedWidth: true,
defaultHeight: 60, defaultHeight: 60,
}); });
const rowRenderer = ({ index, key, style, parent }) => { const rowRenderer = ({index, key, style, parent}) => {
const item = conversationList[index]; const item = conversationList[index];
const cardContentRight =
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
const cardContentLeft = item.job_conversations.length > 0
? item.job_conversations.map((j, idx) => (
<Tag key={idx}>{j.job.ro_number}</Tag>
))
: null;
const names = <>{_.uniq(item.job_conversations.map((j, idx) =>
OwnerNameDisplayFunction(j.job)
))}</>
const cardTitle = <>
{item.label && <Tag color="blue">{item.label}</Tag>}
{item.job_conversations.length > 0 ? (
<Space direction="vertical">
{names}
</Space>
) : (
<Space>
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
</Space>
)}
</>
const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0}/>
const cardStyle = index % 2 === 0 ? {backgroundColor: '#f0f2f5'} : {backgroundColor: '#ffffff'};
return ( return (
<CellMeasurer <CellMeasurer
key={key} key={key}
@@ -56,37 +77,12 @@ function ChatConversationListComponent({
: null : null
}`} }`}
> >
<Space style={{padding: '12px 24px'}} size={"large"}> <Card style={cardStyle} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
<Space> <div style={{display: 'inline-block', width: '70%', textAlign: 'left'}}>
{item.label && <Space>{item.label}</Space>} {cardContentLeft}
{item.job_conversations.length > 0 ? ( </div>
<Space direction="vertical"> <div style={{display: 'inline-block',width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
{item.job_conversations.map((j, idx) => ( </Card>
<OwnerNameDisplay key={idx} ownerObject={j.job} />
))}
</Space>
) : (
<Space>
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
</Space>
)}
</Space>
<Space direction="vertical">
<Space>
{item.job_conversations.length > 0
? item.job_conversations.map((j, idx) => (
<Tag key={idx}>{j.job.ro_number}</Tag>
))
: null}
</Space>
<Space>
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
</Space>
</Space>
<Space>
<Badge count={item.messages_aggregate.aggregate.count || 0} />
</Space>
</Space>
</List.Item> </List.Item>
</CellMeasurer> </CellMeasurer>
); );
@@ -95,14 +91,14 @@ function ChatConversationListComponent({
return ( return (
<div className="chat-list-container"> <div className="chat-list-container">
<AutoSizer> <AutoSizer>
{({ height, width }) => ( {({height, width}) => (
<VirtualizedList <VirtualizedList
height={height} height={height}
width={width} width={width}
rowCount={conversationList.length} rowCount={conversationList.length}
rowHeight={cache.rowHeight} rowHeight={cache.rowHeight}
rowRenderer={rowRenderer} rowRenderer={rowRenderer}
onScroll={({ scrollTop, scrollHeight, clientHeight }) => { onScroll={({scrollTop, scrollHeight, clientHeight}) => {
if (scrollTop + clientHeight === scrollHeight) { if (scrollTop + clientHeight === scrollHeight) {
loadMoreConversations(); loadMoreConversations();
} }

5
client/src/components/chat-conversation-list/chat-conversation-list.styles.scss
View File

@@ -7,10 +7,11 @@
border: 1px solid gainsboro; border: 1px solid gainsboro;
} }
.chat-list-item { .chat-list-item {
.ant-card-head {
border: none;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: #ff7a00; color: #ff7a00;
} }
border-bottom: 1px solid gainsboro;
} }