Create separate table column for registration reason when need_approval filter activated

src/lang/en.js

@@ -268,7 +268,8 @@ export default {
     invalidAccount: 'This account has invalid nickname and can\'t be modified',
     invalidNickname: 'invalid nickname',
     passwordResetTokenGenerated: 'Password reset token was generated:',
-    linkToResetPassword: 'You can also use this link to reset password:'
+    linkToResetPassword: 'You can also use this link to reset password:',
+    registrationReason: 'Registration Reason'
   },
   statuses: {
     statuses: 'Statuses',

src/views/users/index.vue

@@ -76,11 +76,20 @@
               {{ isDesktop ? $t('users.unapproved') : getFirstLetter($t('users.unapproved')) }}
             </el-tag>
           </el-tooltip>
-          <div v-if="pendingView && isDesktop" class="reason-text">
-            "{{ scope.row.registration_reason | truncate(100, '...') }}"
-          </div>
         </template>
-
+      </el-table-column>
+      <el-table-column v-if="pendingView && isDesktop" :label="$t('users.registrationReason')">
+        <template slot-scope="scope">
+          <el-tooltip
+            v-if="regReason(scope.row.registration_reason)"
+            :content="scope.row.registration_reason"
+            popper-class="reason-tooltip"
+            effect="dark">
+            <span>
+              "{{ scope.row.registration_reason | truncate(100, '...') }}"
+            </span>
+          </el-tooltip>
+        </template>
       </el-table-column>
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
@@ -134,11 +143,7 @@ export default {
   },
   filters: {
     truncate: function(text, length, suffix) {
-      if (text.length > length) {
-        return text.substring(0, length) + suffix
-      } else {
-        return text
-      }
+      return text.length < length ? text : text.substring(0, length) + suffix
     }
   },
   data() {
@@ -233,6 +238,9 @@ export default {
     propertyExists(account, property) {
       return account[property]
     },
+    regReason(reason) {
+      return reason && reason.length > 0
+    },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     }
@@ -278,6 +286,9 @@ export default {
 .password-reset-token-dialog {
   width: 50%
 }
+.reason-tooltip {
+  max-width: 450px;
+}
 .reset-password-link {
   text-decoration: underline;
 }
@@ -291,6 +302,9 @@ export default {
     margin: 10px 0 0 15px;
     height: 40px;
   }
+  .cell {
+    word-break: break-word;
+  }
   .el-table__row:hover {
     cursor: pointer;
   }
@@ -319,9 +333,6 @@ export default {
     color: gray;
     font-size: 28px;
   }
-  .reason-text {
-    word-break: normal;
-  }
 }
 
 @media only screen and (max-width:480px) {