@ -44,7 +44,9 @@ class Chat extends LitElement {
imageFile : { type : Object } , imageFile : { type : Object } ,
activeChatHeadUrl : { type : String } , activeChatHeadUrl : { type : String } ,
openPrivateMessage : { type : Boolean } , openPrivateMessage : { type : Boolean } ,
userFound : { type : Array }
userFound : { type : Array } ,
userFoundModalOpen : { type : Boolean } ,
userSelected : { type : String }
} }
} }
@ -81,6 +83,8 @@ class Chat extends LitElement {
this . activeChatHeadUrl = '' this . activeChatHeadUrl = ''
this . openPrivateMessage = false this . openPrivateMessage = false
this . userFound = [ ] this . userFound = [ ]
this . userFoundModalOpen = false
this . userSelected = ''
} }
async setActiveChatHeadUrl ( url ) { async setActiveChatHeadUrl ( url ) {
@ -90,7 +94,7 @@ class Chat extends LitElement {
} }
render ( ) { render ( ) {
console . log ( 6 , "here" ) ; console . log ( 22 , "here" ) ;
return html ` return html `
< div class = "container clearfix" > < div class = "container clearfix" >
< div class = "people-list" id = "people-list" > < div class = "people-list" id = "people-list" >
@ -126,6 +130,9 @@ class Chat extends LitElement {
. onClickFunc = $ { ( ) => { . onClickFunc = $ { ( ) => {
this . chatEditor . resetValue ( ) ; this . chatEditor . resetValue ( ) ;
this . openPrivateMessage = false ; this . openPrivateMessage = false ;
this . shadowRoot . getElementById ( 'sendTo' ) . value = "" ;
this . userFoundModalOpen = false ;
this . userFound = [ ] ;
} }
} }
style = $ { this . openPrivateMessage ? "display: block" : "display: none" } > style = $ { this . openPrivateMessage ? "display: block" : "display: none" } >
< div style = $ { "position: relative" } > < div style = $ { "position: relative" } >
@ -142,13 +149,26 @@ class Chat extends LitElement {
? disabled = $ { this . isLoading }
? disabled = $ { this . isLoading }
id = "sendTo"
id = "sendTo"
placeholder = "${translate(" chatpage . cchange7 ")}"
placeholder = "${translate(" chatpage . cchange7 ")}"
value = $ { this . userSelected }
@ keypress = $ { ( ) => this . userSelected = "" }
/ > / >
< vaadin - icon
$ { this . userSelected ? (
@ click = $ { this . userSearch } html `
slot = "icon"
< div class = "user-verified" >
icon = "vaadin:search" < p > User Verified < / p >
class = "search-icon" > < vaadin - icon icon = "vaadin:check-circle-o" slot = "icon" > < / v a a d i n - i c o n >
< / v a a d i n - i c o n > < / d i v >
`
) : (
html `
< vaadin - icon
@ click = $ { this . userSearch }
slot = "icon"
icon = "vaadin:open-book"
class = "search-icon" >
< / v a a d i n - i c o n >
`
) }
< / d i v > < / d i v >
< chat - text - editor
< chat - text - editor
@ -189,15 +209,20 @@ class Chat extends LitElement {
< / d i v > < / d i v >
< / d i v > < / d i v >
< div class = "search-results-div" > < div class = "search-results-div" >
$ { this . userFound . length > 0 ? ( < chat - search - results
html ` . onClickFunc = $ { ( result ) => {
< chat - search - results
this . userSelected = result ;
. onClickFunc = $ { ( ) => console . log ( 'user selected' ) } this . userFound = [ ] ;
. searchResults = $ { this . userFound } this . userFoundModalOpen = false ;
? loading = $ { this . isLoading } > } }
< / c h a t - s e a r c h - r e s u l t s > . closeFunc = $ { ( ) => {
` this . userFoundModalOpen = false ;
) : null } this . userFound = [ ] ;
} }
. searchResults = $ { this . userFound }
? isOpen = $ { this . userFoundModalOpen }
? loading = $ { this . isLoading } >
< / c h a t - s e a r c h - r e s u l t s >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / w r a p p e r - m o d a l > < / w r a p p e r - m o d a l >
@ -255,6 +280,7 @@ class Chat extends LitElement {
const nameInput = this . shadowRoot . getElementById ( 'sendTo' ) ; const nameInput = this . shadowRoot . getElementById ( 'sendTo' ) ;
nameInput . addEventListener ( 'keydown' , stopKeyEventPropagation ) ; nameInput . addEventListener ( 'keydown' , stopKeyEventPropagation ) ;
this . shadowRoot . getElementById ( 'messageBox' ) . addEventListener ( 'keydown' , stopKeyEventPropagation ) ; this . shadowRoot . getElementById ( 'messageBox' ) . addEventListener ( 'keydown' , stopKeyEventPropagation ) ;
// let typingTimer;
// let typingTimer;
@ -372,21 +398,36 @@ class Chat extends LitElement {
if ( changedProperties && changedProperties . has ( 'userFound' ) ) { if ( changedProperties && changedProperties . has ( 'userFound' ) ) {
console . log ( this . userFound , "user found array here" ) ; console . log ( this . userFound , "user found array here" ) ;
} }
if ( changedProperties && changedProperties . has ( 'userSelected' ) ) {
console . log ( this . userSelected , "user selected here" ) ;
}
} }
async userSearch ( ) { async userSearch ( ) {
const nameValue = this . shadowRoot . getElementById ( 'sendTo' ) . value ;
if ( ! nameValue ) {
this . userFound = [ ] ;
this . userFoundModalOpen = true ;
return ;
}
try { try {
let result = await parentEpml . request ( 'apiCall' , { cons tresult = await parentEpml . request ( 'apiCall' , {
type : 'api' , type : 'api' ,
url : ` /names/ ${ this . shadowRoot . getElementById ( 'sendTo' ) . value } ` url : ` /names/ ${ nameV alue} `
} ) } )
console . log ( { result } ) ; if ( result . error === 401 ) {
this . userFound = [ this . userFound = [ ] ;
... this . userFound ,
} else {
result . owner , this . userFound = [
] ; ... this . userFound ,
result . name ,
] ;
}
this . userFoundModalOpen = true ;
} catch ( error ) { } catch ( error ) {
console . error ( error ) ; console . error ( error ) ;
let err4string = get ( "chatpage.cchange35" ) ;
parentEpml . request ( 'showSnackBar' , ` ${ err4string } ` )
} }
} }
Justin Ferrari
2 years ago