Page for showing own nodes with ability to delete them

Author: MertenD

src/actions/shop/get-node-definition-previews-from-user.ts

@@ -0,0 +1,29 @@
+"use server"
+
+import {cookies} from "next/headers";
+import {createClient} from "@/utils/supabase/server";
+import {NodeDefinitionPreview} from "@/model/NodeDefinition";
+
+export default async function(creatorId: string, teamId: number): Promise<NodeDefinitionPreview[]> {
+
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore, process.env.SUPABASE_SERVICE_KEY)
+
+    let { data, error } = await supabase
+        .from("node_definition")
+        .select("id, " +
+            "name: definition->name, " +
+            "icon: definition->icon, " +
+            "shortDescription: definition->shortDescription, " +
+            "executionMode: definition->executionMode"
+        )
+        .eq("created_by", creatorId)
+        .eq("team_id", teamId)
+        .returns<NodeDefinitionPreview[]>()
+
+    if (error || !data) {
+        throw Error(error?.message || "Error getting node definitions for user")
+    }
+
+    return data
+}

src/actions/shop/remove-node-definition-permanently.ts

@@ -0,0 +1,21 @@
+"use server"
+
+import {cookies} from "next/headers";
+import {createClient} from "@/utils/supabase/server";
+
+export default async function(nodeDefinitionId: number): Promise<void> {
+
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore)
+
+    const response = await supabase
+        .from("node_definition")
+        .delete()
+        .eq("id", nodeDefinitionId)
+
+    if (response.error) {
+        throw Error("Error while deleting node to team: " + response.error.message)
+    }
+
+    return
+}

src/app/[teamId]/shop/own-nodes/page.tsx

@@ -0,0 +1,83 @@
+import getNodeDefinitionsFromUser from "@/actions/shop/get-node-definition-previews-from-user";
+import {cookies} from "next/headers";
+import {createClient} from "@/utils/supabase/server";
+import {redirect} from "next/navigation";
+import {NodeDefinitionPreview} from "@/model/NodeDefinition";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
+import {Badge} from "@/components/ui/badge";
+import Link from "next/link";
+import {ArrowRight, Trash2} from "lucide-react";
+import {Button} from "@/components/ui/button";
+import {getTranslations} from "next-intl/server";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import removeNodeDefinitionPermanently from "@/actions/shop/remove-node-definition-permanently";
+
+export default async function OwnNodesPage({ params }: { params: { teamId: number } }) {
+
+    const t =  await getTranslations("shop")
+
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore)
+    const {data: userData, error} = await supabase.auth.getUser()
+    if (error || !userData.user || !userData.user.id) {
+        redirect("/authenticate")
+    }
+
+    const nodeDefinitions = await getNodeDefinitionsFromUser(userData.user.id, params.teamId)
+
+    async function handleRemoveNode(nodeId: number) {
+        "use server"
+
+        removeNodeDefinitionPermanently(nodeId).then(() => {
+            console.log("Node removed successfully")
+        })
+
+        console.log("Removing node with id: ", nodeId)
+    }
+
+    return <>
+        <h2 className="text-3xl font-bold">{t("node.own-nodes")}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {nodeDefinitions.map((node: NodeDefinitionPreview) => (
+                <Card key={node.id} className="group hover:shadow-lg transition-shadow">
+                    <CardHeader>
+                        <div className="flex items-start justify-between">
+                            <div>
+                                <CardTitle className="text-lg">{node.name}</CardTitle>
+                                <CardDescription>{node.shortDescription}</CardDescription>
+                            </div>
+                            <Badge variant="secondary">{node.executionMode}</Badge>
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="flex items-center justify-between">
+                            <Link href={`/${params.teamId}/shop/node/${node.id}`}
+                                  className="inline-flex items-center text-sm text-primary hover:underline">
+                                {t("node.viewDetails")}
+                                <ArrowRight className="ml-1 h-4 w-4"/>
+                            </Link>
+                            {node.id && <form action={handleRemoveNode.bind(null, node.id)} method="POST">
+                                <Tooltip delayDuration={0}>
+                                    <TooltipTrigger>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            type="submit"
+                                            className="h-8 w-8 text-muted-foreground hover:bg-destructive transition-colors"
+                                        >
+                                            <Trash2 className="h-4 w-4"/>
+                                            <span className="sr-only">Remove node</span>
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {t("node.removeNodePermanently")}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </form>}
+                        </div>
+                    </CardContent>
+                </Card>
+            ))}
+        </div>
+    </>
+}

src/components/sidebar/AppBreadcrumbs.tsx

@@ -38,6 +38,7 @@ export default function AppBreadcrumbs({ teamId, userId }: AppBreadcrumbsProps)
             const shopSavedNodesPath = `/${teamId}/shop/saved-nodes`
             const shopCreateNodePath = `/${teamId}/shop/create-node`
             const shopDetailsPath = `/${teamId}/shop/node`
+            const shopOwnNodesPath = `/${teamId}/shop/own-nodes`
 
             const newBreadcrumbs: BreadcrumbModel[] = []
 
@@ -133,6 +134,11 @@ export default function AppBreadcrumbs({ teamId, userId }: AppBreadcrumbsProps)
                             })
                         }
                     }
+                } else if (pathname.startsWith(shopOwnNodesPath)) {
+                    newBreadcrumbs.push({
+                        name: t('ownNodes'),
+                        href: shopOwnNodesPath
+                    });
                 }
             }
 

src/components/sidebar/AppSidebar.tsx

@@ -18,7 +18,7 @@ import {redirect} from "next/navigation";
 import {Page, Profile} from "@/model/database/database.types";
 import getAllowedPages from "@/actions/get-allowed-pages";
 import {getTranslations} from "next-intl/server";
-import type {LucideIcon} from "lucide-react"
+import {BookUser, LucideIcon} from "lucide-react"
 import {
     Award,
     ChartColumn,
@@ -193,6 +193,14 @@ export default async function AppSidebar({ teamId, profile, ...props }: AppSideb
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton asChild tooltip={t("ownNodes")}>
+                            <Link href={`/${teamId}/shop/own-nodes`}>
+                                <BookUser />
+                                <span>{ t("ownNodes") }</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
                 </SidebarMenu>
             </SidebarGroup>
         </SidebarContent>

src/i18n/dictionaries/de.json

@@ -57,7 +57,8 @@
       "shopGroupTitle": "Shop",
       "shop": "Shop",
       "addedNodes": "Gespeicherte Aktivitäten",
-      "createNode": "Aktivität erstellen"
+      "createNode": "Aktivität erstellen",
+      "ownNodes": "Eigene Aktivitäten"
     },
     "userNav": {
       "settings": "Einstellungen",
@@ -354,6 +355,8 @@
     },
     "node": {
       "viewDetails": "Details anzeigen",
+      "own-nodes": "Eigene Aktivitäten",
+      "removeNodePermanently": "Aktivität dauerhaft entfernen",
       "details": {
         "addToEditor": "Zum Editor hinzufügen",
         "removeFromEditor": "Vom Editor entfernen",

src/i18n/dictionaries/en.json

@@ -57,7 +57,8 @@
       "shopGroupTitle": "Shop",
       "shop": "Shop",
       "addedNodes": "Saved Activities",
-      "createNode": "Create Activity"
+      "createNode": "Create Activity",
+      "ownNodes": "My Activities"
     },
     "userNav": {
       "settings": "Settings",
@@ -354,6 +355,8 @@
     },
     "node": {
       "viewDetails": "View details",
+      "own-nodes": "My Activities",
+      "removeNodePermanently": "Remove activity permanently",
       "details": {
         "addToEditor": "Add to editor",
         "removeFromEditor": "Remove from editor",

src/i18n/dictionaries/sr.json

@@ -56,7 +56,8 @@
       "shopGroupTitle": "Prodavnica",
       "shop": "Prodavnica",
       "addedNodes": "Dodate aktivnosti",
-      "createNode": "Kreiraj aktivnost"
+      "createNode": "Kreiraj aktivnost",
+      "ownNodes": "Moje aktivnosti"
     },
     "userNav": {
       "settings": "Podešavanja",
@@ -353,6 +354,8 @@
     },
     "node": {
       "viewDetails": "Pogledaj detalje",
+      "own-nodes": "Moje aktivnosti",
+      "removeNodePermanently": "Trajno ukloni aktivnost",
       "details": {
         "addToEditor": "Dodaj u editor",
         "removeFromEditor": "Ukloni iz editora",