Add Used tag and sorting in token table

src/lang/en.js

@@ -317,6 +317,7 @@ export default {
     create: 'Create',
     revoke: 'Revoke',
     id: 'ID',
-    actions: 'Actions'
+    actions: 'Actions',
+    active: 'Active'
   }
 }

src/views/invites/index.vue

@@ -41,10 +41,12 @@
     <el-table
       v-loading="loading"
       :data="tokens"
+      :default-sort = "{prop: 'used', order: 'ascending'}"
       class="invite-token-table">
       <el-table-column
         :label="$t('invites.id')"
         prop="id"
+        sortable
         min-width="60"/>
       <el-table-column
         :label="$t('invites.token')"
@@ -53,10 +55,12 @@
       <el-table-column
         :label="$t('invites.expiresAt')"
         prop="expires_at"
+        sortable
         min-width="110"/>
       <el-table-column
         :label="$t('invites.maxUse')"
         prop="max_use"
+        sortable
         min-width="60"/>
       <el-table-column
         :label="$t('invites.uses')"
@@ -65,7 +69,14 @@
       <el-table-column
         :label="$t('invites.used')"
         prop="used"
-        min-width="60"/>
+        sortable
+        min-width="60">
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.used ? 'danger' : 'success'"
+            disable-transitions>{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         :label="$t('invites.actions')"
         min-width="100">