Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(client): refactor settings/apps to use Composition API (#8570)

Browse source
This commit is contained in:
Andreas Nedbal 2022-05-04 03:15:24 +02:00 committed by GitHub
parent 80355fb08e
commit 6226e8d902
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/client/src/pages/settings/apps.vue
View file

@ -4,7 +4,7 @@
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.nothing }}</div> <div>{{ i18n.ts.nothing }}</div>
</div> </div>
</template> </template>
<template v-slot="{items}"> <template v-slot="{items}">
@ -14,18 +14,18 @@
<div class="name">{{ token.name }}</div> <div class="name">{{ token.name }}</div>
<div class="description">{{ token.description }}</div> <div class="description">{{ token.description }}</div>
<div class="_keyValue"> <div class="_keyValue">
<div>{{ $ts.installedDate }}:</div> <div>{{ i18n.ts.installedDate }}:</div>
<div><MkTime :time="token.createdAt"/></div> <div><MkTime :time="token.createdAt"/></div>
</div> </div>
<div class="_keyValue"> <div class="_keyValue">
<div>{{ $ts.lastUsedDate }}:</div> <div>{{ i18n.ts.lastUsedDate }}:</div>
<div><MkTime :time="token.lastUsedAt"/></div> <div><MkTime :time="token.lastUsedAt"/></div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button> <button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
</div> </div>
<details> <details>
<summary>{{ $ts.details }}</summary> <summary>{{ i18n.ts.details }}</summary>
<ul> <ul>
<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li> <li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
</ul> </ul>
@ -37,42 +37,34 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { defineExpose, ref } from 'vue';
import FormPagination from '@/components/ui/pagination.vue'; import FormPagination from '@/components/ui/pagination.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
export default defineComponent({ const list = ref<any>(null);
components: {
FormPagination,
},
emits: ['info'], const pagination = {
endpoint: 'i/apps' as const,
limit: 100,
params: {
sort: '+lastUsedAt'
}
}
data() { function revoke(token) {
return { os.api('i/revoke-token', { tokenId: token.id }).then(() => {
[symbols.PAGE_INFO]: { list.value.reload();
title: this.$ts.installedApps, });
icon: 'fas fa-plug', }
bg: 'var(--bg)',
},
pagination: {
endpoint: 'i/apps' as const,
limit: 100,
params: {
sort: '+lastUsedAt'
}
},
};
},
methods: { defineExpose({
revoke(token) { [symbols.PAGE_INFO]: {
os.api('i/revoke-token', { tokenId: token.id }).then(() => { title: i18n.ts.installedApps,
this.$refs.list.reload(); icon: 'fas fa-plug',
}); bg: 'var(--bg)',
}
} }
}); });
</script> </script>