feat: patch every changed asset in database

Author: A7Lavinraj

apps/client/src/components/timeline-asset.svelte

@@ -55,7 +55,7 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  id={`${asset.row}:${asset.col}`}
+  id={asset.id}
   bind:this={assetRef}
   onmousedown={handleMouseDown}
   class="absolute flex h-full items-center justify-center bg-violet-500"

apps/client/src/routes/editor/[id]/+page.server.ts

@@ -63,7 +63,18 @@ export const actions: Actions = {
     }
   },
   patchAsset: async ({ request }) => {
-    console.log(await request.formData());
+    try {
+      const formData = await request.formData();
+      await fetch('http://localhost:3000/v1/asset', {
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'PATCH',
+        body: formData.get('asset-data')
+      });
+    } catch (err) {
+      console.error(err);
+    }
   },
   deleteAsset: async ({ request }) => {
     console.log(await request.formData());

apps/client/src/states/timeline-assets.svelte.ts

@@ -2,7 +2,7 @@ export interface ITimelineAssetInput {
   id?: string;
   row: number;
   col: number;
-  content: { name: string; url: string }; // Nested content object
+  content: { name: string; url: string };
   start: number;
   length: number;
 }
@@ -61,8 +61,9 @@ export function assign(array: ITimelineAssetInput[]) {
 
 export function handleOverlap(asset: ITimelineAsset) {
   const rowAssets = [...timelineAssetState.assets[asset.row]];
+  const files: ITimelineAsset[] = [];
 
-  rowAssets[asset.col] = asset;
+  rowAssets[asset.col] = { ...rowAssets[asset.col], ...asset };
   rowAssets.sort((a, b) => a.start - b.start);
   rowAssets.forEach((a, i) => (a.col = i));
 
@@ -76,6 +77,16 @@ export function handleOverlap(asset: ITimelineAsset) {
   }
 
   timelineAssetState.assets[asset.row] = rowAssets;
+  files.push(timelineAssetState.assets[asset.row][asset.col]);
+
+  const form = timelineAssetState.formRef;
+
+  if (form) {
+    const item = form.elements.item(0) as HTMLInputElement;
+    form.action = '?/patchAsset';
+    item.value = JSON.stringify(files);
+    form.requestSubmit();
+  }
 }
 
 export function createAsset(event: DragEvent & { currentTarget: EventTarget & HTMLDivElement }) {

apps/server/src/routes/asset.ts

@@ -1,6 +1,6 @@
 import { db } from '../database';
 import { assetTable } from '../database/schema';
-import { eq } from 'drizzle-orm';
+import { eq, sql } from 'drizzle-orm';
 import { Router } from 'express';
 
 const router = Router();
@@ -15,14 +15,30 @@ router.post('/', async (req, res) => {
   }
 });
 
-router.patch('/:id', async (req, res) => {
+router.patch('/', async (req, res) => {
   try {
-    const { id } = req.params;
-    const asset = await db
+    const assets = req.body;
+
+    if (assets.length === 0) {
+      res.status(400).json({ message: 'assets are empty' });
+      return;
+    }
+    const batch = await db
       .update(assetTable)
-      .set({ ...req.body })
-      .where(eq(assetTable.id, id));
-    res.status(200).json(asset);
+      .set({
+        start: sql.raw(`
+        CASE
+          ${assets.map((asset: { id: string; start: number }) => `WHEN id = '${asset.id}' THEN ${asset.start}`).join('\n')}
+        END
+      `),
+      })
+      .where(
+        sql.raw(
+          `id IN (${assets.map((asset: { id: string; start: number }) => `'${asset.id}'`).join(', ')})`
+        )
+      );
+    console.log(batch);
+    res.status(200).json(batch);
   } catch (err) {
     console.error(err);
     res.status(500).json({ message: err });