2026-01-15 01:13:44 +00:00
|
|
|
<script setup lang="ts">
|
2026-01-17 02:46:30 +00:00
|
|
|
import { Head } from '@inertiajs/vue3';
|
2026-01-21 23:50:57 +00:00
|
|
|
import { trans } from 'laravel-vue-i18n';
|
|
|
|
|
import { computed, ref } from 'vue';
|
2026-01-15 01:13:44 +00:00
|
|
|
|
2026-01-15 17:24:39 +00:00
|
|
|
import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue';
|
2026-01-17 02:46:30 +00:00
|
|
|
import SocialAccountsGrid, { type Platform } from '@/components/SocialAccountsGrid.vue';
|
2026-01-19 01:28:27 +00:00
|
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
2026-01-17 02:46:30 +00:00
|
|
|
import { accounts } from '@/routes';
|
|
|
|
|
import { disconnect as disconnectAccount } from '@/routes/accounts';
|
2026-01-15 01:13:44 +00:00
|
|
|
import { type BreadcrumbItemType } from '@/types';
|
|
|
|
|
|
|
|
|
|
interface Workspace {
|
|
|
|
|
id: string;
|
|
|
|
|
name: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
workspace: Workspace;
|
|
|
|
|
platforms: Platform[];
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-19 01:28:27 +00:00
|
|
|
defineProps<Props>();
|
2026-01-15 01:13:44 +00:00
|
|
|
|
2026-01-15 17:24:39 +00:00
|
|
|
const deleteModal = ref<InstanceType<typeof ConfirmDeleteModal> | null>(null);
|
|
|
|
|
|
2026-01-21 23:50:57 +00:00
|
|
|
const breadcrumbs = computed<BreadcrumbItemType[]>(() => [
|
|
|
|
|
{ title: trans('accounts.title'), href: accounts.url() },
|
|
|
|
|
]);
|
2026-01-15 01:13:44 +00:00
|
|
|
|
2026-01-17 02:46:30 +00:00
|
|
|
const handleDisconnect = (accountId: string) => {
|
2026-01-15 17:24:39 +00:00
|
|
|
deleteModal.value?.open({
|
2026-01-17 02:46:30 +00:00
|
|
|
url: disconnectAccount.url(accountId),
|
2026-01-15 17:24:39 +00:00
|
|
|
});
|
2026-01-15 01:13:44 +00:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2026-01-21 23:50:57 +00:00
|
|
|
<Head :title="$t('accounts.page_title')" />
|
2026-01-15 01:13:44 +00:00
|
|
|
|
|
|
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
|
|
|
<div class="flex flex-col gap-8 p-6">
|
|
|
|
|
<div>
|
2026-01-21 23:50:57 +00:00
|
|
|
<h1 class="text-2xl font-bold tracking-tight">{{ $t('accounts.page_title') }}</h1>
|
2026-01-15 01:13:44 +00:00
|
|
|
<p class="text-muted-foreground">
|
2026-01-21 23:50:57 +00:00
|
|
|
{{ $t('accounts.description') }}
|
2026-01-15 01:13:44 +00:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-17 02:46:30 +00:00
|
|
|
<SocialAccountsGrid
|
|
|
|
|
:platforms="platforms"
|
|
|
|
|
@disconnect="handleDisconnect"
|
|
|
|
|
/>
|
2026-01-15 01:13:44 +00:00
|
|
|
</div>
|
|
|
|
|
</AppLayout>
|
2026-01-15 17:24:39 +00:00
|
|
|
|
|
|
|
|
<ConfirmDeleteModal
|
|
|
|
|
ref="deleteModal"
|
2026-01-21 23:50:57 +00:00
|
|
|
:title="$t('accounts.disconnect_modal.title')"
|
|
|
|
|
:description="$t('accounts.disconnect_modal.description')"
|
|
|
|
|
:action="$t('accounts.disconnect_modal.confirm')"
|
|
|
|
|
:cancel="$t('accounts.disconnect_modal.cancel')"
|
2026-01-15 17:24:39 +00:00
|
|
|
/>
|
2026-01-15 01:13:44 +00:00
|
|
|
</template>
|
