From 4ab318a7f7e9bf8cb434c133eb0ec7a73224b510 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 13 Mar 2018 10:52:28 +0900
Subject: [PATCH] refs #28 Validate and count toot text

---
 .../components/TimelineSpace/NewTootModal.vue        | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/renderer/components/TimelineSpace/NewTootModal.vue b/src/renderer/components/TimelineSpace/NewTootModal.vue
index 8878fd66..f9c2c9a8 100644
--- a/src/renderer/components/TimelineSpace/NewTootModal.vue
+++ b/src/renderer/components/TimelineSpace/NewTootModal.vue
@@ -10,6 +10,7 @@
       </div>
     </el-form>
     <span slot="footer" class="dialog-footer">
+      <span class="text-count">{{ 500 - tootForm.body.length }}</span>
       <el-button @click="close">Cancel</el-button>
       <el-button type="primary" @click="toot">Toot</el-button>
     </span>
@@ -46,6 +47,12 @@ export default {
       this.$store.commit('TimelineSpace/changeNewTootModal', false)
     },
     toot () {
+      if (this.tootForm.body.length <= 0 || this.tootForm.body.length >= 500) {
+        return this.$message({
+          message: 'Toot length should be 1 to 500',
+          type: 'error'
+        })
+      }
       this.$store.dispatch('TimelineSpace/postToot', this.tootForm.body)
         .then(() => {
           this.tootForm.body = ''
@@ -104,6 +111,11 @@ export default {
 
   .el-dialog__footer {
     background-color: #f2f6fc;
+
+    .text-count {
+      padding-right: 24px;
+      color: #909399;
+    }
   }
 }
 </style>