Use TableView also for ApiTokens and AppPasswords

dashboard/src/components/ApiTokens.vue

@@ -43,35 +43,23 @@
       </template>
 
       <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
-      <table class="table table-hover" style="margin: 0;">
-        <thead>
-          <tr>
-            <th>{{ $t('profile.apiTokens.name') }}</th>
-            <th class="hide-mobile">{{ $t('profile.apiTokens.lastUsed') }}</th>
-            <th>{{ $t('profile.apiTokens.scope') }}</th>
-            <th class="text-right">{{ $t('main.actions') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-show="apiTokens.length === 0">
-            <td colspan="3" class="text-center">{{ $t('profile.apiTokens.noTokensPlaceholder') }}</td>
-          </tr>
-          <tr v-for="token in apiTokens" :key="token.id">
-            <td class="elide-table-cell">{{ token.name || 'unnamed' }}</td>
-            <td class="elide-table-cell hide-mobile">
-              <span v-if="token.lastUsedTime">{{ prettyLongDate(token.lastUsedTime) }}</span>
-              <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
-            </td>
-            <td class="elide-table-cell">
-              <span v-if="token.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
-              <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
-            </td>
-            <td class="text-right">
-              <Button small tool danger @click="onRevokeToken(token)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <br/>
+
+      <TableView :columns="columns" :model="apiTokens">
+        <template #lastUsedTime="slotProps">
+          <span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
+          <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
+        </template>
+        <template #scope="slotProps">
+          <span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
+          <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
+        </template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button small outline tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
+          </div>
+        </template>
+      </TableView>
     </Section>
   </div>
 </template>
@@ -84,8 +72,9 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
+import moment from 'moment';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TextInput } from 'pankow';
+import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from 'pankow';
 import { copyToClipboard, prettyLongDate } from 'pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
 import Section from './Section.vue';
@@ -99,6 +88,25 @@ const newDialog = useTemplateRef('newDialog');
 const addedToken = ref('');
 const tokenName = ref('');
 const tokenScope = ref('r');
+const columns = {
+  name: {
+    label: t('profile.apiTokens.name'),
+    sort: true
+  },
+  lastUsedTime: {
+    label: t('profile.apiTokens.lastUsed'),
+    sort(a, b) {
+      if (!a) return 1;
+      if (!b) return -1;
+      return moment(a).isBefore(b) ? 1 : -1;
+    }
+  },
+  scope: {
+    label: t('profile.apiTokens.scope'),
+    sort: true
+  },
+  actions: {}
+};
 
 const isValid = computed(() => {
   if (!tokenName.value) return false;