fix(message): disable save on empty message (#3317)

Satellite-im · May 31, 2022 · e709bc9 · e709bc9
1 parent 685f7e0
commit e709bc9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/components/views/chat/message/edit/Edit.html b/components/views/chat/message/edit/Edit.html
@@ -12,10 +12,14 @@
   </div>
   <div class="edit-message-bottom">
     <div>
-      {{$t('messaging.edit.escape_to')}}
-      <a @click="cancelMessage">{{$t('messaging.edit.cancel')}}</a>
-      {{$t('messaging.edit.enter_to')}}
-      <a @click="saveMessage">{{$t('messaging.edit.save')}}</a>
+      <div>
+        {{$t('messaging.edit.escape_to')}}
+        <a @click="cancelMessage">{{$t('messaging.edit.cancel')}}</a>
+      </div>
+      <div>
+        {{$t('messaging.edit.enter_to')}}
+        <a @click="saveMessage">{{$t('messaging.edit.save')}}</a>
+      </div>
     </div>
     <div>{{lengthCount}}/{{maxChars}}</div>
   </div>

diff --git a/components/views/chat/message/edit/Edit.less b/components/views/chat/message/edit/Edit.less
@@ -41,9 +41,13 @@
     margin: 0 -@light-spacing 0 0;
     justify-content: space-between;
     & > div {
-      padding: 0 @light-spacing;
-      a {
-        margin-right: @light-spacing;
+      display: flex;
+      margin: 0 @light-spacing;
+      > div {
+        &:not(:last-child)::after {
+          content: '•';
+          margin: 0 @light-spacing;
+        }
       }
     }
   }

diff --git a/components/views/chat/message/edit/Edit.vue b/components/views/chat/message/edit/Edit.vue
@@ -10,15 +10,6 @@ import { Config } from '~/config'
 import { KeybindingEnum } from '~/libraries/Enums/enums'
 import Editable from '~/components/views/chat/chatbar/Editable.vue'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    saveMessage: Function
-    cancelMessage: Function
-    lengthCount: number
-    charlimit: boolean
-  }
-}
-
 export default Vue.extend({
   components: {
     SmileIcon,
@@ -40,19 +31,23 @@ export default Vue.extend({
     }
   },
   computed: {
-    lengthCount() {
-      return this.$data.content.length
+    lengthCount(): number {
+      return this.content.length
     },
-    charlimit() {
+    charlimit(): boolean {
       return this.lengthCount > this.maxChars
     },
   },
   mounted() {
-    this.$data.content = this.$props.message
+    this.content = this.message
   },
   methods: {
     saveMessage() {
-      this.$emit('commitMessage', this.$data.content.slice(0, this.maxChars))
+      if (this.content.trim().length === 0) {
+        this.$toast.error(this.$t('errors.chat.empty_message_error') as string)
+        return
+      }
+      this.$emit('commitMessage', this.content.slice(0, this.maxChars))
     },
     cancelMessage() {
       this.$emit('cancelMessage')
@@ -64,6 +59,7 @@ export default Vue.extend({
       switch (event.key) {
         case KeybindingEnum.ENTER:
           if (!event.shiftKey) {
+            event.preventDefault()
             this.saveMessage()
           }
           break

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -92,9 +92,9 @@ export default {
       files: 'Files',
     },
     edit: {
-      escape_to: 'escape to ',
+      escape_to: 'escape to',
       cancel: 'cancel',
-      enter_to: ' • enter to ',
+      enter_to: 'enter to',
       save: 'save',
     },
   },