22373a0b87
- Replace all AppDrawer with MalioDrawer across 10 drawer components - Replace native <button> with MalioButton/MalioButtonIcon in all pages and components - Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters - Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts - Align toggle button heights with MalioButton (h-[40px]) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
133 lines
4.7 KiB
Vue
133 lines
4.7 KiB
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 -->
|
|
<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 { 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>
|