20
20
SOFTWARE.
21
21
*/
22
22
import {
23
- Component , ElementRef , EventEmitter , Input , Renderer2 , ViewChild , Output , AfterViewInit ,
24
- OnDestroy
23
+ Component , ElementRef , EventEmitter , Input , Renderer2 , ViewChild , Output ,
24
+ OnDestroy , OnInit , ChangeDetectorRef
25
25
} 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' ;
33
33
34
34
let uniqueIdentifier = 0 ;
35
35
36
- @Component ( {
36
+ @Component ( {
37
37
selector : 'tl-chatlist' ,
38
38
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 {
42
42
43
43
@Input ( ) maxHeight = '450px' ;
44
44
@@ -61,7 +61,7 @@ export class TlChatList implements AfterViewInit, OnDestroy {
61
61
@Input ( ) user : ChatContact ;
62
62
63
63
@Input ( 'contacts' )
64
- set contacts ( data : ChatContact [ ] ) {
64
+ set contacts ( data : ChatContact [ ] ) {
65
65
if ( data && data . length > 0 && this . user ) {
66
66
if ( ! this . user . id ) {
67
67
throw Error ( 'User id not found' ) ;
@@ -74,15 +74,15 @@ export class TlChatList implements AfterViewInit, OnDestroy {
74
74
return this . _dataSource ;
75
75
}
76
76
77
+ @Output ( ) readMessage : EventEmitter < ChatMessage [ ] > = new EventEmitter ( ) ;
78
+
77
79
@Output ( ) sendMessage : EventEmitter < ChatMessage > = new EventEmitter ( ) ;
78
80
79
81
@Output ( ) changeStatus : EventEmitter < any > = new EventEmitter ( ) ;
80
82
81
- @Output ( ) newMessages : EventEmitter < boolean > = new EventEmitter ( ) ;
82
-
83
83
@Output ( ) selectContact : EventEmitter < any > = new EventEmitter ( ) ;
84
84
85
- @ViewChild ( 'content' , { static : false } ) content : ElementRef ;
85
+ @ViewChild ( 'content' , { static : false } ) content : ElementRef ;
86
86
87
87
public transform = '0' ;
88
88
@@ -96,13 +96,17 @@ export class TlChatList implements AfterViewInit, OnDestroy {
96
96
97
97
public filterControl = '' ;
98
98
99
- public messages : ChatMessage [ ] = [ ] ;
100
-
101
99
private _dataSource ;
102
100
101
+ public messages = [ ] ;
102
+
103
103
private subscription = new Subscription ( ) ;
104
104
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
+ }
106
110
107
111
get online ( ) {
108
112
return Status . ONLINE ;
@@ -116,8 +120,25 @@ export class TlChatList implements AfterViewInit, OnDestroy {
116
120
return Status . BUSY ;
117
121
}
118
122
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
+ } ) ) ;
121
142
}
122
143
123
144
animationContentDone ( event : AnimationEvent ) {
@@ -127,89 +148,52 @@ export class TlChatList implements AfterViewInit, OnDestroy {
127
148
}
128
149
129
150
getUnreadMessages ( item : ChatContact ) {
130
- if ( ! item || ! item . id ) {
131
- return [ ] ;
132
- }
133
151
if ( this . messages . length > 0 ) {
134
152
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 ) ;
137
155
}
138
156
} ) ;
139
157
}
140
158
return [ ] ;
141
159
}
142
160
143
- getFilter ( statusSelected ) {
161
+ getFilter ( statusSelected ) {
144
162
if ( statusSelected === this . offline ) {
145
- return { filter : this . filterControl , status : [ this . offline ] } ;
163
+ return { filter : this . filterControl , status : [ this . offline ] } ;
146
164
}
147
- return { filter : this . filterControl , status : [ this . online , this . busy ] } ;
165
+ return { filter : this . filterControl , status : [ this . online , this . busy ] } ;
148
166
}
149
167
150
168
trackByFn ( index ) {
151
169
return index ;
152
170
}
153
171
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
-
163
172
selectPartner ( item : ChatContact ) {
164
173
this . updatePartner ( item ) ;
165
- this . selectContact . emit ( { ...item , unreadMessages : this . getUnreadMessages ( item ) } ) ;
174
+ this . selectContact . emit ( { ...item , unreadMessages : this . getUnreadMessages ( item ) } ) ;
166
175
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 ) ;
183
177
}
184
178
185
179
updatePartner ( item : ChatContact ) {
186
180
this . partner = item ;
187
181
}
188
182
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
-
199
183
setStatus ( status : Status ) {
200
- this . changeStatus . emit ( { user : this . user , status : status } ) ;
184
+ this . changeStatus . emit ( { user : this . user , status : status } ) ;
201
185
}
202
186
203
187
onMessage ( message : { value : string , time : Date } ) {
204
188
const msm = {
189
+ id : String ( new Date ( ) . getTime ( ) ) ,
205
190
to : this . partner ,
206
191
from : this . user ,
207
192
message : message . value ,
208
193
time : message . time ,
209
194
viewed : false
210
195
} ;
211
196
this . sendMessage . emit ( msm ) ;
212
- this . appendMessage ( msm ) ;
213
197
}
214
198
215
199
selectStatus ( status ) {
@@ -224,7 +208,6 @@ export class TlChatList implements AfterViewInit, OnDestroy {
224
208
225
209
ngOnDestroy ( ) {
226
210
this . subscription . unsubscribe ( ) ;
227
- this . chatService . removeChat ( this . id ) ;
228
211
}
229
212
230
213
}
0 commit comments