feat: add edit message UI and open api

docs/openapi.yaml

@@ -1,7 +1,7 @@
 openapi: 3.0.0
 info:
   title: WhatsApp API MultiDevice
-  version: 3.8.0
+  version: 3.9.0
   description: This API is used for sending whatsapp via API
 servers:
   - url: http://localhost:3000
@@ -691,6 +691,55 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ErrorInternalServer'
+  /message/{message_id}/update:
+    post:
+      operationId: updateMessage
+      tags:
+        - message
+      summary: Edit message by message ID before 15 minutes
+      parameters:
+        - in: path
+          name: message_id
+          schema:
+            type: string
+          required: true
+          description: Message ID
+      requestBody:
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                phone:
+                  type: string
+                  example: '62819273192397132@s.whatsapp.net'
+                  description: Phone number with country code
+                message:
+                  type: string
+                  example: 'Hello World'
+                  description: New message to send
+              required:
+                - phone
+                - message
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SendResponse'
+        '400':
+          description: Bad Request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorBadRequest'
+        '500':
+          description: Internal Server Error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInternalServer'
   /group/join-with-link:
     post:
       operationId: joinGroupWithLink

src/views/components/MessageUpdate.js

@@ -0,0 +1,119 @@
+export default {
+    name: 'Update Message',
+    data() {
+        return {
+            update_type: 'user',
+            update_phone: '',
+            update_message_id: '',
+            update_new_message: '',
+            update_loading: false,
+        }
+    },
+    computed: {
+        update_phone_id() {
+            return this.update_type === 'user' ? `${this.update_phone}@${window.TYPEUSER}` : `${this.update_phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        messageEditModal() {
+            $('#modalMessageEdit').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        async messageEditProcess() {
+            try {
+                let response = await this.messageEditApi()
+                showSuccessInfo(response)
+                $('#modalMessageEdit').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        messageEditApi() {
+            return new Promise(async (resolve, reject) => {
+                try {
+                    this.update_loading = true;
+
+                    const payload = {
+                        phone: this.update_phone_id,
+                        message: this.update_new_message
+                    }
+
+                    let response = await http.post(`/message/${this.update_message_id}/update`, payload)
+                    this.messageEditReset();
+                    resolve(response.data.message)
+                } catch (error) {
+                    if (error.response) {
+                        reject(error.response.data.message)
+                    } else {
+                        reject(error.message)
+                    }
+                } finally {
+                    this.update_loading = false;
+                }
+            })
+        },
+        messageEditReset() {
+            this.update_type = 'user';
+            this.update_phone = '';
+            this.update_message_id = '';
+            this.update_new_message = '';
+            this.update_loading = false;
+        },
+    },
+    template: `
+    <div class="red card" @click="messageEditModal()" style="cursor: pointer">
+        <div class="content">
+            <a class="ui red right ribbon label">Message</a>
+            <div class="header">Edit Message</div>
+            <div class="description">
+                Update your sent message
+            </div>
+        </div>
+    </div>
+        
+        <!--  Modal MessageEdit  -->
+    <div class="ui small modal" id="modalMessageEdit">
+        <i class="close icon"></i>
+        <div class="header">
+            Update Message
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="update_type" v-model="update_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="update_phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="update_phone_id" disabled aria-label="whatsapp_id">
+                </div>
+                <div class="field">
+                    <label>Message ID</label>
+                    <input v-model="update_message_id" type="text" placeholder="Please enter your message id"
+                           aria-label="message id">
+                </div>
+                <div class="field">
+                    <label>New Message</label>
+                    <textarea v-model="update_new_message" type="text" placeholder="Hello this is your new message text, you can edit before 15 minutes after sent."
+                              aria-label="message"></textarea>
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.update_loading}"
+                 @click="messageEditProcess">
+                Update
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/index.html

@@ -169,6 +169,8 @@
                 </div>
             </div>
         </div>
+
+        <message-update></message-update>
     </div>
 
     <div class="ui horizontal divider">
@@ -821,6 +823,7 @@
 </script>
 <script type="module">
     import SendPoll from "./components/SendPoll.js";
+    import MessageUpdate from "./components/MessageUpdate.js";
 
     const showErrorInfo = (message) => {
         $('body').toast({
@@ -1740,7 +1743,8 @@
 
     Vue.createApp({
         components: {
-            SendPoll
+            SendPoll,
+            MessageUpdate,
         },
         delimiters: ['[[', ']]'],
         data() {