Lesstime/frontend/components/task/TaskBulkActions.vue

<template>
    <div class="flex items-center gap-2 rounded-[10px] bg-white px-3 py-2 shadow-sm">
        <!-- Select all checkbox -->
        <div
            class="flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-2 transition-colors"
            :class="allSelected ? 'border-primary-500 bg-primary-500' : someSelected ? 'border-primary-500 bg-primary-500' : 'border-neutral-300 hover:border-primary-400'"
            @click="emit('toggle-all')"
        >
            <Icon v-if="allSelected" name="mdi:check" size="12" class="text-white" />
            <Icon v-else-if="someSelected" name="mdi:minus" size="12" class="text-white" />
        </div>
        <span class="text-xs font-medium text-neutral-500">
            {{ selectedCount }}/{{ totalCount }}
        </span>

        <div v-if="selectedCount > 0" class="ml-2 flex items-center gap-1">
            <!-- Bulk status (scoped to single project's workflow) -->
            <MalioSelect
                v-if="!isMultiProject"
                :model-value="null"
                :options="statusOptions"
                label="Status"
                empty-option-label="Status"
                min-width="!w-32"
                text-field="text-xs"
                text-value="text-xs"
                @update:model-value="(v: number | null) => v && emit('bulk-update', 'status', v)"
            />
            <span
                v-else
                class="rounded border border-neutral-200 px-2 py-1 text-xs text-neutral-400"
                title="Sélection multi-projets — le statut dépend du workflow de chaque projet"
            >
                Status —
            </span>
            <!-- Bulk user -->
            <MalioSelect
                :model-value="null"
                :options="userOptions"
                label="User"
                empty-option-label="User"
                min-width="!w-32"
                text-field="text-xs"
                text-value="text-xs"
                @update:model-value="(v: number | null) => v && emit('bulk-update', 'assignee', v)"
            />
            <!-- Bulk priority -->
            <MalioSelect
                :model-value="null"
                :options="priorityOptions"
                label="Priorité"
                empty-option-label="Priorité"
                min-width="!w-32"
                text-field="text-xs"
                text-value="text-xs"
                @update:model-value="(v: number | null) => v && emit('bulk-update', 'priority', v)"
            />
            <!-- Bulk effort -->
            <MalioSelect
                :model-value="null"
                :options="effortOptions"
                label="Effort"
                empty-option-label="Effort"
                min-width="!w-32"
                text-field="text-xs"
                text-value="text-xs"
                @update:model-value="(v: number | null) => v && emit('bulk-update', 'effort', v)"
            />
            <!-- Bulk group -->
            <MalioSelect
                v-if="groupOptions.length > 0"
                :model-value="null"
                :options="groupOptions"
                label="Groupe"
                empty-option-label="Groupe"
                min-width="!w-32"
                text-field="text-xs"
                text-value="text-xs"
                @update:model-value="(v: number | null) => v && emit('bulk-update', 'group', v)"
            />

            <!-- Delete -->
            <MalioButtonIcon
                icon="mdi:delete-outline"
                aria-label="Supprimer"
                variant="ghost"
                icon-size="22"
                button-class="self-end text-neutral-500 hover:bg-red-50 hover:text-red-500"
                @click="emit('bulk-delete')"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Task } from '~/services/dto/task'
import type { TaskStatus } from '~/services/dto/task-status'
import type { TaskEffort } from '~/services/dto/task-effort'
import type { TaskPriority } from '~/services/dto/task-priority'
import type { TaskGroup } from '~/services/dto/task-group'
import type { UserData } from '~/services/dto/user-data'
import type { Project } from '~/services/dto/project'

const props = withDefaults(defineProps<{
    selectedCount: number
    totalCount: number
    allSelected: boolean
    someSelected: boolean
    statuses: TaskStatus[]
    users: UserData[]
    priorities: TaskPriority[]
    efforts: TaskEffort[]
    groups: TaskGroup[]
    selectedTasks?: Task[]
    projects?: Project[]
}>(), {
    selectedTasks: () => [],
    projects: () => [],
})

const emit = defineEmits<{
    (e: 'toggle-all'): void
    (e: 'bulk-update', field: string, value: number): void
    (e: 'bulk-archive'): void
    (e: 'bulk-delete'): void
}>()

const distinctProjectIds = computed(() => {
    const ids = new Set<number>()
    for (const t of props.selectedTasks) {
        if (t.project) ids.add(t.project.id)
    }
    return ids
})

const isMultiProject = computed(() => distinctProjectIds.value.size > 1)

const statusOptions = computed<{ label: string, value: number }[]>(() => {
    // Si on connait les projets et qu'on est sur un seul, on scope au workflow de ce projet
    if (distinctProjectIds.value.size === 1 && props.projects.length > 0) {
        const projectId = [...distinctProjectIds.value][0]
        const project = props.projects.find(p => p.id === projectId)
        if (project?.workflow?.statuses) {
            return project.workflow.statuses.map(s => ({ label: s.label, value: s.id }))
        }
    }
    // Fallback : statuts globaux fournis en props (ex. depuis projects/[id])
    return props.statuses.map(s => ({ label: s.label, value: s.id }))
})

const userOptions = computed(() =>
    props.users.map(u => ({ label: u.username, value: u.id })),
)

const priorityOptions = computed(() =>
    props.priorities.map(p => ({ label: p.label, value: p.id })),
)

const effortOptions = computed(() =>
    props.efforts.map(e => ({ label: e.label, value: e.id })),
)

const groupOptions = computed(() =>
    props.groups.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })),
)
</script>