add select and deselect all on time and detailed reporting view

This commit is contained in:
Gregor Vostrak
2024-10-09 01:47:55 +02:00
parent 09586de2d5
commit a374a52474
7 changed files with 49 additions and 12 deletions

View File

@@ -5,15 +5,19 @@ import TimeEntryMassUpdateModal from '@/Components/Common/TimeEntry/TimeEntryMas
import type { TimeEntry } from '@/packages/api/src';
import { ref } from 'vue';
import { twMerge } from 'tailwind-merge';
import { Checkbox, InputLabel } from '@/packages/ui/src';
const props = defineProps<{
selectedTimeEntries: TimeEntry[];
deleteSelected: () => void;
class?: string;
allSelected: boolean;
}>();
const emit = defineEmits<{
submit: [];
selectAll: [];
unselectAll: [];
}>();
const showMassUpdateModal = ref(false);
@@ -25,14 +29,31 @@ const showMassUpdateModal = ref(false);
@submit="emit('submit')"
v-model:show="showMassUpdateModal"></TimeEntryMassUpdateModal>
<MainContainer
v-if="selectedTimeEntries.length > 0"
:class="
twMerge(
props.class,
'text-sm py-1.5 font-medium border-b border-t border-border-primary flex items-center space-x-3'
'text-sm py-1.5 font-medium border-b border-t border-border-secondary flex items-center space-x-3'
)
">
<div>{{ selectedTimeEntries.length }} selected</div>
<Checkbox
:checked="allSelected"
id="selectAll"
@update:checked="
allSelected ? emit('unselectAll') : emit('selectAll')
">
</Checkbox>
<InputLabel
for="selectAll"
class="select-none text-text-secondary"
v-if="selectedTimeEntries.length > 0">
{{ selectedTimeEntries.length }} selected
</InputLabel>
<InputLabel
for="selectAll"
class="text-text-secondary select-none"
v-else
>Select All</InputLabel
>
<button
class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
@click="showMassUpdateModal = true"