making the slug is editable and updatable after the link creation

components/dashboard/links/Editor.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { DependencyType } from '@/components/ui/auto-form/interface'
-import { LinkSchema, nanoid } from '@/schemas/link'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Shuffle, Sparkles } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
 import { z } from 'zod'
+import { LinkSchema, nanoid } from '@/schemas/link'
 
 const props = defineProps({
   link: {
@@ -41,7 +40,7 @@ const EditLinkSchema = LinkSchema.pick({
 
 const fieldConfig = {
   slug: {
-    disabled: isEdit,
+    // Removed disabled condition to allow editing
   },
   optional: {
     comment: {
@@ -51,12 +50,7 @@ const fieldConfig = {
 }
 
 const dependencies = [
-  {
-    sourceField: 'slug',
-    type: DependencyType.DISABLES,
-    targetField: 'slug',
-    when: () => isEdit,
-  },
+  // Removed the dependency that disables slug editing
 ]
 
 const form = useForm({
@@ -109,6 +103,12 @@ async function onSubmit(formData) {
     ...(formData.optional || []),
     expiration: formData.optional?.expiration ? date2unix(formData.optional?.expiration, 'end') : undefined,
   }
+
+  // Add oldSlug if slug has changed
+  if (isEdit && props.link.slug !== formData.slug) {
+    link.oldSlug = props.link.slug
+  }
+
   const { link: newLink } = await useAPI(isEdit ? '/api/link/edit' : '/api/link/create', {
     method: isEdit ? 'PUT' : 'POST',
     body: link,

server/api/link/edit.put.ts

@@ -9,30 +9,93 @@ export default eventHandler(async (event) => {
       statusText: 'Preview mode cannot edit links.',
     })
   }
-  const link = await readValidatedBody(event, LinkSchema.parse)
+
+  // Read raw body first to get oldSlug
+  const body = await readBody(event)
+  const oldSlug = body.oldSlug
+
+  // Validate the link data
+  const link = await LinkSchema.parse(body)
   const { cloudflare } = event.context
   const { KV } = cloudflare.env
 
-  const existingLink: z.infer<typeof LinkSchema> | null = await KV.get(`link:${link.slug}`, { type: 'json' })
-  if (existingLink) {
+  // If we're updating the slug
+  if (oldSlug && oldSlug !== link.slug) {
+    // Get the old link
+    const oldLink: z.infer<typeof LinkSchema> | null = await KV.get(`link:${oldSlug}`, { type: 'json' })
+    if (!oldLink) {
+      throw createError({
+        status: 404,
+        statusText: 'Original link not found',
+      })
+    }
+
+    // Check if new slug already exists
+    const slugExists = await KV.get(`link:${link.slug}`, { type: 'json' })
+    if (slugExists) {
+      throw createError({
+        status: 409,
+        statusText: 'New slug already exists',
+      })
+    }
+
+    // Create updated link
     const newLink = {
-      ...existingLink,
+      ...oldLink,
       ...link,
-      id: existingLink.id, // don't update id
-      createdAt: existingLink.createdAt, // don't update createdAt
+      id: oldLink.id,
+      createdAt: oldLink.createdAt,
       updatedAt: Math.floor(Date.now() / 1000),
     }
+
     const expiration = getExpiration(event, newLink.expiration)
-    await KV.put(`link:${newLink.slug}`, JSON.stringify(newLink), {
+
+    // Write new entry first
+    await KV.put(`link:${link.slug}`, JSON.stringify(newLink), {
       expiration,
       metadata: {
         expiration,
         url: newLink.url,
         comment: newLink.comment,
       },
     })
+
+    // Then delete old entry
+    await KV.delete(`link:${oldSlug}`)
+
     setResponseStatus(event, 201)
     const shortLink = `${getRequestProtocol(event)}://${getRequestHost(event)}/${newLink.slug}`
     return { link: newLink, shortLink }
   }
+
+  // Regular update (no slug change)
+  const existingLink: z.infer<typeof LinkSchema> | null = await KV.get(`link:${link.slug}`, { type: 'json' })
+  if (!existingLink) {
+    throw createError({
+      status: 404,
+      statusText: 'Link not found',
+    })
+  }
+
+  const updatedLink = {
+    ...existingLink,
+    ...link,
+    id: existingLink.id,
+    createdAt: existingLink.createdAt,
+    updatedAt: Math.floor(Date.now() / 1000),
+  }
+
+  const expiration = getExpiration(event, updatedLink.expiration)
+  await KV.put(`link:${link.slug}`, JSON.stringify(updatedLink), {
+    expiration,
+    metadata: {
+      expiration,
+      url: updatedLink.url,
+      comment: updatedLink.comment,
+    },
+  })
+
+  setResponseStatus(event, 201)
+  const shortLink = `${getRequestProtocol(event)}://${getRequestHost(event)}/${updatedLink.slug}`
+  return { link: updatedLink, shortLink }
 })