560 lines
18 KiB
Vue
560 lines
18 KiB
Vue
<script setup>
|
|
import { computed, reactive, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
|
|
import {
|
|
mdiAccountGroupOutline,
|
|
mdiCheckCircleOutline,
|
|
mdiCogOutline,
|
|
mdiFolderGoogleDrive,
|
|
mdiImageMultipleOutline,
|
|
mdiTuneVariant,
|
|
} from '@mdi/js';
|
|
|
|
const { t } = useI18n();
|
|
const workspaceStore = useWorkspaceStore();
|
|
const activeTab = ref('general');
|
|
|
|
const inviteForm = reactive({
|
|
email: '',
|
|
role: 'workspaceMember',
|
|
});
|
|
|
|
const pendingInvites = computed(() =>
|
|
workspaceStore.invitesByWorkspace[workspaceStore.activeWorkspaceId] ?? []
|
|
);
|
|
const workspaceMembers = computed(() =>
|
|
workspaceStore.membersByWorkspace[workspaceStore.activeWorkspaceId] ?? []
|
|
);
|
|
const settingsTabs = computed(() => [
|
|
{ key: 'general', label: t('workspaceSettings.tabs.general'), icon: mdiCogOutline },
|
|
{ key: 'members', label: t('workspaceSettings.tabs.members'), icon: mdiAccountGroupOutline },
|
|
{ key: 'workflow', label: t('workspaceSettings.tabs.workflow'), icon: mdiTuneVariant },
|
|
{ key: 'connectors', label: t('workspaceSettings.tabs.connectors'), icon: mdiFolderGoogleDrive },
|
|
]);
|
|
const workflowSteps = computed(() => [
|
|
{
|
|
key: 'internal',
|
|
title: t('workspaceSettings.approvals.steps.internal'),
|
|
detail: t('workspaceSettings.approvals.stepDetail.approverCount', { count: 1 }),
|
|
},
|
|
{
|
|
key: 'client',
|
|
title: t('workspaceSettings.approvals.steps.client'),
|
|
detail: t('workspaceSettings.approvals.stepDetail.approverCount', { count: 1 }),
|
|
},
|
|
{
|
|
key: 'publish',
|
|
title: t('workspaceSettings.approvals.steps.publish'),
|
|
detail: t('workspaceSettings.approvals.stepDetail.manualPublish'),
|
|
},
|
|
]);
|
|
|
|
watch(
|
|
() => workspaceStore.activeWorkspaceId,
|
|
async workspaceId => {
|
|
if (!workspaceId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await workspaceStore.fetchInvites(workspaceId);
|
|
await workspaceStore.fetchMembers(workspaceId);
|
|
} catch (error) {
|
|
console.error('Failed to load workspace people data:', error);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
async function submitInvite() {
|
|
if (!inviteForm.email.trim() || !inviteForm.role) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await workspaceStore.inviteMember({
|
|
email: inviteForm.email.trim(),
|
|
role: inviteForm.role,
|
|
});
|
|
|
|
inviteForm.email = '';
|
|
inviteForm.role = 'workspaceMember';
|
|
} catch (error) {
|
|
console.error('Failed to invite workspace member:', error);
|
|
}
|
|
}
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return '';
|
|
}
|
|
|
|
return new Date(value).toLocaleString();
|
|
}
|
|
|
|
function translateRole(role) {
|
|
if (!role) {
|
|
return '';
|
|
}
|
|
|
|
const normalizedRole = role.charAt(0).toLowerCase() + role.slice(1);
|
|
return t(`workspaceSettings.roles.${normalizedRole}`, role);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="workspace-settings-shell">
|
|
<div class="workspace-settings-hero">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.currentWorkspace') }}</span>
|
|
<h1>{{ workspaceStore.activeWorkspace?.name || t('workspaceSettings.noWorkspaceSelected') }}</h1>
|
|
<p>{{ t('workspaceSettings.description') }}</p>
|
|
</div>
|
|
|
|
<div class="tab-strip">
|
|
<button
|
|
v-for="tab in settingsTabs"
|
|
:key="tab.key"
|
|
type="button"
|
|
class="tab-button"
|
|
:class="{ 'tab-button-active': activeTab === tab.key }"
|
|
@click="activeTab = tab.key"
|
|
>
|
|
<v-icon :icon="tab.icon" />
|
|
<span>{{ tab.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="activeTab === 'general'"
|
|
class="workspace-settings-grid workspace-settings-grid-single"
|
|
>
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.general.summaryTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.general.summaryDescription') }}</p>
|
|
</div>
|
|
|
|
<dl
|
|
v-if="workspaceStore.activeWorkspace"
|
|
class="summary-grid"
|
|
>
|
|
<div>
|
|
<dt>{{ t('workspaceSettings.summary.name') }}</dt>
|
|
<dd>{{ workspaceStore.activeWorkspace.name }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{{ t('workspaceSettings.summary.slug') }}</dt>
|
|
<dd>{{ workspaceStore.activeWorkspace.slug }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{{ t('workspaceSettings.summary.timeZone') }}</dt>
|
|
<dd>{{ workspaceStore.activeWorkspace.timeZone }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{{ t('workspaceSettings.summary.created') }}</dt>
|
|
<dd>{{ formatDate(workspaceStore.activeWorkspace.createdAt) }}</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="activeTab === 'members'"
|
|
class="workspace-settings-grid workspace-settings-grid-single"
|
|
>
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.members.inviteTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.inviteDescription') }}</p>
|
|
</div>
|
|
|
|
<form
|
|
class="form-stack"
|
|
@submit.prevent="submitInvite"
|
|
>
|
|
<label class="field">
|
|
<span>{{ t('workspaceSettings.fields.memberEmail') }}</span>
|
|
<input
|
|
v-model="inviteForm.email"
|
|
type="email"
|
|
/>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>{{ t('workspaceSettings.fields.memberRole') }}</span>
|
|
<select v-model="inviteForm.role">
|
|
<option value="workspaceMember">{{ t('workspaceSettings.roles.workspaceMember') }}</option>
|
|
<option value="client">{{ t('workspaceSettings.roles.client') }}</option>
|
|
<option value="provider">{{ t('workspaceSettings.roles.provider') }}</option>
|
|
</select>
|
|
</label>
|
|
|
|
<button
|
|
class="primary-button"
|
|
type="submit"
|
|
>
|
|
{{ workspaceStore.isInviting ? t('common.creating') : t('workspaceSettings.sendInvite') }}
|
|
</button>
|
|
</form>
|
|
</article>
|
|
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.members.pendingTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.members.pendingDescription') }}</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="workspaceStore.isInvitesLoading"
|
|
class="empty-state"
|
|
>
|
|
{{ t('loading') }}
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="pendingInvites.length"
|
|
class="invite-list"
|
|
>
|
|
<div
|
|
v-for="invite in pendingInvites"
|
|
:key="invite.id"
|
|
class="invite-row"
|
|
>
|
|
<div>
|
|
<strong>{{ invite.email }}</strong>
|
|
<span>{{ t(`workspaceSettings.roles.${invite.role}`) }}</span>
|
|
</div>
|
|
<small>{{ formatDate(invite.createdAt) }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="empty-state"
|
|
>
|
|
{{ t('workspaceSettings.inviteEmpty') }}
|
|
</div>
|
|
</article>
|
|
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.members.activeTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.members.activeDescription') }}</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="workspaceStore.isMembersLoading"
|
|
class="empty-state"
|
|
>
|
|
{{ t('loading') }}
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="workspaceMembers.length"
|
|
class="invite-list"
|
|
>
|
|
<div
|
|
v-for="member in workspaceMembers"
|
|
:key="member.id"
|
|
class="invite-row"
|
|
>
|
|
<div>
|
|
<strong>{{ member.displayName }}</strong>
|
|
<span>{{ member.email }}</span>
|
|
<span>{{ member.roles.map(translateRole).join(' · ') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="empty-state"
|
|
>
|
|
{{ t('workspaceSettings.members.activeEmpty') }}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="activeTab === 'workflow'"
|
|
class="workflow-grid"
|
|
>
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.approvals.flowTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.approvals.flowDescription') }}</p>
|
|
</div>
|
|
|
|
<div class="workflow-rule-list">
|
|
<div class="workflow-rule">
|
|
<strong>{{ t('workspaceSettings.approvals.fields.requireInternalReview') }}</strong>
|
|
<span>{{ t('workspaceSettings.approvals.fieldHelp.requireInternalReview') }}</span>
|
|
</div>
|
|
<div class="workflow-rule">
|
|
<strong>{{ t('workspaceSettings.approvals.fields.requireClientReview') }}</strong>
|
|
<span>{{ t('workspaceSettings.approvals.fieldHelp.requireClientReview') }}</span>
|
|
</div>
|
|
<div class="workflow-rule">
|
|
<strong>{{ t('workspaceSettings.approvals.fields.publishBehaviour') }}</strong>
|
|
<span>{{ t('workspaceSettings.approvals.publishBehaviour.manual') }}</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.approvals.previewTitle') }}</span>
|
|
<p>{{ t('workspaceSettings.approvals.previewDescription') }}</p>
|
|
</div>
|
|
|
|
<div class="workflow-steps">
|
|
<div
|
|
v-for="step in workflowSteps"
|
|
:key="step.key"
|
|
class="workflow-step"
|
|
>
|
|
<div class="workflow-step-icon">
|
|
<v-icon :icon="mdiCheckCircleOutline" />
|
|
</div>
|
|
<div class="workflow-step-copy">
|
|
<strong>{{ step.title }}</strong>
|
|
<span>{{ step.detail }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="workspace-settings-grid"
|
|
>
|
|
<article class="settings-card">
|
|
<div class="section-copy">
|
|
<span class="section-kicker">{{ t('workspaceSettings.connectors.title') }}</span>
|
|
<p>{{ t('workspaceSettings.connectors.description') }}</p>
|
|
</div>
|
|
|
|
<div class="connector-list">
|
|
<div class="connector-row">
|
|
<div class="connector-main">
|
|
<div class="connector-icon">
|
|
<v-icon :icon="mdiFolderGoogleDrive" />
|
|
</div>
|
|
|
|
<div class="connector-copy">
|
|
<strong>{{ t('workspaceSettings.connectors.googleDrive.title') }}</strong>
|
|
<span>{{ t('workspaceSettings.connectors.googleDrive.description') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector-status">
|
|
{{ t('workspaceSettings.connectors.googleDrive.status') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<router-link
|
|
:to="{ name: 'media-library' }"
|
|
class="connector-link"
|
|
>
|
|
<v-icon :icon="mdiImageMultipleOutline" />
|
|
<span>{{ t('workspaceSettings.connectors.openMediaLibrary') }}</span>
|
|
</router-link>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.workspace-settings-shell {
|
|
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
|
|
}
|
|
|
|
.workspace-settings-hero {
|
|
@apply flex flex-col gap-5 rounded-[1.75rem] border p-5 md:p-6;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(15, 118, 110, 0.16), transparent 38%),
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
}
|
|
|
|
.workspace-settings-grid {
|
|
@apply grid gap-4 lg:grid-cols-2;
|
|
}
|
|
|
|
.workflow-grid {
|
|
@apply grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)];
|
|
}
|
|
|
|
.workspace-settings-grid-single {
|
|
@apply lg:grid-cols-1;
|
|
}
|
|
|
|
.settings-card {
|
|
@apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
|
|
}
|
|
|
|
.section-copy {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.tab-strip {
|
|
@apply flex flex-wrap gap-3;
|
|
}
|
|
|
|
.tab-button {
|
|
@apply inline-flex items-center gap-3 rounded-full px-4 py-3 text-sm font-semibold transition;
|
|
background: rgba(23, 32, 51, 0.06);
|
|
color: #526178;
|
|
}
|
|
|
|
.tab-button-active {
|
|
background: #172033;
|
|
color: #fffaf2;
|
|
}
|
|
|
|
.section-kicker {
|
|
@apply text-xs font-bold uppercase tracking-[0.2em];
|
|
color: #0f766e;
|
|
}
|
|
|
|
.section-copy h1,
|
|
.summary-grid dd,
|
|
.invite-row strong,
|
|
.connector-copy strong,
|
|
.connector-status,
|
|
.workflow-rule strong,
|
|
.workflow-step-copy strong {
|
|
color: #172033;
|
|
}
|
|
|
|
.section-copy h1 {
|
|
@apply text-3xl font-black;
|
|
}
|
|
|
|
.section-copy p,
|
|
.summary-grid dt,
|
|
.invite-row span,
|
|
.invite-row small,
|
|
.empty-state,
|
|
.connector-copy span,
|
|
.connector-link span,
|
|
.workflow-rule span,
|
|
.workflow-step-copy span {
|
|
@apply text-sm leading-6;
|
|
color: #526178;
|
|
}
|
|
|
|
.summary-grid {
|
|
@apply grid gap-4 sm:grid-cols-2;
|
|
}
|
|
|
|
.summary-grid div {
|
|
@apply rounded-[1rem] border p-4;
|
|
background: #f8fafc;
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
}
|
|
|
|
.summary-grid dt {
|
|
@apply text-xs font-bold uppercase tracking-[0.16em];
|
|
}
|
|
|
|
.summary-grid dd {
|
|
@apply mt-2 text-base font-semibold;
|
|
}
|
|
|
|
.form-stack {
|
|
@apply flex flex-col gap-4;
|
|
}
|
|
|
|
.field {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.field span {
|
|
@apply text-sm font-semibold;
|
|
color: #172033;
|
|
}
|
|
|
|
.field input,
|
|
.field select {
|
|
@apply rounded-[1rem] border px-4 py-3 text-sm;
|
|
background: #fffdf8;
|
|
border-color: rgba(23, 32, 51, 0.1);
|
|
color: #172033;
|
|
outline: none;
|
|
}
|
|
|
|
.primary-button {
|
|
@apply inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold;
|
|
background: #172033;
|
|
color: #fffaf2;
|
|
}
|
|
|
|
.invite-list,
|
|
.connector-list,
|
|
.workflow-rule-list,
|
|
.workflow-steps {
|
|
@apply flex flex-col gap-3;
|
|
}
|
|
|
|
.invite-row,
|
|
.empty-state,
|
|
.connector-row,
|
|
.workflow-rule,
|
|
.workflow-step {
|
|
@apply rounded-[1rem] border px-4 py-4;
|
|
background: #fffaf2;
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
}
|
|
|
|
.invite-row {
|
|
@apply flex items-start justify-between gap-4;
|
|
}
|
|
|
|
.invite-row div,
|
|
.connector-copy,
|
|
.workflow-rule,
|
|
.workflow-step-copy {
|
|
@apply flex flex-col gap-1;
|
|
}
|
|
|
|
.connector-row {
|
|
@apply flex flex-col gap-4 md:flex-row md:items-center md:justify-between;
|
|
}
|
|
|
|
.connector-main,
|
|
.workflow-step {
|
|
@apply flex items-start gap-4;
|
|
}
|
|
|
|
.connector-icon,
|
|
.workflow-step-icon {
|
|
@apply inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl;
|
|
background: rgba(15, 118, 110, 0.1);
|
|
color: #0f766e;
|
|
}
|
|
|
|
.connector-status {
|
|
@apply inline-flex w-fit items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.18em];
|
|
background: rgba(245, 158, 11, 0.14);
|
|
}
|
|
|
|
.connector-link {
|
|
@apply inline-flex w-fit items-center gap-3 rounded-full px-5 py-3 text-sm font-semibold no-underline transition;
|
|
background: #172033;
|
|
color: #fffaf2;
|
|
}
|
|
|
|
.connector-link:hover {
|
|
background: #0f172a;
|
|
}
|
|
</style>
|