feat(content): rename folders

Author: larbish

src/app/src/components/shared/item/ItemCardForm.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, type PropType } from 'vue'
 import * as z from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
 import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
 import { joinURL, withLeadingSlash, withoutLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
@@ -35,14 +34,21 @@ const props = defineProps({
 })
 
 const originalName = computed(() => props.renamedItem?.name || '')
-const originalExtension = computed(() => props.renamedItem?.id.split('.').pop() as ContentFileExtension || ContentFileExtension.Markdown)
+const originalExtension = computed(() => {
+  const ext = props.renamedItem?.id.split('.').pop()
+  if (ext && contentFileExtensions.includes(ext as ContentFileExtension)) {
+    return ext as ContentFileExtension
+  }
+
+  return ContentFileExtension.Markdown
+})
 
 const schema = z.object({
   name: z.string()
     .min(1, 'Name cannot be empty')
     .refine((name: string) => !name.endsWith('.'), 'Name cannot end with "."')
     .refine((name: string) => !name.startsWith('/'), 'Name cannot start with "/"'),
-  extension: z.enum(ContentFileExtension),
+  extension: z.optional(z.enum(ContentFileExtension)),
 })
 
 type Schema = z.output<typeof schema>
@@ -88,23 +94,27 @@ const tooltipText = computed(() => {
   }
 })
 
-function onSubmit(_event: FormSubmitEvent<Schema>) {
+function onSubmit() {
   let params: CreateFileParams | CreateFolderParams | RenameFileParams
+  const newFsPath = isFolderAction.value
+    ? joinURL(props.parentItem.fsPath, state.name)
+    : joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)
+
   switch (props.actionId) {
     case StudioItemActionId.CreateDocument:
       params = {
-        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
+        fsPath: withoutLeadingSlash(newFsPath),
         content: `# ${upperFirst(state.name)} file`,
       }
       break
     case StudioItemActionId.CreateFolder:
       params = {
-        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, state.name)),
+        fsPath: withoutLeadingSlash(newFsPath),
       }
       break
     case StudioItemActionId.RenameItem:
       params = {
-        newFsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
+        newFsPath: withoutLeadingSlash(newFsPath),
         id: props.renamedItem.id,
       }
       break
@@ -126,7 +136,7 @@ function onSubmit(_event: FormSubmitEvent<Schema>) {
         class="hover:bg-white relative w-full min-w-0"
       >
         <div
-          v-if="!isFolderAction"
+          v-show="!isFolderAction"
           class="relative"
         >
           <div class="z-[-1] aspect-video rounded-lg bg-elevated" />

src/app/src/composables/useContext.ts

@@ -16,7 +16,7 @@ import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '
 import { useModal } from './useModal'
 import type { useTree } from './useTree'
 import { useRoute } from 'vue-router'
-import { findDescendantsFileItemsFromId } from '../utils/tree'
+import { findDescendantsFileItemsFromId, findItemFromId } from '../utils/tree'
 import type { useDraftMedias } from './useDraftMedias'
 import { joinURL } from 'ufo'
 import { upperFirst } from 'scule'
@@ -109,7 +109,16 @@ export const useContext = createSharedComposable((
     },
     [StudioItemActionId.RenameItem]: async (params: TreeItem | RenameFileParams) => {
       const { id, newFsPath } = params as RenameFileParams
-      await activeTree.value.draft.rename(id, newFsPath)
+
+      const descendants = findDescendantsFileItemsFromId(activeTree.value.root.value, id)
+      if (descendants.length > 0) {
+        const parent = findItemFromId(activeTree.value.root.value, id)!
+        const itemsToRename = descendants.map(item => ({ id: item.id, newFsPath: item.fsPath.replace(parent.fsPath, newFsPath) }))
+        await activeTree.value.draft.rename(itemsToRename)
+      }
+      else {
+        await activeTree.value.draft.rename([{ id, newFsPath }])
+      }
     },
     [StudioItemActionId.DeleteItem]: async (item: TreeItem) => {
       modal.openConfirmActionModal(item.id, StudioItemActionId.DeleteItem, async () => {

src/app/src/composables/useDraftDocuments.ts

@@ -171,20 +171,24 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     host.app.requestRerender()
   }
 
-  async function rename(id: string, newFsPath: string) {
-    const currentDbItem: DatabaseItem = await host.document.get(id)
-    if (!currentDbItem) {
-      throw new Error(`Database item not found for document ${id}`)
-    }
+  async function rename(items: { id: string, newFsPath: string }[]) {
+    for (const item of items) {
+      const { id, newFsPath } = item
 
-    const content = await generateContentFromDocument(currentDbItem)
+      const currentDbItem: DatabaseItem = await host.document.get(id)
+      if (!currentDbItem) {
+        throw new Error(`Database item not found for document ${id}`)
+      }
+
+      const content = await generateContentFromDocument(currentDbItem)
 
-    // Delete renamed draft item
-    await remove([id])
+      // Delete renamed draft item
+      await remove([id])
 
-    // Create new draft item
-    const newDbItem = await host.document.create(newFsPath, content!)
-    return await create(newDbItem, currentDbItem)
+      // Create new draft item
+      const newDbItem = await host.document.create(newFsPath, content!)
+      await create(newDbItem, currentDbItem)
+    }
   }
 
   async function duplicate(id: string): Promise<DraftItem<DatabaseItem>> {

src/app/src/composables/useDraftMedias.ts

@@ -153,7 +153,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
   //   host.app.requestRerender()
   // }
 
-  async function rename(_id: string, _newFsPath: string) {
+  async function rename(_items: { id: string, newFsPath: string }[]) {
     // let currentDbItem: MediaItem = await host.document.get(id)
     // if (!currentDbItem) {
     //   throw new Error(`Database item not found for document ${id}`)

src/app/src/utils/context.ts

@@ -72,7 +72,6 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
       forbiddenActions.push(StudioItemActionId.DuplicateItem, StudioItemActionId.RenameItem, StudioItemActionId.DeleteItem)
       break
     case TreeStatus.Renamed:
-      forbiddenActions.push(StudioItemActionId.RenameItem)
       break
     default:
       forbiddenActions.push(StudioItemActionId.RevertItem)

src/app/src/utils/tree.ts

@@ -317,15 +317,20 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
       const childrenWithStatus = item.children.filter(child => child.status && child.status !== TreeStatus.Opened)
 
       if (childrenWithStatus.length > 0) {
-        // Check if ALL children with status are deleted
-        const allDeleted = childrenWithStatus.every(child => child.status === TreeStatus.Deleted)
-
-        if (allDeleted && childrenWithStatus.length === item.children.length) {
-          // If all children are deleted, mark directory as deleted
-          item.status = TreeStatus.Deleted
+        const allChildrenHaveStatus = childrenWithStatus.length === item.children.length
+
+        if (allChildrenHaveStatus) {
+          if (childrenWithStatus.every(child => child.status === TreeStatus.Deleted)) {
+            item.status = TreeStatus.Created
+          }
+          else if (childrenWithStatus.every(child => child.status === TreeStatus.Renamed)) {
+            item.status = TreeStatus.Renamed
+          }
+          else if (childrenWithStatus.every(child => child.status === TreeStatus.Created)) {
+            item.status = TreeStatus.Created
+          }
         }
         else {
-          // Otherwise, mark as updated
           item.status = TreeStatus.Updated
         }
       }

src/module/src/runtime/utils/content.ts

@@ -111,8 +111,6 @@ async function generateDocumentFromMarkdownContent(id: string, content: string):
     },
   })
 
-  console.log('document =>', document)
-
   // Remove nofollow from links
   visit(document.body, (node: Node) => (node as MDCElement).type === 'element' && (node as MDCElement).tag === 'a', (node: Node) => {
     if ((node as MDCElement).props?.rel?.join(' ') === 'nofollow') {