feat: multi select

Signed-off-by: Sebastian <krupinski01@gmail.com>
This commit is contained in:
2026-03-29 17:02:00 -04:00
parent 07c205a427
commit 69f3c430cc
4 changed files with 508 additions and 80 deletions

View File

@@ -1,4 +1,4 @@
import { ref, computed, shallowRef } from 'vue'
import { ref, computed, shallowRef, watch } from 'vue'
import { defineStore } from 'pinia'
import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
import { useEntitiesStore } from '@MailManager/stores/entitiesStore'
@@ -6,7 +6,6 @@ import { useServicesStore } from '@MailManager/stores/servicesStore'
import { useMailSync } from '@MailManager/composables/useMailSync'
import { useSnackbar } from '@KTXC'
import type { CollectionIdentifier, EntityIdentifier } from '@MailManager/types/common'
import type { MessageInterface } from '@MailManager/types/message'
import type { ServiceObject, CollectionObject, EntityObject } from '@MailManager/models'
export const useMailStore = defineStore('mailStore', () => {
@@ -42,6 +41,8 @@ export const useMailStore = defineStore('mailStore', () => {
// ── Selection State ───────────────────────────────────────────────────────
const selectedFolder = shallowRef<CollectionObject | null>(null)
const selectedMessage = shallowRef<EntityObject | null>(null)
const selectedMessageIds = ref<EntityIdentifier[]>([])
const selectionModeActive = ref(false)
// ── Compose State ─────────────────────────────────────────────────────────
const composeMode = ref(false)
@@ -49,7 +50,7 @@ export const useMailStore = defineStore('mailStore', () => {
// ── Move State ────────────────────────────────────────────────────────────
const moveDialogVisible = ref(false)
const moveMessageCandidate = shallowRef<EntityObject | null>(null)
const moveMessageCandidates = shallowRef<EntityObject[]>([])
// ── Computed ──────────────────────────────────────────────────────────────
const currentMessages = computed(() => {
@@ -64,6 +65,31 @@ export const useMailStore = defineStore('mailStore', () => {
)
})
const selectedMessageIdSet = computed(() => new Set(selectedMessageIds.value))
const selectedMessageMap = computed(() => {
const messageMap = new Map<EntityIdentifier, EntityObject>()
currentMessages.value.forEach(message => {
const identifier = _entityIdentifier(message)
if (selectedMessageIdSet.value.has(identifier)) {
messageMap.set(identifier, message)
}
})
return messageMap
})
const selectedMessages = computed(() => Array.from(selectedMessageMap.value.values()))
const selectionCount = computed(() => selectedMessageIds.value.length)
const hasSelection = computed(() => selectionCount.value > 0)
const allCurrentMessagesSelected = computed(() => {
return currentMessages.value.length > 0 && currentMessages.value.every(message => isMessageSelected(message))
})
// ── Initialization ────────────────────────────────────────────────────────
async function initialize() {
@@ -216,34 +242,90 @@ export const useMailStore = defineStore('mailStore', () => {
return `${collection.provider}:${String(collection.service)}:${String(collection.identifier)}` as CollectionIdentifier
}
function _isSameMessage(left: EntityObject | null, right: EntityObject): boolean {
if (!left) {
return false
function _serviceFor(provider: string, serviceIdentifier: string | number) {
return servicesStore.services.find(service =>
service.provider === provider &&
String(service.identifier) === String(serviceIdentifier),
) ?? null
}
function _reloadFolderMessages(folder: CollectionObject) {
return entitiesStore.list({
[folder.provider]: {
[String(folder.service)]: {
[String(folder.identifier)]: true,
},
},
})
}
function _setSelectedMessageIds(nextIds: EntityIdentifier[]) {
selectedMessageIds.value = Array.from(new Set(nextIds))
}
function _removeSelection(sourceIdentifiers: EntityIdentifier[]) {
if (sourceIdentifiers.length === 0 || selectedMessageIds.value.length === 0) {
return
}
return (
left.provider === right.provider &&
String(left.service) === String(right.service) &&
String(left.collection) === String(right.collection) &&
String(left.identifier) === String(right.identifier)
)
const removedIds = new Set(sourceIdentifiers)
selectedMessageIds.value = selectedMessageIds.value.filter(identifier => !removedIds.has(identifier))
}
function _reconcileSelection() {
if (!selectedFolder.value) {
clearSelection()
selectedMessage.value = null
return
}
const currentMessageIdentifiers = new Set(currentMessages.value.map(message => _entityIdentifier(message)))
const nextSelectedIds = selectedMessageIds.value.filter(identifier => currentMessageIdentifiers.has(identifier))
if (nextSelectedIds.length !== selectedMessageIds.value.length) {
selectedMessageIds.value = nextSelectedIds
}
if (selectedMessage.value && !currentMessageIdentifiers.has(_entityIdentifier(selectedMessage.value))) {
selectedMessage.value = null
}
}
function _formatMoveNotification(successCount: number, failureCount: number, targetFolder: CollectionObject) {
const folderLabel = targetFolder.properties.label || String(targetFolder.identifier)
if (failureCount === 0) {
return {
message: successCount === 1
? `Message moved to "${folderLabel}"`
: `${successCount} messages moved to "${folderLabel}"`,
color: 'success' as const,
}
}
return {
message: successCount === 0
? `Move failed for ${failureCount === 1 ? '1 message' : `${failureCount} messages`}`
: `Moved ${successCount} ${successCount === 1 ? 'message' : 'messages'} to "${folderLabel}". ${failureCount} failed.`,
color: successCount === 0 ? 'error' as const : 'warning' as const,
}
}
watch(currentMessages, () => {
_reconcileSelection()
})
// ── Actions ───────────────────────────────────────────────────────────────
async function selectFolder(folder: CollectionObject) {
selectedFolder.value = folder
selectedMessage.value = null
clearSelection()
selectionModeActive.value = false
composeMode.value = false
try {
await entitiesStore.list({
[folder.provider]: {
[folder.service]: {
[folder.identifier]: true,
},
},
})
await _reloadFolderMessages(folder)
} catch (error) {
console.error('[Mail] Failed to load messages:', error)
}
@@ -266,14 +348,79 @@ export const useMailStore = defineStore('mailStore', () => {
selectedMessage.value = null
}
function openMoveDialog(message: EntityObject) {
moveMessageCandidate.value = message
function isMessageSelected(message: EntityObject) {
return selectedMessageIdSet.value.has(_entityIdentifier(message))
}
function toggleMessageSelection(message: EntityObject) {
const identifier = _entityIdentifier(message)
selectionModeActive.value = true
if (selectedMessageIdSet.value.has(identifier)) {
selectedMessageIds.value = selectedMessageIds.value.filter(selectedId => selectedId !== identifier)
if (selectedMessageIds.value.length === 0) {
selectionModeActive.value = false
}
return
}
_setSelectedMessageIds([...selectedMessageIds.value, identifier])
}
function selectAllCurrentMessages() {
selectionModeActive.value = true
_setSelectedMessageIds(currentMessages.value.map(message => _entityIdentifier(message)))
}
function activateSelectionMode(message?: EntityObject) {
selectionModeActive.value = true
if (message) {
const identifier = _entityIdentifier(message)
if (!selectedMessageIdSet.value.has(identifier)) {
_setSelectedMessageIds([...selectedMessageIds.value, identifier])
}
}
}
function deactivateSelectionMode() {
selectionModeActive.value = false
clearSelection()
}
function clearSelection() {
selectedMessageIds.value = []
}
function openMoveDialog(messages: EntityObject | EntityObject[]) {
const nextCandidates = Array.isArray(messages) ? messages : [messages]
moveMessageCandidates.value = Array.from(
new Map(nextCandidates.map(candidate => [_entityIdentifier(candidate), candidate])).values(),
)
if (moveMessageCandidates.value.length === 0) {
return
}
moveDialogVisible.value = true
}
function openMoveDialogForSelection() {
if (selectedMessages.value.length === 0) {
return
}
openMoveDialog(selectedMessages.value)
}
function closeMoveDialog() {
moveDialogVisible.value = false
moveMessageCandidate.value = null
moveMessageCandidates.value = []
}
function closeCompose() {
@@ -296,19 +443,20 @@ export const useMailStore = defineStore('mailStore', () => {
console.log('[Mail] Delete message:', message.identifier)
}
async function moveMessage(targetFolder: CollectionObject) {
const message = moveMessageCandidate.value
async function moveMessages(targetFolder: CollectionObject) {
const candidates = moveMessageCandidates.value
if (!message) {
if (candidates.length === 0) {
return
}
const isSameCollection =
const movableCandidates = candidates.filter(message => !(
targetFolder.provider === message.provider &&
String(targetFolder.service) === String(message.service) &&
String(targetFolder.identifier) === String(message.collection)
))
if (isSameCollection) {
if (movableCandidates.length === 0) {
closeMoveDialog()
return
}
@@ -316,32 +464,59 @@ export const useMailStore = defineStore('mailStore', () => {
loading.value = true
try {
const sourceIdentifier = _entityIdentifier(message)
const response = await entitiesStore.move(_collectionIdentifier(targetFolder), [sourceIdentifier])
const result = response[sourceIdentifier]
const sourceIdentifiers = movableCandidates.map(message => _entityIdentifier(message))
const response = await entitiesStore.move(_collectionIdentifier(targetFolder), sourceIdentifiers)
const successfulMoves: EntityIdentifier[] = []
const failedMoves: string[] = []
if (!result || !result.success) {
throw new Error(result && 'error' in result ? result.error : 'Failed to move message')
Object.entries(response).forEach(([sourceIdentifier, result]) => {
if (result.success) {
successfulMoves.push(sourceIdentifier as EntityIdentifier)
return
}
failedMoves.push(result.error)
})
if (successfulMoves.length === 0) {
throw new Error(failedMoves[0] ?? 'Failed to move messages')
}
if (_isSameMessage(selectedMessage.value, message)) {
_removeSelection(successfulMoves)
if (selectedMessage.value && successfulMoves.includes(_entityIdentifier(selectedMessage.value))) {
selectedMessage.value = null
}
const service = servicesStore.services.find(entry =>
entry.provider === message.provider &&
String(entry.identifier) === String(message.service),
)
if (service) {
void loadFoldersForService(service)
if (selectedMessageIds.value.length === 0) {
selectionModeActive.value = false
}
notify(`Message moved to "${targetFolder.properties.label || targetFolder.identifier}"`, 'success')
closeMoveDialog()
const servicesToRefresh = new Map<string, ServiceObject>()
movableCandidates.forEach(message => {
const service = _serviceFor(message.provider, message.service)
if (service && service.identifier !== null) {
servicesToRefresh.set(`${service.provider}:${String(service.identifier)}`, service)
}
})
const targetService = _serviceFor(targetFolder.provider, targetFolder.service)
if (targetService && targetService.identifier !== null) {
servicesToRefresh.set(`${targetService.provider}:${String(targetService.identifier)}`, targetService)
}
await Promise.allSettled([
...Array.from(servicesToRefresh.values()).map(service => loadFoldersForService(service)),
...(selectedFolder.value ? [_reloadFolderMessages(selectedFolder.value)] : []),
])
const notification = _formatMoveNotification(successfulMoves.length, failedMoves.length, targetFolder)
notify(notification.message, notification.color)
} catch (error) {
const messageText = error instanceof Error ? error.message : 'Failed to move message'
console.error('[Mail] Failed to move message:', error)
const messageText = error instanceof Error ? error.message : 'Failed to move messages'
console.error('[Mail] Failed to move messages:', error)
notify(messageText, 'error')
throw error
} finally {
@@ -376,27 +551,41 @@ export const useMailStore = defineStore('mailStore', () => {
loading,
selectedFolder,
selectedMessage,
selectedMessageIds,
selectionModeActive,
composeMode,
composeReplyTo,
moveDialogVisible,
moveMessageCandidate,
moveMessageCandidates,
serviceFolderLoadingState,
serviceFolderLoadedState,
serviceFolderErrorState,
// Computed
currentMessages,
selectedMessageMap,
selectedMessages,
selectionCount,
hasSelection,
allCurrentMessagesSelected,
// Actions
selectFolder,
selectMessage,
isMessageSelected,
activateSelectionMode,
deactivateSelectionMode,
toggleMessageSelection,
selectAllCurrentMessages,
clearSelection,
openCompose,
openMoveDialog,
openMoveDialogForSelection,
closeMoveDialog,
closeCompose,
afterSent,
deleteMessage,
moveMessage,
moveMessages,
toggleSidebar,
openSettings,
notify,