From 9e9d28cb803e2c2f37c27e768f3175d36bc6d7b2 Mon Sep 17 00:00:00 2001
From: Aldino Kemal <aldinokemal2104@gmail.com>
Date: Sat, 6 Apr 2024 08:59:00 +0700
Subject: [PATCH] feat: add join group invitation ui

---
 src/views/components/GroupCreate.js       |  4 +-
 src/views/components/GroupJoinWithLink.js | 83 +++++++++++++++++++++++
 src/views/components/GroupList.js         |  1 +
 src/views/index.html                      |  8 ++-
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 src/views/components/GroupJoinWithLink.js

diff --git a/src/views/components/GroupCreate.js b/src/views/components/GroupCreate.js
index 41c920d..e4c66ed 100644
--- a/src/views/components/GroupCreate.js
+++ b/src/views/components/GroupCreate.js
@@ -39,7 +39,6 @@ export default {
                     participants: this.participants.filter(participant => participant !== '').map(participant => `${participant}`)
                 })
                 this.handleReset();
-                this.groups = response.data.results.data;
                 return response.data.message;
             } catch (error) {
                 if (error.response) {
@@ -58,6 +57,7 @@ export default {
     template: `
     <div class="green card" @click="openModal" style="cursor: pointer">
         <div class="content">
+            <a class="ui green right ribbon label">Group</a>
             <div class="header">Create Groups</div>
             <div class="description">
                 Add more friends to your group
@@ -69,7 +69,7 @@ export default {
     <div class="ui small modal" id="modalGroupCreate">
         <i class="close icon"></i>
         <div class="header">
-            
+            Create Group
         </div>
         <div class="content">
             <form class="ui form">
diff --git a/src/views/components/GroupJoinWithLink.js b/src/views/components/GroupJoinWithLink.js
new file mode 100644
index 0000000..77eb9bf
--- /dev/null
+++ b/src/views/components/GroupJoinWithLink.js
@@ -0,0 +1,83 @@
+export default {
+    name: 'JoinGroupWithLink',
+    data() {
+        return {
+            loading: false,
+            link: '',
+        }
+    },
+    methods: {
+        openModal() {
+            $('#modalGroupJoinWithLink').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        async handleSubmit() {
+            try {
+                let response = await this.submitApi()
+                showSuccessInfo(response)
+                $('#modalGroupJoinWithLink').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async submitApi() {
+            this.loading = true;
+            try {
+                let response = await window.http.post(`/group/join-with-link`, {
+                    link: this.link,
+                })
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.link = '';
+        },
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <a class="ui green right ribbon label">Group</a>
+            <div class="header">Join Groups</div>
+            <div class="description">
+                Join group with invitation link
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal AccountGroup  -->
+    <div class="ui small modal" id="modalGroupJoinWithLink">
+        <i class="close icon"></i>
+        <div class="header">
+            Join Group With Link
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Invitation Link</label>
+                    <input v-model="link" type="text"
+                           placeholder="Invitation link..."
+                           aria-label="Invitation Link">
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
+                 @click="handleSubmit" type="button">
+                Join
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/components/GroupList.js b/src/views/components/GroupList.js
index e037983..38cb2d5 100644
--- a/src/views/components/GroupList.js
+++ b/src/views/components/GroupList.js
@@ -72,6 +72,7 @@ export default {
     template: `
     <div class="green card" @click="openModal" style="cursor: pointer">
         <div class="content">
+            <a class="ui green right ribbon label">Group</a>
             <div class="header">List Groups</div>
             <div class="description">
                 Display all your groups
diff --git a/src/views/index.html b/src/views/index.html
index 8b3c316..17cc325 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -77,16 +77,17 @@
         Group
     </div>
 
-    <div class="ui four column doubling grid cards">
+    <div class="ui three column doubling grid cards">
         <group-list></group-list>
         <group-create></group-create>
+        <group-join-with-link></group-join-with-link>
     </div>
 
     <div class="ui horizontal divider">
         Account
     </div>
 
-    <div class="ui four column doubling grid cards">
+    <div class="ui three column doubling grid cards">
         <account-avatar></account-avatar>
         <account-user-info></account-user-info>
         <account-privacy></account-privacy>
@@ -139,6 +140,7 @@
     import MessageRevoke from "./components/MessageRevoke.js";
     import GroupList from "./components/GroupList.js";
     import GroupCreate from "./components/GroupCreate.js";
+    import GroupJoinWithLink from "./components/GroupJoinWithLink.js";
     import AccountAvatar from "./components/AccountAvatar.js";
     import AccountUserInfo from "./components/AccountUserInfo.js";
     import AccountPrivacy from "./components/AccountPrivacy.js";
@@ -167,7 +169,7 @@
             AppLogin, AppLogout, AppReconnect,
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
-            GroupList, GroupCreate,
+            GroupList, GroupCreate, GroupJoinWithLink,
             AccountAvatar, AccountUserInfo, AccountPrivacy
         },
         delimiters: ['[[', ']]'],