limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-12-03 07:07:54 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 07aba28db3
commit 2ed32a38d9
1 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
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 = {
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.installedApps,
icon: 'fas fa-plug',
bg: 'var(--bg)',
},
pagination: {
endpoint: 'i/apps' as const, endpoint: 'i/apps' as const,
limit: 100, limit: 100,
params: { params: {
sort: '+lastUsedAt' sort: '+lastUsedAt'
} }
}, }
};
},
methods: { function revoke(token) {
revoke(token) {
os.api('i/revoke-token', { tokenId: token.id }).then(() => { os.api('i/revoke-token', { tokenId: token.id }).then(() => {
this.$refs.list.reload(); list.value.reload();
}); });
} }
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.ts.installedApps,
icon: 'fas fa-plug',
bg: 'var(--bg)',
} }
}); });
</script> </script>