Use TableView also for ApiTokens and AppPasswords

dashboard/src/components/AppPasswords.vue

@@ -42,29 +42,16 @@
       </template>
 
       <p>{{ $t('profile.appPasswords.description') }}</p>
-      <table class="table table-hover">
-        <thead>
-          <tr>
-            <th>{{ $t('profile.appPasswords.name') }}</th>
-            <th>{{ $t('profile.appPasswords.app') }}</th>
-            <th>{{ $t('main.table.date') }}</th>
-            <th style="width: 30px" class="text-right">{{ $t('main.actions') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-show="passwords.length === 0">
-            <td colspan="4" class="text-center">{{ $t('profile.appPasswords.noPasswordsPlaceholder') }}</td>
-          </tr>
-          <tr v-for="password in passwords" :key="password.id">
-            <td class="elide-table-cell">{{ password.name }}</td>
-            <td class="elide-table-cell">{{ password.label }}</td>
-            <td class="elide-table-cell">{{ prettyLongDate(password.creationTime) }}</td>
-            <td class="text-right">
-              <Button tool small danger @click="onRemove(password.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <br/>
+
+      <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
+        <template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button small outline tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
+          </div>
+        </template>
+      </TableView>
     </Section>
   </div>
 </template>
@@ -77,8 +64,9 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
+import moment from 'moment';
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, Dropdown, FormGroup, TextInput, InputDialog } from 'pankow';
+import { Button, Dialog, Dropdown, FormGroup, TextInput, TableView, InputDialog } from 'pankow';
 import { prettyLongDate, copyToClipboard } from 'pankow/utils';
 import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
@@ -90,6 +78,25 @@ const appsModel = AppsModel.create(API_ORIGIN, localStorage.token);
 const newDialog = useTemplateRef('newDialog');
 const inputDialog = useTemplateRef('inputDialog');
 const passwords = ref([]);
+const columns = {
+  name: {
+    label: t('profile.appPasswords.name'),
+    sort: true
+  },
+  label: {
+    label: t('profile.appPasswords.app'),
+    sort: true
+  },
+  creationTime: {
+    label: t('main.table.date'),
+    sort(a, b) {
+      if (!a) return 1;
+      if (!b) return -1;
+      return moment(a).isBefore(b) ? 1 : -1;
+    }
+  },
+  actions: {}
+};
 
 // new dialog props
 const addedPassword = ref('');
@@ -152,7 +159,7 @@ function onCopyToClipboard(password) {
 
 async function onRemove(id) {
   const yes = await inputDialog.value.confirm({
-    message: 'Really remove this token?', // TODO translate
+    message: 'Really remove this password?', // TODO translate
     modal: true,
     confirmStyle: 'danger',
     confirmLabel: t('main.dialog.yes'),