mirror of
https://iceshrimp.dev/crimekillz/trashposs
synced 2024-11-22 17:03:49 +01:00
Refactor admin/integrations to use Composition API (#8664)
* refactor(client): refactor admin/integrations to use Composition API * Apply review suggestions from @Johann150 Co-authored-by: Johann150 <johann@qwertqwefsday.eu> Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
parent
b51154f037
commit
2317105922
@ -24,57 +24,36 @@
|
|||||||
</FormSuspense>
|
</FormSuspense>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import FormInfo from '@/components/ui/info.vue';
|
import FormInfo from '@/components/ui/info.vue';
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
import { fetchInstance } from '@/instance';
|
import { fetchInstance } from '@/instance';
|
||||||
|
|
||||||
export default defineComponent({
|
let uri: string = $ref('');
|
||||||
components: {
|
let enableDiscordIntegration: boolean = $ref(false);
|
||||||
FormSwitch,
|
let discordClientId: string | null = $ref(null);
|
||||||
FormInput,
|
let discordClientSecret: string | null = $ref(null);
|
||||||
FormInfo,
|
|
||||||
FormButton,
|
|
||||||
FormSuspense,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
async function init() {
|
||||||
|
const meta = await os.api('admin/meta');
|
||||||
|
uri = meta.uri;
|
||||||
|
enableDiscordIntegration = meta.enableDiscordIntegration;
|
||||||
|
discordClientId = meta.discordClientId;
|
||||||
|
discordClientSecret = meta.discordClientSecret;
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
function save() {
|
||||||
return {
|
os.apiWithDialog('admin/update-meta', {
|
||||||
[symbols.PAGE_INFO]: {
|
enableDiscordIntegration,
|
||||||
title: 'Discord',
|
discordClientId,
|
||||||
icon: 'fab fa-discord'
|
discordClientSecret,
|
||||||
},
|
}).then(() => {
|
||||||
enableDiscordIntegration: false,
|
fetchInstance();
|
||||||
discordClientId: null,
|
});
|
||||||
discordClientSecret: null,
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async init() {
|
|
||||||
const meta = await os.api('admin/meta');
|
|
||||||
this.uri = meta.uri;
|
|
||||||
this.enableDiscordIntegration = meta.enableDiscordIntegration;
|
|
||||||
this.discordClientId = meta.discordClientId;
|
|
||||||
this.discordClientSecret = meta.discordClientSecret;
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
os.apiWithDialog('admin/update-meta', {
|
|
||||||
enableDiscordIntegration: this.enableDiscordIntegration,
|
|
||||||
discordClientId: this.discordClientId,
|
|
||||||
discordClientSecret: this.discordClientSecret,
|
|
||||||
}).then(() => {
|
|
||||||
fetchInstance();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -24,57 +24,36 @@
|
|||||||
</FormSuspense>
|
</FormSuspense>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import FormInfo from '@/components/ui/info.vue';
|
import FormInfo from '@/components/ui/info.vue';
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
import { fetchInstance } from '@/instance';
|
import { fetchInstance } from '@/instance';
|
||||||
|
|
||||||
export default defineComponent({
|
let uri: string = $ref('');
|
||||||
components: {
|
let enableGithubIntegration: boolean = $ref(false);
|
||||||
FormSwitch,
|
let githubClientId: string | null = $ref(null);
|
||||||
FormInput,
|
let githubClientSecret: string | null = $ref(null);
|
||||||
FormInfo,
|
|
||||||
FormButton,
|
|
||||||
FormSuspense,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
async function init() {
|
||||||
|
const meta = await os.api('admin/meta');
|
||||||
|
uri = meta.uri;
|
||||||
|
enableGithubIntegration = meta.enableGithubIntegration;
|
||||||
|
githubClientId = meta.githubClientId;
|
||||||
|
githubClientSecret = meta.githubClientSecret;
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
function save() {
|
||||||
return {
|
os.apiWithDialog('admin/update-meta', {
|
||||||
[symbols.PAGE_INFO]: {
|
enableGithubIntegration,
|
||||||
title: 'GitHub',
|
githubClientId,
|
||||||
icon: 'fab fa-github'
|
githubClientSecret,
|
||||||
},
|
}).then(() => {
|
||||||
enableGithubIntegration: false,
|
fetchInstance();
|
||||||
githubClientId: null,
|
});
|
||||||
githubClientSecret: null,
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async init() {
|
|
||||||
const meta = await os.api('admin/meta');
|
|
||||||
this.uri = meta.uri;
|
|
||||||
this.enableGithubIntegration = meta.enableGithubIntegration;
|
|
||||||
this.githubClientId = meta.githubClientId;
|
|
||||||
this.githubClientSecret = meta.githubClientSecret;
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
os.apiWithDialog('admin/update-meta', {
|
|
||||||
enableGithubIntegration: this.enableGithubIntegration,
|
|
||||||
githubClientId: this.githubClientId,
|
|
||||||
githubClientSecret: this.githubClientSecret,
|
|
||||||
}).then(() => {
|
|
||||||
fetchInstance();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
</FormSuspense>
|
</FormSuspense>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
@ -32,49 +32,28 @@ import FormButton from '@/components/ui/button.vue';
|
|||||||
import FormInfo from '@/components/ui/info.vue';
|
import FormInfo from '@/components/ui/info.vue';
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
import { fetchInstance } from '@/instance';
|
import { fetchInstance } from '@/instance';
|
||||||
|
|
||||||
export default defineComponent({
|
let uri: string = $ref('');
|
||||||
components: {
|
let enableTwitterIntegration: boolean = $ref(false);
|
||||||
FormSwitch,
|
let twitterConsumerKey: string | null = $ref(null);
|
||||||
FormInput,
|
let twitterConsumerSecret: string | null = $ref(null);
|
||||||
FormInfo,
|
|
||||||
FormButton,
|
|
||||||
FormSuspense,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
async function init() {
|
||||||
|
const meta = await os.api('admin/meta');
|
||||||
|
uri = meta.uri;
|
||||||
|
enableTwitterIntegration = meta.enableTwitterIntegration;
|
||||||
|
twitterConsumerKey = meta.twitterConsumerKey;
|
||||||
|
twitterConsumerSecret = meta.twitterConsumerSecret;
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
function save() {
|
||||||
return {
|
os.apiWithDialog('admin/update-meta', {
|
||||||
[symbols.PAGE_INFO]: {
|
enableTwitterIntegration,
|
||||||
title: 'Twitter',
|
twitterConsumerKey,
|
||||||
icon: 'fab fa-twitter'
|
twitterConsumerSecret,
|
||||||
},
|
}).then(() => {
|
||||||
enableTwitterIntegration: false,
|
fetchInstance();
|
||||||
twitterConsumerKey: null,
|
});
|
||||||
twitterConsumerSecret: null,
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async init() {
|
|
||||||
const meta = await os.api('admin/meta');
|
|
||||||
this.uri = meta.uri;
|
|
||||||
this.enableTwitterIntegration = meta.enableTwitterIntegration;
|
|
||||||
this.twitterConsumerKey = meta.twitterConsumerKey;
|
|
||||||
this.twitterConsumerSecret = meta.twitterConsumerSecret;
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
os.apiWithDialog('admin/update-meta', {
|
|
||||||
enableTwitterIntegration: this.enableTwitterIntegration,
|
|
||||||
twitterConsumerKey: this.twitterConsumerKey,
|
|
||||||
twitterConsumerSecret: this.twitterConsumerSecret,
|
|
||||||
}).then(() => {
|
|
||||||
fetchInstance();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -4,69 +4,52 @@
|
|||||||
<FormFolder class="_formBlock">
|
<FormFolder class="_formBlock">
|
||||||
<template #icon><i class="fab fa-twitter"></i></template>
|
<template #icon><i class="fab fa-twitter"></i></template>
|
||||||
<template #label>Twitter</template>
|
<template #label>Twitter</template>
|
||||||
<template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template>
|
<template #suffix>{{ enableTwitterIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
|
||||||
<XTwitter/>
|
<XTwitter/>
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
<FormFolder to="/admin/integrations/github" class="_formBlock">
|
<FormFolder class="_formBlock">
|
||||||
<template #icon><i class="fab fa-github"></i></template>
|
<template #icon><i class="fab fa-github"></i></template>
|
||||||
<template #label>GitHub</template>
|
<template #label>GitHub</template>
|
||||||
<template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template>
|
<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
|
||||||
<XGithub/>
|
<XGithub/>
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
<FormFolder to="/admin/integrations/discord" class="_formBlock">
|
<FormFolder class="_formBlock">
|
||||||
<template #icon><i class="fab fa-discord"></i></template>
|
<template #icon><i class="fab fa-discord"></i></template>
|
||||||
<template #label>Discord</template>
|
<template #label>Discord</template>
|
||||||
<template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template>
|
<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
|
||||||
<XDiscord/>
|
<XDiscord/>
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
</FormSuspense>
|
</FormSuspense>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import FormFolder from '@/components/form/folder.vue';
|
import FormFolder from '@/components/form/folder.vue';
|
||||||
import FormSecion from '@/components/form/section.vue';
|
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import XTwitter from './integrations.twitter.vue';
|
import XTwitter from './integrations.twitter.vue';
|
||||||
import XGithub from './integrations.github.vue';
|
import XGithub from './integrations.github.vue';
|
||||||
import XDiscord from './integrations.discord.vue';
|
import XDiscord from './integrations.discord.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
import { fetchInstance } from '@/instance';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
let enableTwitterIntegration: boolean = $ref(false);
|
||||||
components: {
|
let enableGithubIntegration: boolean = $ref(false);
|
||||||
FormFolder,
|
let enableDiscordIntegration: boolean = $ref(false);
|
||||||
FormSecion,
|
|
||||||
FormSuspense,
|
|
||||||
XTwitter,
|
|
||||||
XGithub,
|
|
||||||
XDiscord,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
async function init() {
|
||||||
|
const meta = await os.api('admin/meta');
|
||||||
|
enableTwitterIntegration = meta.enableTwitterIntegration;
|
||||||
|
enableGithubIntegration = meta.enableGithubIntegration;
|
||||||
|
enableDiscordIntegration = meta.enableDiscordIntegration;
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
defineExpose({
|
||||||
return {
|
[symbols.PAGE_INFO]: {
|
||||||
[symbols.PAGE_INFO]: {
|
title: i18n.ts.integration,
|
||||||
title: this.$ts.integration,
|
icon: 'fas fa-share-alt',
|
||||||
icon: 'fas fa-share-alt',
|
bg: 'var(--bg)',
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
enableTwitterIntegration: false,
|
|
||||||
enableGithubIntegration: false,
|
|
||||||
enableDiscordIntegration: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async init() {
|
|
||||||
const meta = await os.api('admin/meta');
|
|
||||||
this.enableTwitterIntegration = meta.enableTwitterIntegration;
|
|
||||||
this.enableGithubIntegration = meta.enableGithubIntegration;
|
|
||||||
this.enableDiscordIntegration = meta.enableDiscordIntegration;
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user