From 8fabadeed4e0615ef4ab0f0db5243b5d277de8d9 Mon Sep 17 00:00:00 2001
From: Aldino Kemal <aldinokemal2104@gmail.com>
Date: Wed, 13 Mar 2024 22:28:21 +0700
Subject: [PATCH] feat: refactor send image

---
 src/views/components/SendAudio.js |  11 +--
 src/views/components/SendFile.js  |  10 +-
 src/views/components/SendImage.js | 141 +++++++++++++++++++++++++++++
 src/views/components/SendVideo.js |   8 +-
 src/views/index.html              | 146 +-----------------------------
 5 files changed, 159 insertions(+), 157 deletions(-)
 create mode 100644 src/views/components/SendImage.js

diff --git a/src/views/components/SendAudio.js b/src/views/components/SendAudio.js
index 7e014cd..baf09d1 100644
--- a/src/views/components/SendAudio.js
+++ b/src/views/components/SendAudio.js
@@ -34,7 +34,7 @@ export default {
             try {
                 let payload = new FormData();
                 payload.append("phone", this.phone_id)
-                payload.append("audio", $("#file")[0].files[0])
+                payload.append("audio", $("#file_audio")[0].files[0])
                 const response = await window.http.post(`/send/audio`, payload)
                 this.handleReset();
                 return response.data.message;
@@ -51,7 +51,7 @@ export default {
         handleReset() {
             this.phone = '';
             this.type = 'user';
-            $("#file").val('');
+            $("#file_audio").val('');
         },
     },
     template:`
@@ -87,10 +87,9 @@ export default {
                     <input :value="phone_id" disabled aria-label="whatsapp_id">
                 </div>
                 <div class="field" style="padding-bottom: 30px">
-                    <label></label>
-                    <input type="file" class="inputfile" id="file" style="display: none"
-                           accept="audio/*"/>
-                    <label for="file" class="ui positive medium green left floated button" style="color: white">
+                    <label>Audio</label>
+                    <input type="file" style="display: none" accept="audio/*" id="file_audio"/>
+                    <label for="file_audio" class="ui positive medium green left floated button" style="color: white">
                         <i class="ui upload icon"></i>
                         Upload 
                     </label>
diff --git a/src/views/components/SendFile.js b/src/views/components/SendFile.js
index f8ba014..1dcaf09 100644
--- a/src/views/components/SendFile.js
+++ b/src/views/components/SendFile.js
@@ -42,7 +42,7 @@ export default {
                 let payload = new FormData();
                 payload.append("caption", this.caption)
                 payload.append("phone", this.phone_id)
-                payload.append("file", $("#file")[0].files[0])
+                payload.append("file", $("#file_file")[0].files[0])
                 let response = await http.post(`/send/file`, payload)
                 this.handleReset();
                 return response.data.message;
@@ -60,7 +60,7 @@ export default {
             this.caption = '';
             this.phone = '';
             this.type = 'user';
-            $("#file").val('');
+            $("#file_file").val('');
         },
     },
     template: `
@@ -98,13 +98,13 @@ export default {
                 </div>
                 <div class="field">
                     <label>Caption</label>
-                    <textarea v-model="caption" type="text" placeholder="Type some caption (optional)..."
+                    <textarea v-model="caption" placeholder="Type some caption (optional)..."
                               aria-label="caption"></textarea>
                 </div>
                 <div class="field" style="padding-bottom: 30px">
                     <label>File</label>
-                    <input type="file" class="inputfile" id="file" style="display: none"/>
-                    <label for="file" class="ui positive medium green left floated button" style="color: white">
+                    <input type="file" style="display: none" @change="handleFileSelected" id="file_file">
+                    <label for="file_file" class="ui positive medium green left floated button" style="color: white">
                         <i class="ui upload icon"></i>
                         Upload file
                     </label>
diff --git a/src/views/components/SendImage.js b/src/views/components/SendImage.js
new file mode 100644
index 0000000..f7b4aa4
--- /dev/null
+++ b/src/views/components/SendImage.js
@@ -0,0 +1,141 @@
+export default {
+    name: 'SendImage',
+    data() {
+        return {
+            phone: '',
+            view_once: false,
+            compress: false,
+            caption: '',
+            type: 'user',
+            loading: false,
+            selected_file: null
+        }
+    },
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        openModal() {
+            $('#modalSendImage').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        async handleSubmit() {
+            try {
+                let response = await this.sendApi()
+                showSuccessInfo(response)
+                $('#modalSendImage').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async sendApi() {
+            this.loading = true;
+            try {
+                let payload = new FormData();
+                payload.append("phone", this.phone_id)
+                payload.append("view_once", this.view_once)
+                payload.append("compress", this.compress)
+                payload.append("caption", this.caption)
+                payload.append('image', $("#file_image")[0].files[0])
+
+                let response = await window.http.post(`/send/image`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.view_once = false;
+            this.compress = false;
+            this.phone = '';
+            this.caption = '';
+            this.type = 'user';
+            $("#file_image").val('');
+        },
+    },
+    template: `
+    <div class="blue card" @click="openModal()" style="cursor:pointer;">
+        <div class="content">
+            <a class="ui blue right ribbon label">Send</a>
+            <div class="header">Send Image</div>
+            <div class="description">
+                Send image with
+                <div class="ui blue horizontal label">jpg/jpeg/png</div>
+                type
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal SendImage  -->
+    <div class="ui small modal" id="modalSendImage">
+        <i class="close icon"></i>
+        <div class="header">
+            Send Image
+        </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 / Group ID</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>Caption</label>
+                    <textarea v-model="caption" type="text" placeholder="Hello this is image caption"
+                              aria-label="caption"></textarea>
+                </div>
+                <div class="field">
+                    <label>View Once</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="view once" v-model="view_once">
+                        <label>Check for enable one time view</label>
+                    </div>
+                </div>
+                <div class="field">
+                    <label>Compress</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="compress" v-model="compress">
+                        <label>Check for compressing image to smaller size</label>
+                    </div>
+                </div>
+                <div class="field" style="padding-bottom: 30px">
+                    <label>Image</label>
+                    <input type="file" style="display: none" id="file_image"
+                           accept="image/png,image/jpg,image/jpeg"/>
+                    <label for="file_image" class="ui positive medium green left floated button" style="color: white">
+                        <i class="ui upload icon"></i>
+                        Upload image
+                    </label>
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
+                 @click="handleSubmit">
+                Send
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/components/SendVideo.js b/src/views/components/SendVideo.js
index 65b9285..d3d3517 100644
--- a/src/views/components/SendVideo.js
+++ b/src/views/components/SendVideo.js
@@ -47,7 +47,7 @@ export default {
                 payload.append("caption", this.caption)
                 payload.append("view_once", this.view_once)
                 payload.append("compress", this.compress)
-                payload.append("video", $("#file")[0].files[0])
+                payload.append('video', $("#file_video")[0].files[0])
                 let response = await window.http.post(`/send/video`, payload)
                 this.handleReset();
                 return response.data.message;
@@ -67,7 +67,7 @@ export default {
             this.compress = false;
             this.phone = '';
             this.type = 'user';
-            $("#file").val('');
+            $("#file_video").val('');
         },
     },
     template: `
@@ -126,8 +126,8 @@ export default {
                 </div>
                 <div class="field" style="padding-bottom: 30px">
                     <label>Video</label>
-                    <input type="file" id="file" style="display: none" accept="video/*"/>
-                    <label for="file" class="ui positive medium green left floated button" style="color: white">
+                    <input type="file" style="display: none" accept="video/*" id="file_video">
+                    <label for="file_video" class="ui positive medium green left floated button" style="color: white">
                         <i class="ui upload icon"></i>
                         Upload video
                     </label>
diff --git a/src/views/index.html b/src/views/index.html
index 548ee09..2233ab2 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -82,18 +82,8 @@
                 </div>
             </div>
         </div>
-        <div class="blue card" @click="sendImageModal()" style="cursor:pointer;">
-            <div class="content">
-                <a class="ui blue right ribbon label">Send</a>
-                <div class="header">Send Image</div>
-                <div class="description">
-                    Send image with
-                    <div class="ui blue horizontal label">jpg/jpeg/png</div>
-                    type
-                </div>
-            </div>
-        </div>
 
+        <send-image></send-image>
         <send-file max-file-size="{{ .MaxFileSize }}"></send-file>
         <send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
         <send-contact></send-contact>
@@ -222,66 +212,6 @@
         </div>
     </div>
 
-    <!--  Modal SendImage  -->
-    <div class="ui small modal" id="modalSendImage">
-        <i class="close icon"></i>
-        <div class="header">
-            Send Image
-        </div>
-        <div class="content">
-            <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="image_type" v-model="image_type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="image_phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="image_phone_id" disabled aria-label="whatsapp_id">
-                </div>
-                <div class="field">
-                    <label>Caption</label>
-                    <textarea v-model="image_caption" type="text" placeholder="Hello this is image caption"
-                              aria-label="caption"></textarea>
-                </div>
-                <div class="field">
-                    <label>View Once</label>
-                    <div class="ui toggle checkbox">
-                        <input type="checkbox" aria-label="view once" v-model="image_view_once">
-                        <label>Check for enable one time view</label>
-                    </div>
-                </div>
-                <div class="field">
-                    <label>Compress</label>
-                    <div class="ui toggle checkbox">
-                        <input type="checkbox" aria-label="compress" v-model="image_compress">
-                        <label>Check for compressing image to smaller size</label>
-                    </div>
-                </div>
-                <div class="field" style="padding-bottom: 30px">
-                    <label>Image</label>
-                    <input type="file" class="inputfile" id="image_file" style="display: none"
-                           accept="image/png,image/jpg,image/jpeg"/>
-                    <label for="image_file" class="ui positive medium green left floated button" style="color: white">
-                        <i class="ui upload icon"></i>
-                        Upload image
-                    </label>
-                </div>
-            </form>
-        </div>
-        <div class="actions">
-            <div class="ui approve positive right labeled icon button" :class="{'loading': this.image_loading}"
-                 @click="sendImageProcess">
-                Send
-                <i class="send icon"></i>
-            </div>
-        </div>
-    </div>
-
     <!--  Modal UserGroup  -->
     <div class="ui small modal" id="modalUserGroup">
         <i class="close icon"></i>
@@ -454,6 +384,7 @@
     {{ end }}
 </script>
 <script type="module">
+    import SendImage from "./components/SendImage.js";
     import SendFile from "./components/SendFile.js";
     import SendVideo from "./components/SendVideo.js";
     import SendContact from "./components/SendContact.js";
@@ -650,74 +581,6 @@
         }
     }
 
-    const sendImage = {
-        data() {
-            return {
-                image_phone: '',
-                image_view_once: false,
-                image_compress: false,
-                image_caption: '',
-                image_type: 'user',
-                image_loading: false,
-            }
-        },
-        computed: {
-            image_phone_id() {
-                return this.image_type === 'user' ? `${this.image_phone}@${this.type_user}` : `${this.image_phone}@${this.type_group}`
-            }
-        },
-        methods: {
-            sendImageModal() {
-                $('#modalSendImage').modal({
-                    onApprove: function () {
-                        return false;
-                    }
-                }).modal('show');
-            },
-            async sendImageProcess() {
-                try {
-                    let response = await this.sendImageApi()
-                    showSuccessInfo(response)
-                    $('#modalSendImage').modal('hide');
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-            sendImageApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        this.image_loading = true;
-                        let payload = new FormData();
-                        payload.append("phone", this.image_phone_id)
-                        payload.append("view_once", this.image_view_once)
-                        payload.append("compress", this.image_compress)
-                        payload.append("caption", this.image_caption)
-                        payload.append("image", $("#image_file")[0].files[0])
-                        let response = await http.post(`/send/image`, payload)
-                        this.sendImageReset();
-                        resolve(response.data.message)
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    } finally {
-                        this.image_loading = false;
-                    }
-                })
-            },
-            sendImageReset() {
-                this.image_view_once = false;
-                this.image_compress = false;
-                this.image_phone = '';
-                this.image_caption = '';
-                this.image_type = 'user';
-                $("#image_file").val('');
-            },
-        }
-    }
-
     const userGroups = {
         data() {
             return {
@@ -946,8 +809,7 @@
 
     Vue.createApp({
         components: {
-            SendFile, SendVideo, SendContact,
-            SendLocation, SendAudio, SendPoll,
+            SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
         },
         delimiters: ['[[', ']]'],
@@ -1004,7 +866,7 @@
         },
         mixins: [
             login, logout, reconnect,
-            sendMessage, sendImage,
+            sendMessage,
             userGroups, userPrivacy, userAvatar, userInfo
         ]
     }).mount('#app')