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 { connect } from "react-redux";
import {
@@ -38,57 +38,57 @@ function ChatConversationListComponent({
const rowRenderer = ({ index, key, style, parent }) => {
const item = conversationList[index];
return (
<CellMeasurer
key={key}
cache={cache}
parent={parent}
columnIndex={0}
rowIndex={index}
>
<List.Item
onClick={() => setSelectedConversation(item.id)}
className={`chat-list-item ${
item.id === selectedConversation
? "chat-list-selected-conversation"
: null
}`}
style={style}
<CellMeasurer
key={key}
cache={cache}
parent={parent}
columnIndex={0}
rowIndex={index}
>
<div
style={{
display: "inline-block",
}}
<List.Item
onClick={() => setSelectedConversation(item.id)}
style={style}
className={`chat-list-item
${
item.id === selectedConversation
? "chat-list-selected-conversation"
: null
}`}
>
{item.label && <div className="chat-name">{item.label}</div>}
{item.job_conversations.length > 0 ? (
<div className="chat-name">
{item.job_conversations.map((j, idx) => (
<div key={idx}>
<OwnerNameDisplay ownerObject={j.job} />
</div>
))}
</div>
) : (
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
)}
</div>
<div style={{ display: "inline-block" }}>
<div>
{item.job_conversations.length > 0
? item.job_conversations.map((j, idx) => (
<Tag key={idx} className="ro-number-tag">
{j.job.ro_number}
</Tag>
))
: null}
</div>
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
</div>
<Badge count={item.messages_aggregate.aggregate.count || 0} />
</List.Item>
</CellMeasurer>
<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>
</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);
}
.chat-list-container {
flex: 1;
overflow: hidden;
height: 100%;
border: 1px solid gainsboro;
}
.chat-list-item {
display: flex;
flex-direction: row;
&:hover {
cursor: pointer;
color: #ff7a00;
}
.chat-name {
flex: 1;
display: inline;
}
.ro-number-tag {
align-self: baseline;
}
padding: 12px 24px;
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}
</Sentry.ErrorBoundary>
<FloatButton.BackTop/>
<FloatButton.BackTop style={{right: 100, bottom: 25}}/>
<Footer>
<div
style={{