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 -->
            <MalioSelect
                :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)"
            />
            <!-- 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 -->
            <button
                class="flex h-9 w-9 shrink-0 items-center justify-center self-end rounded-md text-neutral-500 transition-colors hover:bg-red-50 hover:text-red-500"
                title="Supprimer"
                @click="emit('bulk-delete')"
            >
                <Icon name="mdi:delete-outline" size="22" />
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
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'

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

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

const statusOptions = computed(() =>
    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>