Skip to content

Commit 8a4df89

Browse files
committed
Merge branch 'release/4.4.0'
2 parents f106e92 + feaf475 commit 8a4df89

File tree

84 files changed

+2192
-539
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+2192
-539
lines changed

projects/truly-ui/src/components/blockui/blockui.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:host {
2+
position: absolute;
3+
}
4+
15
.blockui-wrapper {
26
position: absolute;
37
width: 100%;

projects/truly-ui/src/components/button/button.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<tl-icon *ngIf="iconBeforeText">{{ iconBeforeText }}</tl-icon>
1818
<span class="label" *ngIf="!isLoading">{{ text }}</span>
1919
<span class="label" *ngIf="isLoading">{{ textLoading }}</span>
20-
<tl-loader [color]="loaderColor" *ngIf="isLoading"></tl-loader>
20+
<tl-icon [lib]="'fa'" [animation]="'spin'" [color]="loaderColor" *ngIf="isLoading">spinner</tl-icon>
2121
<tl-icon *ngIf="iconAfterText">{{ iconAfterText }}</tl-icon>
2222
</div>
2323
<tl-icon *ngIf="iconAddonAfter"

projects/truly-ui/src/components/calendar/calendar-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
$danger: map-deep-get($theme, 'danger');
66

77
.ui-table-calendar {
8-
background: white;
9-
box-shadow: 0px 0px 0px 1px map-deep-get($basic, "default", "border");
8+
background: map-deep-get($basic, "default", "background");
9+
border: 1px solid map-deep-get($basic, "default", "border");
1010

1111
> .ui-calendar-week {
1212
border-top: 1px solid map-deep-get($basic, "default", "border");

projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
$danger: map-deep-get($theme, 'danger');
66

77
.ui-calendar-line {
8-
background: white;
8+
background: map-deep-get($basic, "default", "background");
99
&.borders:not(:last-child) {
1010
border-right: 1px solid map-deep-get($basic, "default", "border");
1111
}

projects/truly-ui/src/components/chatlist/chatlist.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,14 @@
6868

6969
<ng-template #chatContent>
7070
<tl-chat-content
71+
[id]="id"
7172
[user]="user"
7273
[maxHeight]="maxHeight"
7374
[loadingMessages]="loadingMessages"
7475
[chatStatus]="chatStatus"
76+
(readMessage)="readMessage.emit($event)"
7577
[partner]="partner"
76-
(message)="onMessage($event)"
77-
[messages]="messages">
78+
(message)="onMessage($event)">
7879
</tl-chat-content>
7980
</ng-template>
8081

projects/truly-ui/src/components/chatlist/chatlist.ts

+52-69
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,25 @@
2020
SOFTWARE.
2121
*/
2222
import {
23-
Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild, Output, AfterViewInit,
24-
OnDestroy
23+
Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild, Output,
24+
OnDestroy, OnInit, ChangeDetectorRef
2525
} from '@angular/core';
26-
import { ChatStatus } from './interfaces/chat-status.interface';
27-
import { ChatContact } from './interfaces/chat-contact.interface';
28-
import { ChatMessage } from './interfaces/chat-message.interface';
29-
import { Status } from './enums/status.enum';
30-
import { Subscription } from 'rxjs';
31-
import { ChatService } from './services/chat.service';
32-
import { I18nService } from '../i18n/i18n.service';
26+
import {ChatStatus} from './interfaces/chat-status.interface';
27+
import {ChatContact} from './interfaces/chat-contact.interface';
28+
import {ChatMessage} from './interfaces/chat-message.interface';
29+
import {Status} from './enums/status.enum';
30+
import {Subscription} from 'rxjs';
31+
import {ChatService} from './services/chat.service';
32+
import {I18nService} from '../i18n/i18n.service';
3333

3434
let uniqueIdentifier = 0;
3535

36-
@Component( {
36+
@Component({
3737
selector: 'tl-chatlist',
3838
templateUrl: './chatlist.html',
39-
styleUrls: [ './chatlist.scss' ],
40-
} )
41-
export class TlChatList implements AfterViewInit, OnDestroy {
39+
styleUrls: ['./chatlist.scss'],
40+
})
41+
export class TlChatList implements OnInit, OnDestroy {
4242

4343
@Input() maxHeight = '450px';
4444

@@ -61,7 +61,7 @@ export class TlChatList implements AfterViewInit, OnDestroy {
6161
@Input() user: ChatContact;
6262

6363
@Input('contacts')
64-
set contacts( data: ChatContact[] ) {
64+
set contacts(data: ChatContact[]) {
6565
if (data && data.length > 0 && this.user) {
6666
if (!this.user.id) {
6767
throw Error('User id not found');
@@ -74,15 +74,15 @@ export class TlChatList implements AfterViewInit, OnDestroy {
7474
return this._dataSource;
7575
}
7676

77+
@Output() readMessage: EventEmitter<ChatMessage[]> = new EventEmitter();
78+
7779
@Output() sendMessage: EventEmitter<ChatMessage> = new EventEmitter();
7880

7981
@Output() changeStatus: EventEmitter<any> = new EventEmitter();
8082

81-
@Output() newMessages: EventEmitter<boolean> = new EventEmitter();
82-
8383
@Output() selectContact: EventEmitter<any> = new EventEmitter();
8484

85-
@ViewChild('content', {static: false} ) content: ElementRef;
85+
@ViewChild('content', {static: false}) content: ElementRef;
8686

8787
public transform = '0';
8888

@@ -96,13 +96,17 @@ export class TlChatList implements AfterViewInit, OnDestroy {
9696

9797
public filterControl = '';
9898

99-
public messages: ChatMessage[] = [];
100-
10199
private _dataSource;
102100

101+
public messages = [];
102+
103103
private subscription = new Subscription();
104104

105-
constructor(private renderer: Renderer2, private chatService: ChatService, private i18nService: I18nService ) {}
105+
constructor(private renderer: Renderer2,
106+
private change: ChangeDetectorRef,
107+
private chatService: ChatService,
108+
private i18nService: I18nService) {
109+
}
106110

107111
get online() {
108112
return Status.ONLINE;
@@ -116,8 +120,25 @@ export class TlChatList implements AfterViewInit, OnDestroy {
116120
return Status.BUSY;
117121
}
118122

119-
ngAfterViewInit() {
120-
this.chatService.chat = this;
123+
ngOnInit() {
124+
this.listenChangeStatus();
125+
this.listenChangeMessages();
126+
this.messages = this.chatService.getAllMessages( this.id );
127+
}
128+
129+
listenChangeStatus() {
130+
this.subscription.add(this.chatService.changeStatus.subscribe((value: { chatId: string, status: Status }) => {
131+
if (value.chatId === this.id) {
132+
this.setStatus(value.status);
133+
}
134+
}));
135+
}
136+
137+
listenChangeMessages() {
138+
this.subscription.add(this.chatService.allMessages.subscribe((messages: ChatMessage[]) => {
139+
this.messages = messages;
140+
this.change.detectChanges();
141+
}));
121142
}
122143

123144
animationContentDone(event: AnimationEvent) {
@@ -127,89 +148,52 @@ export class TlChatList implements AfterViewInit, OnDestroy {
127148
}
128149

129150
getUnreadMessages(item: ChatContact) {
130-
if (!item || !item.id) {
131-
return [];
132-
}
133151
if (this.messages.length > 0) {
134152
return this.messages.filter((message: ChatMessage) => {
135-
if ( message.from && message.to ) {
136-
return (!message.viewed && message.from.id === item.id) && (message.to.id === this.user.id);
153+
if (message.from && message.to) {
154+
return (!message.viewed && message.from.id === item.id) && (message.to.id === this.user.id);
137155
}
138156
});
139157
}
140158
return [];
141159
}
142160

143-
getFilter( statusSelected ) {
161+
getFilter(statusSelected) {
144162
if (statusSelected === this.offline) {
145-
return { filter: this.filterControl, status: [this.offline] };
163+
return {filter: this.filterControl, status: [this.offline]};
146164
}
147-
return { filter: this.filterControl, status: [this.online, this.busy] };
165+
return {filter: this.filterControl, status: [this.online, this.busy]};
148166
}
149167

150168
trackByFn(index) {
151169
return index;
152170
}
153171

154-
hasMessages() {
155-
const messages = this.messages.filter((value) => {
156-
if (value.to && this.user) {
157-
return !value.viewed && (value.to.id === this.user.id);
158-
}
159-
});
160-
return messages.length > 0;
161-
}
162-
163172
selectPartner(item: ChatContact) {
164173
this.updatePartner(item);
165-
this.selectContact.emit({ ...item, unreadMessages: this.getUnreadMessages(item) });
174+
this.selectContact.emit({...item, unreadMessages: this.getUnreadMessages(item)});
166175
this.renderer.setStyle(this.content.nativeElement, 'animation', 'showOffContent 0.2s forwards');
167-
this.readMessages( this.getUnreadMessages(item) );
168-
this.newMessages.emit( this.hasMessages() );
169-
}
170-
171-
readMessages( messages: ChatMessage[] ) {
172-
this.messages.forEach((item) => {
173-
messages.forEach((value) => {
174-
if (JSON.stringify(item) === JSON.stringify(value)) {
175-
item.viewed = true;
176-
}
177-
});
178-
});
179-
}
180-
181-
readAllMessages() {
182-
this.messages.forEach((item: ChatMessage, index, array) => item.viewed = true );
176+
this.chatService.readMessages( this.getUnreadMessages(item), this.user, this.id);
183177
}
184178

185179
updatePartner(item: ChatContact) {
186180
this.partner = item;
187181
}
188182

189-
loadMessages(messages: ChatMessage[]) {
190-
this.messages = messages;
191-
this.newMessages.emit( this.hasMessages() );
192-
}
193-
194-
appendMessage(message: ChatMessage) {
195-
this.messages = [ ...this.messages, message ];
196-
this.newMessages.emit( this.hasMessages() );
197-
}
198-
199183
setStatus(status: Status) {
200-
this.changeStatus.emit({ user: this.user, status: status });
184+
this.changeStatus.emit({user: this.user, status: status});
201185
}
202186

203187
onMessage(message: { value: string, time: Date }) {
204188
const msm = {
189+
id: String(new Date().getTime()),
205190
to: this.partner,
206191
from: this.user,
207192
message: message.value,
208193
time: message.time,
209194
viewed: false
210195
};
211196
this.sendMessage.emit(msm);
212-
this.appendMessage(msm);
213197
}
214198

215199
selectStatus(status) {
@@ -224,7 +208,6 @@ export class TlChatList implements AfterViewInit, OnDestroy {
224208

225209
ngOnDestroy() {
226210
this.subscription.unsubscribe();
227-
this.chatService.removeChat( this.id );
228211
}
229212

230213
}

projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
import { ChatContact } from './chat-contact.interface';
2525

2626
export interface ChatMessage {
27-
id?: string;
27+
id: string;
2828
to: ChatContact;
2929
from: ChatContact;
3030
message: string;

projects/truly-ui/src/components/chatlist/parts/chat-content.html

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<div class="chat-content-wrapper" [style.height]="'calc(' + maxHeight + ' - 35px)'">
22

3-
<div class="chat-messages-content" #messageContent [style.height]="'calc(' + maxHeight + ' - 75px)'">
3+
<div class="chat-messages-content" [class.smooth]="smoothScroll" #messageContent [style.height]="'calc(' + maxHeight + ' - 75px)'">
44

55
<ng-container *ngIf="!loadingMessages; else loadMessagesTemplate">
66
<ng-container *ngFor="let item of messages | filterMessage; trackBy:trackByFn">
7-
87
<div class="chat-time"> {{ currentDate(item.date) }}</div>
98
<ng-container *ngFor="let msg of item.messages; trackBy:trackByFn">
109

@@ -17,10 +16,8 @@
1716
</ng-container>
1817

1918
</ng-container>
20-
2119
</ng-container>
2220
</ng-container>
23-
2421
</div>
2522

2623
<div class="chat-type">
@@ -54,7 +51,6 @@
5451
<div class="chat-partner">
5552
<div class="chat-text-content">
5653
<div class="chat-arrow"></div>
57-
5854
<p>{{ message?.message }}</p>
5955
<span>{{ message.time | date:'HH:mm' }}</span>
6056
</div>

projects/truly-ui/src/components/chatlist/parts/chat-content.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
.chat-messages-content {
77
overflow-y: auto;
88
height: 410px;
9-
scroll-behavior: smooth;
109
background: rgb(229, 221, 213);
1110
text-align: center;
1211
&:before {
@@ -38,6 +37,9 @@
3837
background: #e4e4e4;
3938
border-radius: 5px;
4039
}
40+
&.smooth {
41+
scroll-behavior: smooth;
42+
}
4143
}
4244
}
4345

@@ -86,6 +88,7 @@
8688
margin: 0;
8789
line-height: 20px;
8890
font-family: Segoe UI, serif;
91+
text-align: left;
8992
}
9093
> span {
9194
font-size: .8em;

0 commit comments

Comments
 (0)