Merge branch 'feature/group-features' into feature/new-editor

2023-01-13 22:04:31 -05:00 · 2023-01-13 22:04:31 -05:00 · 17d0efefaa
commit 17d0efefaa
parent 4ac349cb59 d40397ff79
7 changed files with 385 additions and 209 deletions
--- a/qortal-ui-core/language/us.json
+++ b/qortal-ui-core/language/us.json
@ -566,8 +566,11 @@
      "cchange57": "User Info",
      "cchange58": "SEND MESSAGE",
      "cchange59": "TIP USER",
-      "cchange60": "Enter Enabled",
-      "cchange61": "Enter Disabled"
+      "cchange60": "Group Invites Pending",
+      "cchange61": "Error when fetching group invites. Please try again!",
+      "cchange62": "Wrong Username and Address Inputted! Please try again!",
+      "cchange63": "Enter Enabled",
+      "cchange64": "Enter Disabled"
   },
   "welcomepage": {
      "wcchange1": "Welcome to Q-Chat",
--- a/qortal-ui-plugins/plugins/core/components/ChatGroupsManagement.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatGroupsManagement.js
@ -229,9 +229,9 @@ class ChatGroupsManagement extends LitElement {

  render() {
    return html`
-         <vaadin-icon @click=${()=> {
+         <!-- <vaadin-icon @click=${()=> {
            this.isOpenLeaveModal = true
-         }} class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon>
+         }} class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon> -->
         <!-- Leave Group Dialog -->
         <wrapper-modal 
                .removeImage=${() => {
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@ -1108,10 +1108,12 @@ class ChatPage extends LitElement {
                                    id="sendTo" 
                                    placeholder="${translate("chatpage.cchange7")}" 
                                    @keydown=${() => {
+                                        if (this.forwardActiveChatHeadUrl.selected) {
                                            this.forwardActiveChatHeadUrl = {};
                                            this.requestUpdate();
                                            } 
                                        }
+                                    }
                                />
                                ${this.forwardActiveChatHeadUrl.selected ? (
                                    html`
@ -1374,7 +1376,8 @@ class ChatPage extends LitElement {
        const nameValue = this.shadowRoot.getElementById('sendTo').value;
            if (!nameValue) {
                this.userFound = [];
-                this.userFoundModalOpen = true;
+                this.userFoundModalOpen = false;
+                this.loading = false;
                return;
            }
            try {
@ -1384,6 +1387,7 @@ class ChatPage extends LitElement {
                })
                if (result.error === 401) {
                    this.userFound = [];
+                    this.loading = false;
                } else {
                    this.userFound = [
                        ...this.userFound, 
@ -1392,6 +1396,7 @@ class ChatPage extends LitElement {
                }
                this.userFoundModalOpen = true;
            } catch (error) {
+                this.loading = false;
                console.error(error);
                let err4string = get("chatpage.cchange35");
                parentEpml.request('showSnackBar', `${err4string}`)
@ -2538,7 +2543,7 @@ async getName (recipient) {
            };

            if (this.forwardActiveChatHeadUrl.url) { 
-                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1]           
+                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];        
                try {
                    const res = await parentEpml.request('apiCall', {
                        type: 'api',
@ -2560,21 +2565,58 @@ async getName (recipient) {
               }
            }
    
-            if (!this.forwardActiveChatHeadUrl && this.shadowRoot.getElementById("sendTo").value !== "") {
+            if (!this.forwardActiveChatHeadUrl.selected && this.shadowRoot.getElementById("sendTo").value !== "") {
+                const userInput = this.shadowRoot.getElementById("sendTo").value.trim();
                try {
-                    const res =   await parentEpml.request('apiCall', {
+                    let userPubkey = "";
+                    const validatedAddress = await parentEpml.request('apiCall', {
                        type: 'api',
-                        url: `/addresses/publickey/${this.shadowRoot.getElementById("sendTo").value}`
-                    })
-                    if (res.error === 102) {
-                        publicKey.key = ''
-                        publicKey.hasPubKey = false
-                    } else if (res !== false) {
-                        publicKey.key = res
-                        publicKey.hasPubKey = true
+                        url: `/addresses/validate/${userInput}`
+                    });
+
+                    const validatedUsername = await parentEpml.request('apiCall', {
+                        type: 'api',
+                        url: `/names/${userInput}`
+                    });
+
+                    if (!validatedAddress && validatedUsername) {
+                        userPubkey = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/addresses/publickey/${validatedUsername.owner}`
+                        });
+                        this.forwardActiveChatHeadUrl = {
+                            ...this.forwardActiveChatHeadUrl,
+                            url: `direct/${validatedUsername.owner}`,
+                            name: validatedUsername.name,
+                            selected: true
+                        };
+                    } else if (validatedAddress && !validatedUsername.name) {
+                        userPubkey = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/addresses/publickey/${userInput}`
+                        });
+                        this.forwardActiveChatHeadUrl = {
+                            ...this.forwardActiveChatHeadUrl,
+                            url: `direct/${userInput}`,
+                            name: "",
+                            selected: true
+                        };
+                    } else if (!validatedAddress && !validatedUsername.name) {
+                        let err4string = get("chatpage.cchange62");
+                        parentEpml.request('showSnackBar', `${err4string}`);
+                        getSendChatResponse(false);
+                        return;
+                    }
+
+                    if (userPubkey.error === 102) {
+                        publicKey.key = '';
+                        publicKey.hasPubKey = false;
+                    } else if (userPubkey !== false) {
+                        publicKey.key = userPubkey;
+                        publicKey.hasPubKey = true;
                    } else {
-                        publicKey.key = ''
-                        publicKey.hasPubKey = false
+                        publicKey.key = '';
+                        publicKey.hasPubKey = false;
                    }
                } catch (error) {
                    console.error(error);
@ -2588,9 +2630,9 @@ async getName (recipient) {
            if (isRecipient === true) {
                if(!publicKey.hasPubKey){
                    let err4string = get("chatpage.cchange39");
-                    parentEpml.request('showSnackBar', `${err4string}`)
-                    getSendChatResponse(false)
-                    return
+                    parentEpml.request('showSnackBar', `${err4string}`);
+                    getSendChatResponse(false);
+                    return;
                }
                let chatResponse = await parentEpml.request('chat', {
                    type: 18,
@ -2678,6 +2720,8 @@ async getName (recipient) {
            } else {
                let err2string = get("chatpage.cchange21");
                parentEpml.request('showSnackBar', `${err2string}`);
+                this.forwardActiveChatHeadUrl = {};
+                this.shadowRoot.getElementById("sendTo").value = "";
            }

            this.isLoading = false;
--- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
@ -416,9 +416,9 @@ class ChatTextEditor extends LitElement {
        class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
      >
      ${this.isEnabledChatEnter ? html`
-      ${translate("chatpage.cchange60")}
+      ${translate("chatpage.cchange63")}
      ` : html`
-      ${translate("chatpage.cchange61")}
+      ${translate("chatpage.cchange64")}
      `}
  
      </button>
--- a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
+++ b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
@ -55,7 +55,7 @@ export class UserInfo extends LitElement {

  render() {
    let avatarImg = "";
-    if (this.selectedHead.name) {
+    if (this.selectedHead && this.selectedHead.name) {
        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
        const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.selectedHead.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
@ -78,7 +78,7 @@ export class UserInfo extends LitElement {
              ${avatarImg}
            </div>` : 
          html``}
-          ${!this.isImageLoaded && this.selectedHead.name ? 
+          ${!this.isImageLoaded && this.selectedHead && this.selectedHead.name ? 
            html`
            <div class="avatar-container">
              <div class="user-info-no-avatar">
@ -87,16 +87,14 @@ export class UserInfo extends LitElement {
            </div>
            `
            : ""}
-          ${!this.isImageLoaded && !this.selectedHead.name ? 
+          ${!this.isImageLoaded && this.selectedHead && !this.selectedHead.name ? 
            html`
-              <div
-                class="avatar-container"
-              >
+              <div class="avatar-container">
                <img src="/img/qortal-chat-logo.png" alt="avatar" />
              </div>`
            : ""}
        <div class="user-info-header">
-          ${this.selectedHead.name ? this.selectedHead.name : cropAddress(this.selectedHead.address)}
+          ${this.selectedHead && this.selectedHead.name ? this.selectedHead.name : this.selectedHead ? cropAddress(this.selectedHead.address) : null}
        </div>
        <div 
            class="send-message-button" 
--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js
+++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js
@ -54,10 +54,103 @@ export const qchatStyles = css`
      position: absolute;
      bottom: 0;
      width: 20vw;
-      height: 60px;
      background: var(--white);
      border-top: 1px solid var(--border);
      border-right: 3px #ddd solid;
+      display: flex;
+      justify-content: space-between;
+      gap: 15px;
+      flex-direction: column;
+      padding: 5px 30px 0 30px;
+  }
+
+  .groups-button-container {
+    position: relative;
+  }
+
+  .groups-button {
+    width: 100%;
+    background-color: rgb(116, 69, 240);
+    border: none;
+    color: white;
+    font-weight: bold;
+    font-family: 'Roboto';
+    letter-spacing: 0.8px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    gap: 10px;
+    padding: 5px 8px;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .groups-button-notif {
+    position: absolute;
+    top: -10px;
+    right: -8px;
+    width: 25px;
+    border-radius: 50%;
+    height: 25px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Montserrat, sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    background-color: rgb(51, 213, 0);
+    user-select: none;
+    transition: all 0.3s ease-in-out 0s;
+  }
+
+  .groups-button-notif:hover {
+    cursor: auto;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+
+  .groups-button-notif:hover + .groups-button-notif-number {
+    display: block;
+    opacity: 1;
+    animation: fadeIn 0.6s;
+}       
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        top: -10px;
+    }
+    
+    to {
+        opacity: 1;
+        top: -60px;
+    }
+}
+
+  .groups-button-notif-number {
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    width: 150px;
+    text-align: center;
+    border-radius: 3px;
+    padding: 5px 10px;
+    background-color: white;
+    color: black;
+    font-family: Roboto, sans-serif;
+    letter-spacing: 0.3px;
+    font-weight: 300;
+    display: none;
+    opacity: 0;
+    top: -60px;
+    box-shadow: rgb(216 216 216 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+  }
+
+  .groups-button:hover {
+    cursor: pointer;
+    filter: brightness(120%);
  }

  .people-list .search {
--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
+++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
@ -51,7 +51,8 @@ class Chat extends LitElement {
            userFound: { type: Array},
            userFoundModalOpen: { type: Boolean },
            userSelected: { type: Object },
-            editor: {type: Object}
+            editor: {type: Object},
+            groupInvites: { type: Array }
        }
    }

@ -90,6 +91,7 @@ class Chat extends LitElement {
        this.userFound = []
        this.userFoundModalOpen = false
        this.userSelected = {}
+        this.groupInvites = []
    }

  async setActiveChatHeadUrl(url) {
@ -177,9 +179,30 @@ class Chat extends LitElement {
                        ${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
                    </ul>
                    <div class="blockedusers">
-                        <div class="center">
-                            <mwc-button raised label="${translate("chatpage.cchange3")}" icon="person_off" @click=${() => this.shadowRoot.querySelector('#blockedUserDialog').show()}></mwc-button>
+                        <div class="groups-button-container">
+                            <a href="/app/group-management">
+                                <button class="groups-button">
+                                    <mwc-icon>groups</mwc-icon>
+                                    ${translate("sidemenu.groupmanagement")}
+                                </button>
+                            </a>
+                            ${this.groupInvites.length > 0 ? (
+                                html`                                
+                                <div class="groups-button-notif">
+                                   ${this.groupInvites.length} 
                                </div>
+                                <div class="groups-button-notif-number">
+                                    ${this.groupInvites.length} ${translate("chatpage.cchange60")}
+                                </div>
+                                `
+                            ) : null} 
+                        </div>
+                        <mwc-button 
+                            raised 
+                            label="${translate("chatpage.cchange3")}" 
+                            icon="person_off" 
+                            @click=${() => this.shadowRoot.querySelector('#blockedUserDialog').show()}>
+                        </mwc-button>
                    </div>
                </div>
                <div class="chat">
@ -341,11 +364,12 @@ class Chat extends LitElement {
        `
    }

-    firstUpdated() {
-        this.changeLanguage()
-        this.changeTheme()
-        this.getChatBlockedList()
-        this.getLocalBlockedList()
+   async firstUpdated() {
+        this.changeLanguage();
+        this.changeTheme();
+        this.getChatBlockedList();
+        this.getLocalBlockedList();
+       await this.getPendingGroupInvites();

        const getBlockedUsers = async () => {
            let blockedUsers = await parentEpml.request('apiCall', {
@ -738,6 +762,20 @@ class Chat extends LitElement {
        })
    }

+   async getPendingGroupInvites() {
+      const myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+        try {
+            let pendingGroupInvites = await parentEpml.request('apiCall', {
+                url: `/groups/invites/${myAddress}`
+            })
+            this.groupInvites = pendingGroupInvites;
+        } catch (error) {
+            console.error(error);
+            let err4string = get("chatpage.cchange61");
+            parentEpml.request('showSnackBar', `${err4string}`)
+        }
+    }
+
    async unblockUser(websiteObj) {
        let owner = websiteObj.owner