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

- Chat formatting

Browse Source 
- Scroll to Top Button

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-15 17:28:24 -05:00
parent 7b61c24461
commit cf9b03d073
3 changed files with 52 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Badge, List, Tag } from "antd"; import {Badge, 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 {
@@ -38,57 +38,57 @@ function ChatConversationListComponent({
const rowRenderer = ({ index, key, style, parent }) => { const rowRenderer = ({ index, key, style, parent }) => {
const item = conversationList[index]; const item = conversationList[index];
return ( return (
<CellMeasurer <CellMeasurer
key={key} key={key}
cache={cache} cache={cache}
parent={parent} parent={parent}
columnIndex={0} columnIndex={0}
rowIndex={index} rowIndex={index}
>
<List.Item
onClick={() => setSelectedConversation(item.id)}
className={`chat-list-item ${
item.id === selectedConversation
? "chat-list-selected-conversation"
: null
}`}
style={style}
> >
<div <List.Item
style={{ onClick={() => setSelectedConversation(item.id)}
display: "inline-block", style={style}
}} className={`chat-list-item
${
item.id === selectedConversation
? "chat-list-selected-conversation"
: null
}`}
> >
{item.label && <div className="chat-name">{item.label}</div>} <Space style={{padding: '12px 24px'}} size={"large"}>
{item.job_conversations.length > 0 ? ( <Space>
<div className="chat-name"> {item.label && <Space>{item.label}</Space>}
{item.job_conversations.map((j, idx) => ( {item.job_conversations.length > 0 ? (
<div key={idx}> <Space direction="vertical">
<OwnerNameDisplay ownerObject={j.job} /> {item.job_conversations.map((j, idx) => (
</div> <OwnerNameDisplay key={idx} ownerObject={j.job} />
))} ))}
</div> </Space>
) : ( ) : (
<PhoneFormatter>{item.phone_num}</PhoneFormatter> <Space>
)} <PhoneFormatter>{item.phone_num}</PhoneFormatter>
</div> </Space>
<div style={{ display: "inline-block" }}> )}
<div> </Space>
{item.job_conversations.length > 0 <Space direction="vertical">
? item.job_conversations.map((j, idx) => ( <Space>
<Tag key={idx} className="ro-number-tag"> {item.job_conversations.length > 0
{j.job.ro_number} ? item.job_conversations.map((j, idx) => (
</Tag> <Tag key={idx}>{j.job.ro_number}</Tag>
)) ))
: null} : null}
</div> </Space>
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter> <Space>
</div> <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
<Badge count={item.messages_aggregate.aggregate.count || 0} /> </Space>
</List.Item> </Space>
</CellMeasurer> <Space>
<Badge count={item.messages_aggregate.aggregate.count || 0} />
</Space>
</Space>
</List.Item>
</CellMeasurer>
); );
}; };

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

@@ -2,26 +2,15 @@
background-color: rgba(128, 128, 128, 0.2); background-color: rgba(128, 128, 128, 0.2);
} }
.chat-list-container { .chat-list-container {
flex: 1;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
border: 1px solid gainsboro; border: 1px solid gainsboro;
} }
.chat-list-item { .chat-list-item {
display: flex;
flex-direction: row;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: #ff7a00; color: #ff7a00;
} }
.chat-name {
flex: 1;
display: inline;
}
.ro-number-tag {
align-self: baseline;
}
padding: 12px 24px;
border-bottom: 1px solid gainsboro; border-bottom: 1px solid gainsboro;
} }

2
client/src/pages/manage/manage.page.component.jsx
View File

@@ -373,7 +373,7 @@ export function Manage({conflict, bodyshop}) {
{PageContent} {PageContent}
</Sentry.ErrorBoundary> </Sentry.ErrorBoundary>
<FloatButton.BackTop/> <FloatButton.BackTop style={{right: 100, bottom: 25}}/>
<Footer> <Footer>
<div <div
style={{ style={{