feat: add organization settings UI
This commit is contained in:
@@ -0,0 +1,365 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {
|
||||
mdiAccountGroupOutline,
|
||||
mdiBriefcaseOutline,
|
||||
mdiCogOutline,
|
||||
mdiCreditCardOutline,
|
||||
mdiLanConnect,
|
||||
} from '@mdi/js';
|
||||
import {
|
||||
organizationPermissions,
|
||||
useOrganizationStore,
|
||||
} from '@/features/organizations/stores/organizationStore.js';
|
||||
import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const organizationStore = useOrganizationStore();
|
||||
const workspaceStore = useWorkspaceStore();
|
||||
|
||||
const organizationId = computed(() => route.params.organizationId);
|
||||
const organization = computed(() =>
|
||||
organizationStore.detailsById[organizationId.value] ??
|
||||
organizationStore.organizations.find(candidate => candidate.id === organizationId.value) ??
|
||||
null
|
||||
);
|
||||
const permissions = computed(() => organization.value?.currentUserPermissions ?? []);
|
||||
const canViewMembers = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageOrganizationMembers)
|
||||
);
|
||||
const canViewBilling = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageBilling)
|
||||
);
|
||||
const canViewConnections = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageConnectors)
|
||||
);
|
||||
const canViewWorkspaces = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageWorkspaces) ||
|
||||
permissions.value.includes(organizationPermissions.createWorkspaces)
|
||||
);
|
||||
const visibleSections = computed(() => [
|
||||
{ key: 'profile', icon: mdiCogOutline, visible: true },
|
||||
{ key: 'members', icon: mdiAccountGroupOutline, visible: canViewMembers.value },
|
||||
{ key: 'billing', icon: mdiCreditCardOutline, visible: canViewBilling.value },
|
||||
{ key: 'connections', icon: mdiLanConnect, visible: canViewConnections.value },
|
||||
{ key: 'workspaces', icon: mdiBriefcaseOutline, visible: canViewWorkspaces.value },
|
||||
].filter(section => section.visible));
|
||||
|
||||
function hasPermission(permission) {
|
||||
return permissions.value.includes(permission);
|
||||
}
|
||||
|
||||
async function loadOrganization() {
|
||||
if (!organizationId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
await organizationStore.fetchOrganization(organizationId.value);
|
||||
}
|
||||
|
||||
async function openWorkspace(workspaceId) {
|
||||
const workspace = organization.value?.workspaces?.find(candidate => candidate.id === workspaceId);
|
||||
if (workspace) {
|
||||
workspaceStore.setActiveWorkspace(workspace.id);
|
||||
await router.push({ name: 'workspace-dashboard' });
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadOrganization);
|
||||
|
||||
watch(organizationId, loadOrganization);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="organization-settings-shell">
|
||||
<div class="settings-hero">
|
||||
<div>
|
||||
<div class="eyebrow">{{ t('organizationSettings.eyebrow') }}</div>
|
||||
<h1>{{ organization?.name ?? t('organizationSettings.title') }}</h1>
|
||||
<p>{{ t('organizationSettings.description') }}</p>
|
||||
</div>
|
||||
<div class="settings-summary">
|
||||
<span>{{ t('organizationSettings.slugLabel') }}</span>
|
||||
<strong>{{ organization?.slug ?? '-' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="organizationStore.isLoadingDetails && !organization"
|
||||
class="page-message"
|
||||
>
|
||||
{{ t('organizationSettings.loading') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="organizationStore.error"
|
||||
class="page-message error"
|
||||
>
|
||||
{{ organizationStore.error }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="organization"
|
||||
class="settings-grid"
|
||||
>
|
||||
<article
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
class="settings-section"
|
||||
>
|
||||
<div class="section-heading">
|
||||
<span class="section-icon">
|
||||
<v-icon :icon="section.icon" />
|
||||
</span>
|
||||
<div>
|
||||
<h2>{{ t(`organizationSettings.sections.${section.key}.title`) }}</h2>
|
||||
<p>{{ t(`organizationSettings.sections.${section.key}.description`) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="section.key === 'profile'"
|
||||
class="detail-list"
|
||||
>
|
||||
<div>
|
||||
<span>{{ t('organizationSettings.fields.name') }}</span>
|
||||
<strong>{{ organization.name }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('organizationSettings.fields.slug') }}</span>
|
||||
<strong>{{ organization.slug }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('organizationSettings.fields.createdAt') }}</span>
|
||||
<strong>{{ new Date(organization.createdAt).toLocaleDateString() }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="section.key === 'members'"
|
||||
class="table-list"
|
||||
>
|
||||
<div
|
||||
v-for="member in organization.members"
|
||||
:key="member.userId"
|
||||
class="table-row"
|
||||
>
|
||||
<div>
|
||||
<strong>{{ member.displayName }}</strong>
|
||||
<span>{{ member.email }}</span>
|
||||
</div>
|
||||
<small>{{ t(`organizationSettings.roles.${member.role}`, member.role) }}</small>
|
||||
</div>
|
||||
<div
|
||||
v-if="!organization.members?.length"
|
||||
class="empty-state"
|
||||
>
|
||||
{{ t('organizationSettings.sections.members.empty') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="section.key === 'billing'"
|
||||
class="placeholder-panel"
|
||||
>
|
||||
<strong>{{ t('organizationSettings.sections.billing.placeholderTitle') }}</strong>
|
||||
<span>{{ t('organizationSettings.sections.billing.placeholderText') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="section.key === 'connections'"
|
||||
class="placeholder-panel"
|
||||
>
|
||||
<strong>{{ t('organizationSettings.sections.connections.placeholderTitle') }}</strong>
|
||||
<span>{{ t('organizationSettings.sections.connections.placeholderText') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="section.key === 'workspaces'"
|
||||
class="table-list"
|
||||
>
|
||||
<button
|
||||
v-for="workspace in organization.workspaces"
|
||||
:key="workspace.id"
|
||||
class="table-row table-row-button"
|
||||
type="button"
|
||||
@click="openWorkspace(workspace.id)"
|
||||
>
|
||||
<div>
|
||||
<strong>{{ workspace.name }}</strong>
|
||||
<span>{{ workspace.timeZone }}</span>
|
||||
</div>
|
||||
<small>{{ workspace.slug }}</small>
|
||||
</button>
|
||||
<div
|
||||
v-if="!organization.workspaces?.length"
|
||||
class="empty-state"
|
||||
>
|
||||
{{ t('organizationSettings.sections.workspaces.empty') }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="settings-section permissions-section">
|
||||
<div class="section-heading">
|
||||
<span class="section-icon">
|
||||
<v-icon :icon="mdiCogOutline" />
|
||||
</span>
|
||||
<div>
|
||||
<h2>{{ t('organizationSettings.permissions.title') }}</h2>
|
||||
<p>{{ t('organizationSettings.permissions.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="permission-grid">
|
||||
<span
|
||||
v-for="permission in Object.values(organizationPermissions)"
|
||||
:key="permission"
|
||||
:class="{ enabled: hasPermission(permission) }"
|
||||
>
|
||||
{{ t(`organizationSettings.permissions.items.${permission}`) }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.organization-settings-shell {
|
||||
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
|
||||
}
|
||||
|
||||
.settings-hero {
|
||||
@apply grid gap-4 rounded-[1.25rem] border p-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-end md:p-8;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@apply text-xs font-bold uppercase tracking-[0.2em];
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.settings-hero h1 {
|
||||
@apply mt-3 text-3xl font-black md:text-4xl;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-hero p,
|
||||
.settings-summary span,
|
||||
.section-heading p,
|
||||
.detail-list span,
|
||||
.table-row span,
|
||||
.placeholder-panel span,
|
||||
.empty-state {
|
||||
@apply text-sm leading-6;
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.settings-summary {
|
||||
@apply flex flex-col gap-1 rounded-[1rem] px-4 py-3;
|
||||
background: rgba(23, 32, 51, 0.05);
|
||||
}
|
||||
|
||||
.settings-summary strong {
|
||||
@apply text-sm;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
@apply grid gap-4 lg:grid-cols-2;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
@apply flex flex-col gap-5 rounded-[1.25rem] border p-5;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
}
|
||||
|
||||
.permissions-section {
|
||||
@apply lg:col-span-2;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@apply flex gap-4;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
@apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1rem];
|
||||
background: rgba(23, 32, 51, 0.06);
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
@apply text-xl font-black;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.detail-list,
|
||||
.table-list {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.detail-list div,
|
||||
.table-row {
|
||||
@apply flex items-center justify-between gap-4 rounded-[1rem] px-4 py-3;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.table-row-button {
|
||||
@apply w-full transition-colors;
|
||||
}
|
||||
|
||||
.table-row-button:hover {
|
||||
background: rgba(23, 32, 51, 0.08);
|
||||
}
|
||||
|
||||
.table-row div {
|
||||
@apply flex min-w-0 flex-col;
|
||||
}
|
||||
|
||||
.detail-list strong,
|
||||
.table-row strong,
|
||||
.placeholder-panel strong {
|
||||
@apply font-semibold;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.table-row small {
|
||||
@apply flex-shrink-0 text-xs font-bold uppercase;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.placeholder-panel,
|
||||
.empty-state {
|
||||
@apply rounded-[1rem] px-4 py-4;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.placeholder-panel {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.permission-grid {
|
||||
@apply flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.permission-grid span {
|
||||
@apply rounded-full px-3 py-2 text-xs font-bold;
|
||||
background: rgba(23, 32, 51, 0.06);
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.permission-grid span.enabled {
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
color: #0f766e;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user