feat: revert and upload in context

Author: farnabaz

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

@@ -17,8 +17,11 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
 
 async function onFileDrop(event: DragEvent) {
   if (event.dataTransfer?.files) {
-    for (const file of event.dataTransfer.files) {
-      await draftMedias.upload(tree.value.currentItem.value.fsPath, file)
+    if (context.feature.value === StudioFeature.Media) {
+      await context.itemActionHandler[StudioItemActionId.UploadMedia]({
+        directory: tree.value.currentItem.value.fsPath,
+        files: Array.from(event.dataTransfer.files),
+      })
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computeActionItems } from '../../../utils/context'
+import { computeActionItems, computeActionParams } 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,
+    onSelect: () => action.handler?.(computeActionParams(action.id, { item: props.item })),
   }))
 })
 </script>

src/app/src/composables/useContext.ts

@@ -1,7 +1,7 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { useUi } from './useUi'
-import { type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams } from '../types'
+import { type UploadMediaParams, type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams, StudioFeature } from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
@@ -59,8 +59,20 @@ export const useContext = createSharedComposable((
       const draftItem = await draftDocuments.create(document)
       tree.selectItemById(draftItem.id)
     },
+    [StudioItemActionId.UploadMedia]: async ({ directory, files }: UploadMediaParams) => {
+      for (const file of files) {
+        await draftMedias.upload(directory, file)
+      }
+    },
     [StudioItemActionId.RevertItem]: async (id: string) => {
-      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, () => draftDocuments.revert(id))
+      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, async () => {
+        if (currentFeature.value === StudioFeature.Content) {
+          await draftDocuments.revert(id)
+        }
+        else {
+          await draftMedias.revert(id)
+        }
+      })
     },
     [StudioItemActionId.RenameItem]: async ({ path, file }: { path: string, file: TreeItem }) => {
       alert(`rename file ${path} ${file.name}`)

src/app/src/types/context.ts

@@ -8,6 +8,7 @@ export enum StudioFeature {
 export enum StudioItemActionId {
   CreateFolder = 'create-folder',
   CreateDocument = 'create-document',
+  UploadMedia = 'upload-media',
   RevertItem = 'revert-item',
   RenameItem = 'rename-item',
   DeleteItem = 'delete-item',
@@ -19,7 +20,7 @@ export interface StudioAction {
   label: string
   icon: string
   tooltip: string
-  handler?: (args: string & CreateFileParams & RenameFileParams) => void
+  handler?: (args: ActionHandlerParams[StudioItemActionId]) => void
 }
 
 export interface CreateFileParams {
@@ -33,9 +34,15 @@ export interface RenameFileParams {
   file: TreeItem
 }
 
+export interface UploadMediaParams {
+  directory: string
+  files: File[]
+}
+
 export type ActionHandlerParams = {
   [StudioItemActionId.CreateFolder]: string
   [StudioItemActionId.CreateDocument]: CreateFileParams
+  [StudioItemActionId.UploadMedia]: UploadMediaParams
   [StudioItemActionId.RevertItem]: string
   [StudioItemActionId.RenameItem]: RenameFileParams
   [StudioItemActionId.DeleteItem]: string

src/app/src/utils/context.ts

@@ -1,5 +1,6 @@
 import { type StudioAction, StudioFeature, type TreeItem } from '../types'
 import { DraftStatus } from '../types/draft'
+import type { ActionHandlerParams } from '../types/context'
 import { StudioItemActionId } from '../types/context'
 
 export const FEATURE_DISPLAY_MAP = {
@@ -88,3 +89,12 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 
   return itemActions.filter(action => !forbiddenActions.includes(action.id))
 }
+
+export function computeActionParams(action: StudioItemActionId, { item }: { item: TreeItem }): ActionHandlerParams[typeof action] {
+  switch (action) {
+    case StudioItemActionId.RevertItem:
+      return item.id
+    default:
+      return {}
+  }
+}