refactor: remove organization slug
This commit is contained in:
1
frontend/src/api/schema.d.ts
vendored
1
frontend/src/api/schema.d.ts
vendored
@@ -993,7 +993,6 @@ export interface components {
|
||||
/** Format: guid */
|
||||
id?: string;
|
||||
name?: string;
|
||||
slug?: string;
|
||||
/** Format: guid */
|
||||
ownerUserId?: string;
|
||||
currentUserPermissions?: string[];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {
|
||||
@@ -20,6 +20,7 @@
|
||||
const { t } = useI18n();
|
||||
const organizationStore = useOrganizationStore();
|
||||
const workspaceStore = useWorkspaceStore();
|
||||
const activeSectionKey = ref('profile');
|
||||
|
||||
const organizationId = computed(() => route.params.organizationId);
|
||||
const organization = computed(() =>
|
||||
@@ -48,6 +49,11 @@
|
||||
{ key: 'connections', icon: mdiLanConnect, visible: canViewConnections.value },
|
||||
{ key: 'workspaces', icon: mdiBriefcaseOutline, visible: canViewWorkspaces.value },
|
||||
].filter(section => section.visible));
|
||||
const activeSection = computed(() =>
|
||||
visibleSections.value.find(section => section.key === activeSectionKey.value) ??
|
||||
visibleSections.value[0] ??
|
||||
null
|
||||
);
|
||||
|
||||
function hasPermission(permission) {
|
||||
return permissions.value.includes(permission);
|
||||
@@ -72,6 +78,15 @@
|
||||
onMounted(loadOrganization);
|
||||
|
||||
watch(organizationId, loadOrganization);
|
||||
watch(
|
||||
visibleSections,
|
||||
sections => {
|
||||
if (!sections.some(section => section.key === activeSectionKey.value)) {
|
||||
activeSectionKey.value = sections[0]?.key ?? 'profile';
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -82,10 +97,6 @@
|
||||
<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
|
||||
@@ -104,126 +115,126 @@
|
||||
|
||||
<div
|
||||
v-else-if="organization"
|
||||
class="settings-grid"
|
||||
class="settings-page"
|
||||
>
|
||||
<article
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
class="settings-section"
|
||||
<nav
|
||||
class="settings-tabs"
|
||||
aria-label="Organization settings sections"
|
||||
>
|
||||
<button
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
class="settings-tab"
|
||||
:class="{ 'settings-tab-active': section.key === activeSectionKey }"
|
||||
type="button"
|
||||
@click="activeSectionKey = section.key"
|
||||
>
|
||||
<v-icon :icon="section.icon" />
|
||||
<span>{{ t(`organizationSettings.sections.${section.key}.title`) }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
v-if="activeSection"
|
||||
class="settings-content"
|
||||
>
|
||||
<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>
|
||||
<h2>{{ t(`organizationSettings.sections.${activeSection.key}.title`) }}</h2>
|
||||
<p>{{ t(`organizationSettings.sections.${activeSection.key}.description`) }}</p>
|
||||
</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"
|
||||
>
|
||||
<article class="content-card">
|
||||
<div
|
||||
v-for="member in organization.members"
|
||||
:key="member.userId"
|
||||
class="table-row"
|
||||
v-if="activeSection.key === 'profile'"
|
||||
class="detail-list"
|
||||
>
|
||||
<div>
|
||||
<strong>{{ member.displayName }}</strong>
|
||||
<span>{{ member.email }}</span>
|
||||
<span>{{ t('organizationSettings.fields.name') }}</span>
|
||||
<strong>{{ organization.name }}</strong>
|
||||
</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>
|
||||
<span>{{ t('organizationSettings.fields.createdAt') }}</span>
|
||||
<strong>{{ new Date(organization.createdAt).toLocaleDateString() }}</strong>
|
||||
</div>
|
||||
<div class="permissions-panel">
|
||||
<span>{{ t('organizationSettings.permissions.title') }}</span>
|
||||
<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>
|
||||
</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) }"
|
||||
<div
|
||||
v-else-if="activeSection.key === 'members'"
|
||||
class="table-list"
|
||||
>
|
||||
{{ t(`organizationSettings.permissions.items.${permission}`) }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
<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="activeSection.key === 'billing'"
|
||||
class="placeholder-panel"
|
||||
>
|
||||
<strong>{{ t('organizationSettings.sections.billing.placeholderTitle') }}</strong>
|
||||
<span>{{ t('organizationSettings.sections.billing.placeholderText') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeSection.key === 'connections'"
|
||||
class="placeholder-panel"
|
||||
>
|
||||
<strong>{{ t('organizationSettings.sections.connections.placeholderTitle') }}</strong>
|
||||
<span>{{ t('organizationSettings.sections.connections.placeholderText') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeSection.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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -233,12 +244,6 @@
|
||||
@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;
|
||||
@@ -250,7 +255,6 @@
|
||||
}
|
||||
|
||||
.settings-hero p,
|
||||
.settings-summary span,
|
||||
.section-heading p,
|
||||
.detail-list span,
|
||||
.table-row span,
|
||||
@@ -260,45 +264,53 @@
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.settings-summary {
|
||||
@apply flex flex-col gap-1 rounded-[1rem] px-4 py-3;
|
||||
background: rgba(23, 32, 51, 0.05);
|
||||
.settings-page {
|
||||
@apply flex flex-col gap-5;
|
||||
}
|
||||
|
||||
.settings-summary strong {
|
||||
@apply text-sm;
|
||||
color: #172033;
|
||||
.settings-tabs {
|
||||
@apply flex flex-wrap gap-2 border-b pb-3;
|
||||
border-color: rgba(23, 32, 51, 0.1);
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
@apply grid gap-4 lg:grid-cols-2;
|
||||
.settings-tab {
|
||||
@apply inline-flex h-10 items-center gap-2 rounded-[0.75rem] px-3 text-sm font-semibold transition-colors;
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.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];
|
||||
.settings-tab:hover {
|
||||
background: rgba(23, 32, 51, 0.06);
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-tab-active {
|
||||
background: #172033;
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.settings-tab :deep(.v-icon) {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
@apply flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
@apply text-xl font-black;
|
||||
@apply text-2xl font-black;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
@apply rounded-[0.75rem] border p-5;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
}
|
||||
|
||||
.detail-list,
|
||||
.table-list {
|
||||
@apply flex flex-col gap-2;
|
||||
@@ -306,7 +318,7 @@
|
||||
|
||||
.detail-list div,
|
||||
.table-row {
|
||||
@apply flex items-center justify-between gap-4 rounded-[1rem] px-4 py-3;
|
||||
@apply flex items-center justify-between gap-4 rounded-[0.75rem] px-4 py-3;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
@@ -338,12 +350,17 @@
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.permissions-panel,
|
||||
.placeholder-panel,
|
||||
.empty-state {
|
||||
@apply rounded-[1rem] px-4 py-4;
|
||||
@apply rounded-[0.75rem] px-4 py-4;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.permissions-panel {
|
||||
@apply flex-col items-start gap-3;
|
||||
}
|
||||
|
||||
.placeholder-panel {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
<span class="organization-mark">{{ organization.name.slice(0, 1).toUpperCase() }}</span>
|
||||
<span class="user-menu-item-copy">
|
||||
<span>{{ organization.name }}</span>
|
||||
<small>{{ organization.slug }}</small>
|
||||
<small>{{ t('workspaceSelector.organizationLabel') }}</small>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -72,10 +72,8 @@
|
||||
"title": "Organization settings",
|
||||
"description": "Manage the SaaS account boundary for members, billing access, connections, and owned workspaces.",
|
||||
"loading": "Loading organization settings...",
|
||||
"slugLabel": "Account slug",
|
||||
"fields": {
|
||||
"name": "Name",
|
||||
"slug": "Slug",
|
||||
"createdAt": "Created"
|
||||
},
|
||||
"sections": {
|
||||
|
||||
@@ -72,10 +72,8 @@
|
||||
"title": "Parametres de l'organisation",
|
||||
"description": "Gerez le compte SaaS pour les membres, la facturation, les connexions et les espaces detenus.",
|
||||
"loading": "Chargement des parametres de l'organisation...",
|
||||
"slugLabel": "Slug du compte",
|
||||
"fields": {
|
||||
"name": "Nom",
|
||||
"slug": "Slug",
|
||||
"createdAt": "Cree"
|
||||
},
|
||||
"sections": {
|
||||
|
||||
Reference in New Issue
Block a user