feat(context): duplicate and rename (#23)

Author: larbish

src/app/src/components/content/ContentEditor.vue

@@ -2,7 +2,7 @@
 import { computed, type PropType, toRaw } from 'vue'
 import { decompressTree } from '@nuxt/content/runtime'
 import type { MarkdownRoot } from '@nuxt/content'
-import type { DatabasePageItem, DraftItem } from '../../types'
+import { DraftStatus, type DatabasePageItem, type DraftItem } from '../../types'
 import { useStudio } from '../../composables/useStudio'
 
 const props = defineProps({
@@ -25,10 +25,13 @@ const document = computed<DatabasePageItem>({
       return {} as DatabasePageItem
     }
 
+    if (props.draftItem.status === DraftStatus.Deleted) {
+      return props.draftItem.original as DatabasePageItem
+    }
+
     const dbItem = props.draftItem.modified as DatabasePageItem
 
     let result: DatabasePageItem
-    // TODO: check mdcRoot and markdownRoot types with Ahad
     if (dbItem.body?.type === 'minimark') {
       result = {
         ...props.draftItem.modified as DatabasePageItem,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computeActionItems, computeActionParams } from '../../../utils/context'
+import { computeActionItems } from '../../../utils/context'
 import { computed, type PropType } from 'vue'
 import type { TreeItem } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
@@ -17,7 +17,7 @@ const props = defineProps({
 const actions = computed<DropdownMenuItem[]>(() => {
   return computeActionItems(context.itemActions.value, props.item).map(action => ({
     ...action,
-    onSelect: () => action.handler?.(computeActionParams(action.id, { item: props.item })),
+    onSelect: () => action.handler!(props.item),
   }))
 })
 </script>

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

@@ -5,7 +5,7 @@ import { useStudio } from '../../../composables/useStudio'
 
 const { context } = useStudio()
 
-const item = computed(() => context.featureTree.value.currentItem.value)
+const item = computed(() => context.activeTree.value.currentItem.value)
 const actions = computed(() => {
   return computeActionItems(context.itemActions.value, item.value)
 })
@@ -24,7 +24,7 @@ const actions = computed(() => {
         size="sm"
         color="neutral"
         variant="ghost"
-        @click="action.handler!(item.id)"
+        @click="action.handler!(item)"
       />
     </UTooltip>
   </div>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { COLOR_UI_STATUS_MAP } from '../../../utils/draft'
-import type { DraftStatus } from '../../../types/draft'
+import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
+import type { TreeStatus } from '../../../types'
 import type { PropType } from 'vue'
 
 defineProps({
   status: {
-    type: String as PropType<DraftStatus>,
+    type: String as PropType<TreeStatus>,
     required: true,
   },
 })

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

@@ -2,22 +2,21 @@
 import type { BreadcrumbItem } from '@nuxt/ui/components/Breadcrumb.vue.d.ts'
 import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue.d.ts'
 import { computed, unref } from 'vue'
-import type { TreeItem } from '../../../types'
+import { type TreeItem, TreeStatus } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
 import { findParentFromId, ROOT_ITEM } from '../../../utils/tree'
-import { DraftStatus } from '../../../types/draft'
 
 const { context } = useStudio()
 
-const currentItem = computed(() => context.featureTree.value.currentItem.value)
-const tree = computed(() => context.featureTree.value.root.value)
+const currentItem = computed(() => context.activeTree.value.currentItem.value)
+const tree = computed(() => context.activeTree.value.root.value)
 
 const items = computed<BreadcrumbItem[]>(() => {
   const rootItem = {
     icon: 'i-lucide-folder-git',
     onClick: () => {
       // TODO: update for ROOT_DOCUMENT_ITEM and ROOT_MEDIA_ITEM
-      context.featureTree.value.select(ROOT_ITEM)
+      context.activeTree.value.select(ROOT_ITEM)
     },
   }
 
@@ -33,7 +32,7 @@ const items = computed<BreadcrumbItem[]>(() => {
     breadcrumbItems.unshift({
       label: currentTreeItem.name,
       onClick: async () => {
-        await context.featureTree.value.select(itemToSelect)
+        await context.activeTree.value.select(itemToSelect)
       },
     })
 
@@ -87,7 +86,7 @@ const items = computed<BreadcrumbItem[]>(() => {
       </template>
     </UBreadcrumb>
     <ItemBadge
-      v-if="currentItem.status && currentItem.status !== DraftStatus.Opened"
+      v-if="currentItem.status && currentItem.status !== TreeStatus.Opened"
       :status="currentItem.status"
     />
   </div>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { TreeItem } from '../../../types'
+import { TreeStatus, type TreeItem } from '../../../types'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { Image } from '@unpic/vue'
 import { titleCase } from 'scule'
-import { COLOR_UI_STATUS_MAP } from '../../../utils/draft'
+import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
 import { DraftStatus } from '../../../types/draft'
 
 const props = defineProps({

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

@@ -3,7 +3,7 @@ import { computed, reactive, type PropType } from 'vue'
 import { Image } from '@unpic/vue'
 import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
-import { type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
+import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
 import { joinURL, withLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
 import { useStudio } from '../../../composables/useStudio'
@@ -14,15 +14,22 @@ const { context } = useStudio()
 
 const props = defineProps({
   actionId: {
-    type: String as PropType<StudioItemActionId>,
+    type: String as PropType<StudioItemActionId.CreateDocument | StudioItemActionId.CreateFolder | StudioItemActionId.RenameItem>,
     required: true,
   },
   parentItem: {
     type: Object as PropType<TreeItem>,
     required: true,
   },
+  renamedItem: {
+    type: Object as PropType<TreeItem>,
+    default: null,
+  },
 })
 
+const originalName = computed(() => props.renamedItem?.name || '')
+const originalExtension = computed(() => props.renamedItem?.id.split('.').pop() as ContentFileExtension || ContentFileExtension.Markdown)
+
 const schema = z.object({
   name: z.string()
     .min(1, 'Name cannot be empty')
@@ -33,8 +40,8 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 const state = reactive<Schema>({
-  name: '',
-  extension: ContentFileExtension.Markdown,
+  name: originalName.value,
+  extension: originalExtension.value,
 })
 
 const action = computed<StudioAction>(() => {
@@ -69,11 +76,29 @@ const tooltipText = computed(() => {
 function onSubmit(_event: FormSubmitEvent<Schema>) {
   const fsPath = joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)
 
-  action.value.handler!({
-    routePath: routePath.value,
-    fsPath,
-    content: `New ${state.name} file`,
-  })
+  let params: CreateFileParams | CreateFolderParams | RenameFileParams
+  switch (props.actionId) {
+    case StudioItemActionId.CreateDocument:
+      params = {
+        routePath: routePath.value,
+        fsPath,
+        content: `New ${state.name} file`,
+      }
+      break
+    case StudioItemActionId.CreateFolder:
+      params = {
+        fsPath,
+      }
+      break
+    case StudioItemActionId.RenameItem:
+      params = {
+        id: props.renamedItem.id,
+        newFsPath: joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`),
+      }
+      break
+  }
+
+  action.value.handler!(params)
 }
 </script>
 

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

@@ -2,10 +2,11 @@
 import type { TreeItem } from '../../../types'
 import type { PropType } from 'vue'
 import { useStudio } from '../../../composables/useStudio'
+import { computed } from 'vue'
 
 const { context } = useStudio()
 
-defineProps({
+const props = defineProps({
   type: {
     type: String as PropType<'directory' | 'file'>,
     required: true,
@@ -14,11 +15,17 @@ defineProps({
     type: Array as PropType<TreeItem[]>,
     default: () => [],
   },
-  showCreationForm: {
+  showForm: {
     type: Boolean,
     default: false,
   },
 })
+
+const filteredTree = computed(() => {
+  if (!context.actionInProgress.value?.item) return props.tree
+
+  return props.tree.filter(item => item.id !== context.actionInProgress.value!.item?.id)
+})
 </script>
 
 <template>
@@ -27,19 +34,20 @@ defineProps({
       ref="container"
       class="grid grid-cols-1 @sm:grid-cols-2 @xl:grid-cols-3 @4xl:grid-cols-4 @7xl:grid-cols-6 gap-2"
     >
-      <li v-if="showCreationForm">
+      <li v-if="showForm">
         <ItemCardForm
-          :parent-item="context.featureTree.value.currentItem.value"
-          :action-id="context.actionInProgress.value!"
+          :parent-item="context.activeTree.value.currentItem.value"
+          :action-id="context.actionInProgress.value!.id as never"
+          :renamed-item="context.actionInProgress.value!.item"
         />
       </li>
       <li
-        v-for="(item, index) in tree"
+        v-for="(item, index) in filteredTree"
         :key="`${item.id}-${index}`"
       >
         <ItemCard
           :item="item"
-          @click="context.featureTree.value.select(item)"
+          @click="context.activeTree.value.select(item)"
         />
       </li>
     </ul>