fix(knowledge): resolve TypeScript errors in tags service
- Fix updateData typing for partial updates - Add slug field to CreateTagDto - Build now passes Note: tasks.controller.spec.ts needs test config update for WorkspaceGuard
This commit is contained in:
Jason Woltje
144
apps/web/src/app/(authenticated)/knowledge/page.tsx
Normal file
144
apps/web/src/app/(authenticated)/knowledge/page.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { EntryStatus } from "@mosaic/shared";
|
||||
import { EntryList } from "@/components/knowledge/EntryList";
|
||||
import { EntryFilters } from "@/components/knowledge/EntryFilters";
|
||||
import { mockEntries, mockTags } from "@/lib/api/knowledge";
|
||||
import Link from "next/link";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
export default function KnowledgePage() {
|
||||
// TODO: Replace with real API call when backend is ready
|
||||
// const { data: entries, isLoading } = useQuery({
|
||||
// queryKey: ["knowledge-entries"],
|
||||
// queryFn: fetchEntries,
|
||||
// });
|
||||
|
||||
const [isLoading] = useState(false);
|
||||
|
||||
// Filter and sort state
|
||||
const [selectedStatus, setSelectedStatus] = useState<EntryStatus | "all">("all");
|
||||
const [selectedTag, setSelectedTag] = useState<string | "all">("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [sortBy, setSortBy] = useState<"updatedAt" | "createdAt" | "title">("updatedAt");
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
|
||||
|
||||
// Pagination state
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
// Client-side filtering and sorting
|
||||
const filteredAndSortedEntries = useMemo(() => {
|
||||
let filtered = [...mockEntries];
|
||||
|
||||
// Filter by status
|
||||
if (selectedStatus !== "all") {
|
||||
filtered = filtered.filter((entry) => entry.status === selectedStatus);
|
||||
}
|
||||
|
||||
// Filter by tag
|
||||
if (selectedTag !== "all") {
|
||||
filtered = filtered.filter((entry) =>
|
||||
entry.tags.some((tag) => tag.slug === selectedTag)
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(entry) =>
|
||||
entry.title.toLowerCase().includes(query) ||
|
||||
entry.summary?.toLowerCase().includes(query) ||
|
||||
entry.tags.some((tag) => tag.name.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
// Sort entries
|
||||
filtered.sort((a, b) => {
|
||||
let comparison = 0;
|
||||
|
||||
if (sortBy === "title") {
|
||||
comparison = a.title.localeCompare(b.title);
|
||||
} else if (sortBy === "createdAt") {
|
||||
comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
||||
} else {
|
||||
// updatedAt
|
||||
comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
|
||||
}
|
||||
|
||||
return sortOrder === "asc" ? comparison : -comparison;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [selectedStatus, selectedTag, searchQuery, sortBy, sortOrder]);
|
||||
|
||||
// Pagination
|
||||
const totalPages = Math.ceil(filteredAndSortedEntries.length / itemsPerPage);
|
||||
const paginatedEntries = filteredAndSortedEntries.slice(
|
||||
(currentPage - 1) * itemsPerPage,
|
||||
currentPage * itemsPerPage
|
||||
);
|
||||
|
||||
// Reset to page 1 when filters change
|
||||
const handleFilterChange = (callback: () => void) => {
|
||||
callback();
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const handleSortChange = (
|
||||
newSortBy: "updatedAt" | "createdAt" | "title",
|
||||
newSortOrder: "asc" | "desc"
|
||||
) => {
|
||||
setSortBy(newSortBy);
|
||||
setSortOrder(newSortOrder);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8 max-w-5xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Knowledge Base</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Documentation, guides, and knowledge entries
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Create button */}
|
||||
<Link
|
||||
href="/knowledge/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
<span>Create Entry</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<EntryFilters
|
||||
selectedStatus={selectedStatus}
|
||||
selectedTag={selectedTag}
|
||||
searchQuery={searchQuery}
|
||||
sortBy={sortBy}
|
||||
sortOrder={sortOrder}
|
||||
tags={mockTags}
|
||||
onStatusChange={(status) => handleFilterChange(() => setSelectedStatus(status))}
|
||||
onTagChange={(tag) => handleFilterChange(() => setSelectedTag(tag))}
|
||||
onSearchChange={(query) => handleFilterChange(() => setSearchQuery(query))}
|
||||
onSortChange={handleSortChange}
|
||||
/>
|
||||
|
||||
{/* Entry list */}
|
||||
<EntryList
|
||||
entries={paginatedEntries}
|
||||
isLoading={isLoading}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { TeamSettings } from "@/components/team/TeamSettings";
|
||||
import { TeamMemberList } from "@/components/team/TeamMemberList";
|
||||
import { Button } from "@mosaic/ui";
|
||||
import { mockTeamWithMembers } from "@/lib/api/teams";
|
||||
import type { User } from "@mosaic/shared";
|
||||
import { TeamMemberRole } from "@mosaic/shared";
|
||||
import Link from "next/link";
|
||||
|
||||
// Mock available users for adding to team
|
||||
const mockAvailableUsers: User[] = [
|
||||
{
|
||||
id: "user-3",
|
||||
email: "alice@example.com",
|
||||
name: "Alice Johnson",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
createdAt: new Date("2026-01-17"),
|
||||
updatedAt: new Date("2026-01-17"),
|
||||
},
|
||||
{
|
||||
id: "user-4",
|
||||
email: "bob@example.com",
|
||||
name: "Bob Wilson",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
createdAt: new Date("2026-01-18"),
|
||||
updatedAt: new Date("2026-01-18"),
|
||||
},
|
||||
];
|
||||
|
||||
export default function TeamDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params.id as string;
|
||||
// const teamId = params.teamId as string; // Will be used for API calls
|
||||
|
||||
// TODO: Replace with real API call when backend is ready
|
||||
// const { data: team, isLoading } = useQuery({
|
||||
// queryKey: ["team", workspaceId, params.teamId],
|
||||
// queryFn: () => fetchTeam(workspaceId, params.teamId as string),
|
||||
// });
|
||||
|
||||
const [team] = useState(mockTeamWithMembers);
|
||||
const [isLoading] = useState(false);
|
||||
|
||||
const handleUpdateTeam = async (data: { name?: string; description?: string }) => {
|
||||
// TODO: Replace with real API call
|
||||
// await updateTeam(workspaceId, teamId, data);
|
||||
console.log("Updating team:", data);
|
||||
// TODO: Refetch team data
|
||||
};
|
||||
|
||||
const handleDeleteTeam = async () => {
|
||||
// TODO: Replace with real API call
|
||||
// await deleteTeam(workspaceId, teamId);
|
||||
console.log("Deleting team");
|
||||
|
||||
// Navigate back to teams list
|
||||
router.push(`/settings/workspaces/${workspaceId}/teams`);
|
||||
};
|
||||
|
||||
const handleAddMember = async (userId: string, role?: TeamMemberRole) => {
|
||||
// TODO: Replace with real API call
|
||||
// await addTeamMember(workspaceId, teamId, { userId, role });
|
||||
console.log("Adding member:", { userId, role });
|
||||
// TODO: Refetch team data
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (userId: string) => {
|
||||
// TODO: Replace with real API call
|
||||
// await removeTeamMember(workspaceId, teamId, userId);
|
||||
console.log("Removing member:", userId);
|
||||
// TODO: Refetch team data
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-center items-center p-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
|
||||
<span className="ml-3 text-gray-600">Loading team...</span>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="text-center p-12">
|
||||
<p className="text-lg text-gray-500 mb-4">Team not found</p>
|
||||
<Link href={`/settings/workspaces/${workspaceId}/teams`}>
|
||||
<Button variant="primary">Back to Teams</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href={`/settings/workspaces/${workspaceId}/teams`}
|
||||
className="text-blue-600 hover:text-blue-700 text-sm mb-2 inline-block"
|
||||
>
|
||||
← Back to Teams
|
||||
</Link>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{team.name}</h1>
|
||||
{team.description && (
|
||||
<p className="text-gray-600 mt-2">{team.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<TeamSettings
|
||||
team={team}
|
||||
onUpdate={handleUpdateTeam}
|
||||
onDelete={handleDeleteTeam}
|
||||
/>
|
||||
|
||||
<TeamMemberList
|
||||
members={team.members}
|
||||
onAddMember={handleAddMember}
|
||||
onRemoveMember={handleRemoveMember}
|
||||
availableUsers={mockAvailableUsers}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
142
apps/web/src/app/settings/workspaces/[id]/teams/page.tsx
Normal file
142
apps/web/src/app/settings/workspaces/[id]/teams/page.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { TeamCard } from "@/components/team/TeamCard";
|
||||
import { Button, Input, Modal } from "@mosaic/ui";
|
||||
import { mockTeams } from "@/lib/api/teams";
|
||||
|
||||
export default function TeamsPage() {
|
||||
const params = useParams();
|
||||
const workspaceId = params.id as string;
|
||||
|
||||
// TODO: Replace with real API call when backend is ready
|
||||
// const { data: teams, isLoading } = useQuery({
|
||||
// queryKey: ["teams", workspaceId],
|
||||
// queryFn: () => fetchTeams(workspaceId),
|
||||
// });
|
||||
|
||||
const [teams] = useState(mockTeams);
|
||||
const [isLoading] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [newTeamName, setNewTeamName] = useState("");
|
||||
const [newTeamDescription, setNewTeamDescription] = useState("");
|
||||
|
||||
const handleCreateTeam = async () => {
|
||||
if (!newTeamName.trim()) return;
|
||||
|
||||
setIsCreating(true);
|
||||
try {
|
||||
// TODO: Replace with real API call
|
||||
// await createTeam(workspaceId, {
|
||||
// name: newTeamName,
|
||||
// description: newTeamDescription || undefined,
|
||||
// });
|
||||
|
||||
console.log("Creating team:", { name: newTeamName, description: newTeamDescription });
|
||||
|
||||
// Reset form
|
||||
setNewTeamName("");
|
||||
setNewTeamDescription("");
|
||||
setShowCreateModal(false);
|
||||
|
||||
// TODO: Refresh teams list
|
||||
} catch (error) {
|
||||
console.error("Failed to create team:", error);
|
||||
alert("Failed to create team. Please try again.");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-center items-center p-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
|
||||
<span className="ml-3 text-gray-600">Loading teams...</span>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Teams</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Organize workspace members into teams
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
|
||||
Create Team
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{teams.length === 0 ? (
|
||||
<div className="text-center p-12 bg-gray-50 rounded-lg">
|
||||
<p className="text-lg text-gray-500 mb-4">No teams yet</p>
|
||||
<p className="text-sm text-gray-400 mb-6">
|
||||
Create your first team to organize workspace members
|
||||
</p>
|
||||
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
|
||||
Create Team
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{teams.map((team) => (
|
||||
<TeamCard key={team.id} team={team} workspaceId={workspaceId} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Team Modal */}
|
||||
{showCreateModal && (
|
||||
<Modal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => !isCreating && setShowCreateModal(false)}
|
||||
title="Create New Team"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="Team Name"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
placeholder="Enter team name"
|
||||
fullWidth
|
||||
disabled={isCreating}
|
||||
autoFocus
|
||||
/>
|
||||
<Input
|
||||
label="Description (optional)"
|
||||
value={newTeamDescription}
|
||||
onChange={(e) => setNewTeamDescription(e.target.value)}
|
||||
placeholder="Enter team description"
|
||||
fullWidth
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<div className="flex gap-2 justify-end pt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
disabled={isCreating}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleCreateTeam}
|
||||
disabled={!newTeamName.trim() || isCreating}
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create Team"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user