Increase responsiveness of <vue-comment-form/>

pradoslaw · Dec 5, 2023 · 9915ee6 · 9915ee6
1 parent fd1fca8
commit 9915ee6
Showing 1 changed file with 59 additions and 42 deletions.
diff --git a/resources/js/components/forum/comment-form.vue b/resources/js/components/forum/comment-form.vue
@@ -9,7 +9,7 @@
         ref="textarea"
         rows="1"
         :maxlength="maxLength"
-        v-model="comment.text"
+        v-model="content"
         :disabled="isProcessing"
         @keydown.ctrl.enter="saveComment"
         @keydown.meta.enter="saveComment"
@@ -19,61 +19,78 @@
 
     <div class="row">
       <div class="col-12">
-        <p class="text-muted float-left">Pozostało <strong>{{ maxLength - comment.text.length }}</strong> znaków</p>
+        <p class="text-muted float-left">
+          Pozostało <strong>{{ maxLength - content.length }}</strong> znaków
+        </p>
 
-        <vue-button :disabled="isProcessing" @click.native.prevent="saveComment" class="btn btn-sm btn-primary float-right" title="Kliknij, aby wysłać (Ctrl+Enter)">Zapisz</vue-button>
-        <button @click.prevent="cancel" class="btn btn-sm btn-danger float-right mr-2">Anuluj</button>
+        <vue-button
+          :disabled="isProcessing"
+          @click.native.prevent="saveComment"
+          class="btn btn-sm btn-primary float-right"
+          title="Kliknij, aby wysłać (Ctrl+Enter)">
+          Zapisz
+        </vue-button>
+        <button @click.prevent="cancel" class="btn btn-sm btn-danger float-right mr-2">
+          Anuluj
+        </button>
       </div>
     </div>
   </form>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from "vue-class-component";
-  import { Prop, Ref } from "vue-property-decorator";
-  import store from "../../store";
-  import VueAutosize from '../../plugins/autosize';
-  import VuePrompt from '../forms/prompt.vue';
-  import VueButton from '../forms/button.vue';
-  import { PostComment } from "@/types/models";
+import Vue from 'vue';
+import Component from "vue-class-component";
+import {Prop, Ref} from "vue-property-decorator";
+import store from "../../store";
+import VueAutosize from '../../plugins/autosize.js';
+import VuePrompt from '../forms/prompt.vue';
+import VueButton from '../forms/button.vue';
+import {PostComment} from "@/types/models";
 
-  Vue.use(VueAutosize);
+Vue.use(VueAutosize);
 
-  @Component({
-    name: 'post-comment-form',
-    store,
-    components: {
-      'vue-prompt': VuePrompt,
-      'vue-button': VueButton
-    }
-  })
-  export default class VueCommentForm extends Vue {
-    @Prop(Object)
-    comment!: PostComment;
+@Component({
+  name: 'post-comment-form',
+  store,
+  components: {
+    'vue-prompt': VuePrompt,
+    'vue-button': VueButton
+  }
+})
+export default class VueCommentForm extends Vue {
+  @Prop(Object)
+  comment!: PostComment;
+
+  @Ref()
+  readonly textarea!: HTMLTextAreaElement;
 
-    @Ref()
-    readonly textarea!: HTMLTextAreaElement;
+  private content: string = '';
 
-    private isProcessing = false;
-    private readonly maxLength = 580;
+  private isProcessing = false;
+  private readonly maxLength = 580;
 
-    saveComment() {
-      this.isProcessing = true;
+  created() {
+    this.content = this.comment.text;
+  }
 
-      store.dispatch('posts/saveComment', this.comment)
-        .then(() => {
-          this.$emit('save');
+  saveComment() {
+    this.isProcessing = true;
 
-          if (!this.comment.id) {
-            this.comment.text = '';
-          }
-        })
-        .finally(() => this.isProcessing = false);
-    }
+    this.comment.text = this.content;
+    store.dispatch('posts/saveComment', this.comment)
+      .then(() => {
+        this.$emit('save');
+
+        if (!this.comment.id) {
+          this.comment.text = '';
+        }
+      })
+      .finally(() => this.isProcessing = false);
+  }
 
-    cancel() {
-      this.$emit('cancel');
-    }
+  cancel() {
+    this.$emit('cancel');
   }
+}
 </script>