Refactor admin/relays to use Composition API (#8677)
* refactor(client): refactor admin/relays to use Composition API * Apply review suggestion from @Johann150 Co-authored-by: Johann150 <johann@qwertqwefsday.eu> Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
parent
7d08b936c6
commit
dfeafaf499
@ -8,84 +8,71 @@
|
|||||||
<i v-else class="fas fa-clock icon requesting"></i>
|
<i v-else class="fas fa-clock icon requesting"></i>
|
||||||
<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
|
<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
|
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.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({
|
let relays: any[] = $ref([]);
|
||||||
components: {
|
|
||||||
MkButton,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
async function addRelay() {
|
||||||
|
const { canceled, result: inbox } = await os.inputText({
|
||||||
|
title: i18n.ts.addRelay,
|
||||||
|
type: 'url',
|
||||||
|
placeholder: i18n.ts.inboxUrl
|
||||||
|
});
|
||||||
|
if (canceled) return;
|
||||||
|
os.api('admin/relays/add', {
|
||||||
|
inbox
|
||||||
|
}).then((relay: any) => {
|
||||||
|
refresh();
|
||||||
|
}).catch((err: any) => {
|
||||||
|
os.alert({
|
||||||
|
type: 'error',
|
||||||
|
text: err.message || err
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
function remove(inbox: string) {
|
||||||
return {
|
os.api('admin/relays/remove', {
|
||||||
[symbols.PAGE_INFO]: {
|
inbox
|
||||||
title: this.$ts.relays,
|
}).then(() => {
|
||||||
icon: 'fas fa-globe',
|
refresh();
|
||||||
bg: 'var(--bg)',
|
}).catch((err: any) => {
|
||||||
actions: [{
|
os.alert({
|
||||||
asFullButton: true,
|
type: 'error',
|
||||||
icon: 'fas fa-plus',
|
text: err.message || err
|
||||||
text: this.$ts.addRelay,
|
});
|
||||||
handler: this.addRelay,
|
});
|
||||||
}],
|
}
|
||||||
},
|
|
||||||
relays: [],
|
|
||||||
inbox: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
function refresh() {
|
||||||
this.refresh();
|
os.api('admin/relays/list').then((relayList: any) => {
|
||||||
},
|
relays = relayList;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
methods: {
|
refresh();
|
||||||
async addRelay() {
|
|
||||||
const { canceled, result: inbox } = await os.inputText({
|
|
||||||
title: this.$ts.addRelay,
|
|
||||||
type: 'url',
|
|
||||||
placeholder: this.$ts.inboxUrl
|
|
||||||
});
|
|
||||||
if (canceled) return;
|
|
||||||
os.api('admin/relays/add', {
|
|
||||||
inbox
|
|
||||||
}).then((relay: any) => {
|
|
||||||
this.refresh();
|
|
||||||
}).catch((e: any) => {
|
|
||||||
os.alert({
|
|
||||||
type: 'error',
|
|
||||||
text: e.message || e
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
remove(inbox: string) {
|
defineExpose({
|
||||||
os.api('admin/relays/remove', {
|
[symbols.PAGE_INFO]: {
|
||||||
inbox
|
title: i18n.ts.relays,
|
||||||
}).then(() => {
|
icon: 'fas fa-globe',
|
||||||
this.refresh();
|
bg: 'var(--bg)',
|
||||||
}).catch((e: any) => {
|
actions: [{
|
||||||
os.alert({
|
asFullButton: true,
|
||||||
type: 'error',
|
icon: 'fas fa-plus',
|
||||||
text: e.message || e
|
text: i18n.ts.addRelay,
|
||||||
});
|
handler: addRelay,
|
||||||
});
|
}],
|
||||||
},
|
|
||||||
|
|
||||||
refresh() {
|
|
||||||
os.api('admin/relays/list').then((relays: any) => {
|
|
||||||
this.relays = relays;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user