feat: Changable name for asset

Author: matvp91

packages/api/src/db/migrations/2025_02_12_assets_name.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>) {
+  await db.schema.alterTable("assets").addColumn("name", "text").execute();
+}
+
+export async function down(db: Kysely<any>) {
+  await db.schema.alterTable("assets").dropColumn("name").execute();
+}

packages/api/src/db/types.ts

@@ -24,12 +24,15 @@ export type GroupInsert = Insertable<GroupsTable>;
 
 export interface AssetsTable {
   id: string;
+  name: string | null;
   groupId: number | null;
   createdAt: ColumnType<Date, never, never>;
 }
 
 export type AssetInsert = Insertable<AssetsTable>;
 
+export type AssetUpdate = Updateable<AssetsTable>;
+
 export interface PlayablesTable {
   assetId: string;
   name: string;

packages/api/src/repositories/assets.ts

@@ -1,5 +1,5 @@
 import { db } from "../db";
-import type { AssetInsert, PlayableInsert } from "../db/types";
+import type { AssetInsert, AssetUpdate, PlayableInsert } from "../db/types";
 
 interface AssetsFilter {
   page: number;
@@ -12,6 +12,14 @@ export async function createAsset(fields: AssetInsert) {
   return await db.insertInto("assets").values(fields).executeTakeFirstOrThrow();
 }
 
+export async function updateAsset(id: string, fields: AssetUpdate) {
+  return await db
+    .updateTable("assets")
+    .set(fields)
+    .where("id", "=", id)
+    .executeTakeFirst();
+}
+
 export async function getAssets(filter: AssetsFilter) {
   let orderBy: "id" | "playables" | "groupId" | "createdAt";
   if (filter.sortKey === "name") {
@@ -25,6 +33,7 @@ export async function getAssets(filter: AssetsFilter) {
     .leftJoin("playables", "playables.assetId", "assets.id")
     .select(({ fn }) => [
       "assets.id",
+      "assets.name",
       "assets.groupId",
       "assets.createdAt",
       fn.count<number>("playables.assetId").as("playables"),
@@ -44,7 +53,7 @@ export async function getAssets(filter: AssetsFilter) {
 
   return {
     ...filter,
-    items: items.map(formatAsset),
+    items,
     totalPages,
   };
 }
@@ -84,6 +93,7 @@ export async function getAsset(id: string) {
     .leftJoin("playables", "playables.assetId", "assets.id")
     .select(({ fn }) => [
       "assets.id",
+      "assets.name",
       "assets.groupId",
       "assets.createdAt",
       fn.count<number>("playables.assetId").as("playables"),
@@ -92,17 +102,5 @@ export async function getAsset(id: string) {
     .where("assets.id", "=", id)
     .executeTakeFirst();
 
-  return asset ? formatAsset(asset) : null;
-}
-
-function formatAsset(asset: {
-  id: string;
-  groupId: number | null;
-  createdAt: Date;
-  playables: number;
-}) {
-  return {
-    ...asset,
-    name: asset.id,
-  };
+  return asset ?? null;
 }

packages/api/src/routes/assets.ts

@@ -1,7 +1,12 @@
 import { Elysia, t } from "elysia";
 import { auth } from "../auth";
 import { DeliberateError } from "../errors";
-import { getAsset, getAssets, getGroups } from "../repositories/assets";
+import {
+  getAsset,
+  getAssets,
+  getGroups,
+  updateAsset,
+} from "../repositories/assets";
 import { AssetSchema } from "../types";
 import { mergeProps } from "../utils/type-guard";
 
@@ -76,6 +81,20 @@ export const assets = new Elysia()
       },
     },
   )
+  .put(
+    "/assets/:id",
+    async ({ params, body }) => {
+      await updateAsset(params.id, body);
+    },
+    {
+      params: t.Object({
+        id: t.String(),
+      }),
+      body: t.Object({
+        name: t.String(),
+      }),
+    },
+  )
   .get(
     "/groups",
     async () => {

packages/api/src/types.ts

@@ -82,8 +82,8 @@ export type User = Static<typeof UserSchema>;
 export const AssetSchema = t.Object(
   {
     id: t.String({ format: "uuid" }),
+    name: t.Nullable(t.String()),
     groupId: t.Nullable(t.Number()),
-    name: t.String(),
     createdAt: t.Date(),
     playables: t.Number(),
   },

packages/app/src/components/Form.tsx

@@ -1,6 +1,6 @@
 import { Button, Input } from "@heroui/react";
 import cn from "clsx";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import type { InputProps } from "@heroui/input";
@@ -29,6 +29,8 @@ export function Form<T extends FieldRecord>({
   onSubmit,
   submit,
 }: FormProps<T>) {
+  const [loading, setLoading] = useState(false);
+
   const entries = Object.entries(fields);
 
   const { handleSubmit, setValue, control, getValues } = useForm<FieldMap>({
@@ -50,7 +52,13 @@ export function Form<T extends FieldRecord>({
   return (
     <form
       onSubmit={handleSubmit((values) => {
-        onSubmit(values as FieldMap<T>);
+        const promise = onSubmit(values as FieldMap<T>);
+        if (promise) {
+          setLoading(true);
+          promise.then(() => {
+            setLoading(false);
+          });
+        }
       })}
       className={cn("flex flex-col gap-4", className)}
       autoComplete="off"
@@ -76,7 +84,9 @@ export function Form<T extends FieldRecord>({
         );
       })}
       <div>
-        <Button type="submit">{submit ?? "Submit"}</Button>
+        <Button isLoading={loading} type="submit">
+          {submit ?? "Submit"}
+        </Button>
       </div>
     </form>
   );

packages/app/src/components/FullTable.tsx

@@ -9,7 +9,6 @@ import {
   TableRow,
 } from "@heroui/table";
 import { useInfiniteScroll } from "@heroui/use-infinite-scroll";
-import { useState } from "react";
 import type { SortDescriptor, TableProps } from "@heroui/table";
 import type { ReactNode } from "@tanstack/react-router";
 
@@ -23,15 +22,15 @@ export interface Column {
 export interface Filter {
   page: number;
   perPage: number;
-  sortKey: string | number;
+  sortKey: string;
   sortDir: "asc" | "desc";
 }
 
 interface FullTableProps<T, F extends Filter> {
   classNames?: TableProps["classNames"];
   columns: Column[];
   items: T[];
-  mapRow(props: T): { key: string | number; cells: ReactNode[] };
+  mapRow(props: T): { key: string; cells: ReactNode[] };
   filter?: F;
   onFilterChange?(filter: F): void;
   hasMore?: boolean;
@@ -50,10 +49,13 @@ export function FullTable<T, F extends Filter>({
   onLoadMore,
   totalPages,
 }: FullTableProps<T, F>) {
-  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
-    column: filter?.sortKey ?? "",
-    direction: filter?.sortDir === "asc" ? "ascending" : "descending",
-  });
+  let sortDescriptor: SortDescriptor | undefined;
+  if (filter) {
+    sortDescriptor = {
+      column: filter.sortKey,
+      direction: filter.sortDir === "asc" ? "ascending" : "descending",
+    };
+  }
 
   const [loaderRef, scrollerRef] = useInfiniteScroll({
     onLoadMore,
@@ -72,7 +74,6 @@ export function FullTable<T, F extends Filter>({
         baseRef={scrollerRef}
         sortDescriptor={sortDescriptor ?? undefined}
         onSortChange={(sd) => {
-          setSortDescriptor(sd);
           updateFilter({
             sortKey: sd.column,
             sortDir: sd.direction === "ascending" ? "asc" : "desc",

packages/app/src/routes/(dashboard)/_layout/assets.tsx

@@ -1,12 +1,25 @@
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+} from "@heroui/drawer";
+import {
+  createFileRoute,
+  Link,
+  useNavigate,
+  useRouter,
+} from "@tanstack/react-router";
 import { zodSearchValidator } from "@tanstack/router-zod-adapter";
-import { CircleSlash } from "lucide-react";
+import { CircleSlash, SquarePen } from "lucide-react";
+import { useState } from "react";
 import { z } from "zod";
+import { useAuth } from "../../../auth";
+import { Form } from "../../../components/Form";
 import { Format } from "../../../components/Format";
 import { FullTable } from "../../../components/FullTable";
 import { Uniqolor } from "../../../components/Uniqolor";
-import type { Group } from "@superstreamer/api/client";
-import type { Asset } from "@superstreamer/api/client";
+import type { Asset, Group } from "@superstreamer/api/client";
 
 export const Route = createFileRoute("/(dashboard)/_layout/assets")({
   component: RouteComponent,
@@ -33,6 +46,7 @@ function RouteComponent() {
   const navigate = useNavigate({ from: Route.fullPath });
   const { assets, groups } = Route.useLoaderData();
   const filter = Route.useLoaderDeps();
+  const [editAsset, setEditAsset] = useState<Asset | null>(null);
 
   if (!assets.data || !groups.data) {
     return null;
@@ -63,6 +77,10 @@ function RouteComponent() {
             label: "Created",
             allowsSorting: true,
           },
+          {
+            id: "actions",
+            label: "Actions",
+          },
         ]}
         {...assets.data}
         filter={filter}
@@ -72,13 +90,31 @@ function RouteComponent() {
         mapRow={(item) => ({
           key: item.id,
           cells: [
-            item.name,
+            <Name asset={item} />,
             <Playables asset={item} />,
             <GroupTag groups={groups.data} asset={item} />,
             <Format format="date" value={item.createdAt} />,
+            <div className="flex items-center">
+              <button onClick={() => setEditAsset(item)}>
+                <SquarePen className="w-4 h-4" />
+              </button>
+            </div>,
           ],
         })}
       />
+      <EditAssetDrawer asset={editAsset} onClose={() => setEditAsset(null)} />
+    </div>
+  );
+}
+
+function Name({ asset }: { asset: Asset }) {
+  if (!asset.name) {
+    return <span>{asset.id}</span>;
+  }
+  return (
+    <div>
+      {asset.name}
+      <div className="text-xs opacity-50">{asset.id}</div>
     </div>
   );
 }
@@ -101,3 +137,41 @@ function Playables({ asset }: { asset: Asset }) {
     </div>
   );
 }
+
+function EditAssetDrawer({
+  asset,
+  onClose,
+}: {
+  asset: Asset | null;
+  onClose: () => void;
+}) {
+  const router = useRouter();
+  const { api } = useAuth();
+
+  return (
+    <Drawer isOpen={asset !== null} onClose={onClose}>
+      <DrawerContent>
+        <DrawerHeader>Asset</DrawerHeader>
+        {asset ? (
+          <DrawerBody>
+            <div className="mb-4">{asset.id}</div>
+            <Form
+              fields={{
+                name: {
+                  type: "string",
+                  label: "Name",
+                  value: asset.name,
+                },
+              }}
+              onSubmit={async (values) => {
+                await api.assets({ id: asset.id }).put(values);
+                await router.invalidate();
+                onClose();
+              }}
+            />
+          </DrawerBody>
+        ) : null}
+      </DrawerContent>
+    </Drawer>
+  );
+}