External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Working on bugs, add delete restore. Review the auth style. working on the RBAC.

Browse Source
This commit is contained in:
charlesgauthereau
2025-07-26 16:34:06 +02:00
parent f8f599e4dd
commit 1ffbd6efc8
23 changed files with 419 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/common/cards-with-pagination.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
))}
</div>
<PaginationNavigation
className="justify-end"
className="justify-end mt-4"
totalPages={totalPages}
currentPage={currentPage}
goToPage={goToPage}
src/components/wrappers/common/connection-circle.tsx
+8 -2
View File
@@ -7,11 +7,13 @@ export type ConnectionCircleProps = {
export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
let style = "bg-gray-300 border-gray-400";
if (date) {
if (date instanceof Date && !isNaN(date.getTime())) {
const now = Date.now();
const timestamp = new Date(date).getTime();
const timestamp = date.getTime();
const interval = now - timestamp;
console.log({ now, timestamp, interval });
if (interval < 10000) {
style = "bg-green-400 border-green-600";
} else if (interval <= 20000) {
@@ -19,7 +21,11 @@ export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
} else {
style = "bg-red-400 border-red-600";
}
} else {
console.warn("Invalid date passed to ConnectionCircle:", date);
}
console.log(style);
return <div className={cn("w-5 h-5 rounded-full border-4", style)} />;
};
src/components/wrappers/dashboard/agent/AgentCard/AgentCard.tsx
+5 -5
View File
@@ -14,13 +14,13 @@ export const AgentCard = (props: agentCardProps) => {
const { data: agent } = props;
return (
<Link href={`/dashboard/agents/${agent.id}`}>
<Link href={`/dashboard/agents/${agent.id}`} className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md">
<Card className="flex flex-row justify-between">
<div className="">
<CardHeader>{agent.name}</CardHeader>
<CardContent>Last contact : {formatDateLastContact(agent.lastContact)}</CardContent>
<div>
<CardHeader className="text-2xl font-bold">{agent.name}</CardHeader>
<CardContent>Last contact: {formatDateLastContact(agent.lastContact)}</CardContent>
</div>
<div className="mt-3 mr-3">
<div className="flex items-center px-4">
<ConnectionCircle date={agent.lastContact} />
</div>
</Card>
src/components/wrappers/dashboard/agent/AgentForm/AgentForm.tsx
+29 -44
View File
@@ -1,16 +1,24 @@
"use client";
import { Card, CardContent } from "@/components/ui/card";
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { TooltipProvider } from "@/components/ui/tooltip";
import { AgentSchema, AgentType } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import { toast } from "sonner";
import { createAgentAction, updateAgentAction } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.action";
import {Card, CardContent} from "@/components/ui/card";
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useZodForm
} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {Form} from "@/components/ui/form";
import {Button} from "@/components/ui/button";
import {useRouter} from "next/navigation";
import {useMutation} from "@tanstack/react-query";
import {TooltipProvider} from "@/components/ui/tooltip";
import {AgentSchema, AgentType} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import {toast} from "sonner";
import {createAgentAction, updateAgentAction} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.action";
export type agentFormProps = {
defaultValues?: AgentType;
@@ -29,14 +37,13 @@ export const AgentForm = (props: agentFormProps) => {
const mutation = useMutation({
mutationFn: async (values: AgentType) => {
console.log("values", values);
const createAgent = isCreate
? await createAgentAction(values)
: await updateAgentAction({
id: props.agentId ?? "-",
data: values,
});
id: props.agentId ?? "-",
data: values,
});
const data = createAgent?.data?.data;
if (createAgent?.serverError || !data) {
@@ -44,7 +51,7 @@ export const AgentForm = (props: agentFormProps) => {
toast.error(createAgent?.serverError);
return;
}
toast.success(`Success`);
toast.success(`Success ${isCreate ? "creating" : "updating"} agent`);
router.push(`/dashboard/agents/${data.id}`);
router.refresh();
},
@@ -65,37 +72,14 @@ export const AgentForm = (props: agentFormProps) => {
control={form.control}
name="name"
defaultValue=""
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Agent 1" {...field} />
</FormControl>
<FormDescription>Your agent project name</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
defaultValue=""
name="slug"
render={({ field }) => (
<FormItem>
<FormLabel>Slug</FormLabel>
<FormControl>
<Input
//value={field.value ?? ""}
placeholder="agent-1"
{...field}
onChange={(e) => {
const value = e.target.value.replaceAll(" ", "-").toLowerCase();
field.onChange(value);
}}
/>
</FormControl>
<FormDescription>The slug is used in the url of the agent</FormDescription>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
@@ -103,14 +87,15 @@ export const AgentForm = (props: agentFormProps) => {
control={form.control}
defaultValue=""
name="description"
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input placeholder="This agent is for the client exemple.com" {...field} value={field.value ?? ""} />
<Input placeholder="This agent is for the client exemple.com" {...field}
value={field.value ?? ""}/>
</FormControl>
<FormDescription>Enter your project agent description</FormDescription>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
src/components/wrappers/dashboard/agent/AgentForm/agent-form.action.ts
+19 -15
View File
@@ -1,26 +1,26 @@
"use server";
import { ActionError, userAction } from "@/safe-actions";
import { AgentSchema } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import { z } from "zod";
import { eq, and, ne, count } from "drizzle-orm";
import { db } from "@/db";
import {ActionError, userAction} from "@/safe-actions";
import {AgentSchema} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import {z} from "zod";
import {eq, and, ne, count} from "drizzle-orm";
import {db} from "@/db";
import * as drizzleDb from "@/db";
import {slugify} from "@/utils/slugify";
const verifySlugUniqueness = async (slug: string, agentId?: string) => {
const conditions = agentId ? and(eq(drizzleDb.schemas.agent.slug, slug), ne(drizzleDb.schemas.agent.id, agentId)) : eq(drizzleDb.schemas.agent.slug, slug);
const conditions = agentId ? and(eq(drizzleDb.schemas.agent.slug, slug), ne(drizzleDb.schemas.agent.id, agentId)) : eq(drizzleDb.schemas.agent.slug, slug);
const [countResult] = await db.select({ count: count() }).from(drizzleDb.schemas.agent).where(conditions);
const [countResult] = await db.select({count: count()}).from(drizzleDb.schemas.agent).where(conditions);
if (countResult.count > 0) {
throw new ActionError("Slug already exists");
}
};
export const createAgentAction = userAction.schema(AgentSchema).action(async ({ parsedInput }) => {
await verifySlugUniqueness(parsedInput.slug);
const [createdAgent] = await db.insert(drizzleDb.schemas.agent).values(parsedInput).returning();
export const createAgentAction = userAction.schema(AgentSchema).action(async ({parsedInput}) => {
const slug = slugify(parsedInput.name);
await verifySlugUniqueness(slug);
const [createdAgent] = await db.insert(drizzleDb.schemas.agent).values({...parsedInput, slug: slug}).returning();
return {
data: createdAgent,
};
@@ -33,10 +33,14 @@ export const updateAgentAction = userAction
data: AgentSchema,
})
)
.action(async ({ parsedInput }) => {
await verifySlugUniqueness(parsedInput.data.slug, parsedInput.id);
.action(async ({parsedInput}) => {
const slug = slugify(parsedInput.data.name);
await verifySlugUniqueness(slug, parsedInput.id);
const [updatedAgent] = await db.update(drizzleDb.schemas.agent).set(parsedInput.data).where(eq(drizzleDb.schemas.agent.id, parsedInput.id)).returning();
const [updatedAgent] = await db.update(drizzleDb.schemas.agent).set({
...parsedInput.data,
slug: slug
}).where(eq(drizzleDb.schemas.agent.id, parsedInput.id)).returning();
return {
data: updatedAgent,
src/components/wrappers/dashboard/agent/AgentForm/agent-form.schema.ts
-5
View File
@@ -2,11 +2,6 @@ import { z } from "zod";
export const AgentSchema = z.object({
name: z.string(),
slug: z
.string()
.regex(/^[a-zA-Z0-9_-]*$/)
.min(5)
.max(25),
description: z.string(),
});
src/components/wrappers/dashboard/projects/Database/DatabaseTabs.tsx
+1 -4
View File
@@ -41,13 +41,10 @@ export const DatabaseTabs = (props: DatabaseTabsProps) => {
</TabsList>
<TabsContent className="h-full justify-between" value="backup">
{/*<DataTable columns={backupColumns} data={props.backups} extendedProps={props.isAlreadyRestore} />*/}
<DataTable columns={backupColumns(props.isAlreadyRestore)} data={props.backups} enablePagination />
</TabsContent>
<TabsContent className="h-full justify-between" value="restore">
<DataTable columns={restoreColumns} data={props.restorations} enablePagination />
<DataTable columns={restoreColumns(props.isAlreadyRestore)} data={props.restorations} enablePagination />
</TabsContent>
</Tabs>
);
src/components/wrappers/dashboard/projects/ProjectCard/ProjectCard.tsx
+2 -2
View File
@@ -13,10 +13,10 @@ export const ProjectCard = (props: projectCardProps) => {
const { data: project, organizationSlug } = props;
return (
<Link href={`/dashboard/projects/${project.id}`}>
<Link href={`/dashboard/projects/${project.id}`} className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md">
<Card className="flex flex-row justify-between">
<div className="">
<CardHeader>{project.name}</CardHeader>
<CardHeader className="text-2xl font-bold">{project.name}</CardHeader>
<CardContent>{project.databases.length} databases</CardContent>
</div>
</Card>
src/components/wrappers/dashboard/projects/ProjectCard/ProjectDatabaseCard.tsx
+13 -6
View File
@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { ConnectionCircle } from "@/components/wrappers/common/connection-circle";
import { formatDateLastContact } from "@/utils/date-formatting";
import {Database} from "@/db/schema/06_database";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
export type projectDatabaseCardProps = {
data: Database;
@@ -17,7 +18,7 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
const { organizationSlug, data: database, extendedProps: extendedProps } = props;
return (
<Link href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
<Link className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md" href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
<DatabaseCard data={database} />
</Link>
);
@@ -31,15 +32,21 @@ export const DatabaseCard = (props: databaseCardProps) => {
const { data: database } = props;
return (
<Card className="flex flex-row justify-between">
<div className="flex flex-row items-center gap-2">
<div className="flex items-center space-x-4 px-4">
<Image src="/PostgreSQL.png" alt="Database type Icon" width={60} height={60} className="object-cover ml-4" />
<div>
<CardHeader>Name : {database.name}</CardHeader>
<CardContent>Last contact: {formatDateLastContact(database.lastContact)}</CardContent>
<div className="justify-between">
<div className="font-medium">Name: {database.name}</div>
<div className="text-sm text-muted-foreground">Generated Id: {database.agentDatabaseId}</div>
<div className="text-xs text-muted-foreground">
Last contact: {formatDateLastContact(database.lastContact)}
</div>
</div>
</div>
<div className="mt-3 mr-3">
<div className="flex items-center px-4">
<ConnectionCircle date={database.lastContact} />
</div>
</Card>
src/components/wrappers/dashboard/projects/ProjectsForm/ProjectForm.schema.ts
-1
View File
@@ -2,7 +2,6 @@ import { z } from "zod";
export const ProjectSchema = z.object({
name: z.string(),
slug: z.string(),
databases: z.array(z.string()),
});
src/components/wrappers/dashboard/projects/ProjectsForm/ProjectForm.tsx
-21
View File
@@ -103,27 +103,6 @@ export const ProjectForm = (props: projectFormProps) => {
</FormItem>
)}
/>
<FormField
control={form.control}
name="slug"
defaultValue=""
render={({ field }) => (
<FormItem>
<FormLabel>Slug</FormLabel>
<FormControl>
<Input
placeholder="project-1"
{...field}
onChange={(e) => {
const value = e.target.value.replaceAll(" ", "-").toLowerCase();
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="databases"
src/components/wrappers/dashboard/projects/ProjectsForm/project-form.action.ts
+5 -2
View File
@@ -9,6 +9,7 @@ import { eq, inArray } from "drizzle-orm";
import {Project} from "@/db/schema/05_project";
import * as drizzleDb from "@/db";
import {Database} from "@/db/schema/06_database";
import {slugify} from "@/utils/slugify";
export const createProjectAction = userAction
.schema(
@@ -19,11 +20,12 @@ export const createProjectAction = userAction
)
.action(async ({ parsedInput }): Promise<ServerActionResult<Project>> => {
try {
const slug = slugify(parsedInput.data.name);
const [createdProject] = await db
.insert(drizzleDb.schemas.project)
.values({
name: parsedInput.data.name,
slug: parsedInput.data.slug,
slug: slug,
organizationId: parsedInput.organizationId,
})
.returning();
@@ -87,12 +89,13 @@ export const updateProjectAction = userAction
if (databasesToRemove.length > 0) {
await db.update(drizzleDb.schemas.database).set({ projectId: null }).where(inArray(drizzleDb.schemas.database.id, databasesToRemove));
}
const slug = slugify(parsedInput.data.name);
const [updatedProject] = await db
.update(drizzleDb.schemas.project)
.set({
name: parsedInput.data.name,
slug: parsedInput.data.slug,
slug: slug,
})
.where(eq(drizzleDb.schemas.project.id, parsedInput.projectId))
.returning();