Multi-user sharing, groups, and in-app notifications
Backend: - Alembic migration 0025: groups, group_memberships, project_shares, note_shares, notifications tables - models: Group, GroupMembership, ProjectShare, NoteShare, Notification - services/access.py: permission resolution (viewer/editor/admin/owner) - services/groups.py + routes/groups.py: full group CRUD + membership - services/sharing.py + routes/shares.py: project/note sharing API - services/notifications.py: in-app notification create/list/mark-read - routes/in_app_notifications.py: GET/POST notification endpoints - routes/users.py: user search endpoint - services/projects.py + services/notes.py: *_for_user variants - routes updated to use *_for_user on get/list; adds permission field - app.py: register all new blueprints Frontend: - api/client.ts: ShareEntry, GroupEntry, NotificationEntry types + helpers - stores/notifications.ts: Pinia store with polling - NotificationBell.vue: bell icon + badge + dropdown toggle + 60s poll - NotificationsPanel.vue: unread notification list with mark-all-read - ShareDialog.vue: teleport modal for sharing projects/notes with users/groups - SharedWithMeView.vue: /shared route listing shared projects and notes - AppHeader: NotificationBell, Shared nav link - ProjectView, NoteViewerView, TaskViewerView: Share button + ShareDialog - SettingsView: Groups admin tab with create/delete groups + member mgmt - router: /shared route Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@ import { ref, watch, onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from "@/api/client";
|
||||
import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, type GroupEntry, type GroupMember, type UserSearchResult } from "@/api/client";
|
||||
import { usePushStore } from "@/stores/push";
|
||||
import type { User } from "@/types/auth";
|
||||
import PaginationBar from "@/components/PaginationBar.vue";
|
||||
@@ -31,15 +31,91 @@ const restoring = ref(false);
|
||||
const restoreFileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Migrate stored "admin" → "config"; unknown tabs fall back to "general"
|
||||
const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs"]);
|
||||
const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs", "groups"]);
|
||||
const _stored = localStorage.getItem("settings_tab") ?? "general";
|
||||
const activeTab = ref(VALID_TABS.has(_stored) ? (_stored === "admin" ? "config" : _stored) : "general");
|
||||
watch(activeTab, (v) => {
|
||||
localStorage.setItem("settings_tab", v === "admin" ? "config" : v);
|
||||
if (v === "users" && authStore.isAdmin) loadUsersPanel();
|
||||
if (v === "logs" && authStore.isAdmin) loadLogsPanel();
|
||||
if (v === "groups" && authStore.isAdmin) loadGroupsPanel();
|
||||
});
|
||||
|
||||
// Groups management
|
||||
const groups = ref<GroupEntry[]>([]);
|
||||
const groupsLoading = ref(false);
|
||||
const newGroupName = ref("");
|
||||
const newGroupDesc = ref("");
|
||||
const creatingGroup = ref(false);
|
||||
const expandedGroupId = ref<number | null>(null);
|
||||
const groupMembers = ref<Record<number, GroupMember[]>>({});
|
||||
const groupMemberSearch = ref("");
|
||||
const groupMemberResults = ref<UserSearchResult[]>([]);
|
||||
let groupSearchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const groupMemberRole = ref("member");
|
||||
|
||||
async function loadGroupsPanel() {
|
||||
groupsLoading.value = true;
|
||||
try {
|
||||
groups.value = await listGroups();
|
||||
} finally {
|
||||
groupsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createNewGroup() {
|
||||
if (!newGroupName.value.trim() || creatingGroup.value) return;
|
||||
creatingGroup.value = true;
|
||||
try {
|
||||
await createGroup(newGroupName.value.trim(), newGroupDesc.value.trim() || undefined);
|
||||
newGroupName.value = "";
|
||||
newGroupDesc.value = "";
|
||||
await loadGroupsPanel();
|
||||
} finally {
|
||||
creatingGroup.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteGroupConfirm(g: GroupEntry) {
|
||||
if (!confirm(`Delete group "${g.name}"? This cannot be undone.`)) return;
|
||||
await deleteGroup(g.id);
|
||||
if (expandedGroupId.value === g.id) expandedGroupId.value = null;
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
async function toggleGroupExpand(g: GroupEntry) {
|
||||
if (expandedGroupId.value === g.id) {
|
||||
expandedGroupId.value = null;
|
||||
return;
|
||||
}
|
||||
expandedGroupId.value = g.id;
|
||||
groupMemberSearch.value = "";
|
||||
groupMemberResults.value = [];
|
||||
groupMembers.value[g.id] = await listGroupMembers(g.id);
|
||||
}
|
||||
|
||||
function debounceGroupMemberSearch() {
|
||||
if (groupSearchTimer) clearTimeout(groupSearchTimer);
|
||||
groupSearchTimer = setTimeout(async () => {
|
||||
if (groupMemberSearch.value.length < 2) { groupMemberResults.value = []; return; }
|
||||
groupMemberResults.value = await searchUsers(groupMemberSearch.value);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function addMemberToGroup(groupId: number, user: UserSearchResult) {
|
||||
await addGroupMember(groupId, user.id, groupMemberRole.value);
|
||||
groupMembers.value[groupId] = await listGroupMembers(groupId);
|
||||
groupMemberSearch.value = "";
|
||||
groupMemberResults.value = [];
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
async function removeMemberFromGroup(groupId: number, userId: number) {
|
||||
await removeGroupMember(groupId, userId);
|
||||
groupMembers.value[groupId] = await listGroupMembers(groupId);
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
// Chat retention
|
||||
const chatRetentionDays = ref(90);
|
||||
const savingRetention = ref(false);
|
||||
@@ -158,6 +234,7 @@ onMounted(async () => {
|
||||
} catch {
|
||||
// base URL not configured yet
|
||||
}
|
||||
if (activeTab.value === "groups") loadGroupsPanel();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -703,7 +780,7 @@ function formatUserDate(iso: string): string {
|
||||
<div v-if="authStore.isAdmin" class="sidebar-group">
|
||||
<div class="sidebar-group-label">Admin</div>
|
||||
<button
|
||||
v-for="tab in ['config', 'users', 'logs']"
|
||||
v-for="tab in ['config', 'users', 'groups', 'logs']"
|
||||
:key="tab"
|
||||
:class="['sidebar-item', { active: activeTab === tab }]"
|
||||
@click="activeTab = tab"
|
||||
@@ -1385,6 +1462,78 @@ function formatUserDate(iso: string): string {
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Groups ── -->
|
||||
<div v-if="authStore.isAdmin" v-show="activeTab === 'groups'" class="settings-grid">
|
||||
|
||||
<section class="settings-section full-width">
|
||||
<h2>Groups</h2>
|
||||
<p class="section-desc">Manage platform-wide groups for sharing projects and notes.</p>
|
||||
|
||||
<!-- Create group form -->
|
||||
<div class="group-create-form">
|
||||
<input v-model="newGroupName" class="input-field" placeholder="Group name" maxlength="100" @keydown.enter="createNewGroup" />
|
||||
<input v-model="newGroupDesc" class="input-field" placeholder="Description (optional)" maxlength="255" @keydown.enter="createNewGroup" />
|
||||
<button class="btn-primary" @click="createNewGroup" :disabled="creatingGroup || !newGroupName.trim()">
|
||||
{{ creatingGroup ? 'Creating…' : 'Create Group' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Groups list -->
|
||||
<div v-if="groupsLoading" class="loading-msg">Loading groups…</div>
|
||||
<div v-else-if="!groups.length" class="empty-msg">No groups yet.</div>
|
||||
<div v-else class="groups-list">
|
||||
<div v-for="g in groups" :key="g.id" class="group-card">
|
||||
<div class="group-card-header">
|
||||
<div class="group-card-info">
|
||||
<span class="group-name">{{ g.name }}</span>
|
||||
<span class="group-meta">{{ g.member_count }} member{{ g.member_count !== 1 ? 's' : '' }}</span>
|
||||
<span v-if="g.description" class="group-desc">{{ g.description }}</span>
|
||||
</div>
|
||||
<div class="group-card-actions">
|
||||
<button class="btn-sm" @click="toggleGroupExpand(g)">
|
||||
{{ expandedGroupId === g.id ? 'Collapse' : 'Manage' }}
|
||||
</button>
|
||||
<button class="btn-sm btn-danger-sm" @click="deleteGroupConfirm(g)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members panel -->
|
||||
<div v-if="expandedGroupId === g.id" class="group-members-panel">
|
||||
<div class="members-search">
|
||||
<div class="member-search-wrap">
|
||||
<input
|
||||
v-model="groupMemberSearch"
|
||||
class="input-field"
|
||||
placeholder="Search user to add…"
|
||||
@input="debounceGroupMemberSearch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<ul v-if="groupMemberResults.length" class="member-results">
|
||||
<li v-for="u in groupMemberResults" :key="u.id" class="member-result-item" @click="addMemberToGroup(g.id, u)">
|
||||
<span class="member-result-name">{{ u.username }}</span>
|
||||
<span class="member-result-email">{{ u.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<select v-model="groupMemberRole" class="role-select">
|
||||
<option value="member">Member</option>
|
||||
<option value="owner">Owner</option>
|
||||
</select>
|
||||
</div>
|
||||
<ul class="members-list">
|
||||
<li v-for="m in (groupMembers[g.id] || [])" :key="m.user_id" class="member-row">
|
||||
<span class="member-name">{{ m.username }}</span>
|
||||
<span class="member-role-badge" :class="`role-${m.role}`">{{ m.role }}</span>
|
||||
<button class="btn-sm btn-danger-sm" @click="removeMemberFromGroup(g.id, m.user_id)">Remove</button>
|
||||
</li>
|
||||
<li v-if="!(groupMembers[g.id]?.length)" class="members-empty">No members yet.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div><!-- end .settings-content -->
|
||||
</main>
|
||||
</template>
|
||||
@@ -2056,4 +2205,211 @@ function formatUserDate(iso: string): string {
|
||||
background: var(--color-bg-secondary); color: var(--color-text-muted);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Groups tab ──────────────────────────────────────────────── */
|
||||
.btn-primary {
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.6; cursor: default; }
|
||||
.btn-primary:hover:not(:disabled) { opacity: 0.9; }
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.input-field:focus { border-color: var(--color-primary); }
|
||||
|
||||
.group-create-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.group-create-form .input-field { flex: 1; min-width: 160px; }
|
||||
|
||||
.loading-msg, .empty-msg {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.88rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.groups-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.group-card-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.group-meta {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.group-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-card-actions {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.6rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-sm:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.btn-danger-sm:hover { border-color: var(--color-danger, #e74c3c); color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.group-members-panel {
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.members-search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.member-search-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.member-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
padding: 0.25rem 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.member-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.member-result-item:hover { background: var(--color-hover); }
|
||||
.member-result-name { font-weight: 600; font-size: 0.85rem; }
|
||||
.member-result-email { color: var(--color-text-muted); font-size: 0.78rem; }
|
||||
|
||||
.role-select {
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.member-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--color-text); }
|
||||
|
||||
.member-role-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.role-owner { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); }
|
||||
.role-member { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
|
||||
|
||||
.members-empty {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user