Started User Search Logic

qortal-ui-plugins/plugins/core/components/ChatSeachResults.js

@@ -0,0 +1,47 @@
+import { LitElement, html } from 'lit';
+import { render } from 'lit/html.js';
+import { chatSearchResultsStyles } from './ChatSearchResults-css.js'
+
+export class ChatSearchResults extends LitElement {
+  static get properties() {
+		return {
+      onClickFunc: { attribute: false },
+      searchResults: { type: Array },
+      loading: { type: Boolean }
+    }
+	}
+
+  static styles = [chatSearchResultsStyles]
+
+  render() {
+    console.log(this.searchResults, "search results here");
+    return html`
+      <div class="chat-results-card">
+        ${this.loading ? (
+          html`
+            <div class="spinner-container">
+              <paper-spinner-lite active></paper-spinner-lite>
+            </div>
+          `
+        ) : (
+          html`
+          ${this.searchResults.map((result) => {
+            return (
+              html`
+              <div class="chat-result-container" @click=${() => {
+                  this.onClickFunc();
+              }}>
+                <p class="chat-result">
+                  ${result}
+                </p>
+              </div>
+              `
+            )}
+          )}
+          `
+        )}
+      </div>
+    `;
+  }
+}
+customElements.define('chat-search-results', ChatSearchResults);

qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js

@@ -0,0 +1,43 @@
+import { css } from 'lit'
+
+export const chatSearchResultsStyles = css`
+  .chat-results-card {
+    padding: 10px 20px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    width: 300px;
+    min-height: 200px;
+    height: auto;
+    border-radius: 5px;
+    background-color: var(--white);
+  }
+
+  .chat-result-container {
+    padding: 5px;
+    margin-bottom: 5px;
+    transition: box-shadow 0.1s ease-in-out;
+    box-shadow: none;
+  }
+
+  .chat-result-container:hover {
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    box-sizing: border-box;
+    -webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.397);
+    box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.397);
+  }
+
+  .chat-result {
+    font-family: Roboto, sans-serif;
+    font-weight: 300;
+    letter-spacing: 0.3px;
+    font-size: 14px;
+    color: var(--chat-bubble-msg-color);
+  }
+
+  .spinner-container {
+		display: flex;
+		width: 100%;
+		justify-content: center
+	}
+`

qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

@@ -331,10 +331,7 @@ class ChatTextEditor extends LitElement {
         });
 
 
-        this.emojiPickerHandler.addEventListener('click', () => {
+        this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
-            console.log("yo what's up?")
-            this.emojiPicker.togglePicker(this.emojiPickerHandler)
-        });
 
         await this.updateComplete;
         this.initChatEditor();

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js

@@ -0,0 +1,357 @@
+import { css } from 'lit'
+
+export const qchatStyles = css`
+  * {
+      --mdc-theme-primary: rgb(3, 169, 244);
+      --mdc-theme-secondary: var(--mdc-theme-primary);
+      --paper-input-container-focus-color: var(--mdc-theme-primary);
+      --mdc-theme-surface: var(--white);
+      --mdc-dialog-content-ink-color: var(--black);
+      --lumo-primary-text-color: rgb(0, 167, 245);
+      --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
+      --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
+      --lumo-primary-color: hsl(199, 100%, 48%);
+      --lumo-base-color: var(--white);
+      --lumo-body-text-color: var(--black);
+      --_lumo-grid-border-color: var(--border);
+      --_lumo-grid-secondary-border-color: var(--border2);
+      --mdc-dialog-min-width: 750px;
+  }
+
+  paper-spinner-lite {
+      height: 24px;
+      width: 24px;
+      --paper-spinner-color: var(--mdc-theme-primary);
+      --paper-spinner-stroke-width: 2px;
+  }
+
+  *,
+  *:before,
+  *:after {
+      box-sizing: border-box;
+  }
+
+  ul {
+      list-style: none;
+      padding: 0;
+  }
+
+  .container {
+      margin: 0 auto;
+      width: 100%;
+      background: var(--white);
+  }
+
+  .people-list {
+      width: 20vw;
+      float: left;
+      height: 100vh;
+      overflow-y: hidden;
+      border-right: 3px #ddd solid;
+  }
+
+  .people-list .blockedusers {
+      position: absolute;
+      bottom: 0;
+      width: 20vw;
+      height: 60px;
+      background: var(--white);
+      border-top: 1px solid var(--border);
+      border-right: 3px #ddd solid;
+  }
+
+  .people-list .search {
+      padding-top: 20px;
+      padding-left: 20px;
+      padding-right: 20px;
+  }
+
+  .center {
+      margin: 0;
+      position: absolute;
+      padding-top: 12px;
+      left: 50%;
+      -ms-transform: translateX(-50%);
+      transform: translateX(-50%);
+  }
+
+  .people-list .create-chat {
+      border-radius: 5px;
+      border: none;
+      display: inline-block;
+      padding: 14px;
+      color: #fff;
+      background: var(--tradehead);
+      width: 100%;
+      font-size: 15px;
+      text-align: center;
+      cursor: pointer;
+  }
+
+  .people-list .create-chat:hover {
+      opacity: .8;
+      box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
+  }
+
+  .people-list ul {
+      padding: 0;
+      height: 85vh;
+      overflow-y: auto;
+      overflow-x: hidden;     
+  }
+
+  .chat {
+      width: 80vw;
+      height: 100vh;
+      float: left;
+      background: var(--white);
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      color: #434651;
+      box-sizing: border-box;
+  }
+
+  .chat .new-message-bar {
+      display: flex;
+      flex: 0 1 auto;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 25px;
+      font-size: 14px;
+      font-weight: 500;
+      top: 0;
+      position: absolute;
+      left: 20vw;
+      right: 0;
+      z-index: 5;
+      background: var(--tradehead);
+      color: var(--white);
+      border-radius: 0 0 8px 8px;
+      min-height: 25px;
+      transition: opacity .15s;
+      text-transform: capitalize;
+      opacity: .85;
+      cursor: pointer;
+  }
+
+  .chat .new-message-bar:hover {
+      opacity: .75;
+      transform: translateY(-1px);
+      box-shadow: 0 3px 7px rgba(0, 0, 0, .2);
+  }
+
+  .hide-new-message-bar {
+      display: none !important;
+  }
+
+  .chat .chat-history {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 100%;
+      left: 20vw;
+      border-bottom: 2px solid var(--white);
+      overflow-y: hidden;
+      height: 100vh;
+      box-sizing: border-box;
+  }
+
+  .chat .chat-message {
+      padding: 10px;
+      height: 10%;
+      display: inline-block;
+      width: 100%;
+      background-color: #eee;
+  }
+
+  .chat .chat-message textarea {
+      width: 90%;
+      border: none;
+      font-size: 16px;
+      padding: 10px 20px;
+      border-radius: 5px;
+      resize: none;
+  }
+
+  .chat .chat-message button {
+      float: right;
+      color: #94c2ed;
+      font-size: 16px;
+      text-transform: uppercase;
+      border: none;
+      cursor: pointer;
+      font-weight: bold;
+      background: #f2f5f8;
+      padding: 10px;
+      margin-top: 4px;
+      margin-right: 4px;
+  }
+
+  .chat .chat-message button:hover {
+      color: #75b1e8;
+  }
+
+  .online,
+  .offline,
+  .me {
+      margin-right: 3px;
+      font-size: 10px;
+  }
+
+  .clearfix:after {
+      visibility: hidden;
+      display: block;
+      font-size: 0;
+      content: " ";
+      clear: both;
+      height: 0;
+  }
+
+  .red {
+      --mdc-theme-primary: red;
+  }
+
+  h2 {
+      margin:0;
+  }
+
+  h2, h3, h4, h5 {
+      color: var(--black);
+      font-weight: 400;
+  }
+
+  [hidden] {
+      display: hidden !important;
+      visibility: none !important;
+  }
+
+  .details {
+      display: flex;
+      font-size: 18px;
+  }
+
+  .title {
+      font-weight:600;
+      font-size:12px;
+      line-height: 32px;
+      opacity: 0.66;
+  }
+
+  .textarea {
+      width: 100%;
+      border: none;
+      display: inline-block;
+      font-size: 16px;
+      padding: 10px 20px;
+      border-radius: 5px;
+      height: 120px;
+      resize: none;
+      background: #eee;
+  }
+
+  .dialog-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      padding: 0 10px;
+      gap: 10px;
+      height: 100%;
+  }
+
+  .dialog-header {
+      color: var(--chat-bubble-msg-color);
+  }
+
+  .dialog-subheader {
+      color: var(--chat-bubble-msg-color);
+  }
+
+  .modal-button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  }
+
+  .modal-button {
+      font-family: Roboto, sans-serif;
+      font-size: 16px;
+      color: var(--mdc-theme-primary);
+      background-color: transparent;
+      padding: 8px 10px;
+      border-radius: 5px;
+      border: none;
+      transition: all 0.3s ease-in-out;
+  }
+
+  .modal-button-red {
+      font-family: Roboto, sans-serif;
+      font-size: 16px;
+      color: #F44336;
+      background-color: transparent;
+      padding: 8px 10px;
+      border-radius: 5px;
+      border: none;
+      transition: all 0.3s ease-in-out;
+      }
+
+  .modal-button-red:hover {
+      cursor: pointer;
+      background-color: #f4433663;
+      }
+
+  .modal-button:hover {
+      cursor: pointer;
+      background-color: #03a8f475;
+  }
+
+  .name-input {
+    width: 100%;
+    outline: 0;
+    border-width: 0 0 2px;
+    border-color: var(--mdc-theme-primary);
+    background-color: transparent;
+    padding: 10px;
+    font-family: Roboto, sans-serif;
+    font-size: 15px;
+    color: var(--chat-bubble-msg-color);
+  }
+
+  .name-input::selection {
+        background-color: var(--mdc-theme-primary);
+        color: white;
+  }
+
+  .name-input::placeholder {
+    opacity: 0.9;
+    color: var(--black);
+  }
+
+  .search-field {
+    width: 100%;
+    position: relative;
+  }
+
+  .search-icon {
+    position: absolute;
+    right: 3px;
+    color: var(--chat-bubble-msg-color);
+    transition: all 0.3s ease-in-out;
+    background: none;
+    border-radius: 50%;
+    padding: 6px 3px;
+    font-size: 19px;
+  }
+
+  .search-icon:hover {
+    cursor: pointer;
+    background: #d7d7d75c;
+  }
+
+  .search-results-div {
+    position: absolute;
+    top: 25px;
+    right: 25px;
+  }
+`

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { render } from 'lit/html.js';
 import { Epml } from '../../../../epml.js';
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate';
+import { qchatStyles } from './q-chat-css.src.js'
 import WebWorker from 'web-worker:./computePowWorker.src.js';
 
 registerTranslateConfig({
@@ -12,6 +13,7 @@ import '../../components/ChatWelcomePage.js';
 import '../../components/ChatHead.js';
 import '../../components/ChatPage.js';
 import '../../components/WrapperModal.js';
+import '../../components/ChatSeachResults.js';
 import snackbar from '../../components/snackbar.js';
 import '@polymer/paper-spinner/paper-spinner-lite.js';
 import '@material/mwc-button';
@@ -41,320 +43,13 @@ class Chat extends LitElement {
             chatEditor: { type:  Object },
             imageFile: { type: Object },
             activeChatHeadUrl: {type: String},
-            openPrivateMessage: { type: Boolean }
+            openPrivateMessage: { type: Boolean },
+            userFound: { type: Array} 
         }
     }
 
-    static get styles() {
+ static styles = [qchatStyles]
-        return css`
-            * {
-                --mdc-theme-primary: rgb(3, 169, 244);
-                --mdc-theme-secondary: var(--mdc-theme-primary);
-                --paper-input-container-focus-color: var(--mdc-theme-primary);
-                --mdc-theme-surface: var(--white);
-                --mdc-dialog-content-ink-color: var(--black);
-                --lumo-primary-text-color: rgb(0, 167, 245);
-                --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
-                --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
-                --lumo-primary-color: hsl(199, 100%, 48%);
-                --lumo-base-color: var(--white);
-                --lumo-body-text-color: var(--black);
-                --_lumo-grid-border-color: var(--border);
-                --_lumo-grid-secondary-border-color: var(--border2);
-                --mdc-dialog-min-width: 750px;
-            }
 
-            paper-spinner-lite {
-                height: 24px;
-                width: 24px;
-                --paper-spinner-color: var(--mdc-theme-primary);
-                --paper-spinner-stroke-width: 2px;
-            }
-
-            *,
-            *:before,
-            *:after {
-                box-sizing: border-box;
-            }
-
-            ul {
-                list-style: none;
-                padding: 0;
-            }
-
-            .container {
-                margin: 0 auto;
-                width: 100%;
-                background: var(--white);
-            }
-
-            .people-list {
-                width: 20vw;
-                float: left;
-                height: 100vh;
-                overflow-y: hidden;
-                border-right: 3px #ddd solid;
-            }
-
-            .people-list .blockedusers {
-                position: absolute;
-                bottom: 0;
-                width: 20vw;
-                height: 60px;
-                background: var(--white);
-                border-top: 1px solid var(--border);
-                border-right: 3px #ddd solid;
-            }
-
-            .people-list .search {
-                padding-top: 20px;
-                padding-left: 20px;
-                padding-right: 20px;
-            }
-
-            .center {
-                margin: 0;
-                position: absolute;
-                padding-top: 12px;
-                left: 50%;
-                -ms-transform: translateX(-50%);
-                transform: translateX(-50%);
-            }
-
-            .people-list .create-chat {
-                border-radius: 5px;
-                border: none;
-                display: inline-block;
-                padding: 14px;
-                color: #fff;
-                background: var(--tradehead);
-                width: 100%;
-                font-size: 15px;
-                text-align: center;
-                cursor: pointer;
-            }
-
-            .people-list .create-chat:hover {
-                opacity: .8;
-                box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
-            }
-
-            .people-list ul {
-                padding: 0;
-                height: 85vh;
-                overflow-y: auto;
-                overflow-x: hidden;     
-            }
-
-            .chat {
-                width: 80vw;
-                height: 100vh;
-                float: left;
-                background: var(--white);
-                border-top-right-radius: 5px;
-                border-bottom-right-radius: 5px;
-                color: #434651;
-                box-sizing: border-box;
-            }
-
-            .chat .new-message-bar {
-                display: flex;
-                flex: 0 1 auto;
-                align-items: center;
-                justify-content: space-between;
-                padding: 0px 25px;
-                font-size: 14px;
-                font-weight: 500;
-                top: 0;
-                position: absolute;
-                left: 20vw;
-                right: 0;
-                z-index: 5;
-                background: var(--tradehead);
-                color: var(--white);
-                border-radius: 0 0 8px 8px;
-                min-height: 25px;
-                transition: opacity .15s;
-                text-transform: capitalize;
-                opacity: .85;
-                cursor: pointer;
-            }
-
-            .chat .new-message-bar:hover {
-                opacity: .75;
-                transform: translateY(-1px);
-                box-shadow: 0 3px 7px rgba(0, 0, 0, .2);
-            }
-
-            .hide-new-message-bar {
-                display: none !important;
-            }
-
-            .chat .chat-history {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 100%;
-                left: 20vw;
-                border-bottom: 2px solid var(--white);
-                overflow-y: hidden;
-                height: 100vh;
-                box-sizing: border-box;
-            }
-
-            .chat .chat-message {
-                padding: 10px;
-                height: 10%;
-                display: inline-block;
-                width: 100%;
-                background-color: #eee;
-            }
-
-            .chat .chat-message textarea {
-                width: 90%;
-                border: none;
-                font-size: 16px;
-                padding: 10px 20px;
-                border-radius: 5px;
-                resize: none;
-            }
-
-            .chat .chat-message button {
-                float: right;
-                color: #94c2ed;
-                font-size: 16px;
-                text-transform: uppercase;
-                border: none;
-                cursor: pointer;
-                font-weight: bold;
-                background: #f2f5f8;
-                padding: 10px;
-                margin-top: 4px;
-                margin-right: 4px;
-            }
-
-            .chat .chat-message button:hover {
-                color: #75b1e8;
-            }
-
-            .online,
-            .offline,
-            .me {
-                margin-right: 3px;
-                font-size: 10px;
-            }
-
-            .clearfix:after {
-                visibility: hidden;
-                display: block;
-                font-size: 0;
-                content: " ";
-                clear: both;
-                height: 0;
-            }
-
-            .red {
-                --mdc-theme-primary: red;
-            }
-
-            h2 {
-                margin:0;
-            }
-
-            h2, h3, h4, h5 {
-                color: var(--black);
-                font-weight: 400;
-            }
-
-            [hidden] {
-                display: hidden !important;
-                visibility: none !important;
-            }
-
-            .details {
-                display: flex;
-                font-size: 18px;
-            }
-
-            .title {
-                font-weight:600;
-                font-size:12px;
-                line-height: 32px;
-                opacity: 0.66;
-            }
-
-            .input {
-                width: 100%;
-                border: none;
-                display: inline-block;
-                font-size: 16px;
-                padding: 10px 20px;
-                border-radius: 5px;
-                resize: none;
-                background: #eee;
-            }
-
-            .textarea {
-                width: 100%;
-                border: none;
-                display: inline-block;
-                font-size: 16px;
-                padding: 10px 20px;
-                border-radius: 5px;
-                height: 120px;
-                resize: none;
-                background: #eee;
-            }
-
-            .dialog-container {
-                position: relative;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                padding: 0 10px;
-                gap: 10px;
-                height: 100%;
-            }
-            .modal-button-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            }
-
-            .modal-button {
-                font-family: Roboto, sans-serif;
-                font-size: 16px;
-                color: var(--mdc-theme-primary);
-                background-color: transparent;
-                padding: 8px 10px;
-                border-radius: 5px;
-                border: none;
-                transition: all 0.3s ease-in-out;
-            }
-
-            .modal-button-red {
-                font-family: Roboto, sans-serif;
-                font-size: 16px;
-                color: #F44336;
-                background-color: transparent;
-                padding: 8px 10px;
-                border-radius: 5px;
-                border: none;
-                transition: all 0.3s ease-in-out;
-                }
-
-            .modal-button-red:hover {
-                cursor: pointer;
-                background-color: #f4433663;
-                }
-
-            .modal-button:hover {
-                cursor: pointer;
-                background-color: #03a8f475;
-            }
-    `
-    }
 
     constructor() {
         super()
@@ -385,6 +80,7 @@ class Chat extends LitElement {
         this.imageFile = null
         this.activeChatHeadUrl = ''
         this.openPrivateMessage = false
+        this.userFound = []
     }
 
   async setActiveChatHeadUrl(url) {
@@ -394,6 +90,7 @@ class Chat extends LitElement {
     }
 
     render() {
+        console.log(6, "here");
         return html`
             <div class="container clearfix">
                 <div class="people-list" id="people-list">
@@ -431,20 +128,29 @@ class Chat extends LitElement {
                         this.openPrivateMessage = false;
                     } } 
                     style=${this.openPrivateMessage ? "display: block" : "display: none"}>
-                    <div>
+                    <div style=${"position: relative"}>
                         <div class="dialog-container">
-                            <div style="text-align: center">
+                            <div class="dialog-header" style="text-align: center">
                                 <h1>${translate("chatpage.cchange1")}</h1>
                                 <hr>
                             </div>
-                            <p>${translate("chatpage.cchange6")}</p>
+                            <p class="dialog-subheader">${translate("chatpage.cchange6")}</p>
-                            <textarea 
+                            <div class="search-field">
-                                class="input" 
+                                <input 
-                                ?disabled=${this.isLoading} 
+                                    type="text"
-                                id="sendTo" 
+                                    class="name-input" 
-                                placeholder="${translate("chatpage.cchange7")}" 
+                                    ?disabled=${this.isLoading} 
-                                rows="1">
+                                    id="sendTo" 
-                            </textarea>
+                                    placeholder="${translate("chatpage.cchange7")}" 
+                                />
+                                <vaadin-icon 
+                                    @click=${this.userSearch}
+                                    slot="icon" 
+                                    icon="vaadin:search"
+                                    class="search-icon">
+                                </vaadin-icon>
+                            </div>
+                            
                             <chat-text-editor 
                                 iframeId="privateMessage" 
                                 ?hasGlobalEvents=${false}
@@ -482,6 +188,17 @@ class Chat extends LitElement {
                                 </button>
                             </div>
                         </div>
+                        <div class="search-results-div">
+                            ${this.userFound.length > 0 ? (
+                                html`
+                                <chat-search-results 
+                                    .onClickFunc=${() => console.log('user selected')}
+                                    .searchResults=${this.userFound}
+                                    ?loading=${this.isLoading}>
+                                </chat-search-results>
+                                `
+                            ) : null}
+                        </div>
                     </div>    	
                 </wrapper-modal>
 
@@ -535,9 +252,23 @@ class Chat extends LitElement {
             return false;
         }
 
-        this.shadowRoot.getElementById('sendTo').addEventListener('keydown', stopKeyEventPropagation);
+        const nameInput = this.shadowRoot.getElementById('sendTo');
+
+        nameInput.addEventListener('keydown', stopKeyEventPropagation);
         this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation);
 
+        // let typingTimer;                
+        // let doneTypingInterval = 3000;  
+
+        // //on keyup, start the countdown
+        // nameInput.addEventListener('keyup', () => {
+        //     clearTimeout(typingTimer);
+        //     if (nameInput.value) {
+        //         console.log("typing started!");
+        //         typingTimer = setTimeout(this.userSearch, doneTypingInterval);
+        //     }
+        // });
+
         const getDataFromURL = () => {
             let tempUrl = document.location.href
             let splitedUrl = decodeURI(tempUrl).split('?')
@@ -637,6 +368,28 @@ class Chat extends LitElement {
         parentEpml.imReady()
     }
 
+    async updated(changedProperties) {
+        if (changedProperties && changedProperties.has('userFound')) {
+            console.log(this.userFound, "user found array here");
+        }
+    }
+
+   async userSearch() {
+        try {
+            let result = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/names/${this.shadowRoot.getElementById('sendTo').value}`
+            })
+            console.log({result});
+            this.userFound = [
+                ...this.userFound, 
+                result.owner,
+              ];
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
     setChatEditor(editor) {
         this.chatEditor = editor;
     }