Skip to content

Commit f528eb6

Browse files
anastasiakuznietsovaanastasiakuznietsova
committed
Merge branch 'dev' of https://github.com/ita-social-projects/GreenCityClient into bugfix/6821-the-location-that-is-outside-of-ukraine-cant-be-entered-manually
2 parents 2d72edd + 3cff509 commit f528eb6

30 files changed

Lines changed: 6102 additions & 6613 deletions

‎.eslintrc.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"eslint:recommended",
99
"plugin:@typescript-eslint/recommended",
1010
"plugin:@angular-eslint/recommended",
11-
"plugin:@angular-eslint/template/process-inline-templates"
11+
"plugin:@angular-eslint/template/process-inline-templates",
12+
"prettier"
1213
],
1314
"rules": {
1415
"@typescript-eslint/ban-ts-comment": "off",
@@ -32,7 +33,7 @@
3233
"@typescript-eslint/no-empty-function": "off",
3334
"@typescript-eslint/no-explicit-any": "off",
3435
"@typescript-eslint/no-unused-vars": "off",
35-
"indent": ["error", 2, { "SwitchCase": 1 }],
36+
"indent": "off",
3637
"@typescript-eslint/array-type": "off",
3738
"arrow-parens": "off",
3839
"arrow-body-style": "off",

‎package-lock.json‎

Lines changed: 4555 additions & 6569 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"hammerjs": "^2.0.8",
5555
"moment": "^2.30.1",
5656
"ng2-file-upload": "^5.0.0",
57-
"ng2-pdf-viewer": "^10.0.0",
57+
"ng2-pdf-viewer": "10.0.0",
5858
"ng2-search-filter": "^0.5.1",
5959
"ng5-slider": "^1.2.4",
6060
"ngx-bootstrap": "^11.0.0",
@@ -97,6 +97,7 @@
9797
"@typescript-eslint/parser": "7.3.1",
9898
"codelyzer": "^6.0.2",
9999
"eslint": "^8.57.0",
100+
"eslint-config-prettier": "^10.1.5",
100101
"husky": "^4.3.8",
101102
"jasmine-core": "5.1.2",
102103
"karma": "~6.4.3",

‎src/app/chat/component/chat-page/chat-page.component.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div class="chat-container">
2+
<aside class="sidebar">
3+
<div class="search-bar">
4+
<label>
5+
<input type="text" placeholder="Enter internal ID (e.g., 12)..." [(ngModel)]="searchId" (input)="filterChatsById()" />
6+
</label>
7+
</div>
8+
9+
<ul class="chat-list">
10+
<li
11+
class="chat-item"
12+
*ngFor="let chat of filteredChats"
13+
[class.selected]="chat.name === selectedChat?.name"
14+
(click)="selectChat(chat)"
15+
>
16+
<div class="avatar">{{ chat.initial }}</div>
17+
<div class="chat-details">
18+
<div class="chat-name">{{ chat.name }}</div>
19+
<div class="last-message">{{ chat.lastMessage }}</div>
20+
</div>
21+
<div class="timestamp">{{ chat.time }}</div>
22+
</li>
23+
</ul>
24+
</aside>
25+
<section class="chat-view">
26+
<ng-container *ngIf="selectedChat; else placeholder">
27+
<div class="chat-box">
28+
<div class="chat-header">
29+
{{ selectedChat.name }}
30+
<button class="client-info-button" (click)="toggleClientInfo()" title="Клієнтська інформація">🧠</button>
31+
</div>
32+
33+
<app-client-info-panel *ngIf="clientInfoVisible" [clientData]="clientInfoData" class="client-info-panel"></app-client-info-panel>
34+
35+
<div class="messages">
36+
<div
37+
*ngFor="let message of selectedChat.messages"
38+
[ngClass]="{
39+
message: true,
40+
sent: message.from === 'Me',
41+
received: message.from !== 'Me'
42+
}"
43+
>
44+
<div class="message-text">{{ message.text }}</div>
45+
<div class="message-time">{{ message.time }}</div>
46+
</div>
47+
</div>
48+
49+
<div class="message-input-container">
50+
<input type="text" placeholder="Write a message..." [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" />
51+
<button (click)="sendMessage()">➤</button>
52+
</div>
53+
</div>
54+
</ng-container>
55+
56+
<ng-template #placeholder>
57+
<div class="empty-chat-wrapper">
58+
<p class="placeholder-text">Select a chat to start messaging</p>
59+
</div>
60+
</ng-template>
61+
</section>
62+
</div>

‎src/app/chat/component/chat-page/chat-page.component.scss‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
.chat-container {
2+
display: flex;
3+
height: 100vh;
4+
background-color: #f5f5f5;
5+
color: #333;
6+
font-family: 'Segoe UI', sans-serif;
7+
}
8+
9+
.sidebar {
10+
width: 320px;
11+
background-color: #fff;
12+
border-right: 1px solid #ddd;
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
17+
.search-bar {
18+
padding: 12px;
19+
20+
input {
21+
width: 100%;
22+
padding: 8px;
23+
border-radius: 4px;
24+
background-color: #efefef;
25+
border: 1px solid #ccc;
26+
color: #333;
27+
}
28+
}
29+
30+
.chat-list {
31+
list-style: none;
32+
padding: 0;
33+
margin: 0;
34+
overflow-y: auto;
35+
flex-grow: 1;
36+
}
37+
38+
.chat-item {
39+
display: flex;
40+
align-items: center;
41+
padding: 12px;
42+
cursor: pointer;
43+
transition: background 0.2s;
44+
45+
&:hover {
46+
background-color: #f0f0f0;
47+
}
48+
49+
&.selected {
50+
background-color: #e0e0e0;
51+
}
52+
53+
.avatar {
54+
background-color: #ccc;
55+
color: #000;
56+
width: 40px;
57+
height: 40px;
58+
border-radius: 50%;
59+
font-weight: bold;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
margin-right: 12px;
64+
}
65+
66+
.chat-details {
67+
flex-grow: 1;
68+
69+
.chat-name {
70+
font-weight: bold;
71+
}
72+
73+
.last-message {
74+
font-size: 0.85em;
75+
color: #666;
76+
}
77+
}
78+
79+
.timestamp {
80+
font-size: 0.75em;
81+
color: #999;
82+
}
83+
}
84+
85+
.chat-view {
86+
flex-grow: 1;
87+
display: flex;
88+
flex-direction: column;
89+
background-color: #fafafa;
90+
overflow: hidden;
91+
padding: 0;
92+
}
93+
94+
.chat-box {
95+
display: flex;
96+
flex-direction: column;
97+
height: 90vh;
98+
padding: 16px 24px;
99+
}
100+
101+
.chat-header {
102+
font-weight: bold;
103+
font-size: 1.2em;
104+
padding: 12px 0;
105+
border-bottom: 1px solid #ccc;
106+
color: #333;
107+
flex-shrink: 0;
108+
display: flex;
109+
justify-content: space-between;
110+
align-items: center;
111+
}
112+
113+
.messages {
114+
flex-grow: 1;
115+
overflow-y: auto;
116+
display: flex;
117+
flex-direction: column;
118+
gap: 12px;
119+
margin-top: 16px;
120+
padding-right: 12px;
121+
}
122+
123+
.message {
124+
max-width: 60%;
125+
padding: 10px 14px;
126+
border-radius: 10px;
127+
font-size: 14px;
128+
line-height: 1.4;
129+
position: relative;
130+
131+
&.sent {
132+
align-self: flex-end;
133+
background-color: #daf1ff;
134+
color: #003d66;
135+
}
136+
137+
&.received {
138+
align-self: flex-start;
139+
background-color: #e8e8e8;
140+
color: #222;
141+
}
142+
143+
.message-time {
144+
font-size: 0.75em;
145+
color: #777;
146+
margin-top: 4px;
147+
text-align: right;
148+
}
149+
}
150+
151+
.placeholder-text {
152+
color: #999;
153+
font-size: 1.2em;
154+
text-align: center;
155+
}
156+
157+
.message-input-container {
158+
display: flex;
159+
padding: 12px 0;
160+
border-top: 1px solid #ccc;
161+
margin-top: auto;
162+
163+
input {
164+
flex-grow: 1;
165+
padding: 10px 14px;
166+
border: 1px solid #ccc;
167+
border-radius: 20px;
168+
font-size: 14px;
169+
outline: none;
170+
margin-right: 10px;
171+
}
172+
173+
button {
174+
background-color: #007bff;
175+
border: none;
176+
color: white;
177+
font-size: 16px;
178+
padding: 10px 16px;
179+
border-radius: 50%;
180+
cursor: pointer;
181+
transition: background 0.3s;
182+
183+
&:hover {
184+
background-color: #0056b3;
185+
}
186+
}
187+
}
188+
189+
.client-info-button {
190+
font-size: 1.5rem;
191+
background-color: #f0f0f0;
192+
border: none;
193+
border-radius: 50%;
194+
padding: 0.5rem;
195+
cursor: pointer;
196+
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
197+
transition: background-color 0.2s ease;
198+
width: 52px;
199+
200+
&:hover {
201+
background-color: #e0e0e0;
202+
}
203+
204+
&:focus {
205+
outline: 2px solid #007bff;
206+
outline-offset: 2px;
207+
}
208+
}
209+
210+
.client-info-panel {
211+
background-color: #f3f3f3;
212+
border-top: 1px solid #ccc;
213+
padding: 1rem;
214+
font-size: 0.95rem;
215+
animation: fade-in-panel 250ms ease-in-out;
216+
box-shadow: inset 0 1px 3px rgb(0 0 0 / 5%);
217+
218+
strong {
219+
color: #333;
220+
}
221+
}
222+
223+
@keyframes fade-in-panel {
224+
from {
225+
opacity: 0;
226+
transform: translateY(-4px);
227+
}
228+
229+
to {
230+
opacity: 1;
231+
transform: translateY(0);
232+
}
233+
}
234+
235+
.empty-chat-wrapper {
236+
display: flex;
237+
justify-content: center;
238+
align-items: center;
239+
min-height: 100vh;
240+
}

0 commit comments

Comments
 (0)