mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-11 17:52:15 +01:00
add client grouping and expandable project tasks to project task timetracker dropdown, fixes ST-253
This commit is contained in:
Gregor Vostrak
committed by
Constantin Graf
Constantin Graf
parent
91b56ae92f
commit
85315fc62f
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@heroicons/vue/16/solid';
|
||||
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
|
||||
import { type Component, computed, nextTick, ref, watch } from 'vue';
|
||||
import { computed, nextTick, ref, watch, watchEffect } from 'vue';
|
||||
import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
|
||||
import type {
|
||||
CreateClientBody,
|
||||
@@ -12,7 +12,7 @@ import type {
|
||||
} from '@/packages/api/src';
|
||||
import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
|
||||
import Badge from '@/packages/ui/src/Badge.vue';
|
||||
import { PlusIcon, PlusCircleIcon } from '@heroicons/vue/16/solid';
|
||||
import { PlusIcon, PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
|
||||
const task = defineModel<string | null>('task', {
|
||||
@@ -25,7 +25,7 @@ const project = defineModel<string | null>('project', {
|
||||
|
||||
const searchInput = ref<HTMLInputElement | null>(null);
|
||||
const open = ref(false);
|
||||
const dropdownViewport = ref<Component | null>(null);
|
||||
const dropdownViewport = ref<HTMLElement | null>(null);
|
||||
|
||||
const searchValue = ref('');
|
||||
|
||||
@@ -38,10 +38,11 @@ watch(open, (isOpen) => {
|
||||
}
|
||||
});
|
||||
|
||||
type ProjectWithTasks = {
|
||||
project: Project;
|
||||
tasks: Task[];
|
||||
};
|
||||
type ProjectWithTasks = Project & { expanded: boolean; tasks: Task[] };
|
||||
|
||||
type ClientWithProjectsWithTasks = Client & { projects: ProjectWithTasks[] };
|
||||
|
||||
type ClientsWithProjectsWithTasks = ClientWithProjectsWithTasks[];
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -62,42 +63,98 @@ const props = withDefaults(
|
||||
}
|
||||
);
|
||||
|
||||
const filteredResults = ref([] as ClientsWithProjectsWithTasks);
|
||||
|
||||
// computed filterProjects that flattens the first layer of filteredResults and combines all the projects
|
||||
const filteredProjects = computed(() => {
|
||||
return props.projects.reduce(
|
||||
(filtered: ProjectWithTasks[], filterProject) => {
|
||||
const projectNameIncludesSearchTerm = filterProject.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
return filteredResults.value.map((client) => client.projects).flat();
|
||||
});
|
||||
|
||||
// check if one of the project tasks
|
||||
const projectTasks = props.tasks.filter((task) => {
|
||||
return task.project_id === filterProject.id;
|
||||
function addProjectToFilterObject(
|
||||
tempFilteredClients: ClientsWithProjectsWithTasks,
|
||||
project: Project,
|
||||
filteredTasks: Task[],
|
||||
expanded = false
|
||||
) {
|
||||
// check if client already exists in filter array
|
||||
const projectClientIndex = tempFilteredClients.findIndex(
|
||||
(client) => client.id === project.client_id
|
||||
);
|
||||
|
||||
const client = props.clients.find(
|
||||
(client) => client.id === project.client_id
|
||||
);
|
||||
|
||||
if (projectClientIndex !== -1) {
|
||||
// client already exists in filter array
|
||||
tempFilteredClients[projectClientIndex].projects.push({
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
});
|
||||
} else if (client) {
|
||||
// project has client but is not already in filter array
|
||||
// client is not yet in filter array
|
||||
tempFilteredClients.push({
|
||||
...client,
|
||||
projects: [
|
||||
{
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
// project has no client
|
||||
const customNoClientId = 'no_client';
|
||||
const noClientIndex = tempFilteredClients.findIndex(
|
||||
(client) => client.id === customNoClientId
|
||||
);
|
||||
|
||||
if (noClientIndex !== -1) {
|
||||
// no client group already exists in filter array
|
||||
tempFilteredClients[noClientIndex].projects.push({
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
});
|
||||
|
||||
const filteredTasks = projectTasks.filter((filterTask) => {
|
||||
return (
|
||||
filterTask.name
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchValue.value?.toLowerCase()?.trim() || ''
|
||||
) &&
|
||||
(!filterTask.is_done || filterTask.id === task.value)
|
||||
);
|
||||
} else {
|
||||
// no client group is not yet in filter array
|
||||
tempFilteredClients.push({
|
||||
id: customNoClientId,
|
||||
name: 'No Client',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
value: '',
|
||||
is_archived: false,
|
||||
projects: [
|
||||
{
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
(projectNameIncludesSearchTerm || filteredTasks.length > 0) &&
|
||||
(!filterProject.is_archived ||
|
||||
project.value === filterProject.id)
|
||||
) {
|
||||
filtered.push({ project: filterProject, tasks: filteredTasks });
|
||||
}
|
||||
watchEffect(() => {
|
||||
const tempFilteredClients: ClientsWithProjectsWithTasks = [];
|
||||
|
||||
return filtered;
|
||||
},
|
||||
[
|
||||
{
|
||||
project: {
|
||||
if (searchValue.value.length === 0) {
|
||||
tempFilteredClients.push({
|
||||
id: 'no_project_no_client',
|
||||
name: 'No Client',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
value: '',
|
||||
is_archived: false,
|
||||
projects: [
|
||||
{
|
||||
id: '',
|
||||
name: 'No Project',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
@@ -106,11 +163,86 @@ const filteredProjects = computed(() => {
|
||||
billable_rate: null,
|
||||
is_archived: false,
|
||||
is_billable: false,
|
||||
expanded: false,
|
||||
tasks: [],
|
||||
},
|
||||
tasks: [],
|
||||
},
|
||||
]
|
||||
);
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
for (const filterProject of props.projects) {
|
||||
const projectNameIncludesSearchTerm = filterProject.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
|
||||
const clientNameIncludesSearchTerm = props.clients
|
||||
.find((client) => client.id === filterProject.client_id)
|
||||
?.name.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
|
||||
// check if one of the project tasks
|
||||
const projectTasks = props.tasks.filter((task) => {
|
||||
return task.project_id === filterProject.id;
|
||||
});
|
||||
|
||||
const filteredTasks = projectTasks.filter((filterTask) => {
|
||||
return (
|
||||
filterTask.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '') &&
|
||||
(!filterTask.is_done || filterTask.id === task.value)
|
||||
);
|
||||
});
|
||||
|
||||
if (
|
||||
(projectNameIncludesSearchTerm || clientNameIncludesSearchTerm) &&
|
||||
(!filterProject.is_archived || project.value === filterProject.id)
|
||||
) {
|
||||
// search term matches project name
|
||||
addProjectToFilterObject(
|
||||
tempFilteredClients,
|
||||
filterProject,
|
||||
filteredTasks,
|
||||
false
|
||||
);
|
||||
} else if (filteredTasks.length > 0 && !filterProject.is_archived) {
|
||||
// search term matches task name
|
||||
addProjectToFilterObject(
|
||||
tempFilteredClients,
|
||||
filterProject,
|
||||
filteredTasks,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// sort tempFilteredClients by client name
|
||||
tempFilteredClients.sort((a, b) => {
|
||||
// Make sure No Project entry is always on top
|
||||
if (a.id === 'no_project_no_client') {
|
||||
return -1;
|
||||
}
|
||||
if (b.id === 'no_project_no_client') {
|
||||
return 1;
|
||||
}
|
||||
// Make sure that No client group is above all regular clients
|
||||
if (a.id === 'no_client') {
|
||||
return -1;
|
||||
}
|
||||
if (b.id === 'no_client') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
filteredResults.value = tempFilteredClients;
|
||||
});
|
||||
|
||||
async function addClientIfNoneExists() {
|
||||
@@ -123,7 +255,7 @@ function isProjectSelected(project: Project) {
|
||||
|
||||
function initializeHighlightedItem() {
|
||||
if (filteredProjects.value.length > 0) {
|
||||
highlightedItemId.value = filteredProjects.value[0].project.id;
|
||||
highlightedItemId.value = filteredProjects.value[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,15 +265,15 @@ watch(filteredProjects, () => {
|
||||
|
||||
function setProjectAndClientBasedOnHighlightedItem() {
|
||||
const highlightedProject = filteredProjects.value.find(
|
||||
(project) => project.project.id === highlightedItemId.value
|
||||
(project) => project.id === highlightedItemId.value
|
||||
);
|
||||
if (highlightedProject) {
|
||||
selectProject(highlightedProject.project.id);
|
||||
}
|
||||
const highlightedTask = filteredProjects.value
|
||||
.map((project) => project.tasks)
|
||||
.flat()
|
||||
.find((task) => task.id === highlightedItemId.value);
|
||||
if (highlightedProject) {
|
||||
selectProject(highlightedProject.id);
|
||||
}
|
||||
if (highlightedTask) {
|
||||
selectTask(highlightedTask.id);
|
||||
}
|
||||
@@ -160,9 +292,9 @@ function updateSearchValue(event: Event) {
|
||||
const emit = defineEmits(['update:modelValue', 'changed']);
|
||||
|
||||
function moveHighlightUp() {
|
||||
mouseEnterHighlightActivated.value = false;
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.project.id === highlightedItemId.value
|
||||
(projectWithTasks) => projectWithTasks.id === highlightedItemId.value
|
||||
);
|
||||
// check if it is a project id
|
||||
if (currentHighlightedIndex === -1) {
|
||||
@@ -182,7 +314,7 @@ function moveHighlightUp() {
|
||||
}
|
||||
if (taskIndex === 0) {
|
||||
// highlight the project if it was the first task before
|
||||
highlightedItemId.value = currentProjectWithTasks.project.id;
|
||||
highlightedItemId.value = currentProjectWithTasks.id;
|
||||
return;
|
||||
}
|
||||
highlightedItemId.value =
|
||||
@@ -190,37 +322,38 @@ function moveHighlightUp() {
|
||||
}
|
||||
}
|
||||
if (currentHighlightedIndex === 0) {
|
||||
// highlight the last project or the last project of the last project
|
||||
// selected project is the first project in the list
|
||||
// highlight the last project or the last task of the last project
|
||||
const lastProject =
|
||||
filteredProjects.value[filteredProjects.value.length - 1];
|
||||
if (lastProject.tasks.length > 0) {
|
||||
if (lastProject.tasks.length > 0 && lastProject.expanded) {
|
||||
// highlight last task of last project
|
||||
highlightedItemId.value =
|
||||
lastProject.tasks[lastProject.tasks.length - 1].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[
|
||||
filteredProjects.value.length - 1
|
||||
].project.id;
|
||||
filteredProjects.value[filteredProjects.value.length - 1].id;
|
||||
}
|
||||
} else {
|
||||
// selected item is a project that is not the first project in the list
|
||||
const previousProject =
|
||||
filteredProjects.value[currentHighlightedIndex - 1];
|
||||
if (previousProject.tasks.length > 0) {
|
||||
if (previousProject.tasks.length > 0 && previousProject.expanded) {
|
||||
// highlight last task of previous project
|
||||
highlightedItemId.value =
|
||||
previousProject.tasks[previousProject.tasks.length - 1].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[currentHighlightedIndex - 1].project.id;
|
||||
filteredProjects.value[currentHighlightedIndex - 1].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveHighlightDown() {
|
||||
mouseEnterHighlightActivated.value = false;
|
||||
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.project.id === highlightedItemId.value
|
||||
(projectWithTasks) => projectWithTasks.id === highlightedItemId.value
|
||||
);
|
||||
// check if it is a project id
|
||||
if (currentHighlightedIndex === -1) {
|
||||
@@ -245,11 +378,10 @@ function moveHighlightDown() {
|
||||
);
|
||||
if (projectIndex === filteredProjects.value.length - 1) {
|
||||
// highlight the first project if it was the last project
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[0].project.id;
|
||||
highlightedItemId.value = filteredProjects.value[0].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[projectIndex + 1].project.id;
|
||||
filteredProjects.value[projectIndex + 1].id;
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -258,30 +390,79 @@ function moveHighlightDown() {
|
||||
}
|
||||
}
|
||||
if (currentHighlightedIndex === filteredProjects.value.length - 1) {
|
||||
// selected project is the last project in the list
|
||||
// highlight the first project or the last project of the last project
|
||||
const lastProject =
|
||||
filteredProjects.value[filteredProjects.value.length - 1];
|
||||
if (lastProject.tasks.length > 0) {
|
||||
if (lastProject.tasks.length > 0 && lastProject.expanded) {
|
||||
// highlight last task of last project
|
||||
highlightedItemId.value = lastProject.tasks[0].id;
|
||||
} else {
|
||||
highlightedItemId.value = filteredProjects.value[0].project.id;
|
||||
highlightedItemId.value = filteredProjects.value[0].id;
|
||||
}
|
||||
} else {
|
||||
// selected item is a project that is not the last project in the list
|
||||
const currentProjectWithTasks =
|
||||
filteredProjects.value[currentHighlightedIndex];
|
||||
if (currentProjectWithTasks.tasks.length > 0) {
|
||||
if (
|
||||
currentProjectWithTasks.tasks.length > 0 &&
|
||||
currentProjectWithTasks.expanded
|
||||
) {
|
||||
// highlight last task of previous project
|
||||
highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[currentHighlightedIndex + 1].project.id;
|
||||
filteredProjects.value[currentHighlightedIndex + 1].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const highlightedItemId = ref<string | null>(null);
|
||||
|
||||
watch(highlightedItemId, () => {
|
||||
const highlightedItem = dropdownViewport.value?.querySelector(
|
||||
`[data-project-id="${highlightedItemId.value}"]`
|
||||
);
|
||||
if (highlightedItem) {
|
||||
highlightedItem.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
} else {
|
||||
const highlightedTask = dropdownViewport.value?.querySelector(
|
||||
`[data-task-id="${highlightedItemId.value}"]`
|
||||
);
|
||||
if (highlightedTask) {
|
||||
highlightedTask.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function expandProject() {
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) => projectWithTasks.id === highlightedItemId.value
|
||||
);
|
||||
if (currentHighlightedIndex === -1) {
|
||||
return;
|
||||
}
|
||||
const currentProject = filteredProjects.value[currentHighlightedIndex];
|
||||
currentProject.expanded = true;
|
||||
}
|
||||
|
||||
function collapseProject() {
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) => projectWithTasks.id === highlightedItemId.value
|
||||
);
|
||||
if (currentHighlightedIndex === -1) {
|
||||
return;
|
||||
}
|
||||
const currentProject = filteredProjects.value[currentHighlightedIndex];
|
||||
currentProject.expanded = false;
|
||||
}
|
||||
|
||||
const currentProject = computed(() => {
|
||||
return props.projects.find(
|
||||
(iteratingProject) => iteratingProject.id === project.value
|
||||
@@ -302,11 +483,22 @@ const selectedProjectColor = computed(() => {
|
||||
return currentProject.value?.color || 'var(--theme-color-icon-default)';
|
||||
});
|
||||
|
||||
// This state prevents the selection to jump to random items when the mouse cursor is
|
||||
// over an item and some Item in the Dropdown is selected by keyboard navigation to scroll into view
|
||||
const mouseEnterHighlightActivated = ref(true);
|
||||
|
||||
function setHighlightItemId(newId: string) {
|
||||
if (mouseEnterHighlightActivated.value) {
|
||||
highlightedItemId.value = newId;
|
||||
}
|
||||
}
|
||||
|
||||
function selectTask(taskId: string) {
|
||||
task.value = taskId;
|
||||
project.value =
|
||||
props.tasks.find((task) => task.id === taskId)?.project_id || null;
|
||||
open.value = false;
|
||||
searchValue.value = '';
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
@@ -314,6 +506,7 @@ function selectProject(projectId: string) {
|
||||
project.value = projectId;
|
||||
task.value = null;
|
||||
open.value = false;
|
||||
searchValue.value = '';
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
@@ -339,7 +532,7 @@ const showCreateProject = ref(false);
|
||||
:border="showBadgeBorder"
|
||||
tag="button"
|
||||
:name="selectedProjectName"
|
||||
class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 hover:bg-card-background-separator">
|
||||
class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0">
|
||||
<div class="flex items-center lg:space-x-1 min-w-0">
|
||||
<span class="whitespace-nowrap text-xs lg:text-sm">
|
||||
{{ selectedProjectName }}
|
||||
@@ -364,48 +557,108 @@ const showCreateProject = ref(false);
|
||||
data-testid="client_dropdown_search"
|
||||
@keydown.up.prevent="moveHighlightUp"
|
||||
@keydown.down.prevent="moveHighlightDown"
|
||||
@keydown.right.prevent="expandProject"
|
||||
@keydown.left.prevent="collapseProject"
|
||||
ref="searchInput"
|
||||
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
|
||||
placeholder="Search for a project or task..." />
|
||||
<div
|
||||
ref="dropdownViewport"
|
||||
class="min-w-[300px] max-h-[250px] overflow-y-scroll relative">
|
||||
<template
|
||||
v-for="projectWithTasks in filteredProjects"
|
||||
:key="projectWithTasks.project.id">
|
||||
@mousemove="mouseEnterHighlightActivated = true"
|
||||
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
|
||||
<template v-for="client in filteredResults" :key="client.id">
|
||||
<div
|
||||
role="option"
|
||||
:value="projectWithTasks.project.id"
|
||||
@click="selectProject(projectWithTasks.project.id)"
|
||||
class="border-t border-card-background-separator"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
projectWithTasks.project.id ===
|
||||
highlightedItemId,
|
||||
}"
|
||||
data-testid="client_dropdown_entries"
|
||||
:data-project-id="projectWithTasks.project.id">
|
||||
<ProjectDropdownItem
|
||||
:selected="
|
||||
isProjectSelected(projectWithTasks.project)
|
||||
"
|
||||
:name="projectWithTasks.project.name"
|
||||
:color="
|
||||
projectWithTasks.project.color
|
||||
"></ProjectDropdownItem>
|
||||
</div>
|
||||
<div
|
||||
v-for="task in projectWithTasks.tasks"
|
||||
:key="task.id"
|
||||
@click="selectTask(task.id)"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
task.id === highlightedItemId,
|
||||
}"
|
||||
class="flex items-center space-x-3 w-full px-3 py-1.5 text-start text-xs font-semibold leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
|
||||
<div class="w-3 h-3 rounded-full"></div>
|
||||
<span>{{ task.name }}</span>
|
||||
v-if="client.id !== 'no_project_no_client'"
|
||||
class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
|
||||
<span>
|
||||
{{ client.name }}
|
||||
</span>
|
||||
</div>
|
||||
<template
|
||||
v-for="projectWithTasks in client.projects"
|
||||
:key="projectWithTasks.id">
|
||||
<div
|
||||
role="option"
|
||||
class="px-1 py-0.5 cursor-default"
|
||||
:value="projectWithTasks.id"
|
||||
@click="selectProject(projectWithTasks.id)"
|
||||
:data-project-id="projectWithTasks.id">
|
||||
<div
|
||||
class="rounded-lg"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
projectWithTasks.id ===
|
||||
highlightedItemId,
|
||||
}">
|
||||
<ProjectDropdownItem
|
||||
class="hover:!bg-transparent"
|
||||
:selected="
|
||||
isProjectSelected(projectWithTasks)
|
||||
"
|
||||
@mouseenter="
|
||||
setHighlightItemId(projectWithTasks.id)
|
||||
"
|
||||
:name="projectWithTasks.name"
|
||||
:color="projectWithTasks.color">
|
||||
<template #actions>
|
||||
<button
|
||||
tabindex="-1"
|
||||
v-if="
|
||||
projectWithTasks.tasks.length >
|
||||
0
|
||||
"
|
||||
@click.prevent.stop="
|
||||
() => {
|
||||
projectWithTasks.expanded =
|
||||
!projectWithTasks.expanded;
|
||||
searchInput?.focus();
|
||||
}
|
||||
"
|
||||
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
|
||||
:class="{
|
||||
'bg-white/5 text-text-secondary':
|
||||
projectWithTasks.expanded,
|
||||
'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
|
||||
!projectWithTasks.expanded,
|
||||
}">
|
||||
<span
|
||||
>{{
|
||||
projectWithTasks.tasks
|
||||
.length
|
||||
}}
|
||||
Tasks</span
|
||||
>
|
||||
<ChevronDownIcon
|
||||
:class="{
|
||||
'transform rotate-180':
|
||||
projectWithTasks.expanded,
|
||||
}"
|
||||
class="w-4"></ChevronDownIcon>
|
||||
</button>
|
||||
</template>
|
||||
</ProjectDropdownItem>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="projectWithTasks.expanded"
|
||||
class="bg-quaternary">
|
||||
<div
|
||||
v-for="task in projectWithTasks.tasks"
|
||||
:key="task.id"
|
||||
@click="selectTask(task.id)"
|
||||
@mouseenter="setHighlightItemId(task.id)"
|
||||
:data-task-id="task.id"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
task.id === highlightedItemId,
|
||||
}"
|
||||
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
|
||||
<MinusIcon
|
||||
class="w-3 h-3 text-text-quaternary"></MinusIcon>
|
||||
<span>{{ task.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="hover:bg-card-background-active rounded-b-lg">
|
||||
|
||||
Reference in New Issue
Block a user