Merge branch 'add_confirmation_when_we_remove_a_message' of https://github.com/arabakevin/vue-beautiful-chat into arabakevin-add_confirmation_when_we_remove_a_message

Author: mattmezza

README.md

@@ -57,6 +57,7 @@ Vue.use(Chat)
       :showFile="true"
       :showEdition="true"
       :showDeletion="true"
+      :deletionConfirmation="true"
       :showTypingIndicator="showTypingIndicator"
       :showLauncher="true"
       :showCloseButton="true"
@@ -178,6 +179,7 @@ For more detailed examples see the demo folder.
 | showEmoji | Boolean | A bool indicating whether or not to show the emoji button
 | showFile | Boolean | A bool indicating whether or not to show the file chooser button
 | showDeletion | Boolean | A bool indicating whether or not to show the edit button for a message
+| showConfirmationDeletion | Boolean | A bool indicating whether or not to show the confirmation text when we remove a message
 | showEdition | Boolean | A bool indicating whether or not to show the delete button for a message
 | showTypingIndicator | String | A string that can be set to a user's participant.id to show `typing` indicator for them
 | showHeader | Boolean | A bool indicating whether or not to show the header of chatwindow

demo/src/App.vue

@@ -22,6 +22,7 @@
       :showTypingIndicator="showTypingIndicator"
       :showEdition="true"
       :showDeletion="true"
+      :showConfirmationDeletion="true"
       :titleImageUrl="titleImageUrl"
       @onType="handleOnType"
       @edit="editMessage"
@@ -197,11 +198,9 @@ export default {
       m.data.text = message.data.text;
     },
     removeMessage(message){
-      if (confirm('Delete?')){
-        const m = this.messageList.find(m => m.id === message.id);
-        m.type = 'system';
-        m.data.text = 'This message has been removed';
-      }
+      const m = this.messageList.find(m => m.id === message.id);
+      m.type = 'system';
+      m.data.text = 'This message has been removed';
     },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);

src/ChatWindow.vue

@@ -24,6 +24,7 @@
       :always-scroll-to-bottom="alwaysScrollToBottom"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :show-confirmation-deletion="showConfirmationDeletion"
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
@@ -152,6 +153,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      required: true
     }
   },
   data() {

src/Launcher.vue

@@ -27,6 +27,7 @@
       :show-file="showFile"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :show-confirmation-deletion="showConfirmationDeletion"
       :show-header="showHeader"
       :placeholder="placeholder"
       :show-typing-indicator="showTypingIndicator"
@@ -104,6 +105,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showConfirmationDeletion: {
+      type: Boolean,
+      default: false
+    },
     isOpen: {
       type: Boolean,
       required: true

src/Message.vue

@@ -27,6 +27,7 @@
         :message-styling="messageStyling"
         :show-edition="showEdition"
         :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
@@ -103,6 +104,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
@@ -203,7 +208,13 @@ export default {
     left: -20px;
     opacity: 1;
   }
-  .sc-message--toolbox {
+  &.confirm-delete:hover .sc-message--toolbox {
+    left: -90px;
+  }
+  &.confirm-delete .sc-message--toolbox {
+    width: auto;
+  }
+  .sc-message--toolbox{
     transition: left 0.2s ease-out 0s;
     white-space: normal;
     opacity: 0;

src/MessageList.vue

@@ -14,6 +14,7 @@
       :message-styling="messageStyling"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :show-confirmation-deletion="showConfirmationDeletion"
       @remove="$emit('remove', message)"
     >
       <template v-slot:user-avatar="scopedProps">
@@ -45,6 +46,7 @@
       :message-styling="messageStyling"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :show-confirmation-deletion="showConfirmationDeletion"
     />
   </div>
 </template>
@@ -89,6 +91,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {

src/messages/TextMessage.vue

@@ -2,23 +2,18 @@
   <div class="sc-message--text" :style="messageColors">
     <template>
       <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
-        <button
-          v-if="showEdition && me && message.id != null && message.id != undefined"
-          :disabled="isEditing"
-          @click="edit"
-        >
-          <IconBase :color="isEditing ? 'black' : messageColors.color" width="10" icon-name="edit">
+        <button v-if="showEdition && me && message.id" @click="edit" :disabled="isEditing">
+          <IconBase :color="isEditing? 'black': messageColors.color" width="10" icon-name="edit">
             <IconEdit />
           </IconBase>
         </button>
-        <button
-          v-if="showDeletion && me && message.id != null && message.id != undefined"
-          @click="$emit('remove')"
-        >
-          <IconBase :color="messageColors.color" width="10" icon-name="remove">
-            <IconCross />
-          </IconBase>
-        </button>
+        <div v-if="showDeletion">
+          <button v-if="me && message.id != null && message.id != undefined" @click="ifelse(showConfirmationDeletion, withConfirm('Do you really want to delete the message?', () => $emit('remove')), () => $emit('remove'))()">
+            <IconBase :color="messageColors.color" width="10" icon-name="remove">
+              <IconCross />
+            </IconBase>
+          </button>
+        </div>
         <slot name="text-message-toolbox" :message="message" :me="me"> </slot>
       </div>
     </template>
@@ -47,10 +42,10 @@ import store from './../store/'
 const fmt = require('msgdown')
 
 export default {
-  components: {
-    IconBase,
-    IconCross,
-    IconEdit
+  data() {
+    return {
+      store
+    }
   },
   props: {
     message: {
@@ -72,12 +67,11 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
-    }
-  },
-  data() {
-    return {
-      store
-    }
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      required: true
+    },
   },
   computed: {
     messageText() {
@@ -98,7 +92,26 @@ export default {
   methods: {
     edit() {
       this.store.editMessage = this.message
-    }
+    },
+    ifelse(cond, funcIf, funcElse) {
+      return () => {
+        if (funcIf && cond) funcIf()
+        else if (funcElse) funcElse()
+      }
+    },
+    withConfirm(msg, func) {
+      return () => {
+        if (confirm(msg)) {
+          console.log(func)
+          func()
+        }
+      }
+    },
+  },
+  components:{
+    IconBase,
+    IconCross,
+    IconEdit,
   }
 }
 </script>