up

Author: larbish

src/app/src/components/panel/base/PanelBaseBodyTree.vue

@@ -7,7 +7,7 @@ const { documentTree, mediaTree, context } = useStudio()
 
 const treeApi = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
 
-defineProps({
+const props = defineProps({
   type: {
     type: String as PropType<'directory' | 'file'>,
     required: true,
@@ -16,11 +16,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>
@@ -29,14 +35,15 @@ 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-4"
     >
-      <li v-if="showCreationForm">
+      <li v-if="showForm">
         <ItemCardForm
           :parent-item="treeApi.currentItem.value"
-          :action-id="context.actionInProgress.value!"
+          :action-id="context.actionInProgress.value!.id"
+          :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

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

@@ -21,8 +21,15 @@ const props = defineProps({
     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>(() => {

src/app/src/composables/useContext.ts

@@ -1,7 +1,16 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { useUi } from './useUi'
-import { type UploadMediaParams, type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams, StudioFeature } from '../types'
+import {
+  type StudioActionInProgress,
+  type UploadMediaParams,
+  type CreateFileParams,
+  type StudioHost,
+  type StudioAction,
+  type ActionHandlerParams,
+  StudioItemActionId,
+  StudioFeature,
+} from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
@@ -18,7 +27,7 @@ export const useContext = createSharedComposable((
 ) => {
   const modal = useModal()
 
-  const actionInProgress = ref<StudioItemActionId | null>(null)
+  const actionInProgress = ref<StudioActionInProgress | null>(null)
   const currentFeature = computed<keyof typeof ui.panels | null>(() =>
     Object.keys(ui.panels).find(key => ui.panels[key as keyof typeof ui.panels]) as keyof typeof ui.panels,
   )
@@ -28,7 +37,7 @@ export const useContext = createSharedComposable((
     return STUDIO_ITEM_ACTION_DEFINITIONS.map(action => ({
       ...action,
       handler: async (args) => {
-        if (actionInProgress.value === action.id) {
+        if (actionInProgress.value?.id === action.id) {
           // Two steps actions need to be already in progress to be executed
           if (twoStepActions.includes(action.id)) {
             await itemActionHandler[action.id](args as never)
@@ -41,7 +50,7 @@ export const useContext = createSharedComposable((
           }
         }
 
-        actionInProgress.value = action.id
+        actionInProgress.value = { id: action.id, item: args.item }
 
         // One step actions can be executed immediately
         if (oneStepActions.includes(action.id)) {
@@ -71,8 +80,8 @@ export const useContext = createSharedComposable((
         await draft.value.revert(id)
       })
     },
-    [StudioItemActionId.RenameItem]: async ({ path, file }: { path: string, file: TreeItem }) => {
-      alert(`rename file ${path} ${file.name}`)
+    [StudioItemActionId.RenameItem]: async ({ id, newNameWithExtension }: { id: string, newNameWithExtension: string }) => {
+      alert(`rename file ${id} ${newNameWithExtension}`)
     },
     [StudioItemActionId.DeleteItem]: async (id: string) => {
       modal.openConfirmActionModal(id, StudioItemActionId.DeleteItem, async () => {

src/app/src/types/context.ts

@@ -15,6 +15,11 @@ export enum StudioItemActionId {
   DuplicateItem = 'duplicate-item',
 }
 
+export interface StudioActionInProgress {
+  id: StudioItemActionId
+  item?: TreeItem
+}
+
 export interface StudioAction {
   id: StudioItemActionId
   label: string
@@ -30,8 +35,8 @@ export interface CreateFileParams {
 }
 
 export interface RenameFileParams {
-  path: string
-  file: TreeItem
+  id: string
+  newNameWithExtension: string
 }
 
 export interface UploadMediaParams {

src/app/src/utils/context.ts

@@ -96,7 +96,12 @@ export function computeActionParams(action: StudioItemActionId, { item }: { item
     case StudioItemActionId.DeleteItem:
     case StudioItemActionId.DuplicateItem:
       return item.id
+    case StudioItemActionId.RenameItem:
+      return {
+        id: item.id,
+        item
+      }
     default:
-      return {}
+      return item.id
   }
 }