refactor: account avatar & group

aldinokemal · Mar 13, 2024 · 39e313c · 39e313c
1 parent c3694cf
commit 39e313c
Show file tree

Hide file tree

Showing 15 changed files with 257 additions and 262 deletions.
diff --git a/src/views/components/AccountAvatar.js b/src/views/components/AccountAvatar.js
@@ -0,0 +1,112 @@
+export default {
+    name: 'AccountAvatar',
+    data() {
+        return {
+            type: 'user',
+            phone: '',
+            image: null,
+            loading: false,
+            is_preview: false,
+            is_community: false,
+        }
+    },
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        async openModal() {
+            this.handleReset();
+            $('#modalUserAvatar').modal('show');
+        },
+        async handleSubmit() {
+            try {
+                await this.submitApi();
+                showSuccessInfo("Avatar fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async submitApi() {
+            this.loading = true;
+            try {
+                let response = await http.get(`/user/avatar?phone=${this.phone_id}&is_preview=${this.is_preview}&is_community=${this.is_community}`)
+                this.image = response.data.results.url;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.phone = '';
+            this.image = null;
+            this.type = 'user';
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer;">
+        <div class="content">
+            <div class="header">Avatar</div>
+            <div class="description">
+                You can search someone avatar by phone
+            </div>
+        </div>
+    </div>
+
+    <!--  Modal UserAvatar  -->
+    <div class="ui small modal" id="modalUserAvatar">
+        <i class="close icon"></i>
+        <div class="header">
+            Search User Avatar
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="type" v-model="type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label>Phone</label>
+                    <input v-model="phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="phone_id" disabled aria-label="whatsapp_id">
+                </div>
+
+                <div class="field">
+                    <label>Preview</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="compress" v-model="is_preview">
+                        <label>Check for small size image</label>
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label>Community</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="compress" v-model="is_community">
+                        <label>Check is it's community image</label>
+                    </div>
+                </div>
+
+                <button type="button" class="ui primary button" :class="{'loading': loading}"
+                        @click="handleSubmit">
+                    Search
+                </button>
+            </form>
+
+            <div v-if="image != null" class="center">
+                <img :src="image" alt="profile picture" style="padding-top: 10px; max-height: 200px">
+            </div>
+        </div>
+    </div>
+    `
+}
diff --git a/src/views/components/AccountGroup.js b/src/views/components/AccountGroup.js
@@ -0,0 +1,115 @@
+export default {
+    name: 'AccountGroup',
+    data() {
+        return {
+            groups: []
+        }
+    },
+    methods: {
+        async openModal() {
+            try {
+                this.dtClear()
+                await this.submitApi();
+                $('#modalUserGroup').modal('show');
+                this.dtRebuild()
+                showSuccessInfo("Groups fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        dtClear() {
+            $('#account_groups_table').DataTable().destroy();
+        },
+        dtRebuild() {
+            $('#account_groups_table').DataTable({
+                "pageLength": 100,
+                "reloadData": true,
+            }).draw();
+        },
+        async handleLeaveGroup(group_id) {
+            try {
+                const ok = confirm("Are you sure to leave this group?");
+                if (!ok) return;
+
+                await this.leaveGroupApi(group_id);
+                this.dtClear()
+                await this.submitApi();
+                this.dtRebuild()
+                showSuccessInfo("Group left")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async leaveGroupApi(group_id) {
+            try {
+                let payload = new FormData();
+                payload.append("group_id", group_id)
+                await http.post(`/group/leave`, payload)
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            }
+        },
+        async submitApi() {
+            try {
+                let response = await http.get(`/user/my/groups`)
+                this.groups = response.data.results.data;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            }
+        },
+        formatDate: function (value) {
+            if (!value) return ''
+            return moment(value).format('LLL');
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <div class="header">My List Groups</div>
+            <div class="description">
+                Display all groups you joined
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal AccountGroup  -->
+    <div class="ui small modal" id="modalUserGroup">
+        <i class="close icon"></i>
+        <div class="header">
+            My Group List
+        </div>
+        <div class="content">
+            <table class="ui celled table" id="account_groups_table">
+                <thead>
+                <tr>
+                    <th>Group ID</th>
+                    <th>Name</th>
+                    <th>Participants</th>
+                    <th>Created At</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+                <tbody v-if="groups != null">
+                <tr v-for="g in groups">
+                    <td>{{ g.JID.split('@')[0] }}</td>
+                    <td>{{ g.Name }}</td>
+                    <td>{{ g.Participants.length }}</td>
+                    <td>{{ formatDate(g.GroupCreated) }}</td>
+                    <td>
+                        <button class="ui red tiny button" @click="handleLeaveGroup(g.JID)">Leave</button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    `
+}
diff --git a/src/views/components/AccountUserInfo.js b/src/views/components/AccountUserInfo.js
@@ -25,13 +25,13 @@ export default {
         },
         async handleSubmit() {
             try {
-                await this.infoApi();
+                await this.submitApi();
                 showSuccessInfo("Info fetched")
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async infoApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let response = await http.get(`/user/info?phone=${this.phone_id}`)

diff --git a/src/views/components/MessageReact.js b/src/views/components/MessageReact.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageReaction').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id, emoji: this.emoji}

diff --git a/src/views/components/MessageRevoke.js b/src/views/components/MessageRevoke.js
@@ -23,14 +23,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageRevoke').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id}

diff --git a/src/views/components/MessageUpdate.js b/src/views/components/MessageUpdate.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageUpdate').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id, message: this.new_message}

diff --git a/src/views/components/SendAudio.js b/src/views/components/SendAudio.js
@@ -22,14 +22,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalAudioSend').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();

diff --git a/src/views/components/SendContact.js b/src/views/components/SendContact.js
@@ -25,7 +25,7 @@ export default {
         async handleSubmit() {
             try {
                 this.loading = true;
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendContact').modal('hide');
             } catch (err) {
@@ -34,7 +34,7 @@ export default {
                 this.loading = false;
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {

diff --git a/src/views/components/SendFile.js b/src/views/components/SendFile.js
@@ -29,14 +29,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendFile').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();

diff --git a/src/views/components/SendImage.js b/src/views/components/SendImage.js
@@ -26,14 +26,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendImage').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();

diff --git a/src/views/components/SendLocation.js b/src/views/components/SendLocation.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendLocation').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {