perf(quick-actions): eliminate dublicate api calld for each envelope

Signed-off-by: Hamza <hamzamahjoubi221@gmail.com>

Author: hamza221

appinfo/routes.php

@@ -510,11 +510,6 @@
 			'url' => '/api/textBlocks/{id}/shares',
 			'verb' => 'GET',
 		],
-		[
-			'name' => 'actionStep#findAllStepsForAction',
-			'url' => '/api/action-step/{actionId}/steps',
-			'verb' => 'GET'
-		],
 	],
 	'resources' => [
 		'accounts' => ['url' => '/api/accounts'],

lib/Controller/ActionStepController.php

@@ -33,21 +33,6 @@ public function __construct(
 		$this->uid = $userId;
 	}
 
-	/**
-	 * @NoAdminRequired
-	 *
-	 * @return JsonResponse
-	 */
-	#[TrapError]
-	public function findAllStepsForAction(int $actionId): JsonResponse {
-		if ($this->uid === null) {
-			return JsonResponse::error('User not found', Http::STATUS_UNAUTHORIZED);
-		}
-		$actionSteps = $this->quickActionsService->findAllActionSteps($actionId, $this->uid);
-
-		return JsonResponse::success($actionSteps);
-	}
-
 	/**
 	 * @NoAdminRequired
 	 * @param string $name

lib/Db/Actions.php

@@ -22,10 +22,22 @@
 class Actions extends Entity implements JsonSerializable {
 	protected $name;
 	protected $accountId;
+	protected $actionSteps = [];
+	protected $icon = '';
 
 	public function __construct() {
 		$this->addType('name', 'string');
 		$this->addType('accountId', 'integer');
+		$this->addType('actionSteps', 'array');
+		$this->addType('icon', 'string');
+	}
+
+	public function setActionSteps(array $actionSteps): void {
+		$this->actionSteps = $actionSteps;
+	}
+
+	public function setIcon(string $icon): void {
+		$this->icon = $icon;
 	}
 
 	#[ReturnTypeWillChange]
@@ -34,6 +46,8 @@ public function jsonSerialize() {
 			'id' => $this->getId(),
 			'name' => $this->getName(),
 			'accountId' => $this->getAccountId(),
+			'actionSteps' => $this->actionSteps,
+			'icon' => $this->icon,
 
 		];
 	}

lib/Service/QuickActionsService.php

@@ -35,13 +35,18 @@ public function __construct(
 		private ActionStepMapper $actionStepMapper,
 	) {
 	}
-
 	/**
 	 * @param string $userId
 	 * @return Actions[]
 	 */
 	public function findAll(string $userId): array {
-		return $this->actionsMapper->findAll($userId);
+		$actions = $this->actionsMapper->findAll($userId);
+		foreach ($actions as $action) {
+			$actionSteps = $this->actionStepMapper->findAllStepsForOneAction($action->getId(), $userId);
+			$action->setActionSteps($actionSteps);
+			$action->setIcon($actionSteps[0]->getName());
+		}
+		return $actions;
 	}
 
 	/**
@@ -74,14 +79,6 @@ public function delete(int $actionId, string $userId): void {
 		$this->actionsMapper->delete($action);
 	}
 
-	/**
-	 * @param string $userId
-	 * @return ActionStep[]
-	 */
-	public function findAllActionSteps(int $actionId, string $userId): array {
-		return $this->actionStepMapper->findAllStepsForOneAction($actionId, $userId);
-	}
-
 	/**
 	 * @throws DoesNotExistException
 	 */

src/components/Envelope.vue

@@ -433,7 +433,6 @@ import NoTrashMailboxConfiguredError
 	from '../errors/NoTrashMailboxConfiguredError.js'
 import logger from '../logger.js'
 import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder.js'
-import { findAllStepsForAction } from '../service/QuickActionsService.js'
 import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
 import { mailboxHasRights } from '../util/acl.js'
@@ -534,7 +533,6 @@ export default {
 			customSnoozeDateTime: new Date(moment().add(2, 'hours').minute(0).second(0).valueOf()),
 			overwriteOneLineMobile: false,
 			hoveringAvatar: false,
-			filteredQuickActions: [],
 			quickActionLoading: false,
 		}
 	},
@@ -764,60 +762,50 @@ export default {
 				},
 			].filter(option => option.timestamp !== null)
 		},
-	},
-	 watch: {
-		storeActions() {
-			this.filterAndEnrichQuickActions()
-		},
-	},
-	async mounted() {
-		this.onWindowResize()
-		window.addEventListener('resize', this.onWindowResize)
-		if (this.filteredQuickActions.length === 0) {
-			await this.filterAndEnrichQuickActions()
-		}
-	},
-	methods: {
-		translateTagDisplayName,
-		setSelected(value) {
-			if (this.selected !== value) {
-				this.$emit('update:selected', value)
-			}
-		},
-		formatted() {
-			return shortRelativeDatetime(new Date(this.data.dateInt * 1000))
-		},
-		async filterAndEnrichQuickActions() {
-			this.filteredQuickActions = []
+		filteredQuickActions() {
+			const filteredQuickActions = []
 			const quickActions = this.mainStore.getQuickActions().filter(action => action.accountId === this.data.accountId)
 			for (const action of quickActions) {
-				const steps = await findAllStepsForAction(action.id)
-				const check = steps.every(step => {
-					if (['markAsSpam', 'applyTag', 'markAsImportant', 'markAsFavorite'].includes(step.type) && !this.hasWriteAcl) {
+				const check = action.actionSteps.every(step => {
+					if (['markAsSpam', 'applyTag', 'markAsImportant', 'markAsFavorite'].includes(step.name) && !this.hasWriteAcl) {
 						return false
 					}
-					if (['markAsRead', 'markAsUnread'].includes(step.type) && !this.hasSeenAcl) {
+					if (['markAsRead', 'markAsUnread'].includes(step.name) && !this.hasSeenAcl) {
 						return false
 					}
-					if (['moveThread', 'deleteThread'].includes(step.type) && !this.hasDeleteAcl) {
+					if (['moveThread', 'deleteThread'].includes(step.name) && !this.hasDeleteAcl) {
 						return false
 					}
 					return true
 				})
 				if (check) {
-					this.filteredQuickActions.push({
+					filteredQuickActions.push({
 						...action,
-						steps,
-						icon: steps[0]?.name,
 					})
 				}
 			}
+			return filteredQuickActions
+		},
+	},
+	mounted() {
+		this.onWindowResize()
+		window.addEventListener('resize', this.onWindowResize)
+	},
+	methods: {
+		translateTagDisplayName,
+		setSelected(value) {
+			if (this.selected !== value) {
+				this.$emit('update:selected', value)
+			}
+		},
+		formatted() {
+			return shortRelativeDatetime(new Date(this.data.dateInt * 1000))
 		},
 		async executeQuickAction(action) {
 			this.closeQuickActionsMenu()
 			this.quickActionLoading = true
 			try {
-				for (const step of action.steps) {
+				for (const step of action.actionSteps) {
 					switch (step.name) {
 					case 'markAsSpam':
 						this.layoutMessageViewThreaded ? await this.onToggleJunkThread() : this.onToggleJunk()

src/components/quickActions/Settings.vue

@@ -130,7 +130,7 @@ import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 
 import Action from './Action.vue'
 import logger from '../../logger.js'
-import { createActionStep, deleteActionStep, findAllStepsForAction, updateActionStep } from '../../service/QuickActionsService.js'
+import { createActionStep, deleteActionStep, updateActionStep } from '../../service/QuickActionsService.js'
 import useMainStore from '../../store/mainStore.js'
 
 export default {
@@ -217,8 +217,8 @@ export default {
 				this.localAction = { id: null, name: '' }
 				this.actions = []
 			} else {
-				this.localAction = { ...action }
-				this.actions = await findAllStepsForAction(action.id)
+				this.localAction = { id: action.id, name: action.name, accountId: action.accountId }
+				this.actions = action.actionSteps
 				this.highestOrder = Math.max(...this.actions.map(a => a.order), 0)
 				this.editMode = true
 			}
@@ -247,7 +247,7 @@ export default {
 				for (const [index, action] of this.actions.entries()) {
 					if (action?.id !== null && action?.id !== undefined) {
 						try {
-							await updateActionStep(action.id, action.name, action.order, action?.tagId, action?.mailboxId)
+							this.actions[index] = await updateActionStep(action.id, action.name, action.order, action?.tagId, action?.mailboxId)
 						} catch (error) {
 							logger.error('Could not update quick action step', {
 								error,
@@ -260,10 +260,12 @@ export default {
 							this.actions[index] = createdStep
 						}
 					}
+					this.localAction = quickAction
 				}
 				showSuccess(t('mail', 'Quick action updated'))
 			} else {
 				let quickAction
+				let createdSteps = []
 				try {
 					quickAction = await this.mainStore.createQuickAction(this.localAction.name, this.account.id)
 				} catch (error) {
@@ -275,17 +277,23 @@ export default {
 				}
 				try {
 					for (const action of this.actions) {
-						await createActionStep(action.name, action.order, quickAction.id, action?.tagId, action?.mailboxId)
+						const createdStep = await createActionStep(action.name, action.order, quickAction.id, action?.tagId, action?.mailboxId)
+						if (createdStep) {
+							createdSteps.push(createdStep)
+						}
 					}
+					this.actions = createdSteps
 				} catch (error) {
 					logger.error('Could not add step to quick action', {
 						error,
 					})
 					showError(t('mail', 'Failed to add steps to quick action'))
 					this.closeEditModal()
 				}
+				this.localAction = quickAction
 				showSuccess(t('mail', 'Quick action created'))
 			}
+			this.mainStore.patchActionStepsLocally(this.localAction.id, this.actions)
 			this.closeEditModal()
 		},
 		addQuickAction(name) {
@@ -321,9 +329,13 @@ export default {
 			this.actions = this.actions.map((action, index) => ({ ...action, order: index + 1 }))
 		},
 		async deleteAction(item) {
+			this.actions = this.actions.filter(action => action.order !== item.order).map((action, index) => ({ ...action, order: index + 1 }))
+			this.highestOrder = Math.max(...this.actions.map(a => a.order), 0)
 			if (item.id) {
 				try {
 					await deleteActionStep(item.id)
+					const actions = this.actions.filter(action => action.id)
+					this.mainStore.patchActionStepsLocally(this.localAction.id, actions)
 				} catch (error) {
 					logger.error('Could not delete action step', {
 						error,
@@ -332,8 +344,6 @@ export default {
 					return
 				}
 			}
-			this.actions = this.actions.filter(action => action.order !== item.order).map((action, index) => ({ ...action, order: index + 1 }))
-			this.highestOrder = Math.max(...this.actions.map(a => a.order), 0)
 		},
 	},
 }

src/service/QuickActionsService.js

@@ -44,15 +44,6 @@ export async function deleteQuickAction(id) {
 	})
 }
 
-export async function findAllStepsForAction(actionId) {
-	const url = generateUrl('/apps/mail/api/action-step/{id}/steps', { id: actionId })
-	return handleHttpAuthErrors(async () => {
-		const response = await axios.get(url)
-		return response.data.data
-	})
-
-}
-
 export async function createActionStep(name, order, actionId, tagId = null, mailboxId = null) {
 	const url = generateUrl('/apps/mail/api/action-step')
 	return handleHttpAuthErrors(async () => {

src/store/mainStore/actions.js

@@ -2378,6 +2378,14 @@ export default function mainStoreActions() {
 				Vue.set(this.quickActions, index, quickAction)
 			}
 		},
+		patchActionStepsLocally(id, steps) {
+			const index = this.quickActions.findIndex(s => s.id === id)
+			if (index !== -1) {
+				const updatedQuickAction = this.quickActions[index]
+				updatedQuickAction.actionSteps = steps
+				Vue.set(this.quickActions, index, updatedQuickAction)
+			}
+		}, 
 		deleteQuickActionLocally(id) {
 			const index = this.quickActions.findIndex(s => s.id === id)
 			if (index !== -1) {