feat: groupes de travail (P5)
Ajoute la notion de groupe — collection nommée de repos (membership légère persistée, many-to-many) — pour piloter plusieurs repos en simultané : - DB : migration #5 (tables groups + group_repos, FK ON DELETE CASCADE). - GroupManager (synchrone, EventEmitter) + routes REST /api/v1/groups ; ne persiste que la membership, worktrees/sessions filtrés par repoId côté client. - Protocole : GroupSummary, DTOs, topic WS « groups », events group_update/removed (additifs, PROTOCOL_VERSION inchangé). - Web : store groups, GroupsListView, GroupView (réutilise RepoSection), grille multi-terminaux (TerminalGrid/TerminalCell), action « feature cross-repo » (orchestration client, tolérante aux échecs partiels), routes + i18n EN/FR. - Tests : group-manager.test.ts + extension protocol.test.ts ; acceptance-p5.mjs.
This commit is contained in:
157
packages/web/src/views/GroupsListView.vue
Normal file
157
packages/web/src/views/GroupsListView.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto">
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-4 px-4 py-6">
|
||||
<header class="flex items-center gap-3">
|
||||
<h1 class="text-lg font-semibold text-zinc-100">{{ t('groups.title') }}</h1>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<RouterLink :to="{ name: 'dashboard' }" class="btn">{{ t('groups.dashboard') }}</RouterLink>
|
||||
<button class="btn" :disabled="groups.loading" @click="refresh">{{ t('sessions.refresh') }}</button>
|
||||
<LanguageSwitcher />
|
||||
<button class="btn" @click="onLogout">{{ t('common.logout') }}</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- création d'un groupe : nom + sélection des repos déjà enregistrés -->
|
||||
<form class="flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3" @submit.prevent="onCreate">
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('groups.nameLabel') }}
|
||||
<input v-model="newLabel" type="text" class="input" :placeholder="t('groups.namePlaceholder')" required />
|
||||
</label>
|
||||
<div class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('groups.reposLabel') }}
|
||||
<p v-if="worktrees.repos.length === 0" class="text-zinc-600">{{ t('groups.noReposRegistered') }}</p>
|
||||
<div v-else class="flex flex-wrap gap-2">
|
||||
<label
|
||||
v-for="repo in worktrees.repos"
|
||||
:key="repo.id"
|
||||
class="flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-950/40 px-2 py-1"
|
||||
>
|
||||
<input v-model="selectedRepoIds" type="checkbox" :value="repo.id" />
|
||||
<span class="text-zinc-300">{{ repo.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="submit" class="btn-primary" :disabled="creating || newLabel.trim() === ''">
|
||||
{{ creating ? t('groups.creating') : t('groups.new') }}
|
||||
</button>
|
||||
<span v-if="createError" class="text-sm text-red-400">{{ createError }}</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p v-if="groups.loadError" class="text-sm text-red-400">{{ groups.loadError }}</p>
|
||||
<p v-else-if="groups.loading && groups.groups.length === 0" class="text-sm text-zinc-500">{{ t('common.loading') }}</p>
|
||||
<p v-else-if="groups.groups.length === 0" class="text-sm text-zinc-500">{{ t('groups.empty') }}</p>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<article
|
||||
v-for="group in groups.groups"
|
||||
:key="group.id"
|
||||
class="flex items-center gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3"
|
||||
>
|
||||
<span
|
||||
class="h-3 w-3 shrink-0 rounded-full"
|
||||
:style="{ backgroundColor: group.color ?? '#52525b' }"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<RouterLink :to="{ name: 'group', params: { id: group.id } }" class="font-semibold text-zinc-100 hover:underline">
|
||||
{{ group.label }}
|
||||
</RouterLink>
|
||||
<p v-if="group.description" class="truncate text-xs text-zinc-500">{{ group.description }}</p>
|
||||
</div>
|
||||
<span class="text-xs text-zinc-500">{{ t('groups.repoCount', group.repoIds.length) }}</span>
|
||||
<span v-if="activeCount(group.id) > 0" class="badge bg-emerald-950 text-emerald-400">
|
||||
{{ t('groups.sessionsActive', activeCount(group.id)) }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<RouterLink :to="{ name: 'group', params: { id: group.id } }" class="btn text-xs">{{ t('groups.open') }}</RouterLink>
|
||||
<template v-if="confirmingDelete === group.id">
|
||||
<button class="btn-danger text-xs" @click="onDelete(group.id)">{{ t('groups.confirmDelete') }}</button>
|
||||
<button class="btn text-xs" @click="confirmingDelete = null">{{ t('common.cancel') }}</button>
|
||||
</template>
|
||||
<button v-else class="btn-danger text-xs" @click="confirmingDelete = group.id">{{ t('groups.remove') }}</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useGroupsStore } from '../stores/groups';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const groups = useGroupsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
|
||||
const newLabel = ref('');
|
||||
const selectedRepoIds = ref<string[]>([]);
|
||||
const creating = ref(false);
|
||||
const createError = ref<string | null>(null);
|
||||
const confirmingDelete = ref<string | null>(null);
|
||||
|
||||
// nombre de sessions vivantes corrélées aux repos du groupe (badge d'aperçu).
|
||||
function activeCount(groupId: string): number {
|
||||
return groups.sessionsInGroup(groupId).filter((s) => s.live).length;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void groups.fetchGroups();
|
||||
void worktrees.fetchAll();
|
||||
void sessions.fetchSessions();
|
||||
groups.startRealtime();
|
||||
worktrees.startRealtime();
|
||||
sessions.startRealtime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
groups.stopRealtime();
|
||||
worktrees.stopRealtime();
|
||||
sessions.stopRealtime();
|
||||
});
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
await Promise.all([groups.fetchGroups(), worktrees.fetchAll(), sessions.fetchSessions()]);
|
||||
}
|
||||
|
||||
async function onCreate(): Promise<void> {
|
||||
creating.value = true;
|
||||
createError.value = null;
|
||||
try {
|
||||
await groups.createGroup({ label: newLabel.value.trim(), repoIds: [...selectedRepoIds.value] });
|
||||
newLabel.value = '';
|
||||
selectedRepoIds.value = [];
|
||||
} catch (err) {
|
||||
createError.value = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(id: string): Promise<void> {
|
||||
confirmingDelete.value = null;
|
||||
try {
|
||||
await groups.deleteGroup(id);
|
||||
} catch (err) {
|
||||
createError.value = err instanceof Error ? err.message : String(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function onLogout(): Promise<void> {
|
||||
groups.stopRealtime();
|
||||
worktrees.stopRealtime();
|
||||
sessions.stopRealtime();
|
||||
await auth.logout();
|
||||
await router.replace({ name: 'login' });
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user