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

76
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 {connect} from "react-redux";
import {
AutoSizer,
CellMeasurer,
CellMeasurerCache,
List as VirtualizedList,
} from "react-virtualized";
import {AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList,} 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 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";
const mapStateToProps = createStructuredSelector({
@@ -38,6 +33,32 @@ function ChatConversationListComponent({
const rowRenderer = ({index, key, style, parent}) => {
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 (
<CellMeasurer
key={key}
@@ -56,37 +77,12 @@ function ChatConversationListComponent({
: null
}`}
>
<Space style={{padding: '12px 24px'}} size={"large"}>
<Space>
{item.label && <Space>{item.label}</Space>}
{item.job_conversations.length > 0 ? (
<Space direction="vertical">
{item.job_conversations.map((j, idx) => (
<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>
<Card style={cardStyle} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
<div style={{display: 'inline-block', width: '70%', textAlign: 'left'}}>
{cardContentLeft}
</div>
<div style={{display: 'inline-block',width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
</Card>
</List.Item>
</CellMeasurer>
);

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

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