fix(filters): rework filter popup button

frontend/src/components/project/partials/filter-popup.vue

@@ -1,11 +1,4 @@
 <template>
-	<x-button
-		v-if="hasFilters"
-		variant="secondary"
-		@click="clearFilters"
-	>
-		{{ $t('filters.clear') }}
-	</x-button>
 	<x-button
 		variant="secondary"
 		icon="filter"

frontend/src/components/project/partials/filters.vue

@@ -25,6 +25,13 @@
 			v-if="hasFooter"
 			#footer
 		>
+			<x-button
+				variant="secondary"
+				@click.prevent.stop="clearFiltersAndEmit"
+				class="mr-2"
+			>
+				{{ $t('filters.clear') }}
+			</x-button>
 			<x-button
 				variant="primary"
 				@click.prevent.stop="changeAndEmitButton"
@@ -130,4 +137,9 @@ function changeAndEmitButton() {
 	change()
 	emit('showResultsButtonClicked')
 }
+
+function clearFiltersAndEmit() {
+	params.value.filter = ''
+	changeAndEmitButton()
+}
 </script>

frontend/src/styles/components/project.scss

@@ -18,14 +18,12 @@ $filter-container-top-link-share-list: -47px;
   margin-top: $filter-container-top-default;
   z-index: 4;
 
-  .items {
   display: flex;
   justify-content: flex-end;
 
   .button:not(:last-of-type) {
     margin-right: .5rem;
   }
-  }
 
   .button {
     height: $switch-view-height;
@@ -35,37 +33,6 @@ $filter-container-top-link-share-list: -47px;
     text-align: left;
   }
 
-  .fancycheckbox {
-    display: block;
-  }
-
-  .search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-right: .5rem;
-
-    .field {
-      transition: width $transition;
-      width: 100%;
-
-      &.hidden {
-        width: 0;
-        height: 0;
-        margin: 0;
-        overflow: hidden;
-      }
-
-      .button {
-        height: 100%;
-      }
-    }
-  }
-
-  .filters input {
-    font-size: .9rem;
-  }
-
   @media screen and (max-width: $tablet) {
     position: static;
     margin: 0 0 1rem 0 !important;

frontend/src/views/project/ProjectKanban.vue

@@ -5,13 +5,11 @@
 		view-name="kanban"
 	>
 		<template #header>
-			<div
+			<div class="filter-container">
+				<FilterPopup
 					v-if="!isSavedFilter(project)"
-				class="filter-container"
+					v-model="params"
-			>
+				/>
-				<div class="items">
-					<FilterPopup v-model="params" />
-				</div>
 			</div>
 		</template>
 
@@ -47,7 +45,7 @@
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
-										<icon icon="check-double" />
+										<icon icon="check-double"/>
 									</span>
 									<h2
 										class="title input"
@@ -197,7 +195,9 @@
 												variant="secondary"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
-												{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
+												{{
+													bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask')
+												}}
 											</x-button>
 										</div>
 									</template>
@@ -290,7 +290,11 @@ import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 
-import {getCollapsedBucketState, saveCollapsedBucketState, type CollapsedBuckets} from '@/helpers/saveCollapsedBucketState'
+import {
+	type CollapsedBuckets,
+	getCollapsedBucketState,
+	saveCollapsedBucketState,
+} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 import {isSavedFilter} from '@/services/savedFilter'
@@ -322,7 +326,7 @@ const kanbanStore = useKanbanStore()
 const taskStore = useTaskStore()
 const projectStore = useProjectStore()
 
-const taskContainerRefs = ref<{[id: IBucket['id']]: HTMLElement}>({})
+const taskContainerRefs = ref<{ [id: IBucket['id']]: HTMLElement }>({})
 const bucketLimitInputRef = ref<HTMLInputElement | null>(null)
 
 const drag = ref(false)
@@ -334,18 +338,18 @@ const bucketToDelete = ref(0)
 const bucketTitleEditable = ref(false)
 
 const newTaskText = ref('')
-const showNewTaskInput = ref<{[id: IBucket['id']]: boolean}>({})
+const showNewTaskInput = ref<{ [id: IBucket['id']]: boolean }>({})
 
 const newBucketTitle = ref('')
 const showNewBucketInput = ref(false)
-const newTaskError = ref<{[id: IBucket['id']]: boolean}>({})
+const newTaskError = ref<{ [id: IBucket['id']]: boolean }>({})
 const newTaskInputFocused = ref(false)
 
 const showSetLimitInput = ref(false)
 const collapsedBuckets = ref<CollapsedBuckets>({})
 
 // We're using this to show the loading animation only at the task when updating it
-const taskUpdating = ref<{[id: ITask['id']]: boolean}>({})
+const taskUpdating = ref<{ [id: ITask['id']]: boolean }>({})
 const oneTaskUpdating = ref(false)
 
 const params = ref<TaskFilterParams>({
@@ -378,7 +382,7 @@ const bucketDraggableComponentData = computed(() => ({
 	],
 }))
 const canWrite = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
-const project = computed(() => projectId ? projectStore.projects[projectId]: null)
+const project = computed(() => projectId ? projectStore.projects[projectId] : null)
 
 const buckets = computed(() => kanbanStore.buckets)
 const loading = computed(() => kanbanStore.isLoading)
@@ -497,7 +501,7 @@ async function updateTaskPosition(e) {
 		await taskStore.update(newTask)
 
 		// Make sure the first and second task don't both get position 0 assigned
-		if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
+		if (newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
 			const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
 			const newTaskAfter = klona(taskAfter) // cloning the task to avoid pinia store manipulation
 			newTaskAfter.bucketId = newBucket.id
@@ -602,7 +606,7 @@ function updateBuckets(value: IBucket[]) {
 }
 
 // TODO: fix type
-function updateBucketPosition(e: {newIndex: number}) {
+function updateBucketPosition(e: { newIndex: number }) {
 	// (2) bucket positon is changed
 	dragBucket.value = false
 
@@ -631,7 +635,7 @@ async function saveBucketLimit(bucketId: IBucket['id'], limit: number) {
 	success({message: t('project.kanban.bucketLimitSavedSuccess')})
 }
 
-const setBucketLimitCancel = ref<number|null>(null)
+const setBucketLimitCancel = ref<number | null>(null)
 
 async function setBucketLimit(bucketId: IBucket['id'], now: boolean = false) {
 	const limit = parseInt(bucketLimitInputRef.value?.value || '')
@@ -739,6 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		* {
 			opacity: 0;
 		}
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -780,6 +785,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			&:first-of-type {
 				padding-top: .5rem;
 			}
+
 			&:last-of-type {
 				padding-bottom: .5rem;
 			}

frontend/src/views/project/ProjectList.vue

@@ -5,53 +5,13 @@
 		view-name="project"
 	>
 		<template #header>
-			<div
+			<div class="filter-container">
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<div class="search">
-						<div
-							:class="{ hidden: !showTaskSearch }"
-							class="field has-addons"
-						>
-							<div class="control has-icons-left has-icons-right">
-								<input
-									v-model="searchTerm"
-									v-focus
-									class="input"
-									:placeholder="$t('misc.search')"
-									type="text"
-									@blur="hideSearchBar()"
-									@keyup.enter="searchTasks"
-								>
-								<span class="icon is-left">
-									<icon icon="search" />
-								</span>
-							</div>
-							<div class="control">
-								<x-button
-									:loading="loading"
-									:shadow="false"
-									@click="searchTasks"
-								>
-									{{ $t('misc.search') }}
-								</x-button>
-							</div>
-						</div>
-						<x-button
-							v-if="!showTaskSearch"
-							icon="search"
-							variant="secondary"
-							@click="showTaskSearch = !showTaskSearch"
-						/>
-					</div>
 				<FilterPopup
+					v-if="!isSavedFilter(project)"
 					v-model="params"
 					@update:modelValue="prepareFiltersAndLoadTasks()"
 				/>
 			</div>
-			</div>
 		</template>
 
 		<template #default>
@@ -113,7 +73,7 @@
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
-										<icon icon="grip-lines" />
+										<icon icon="grip-lines"/>
 									</span>
 								</template>
 							</SingleTaskInProject>
@@ -131,7 +91,7 @@
 </template>
 
 <script lang="ts">
-export default { name: 'List' }
+export default {name: 'List'}
 </script>
 
 <script setup lang="ts">
@@ -183,7 +143,7 @@ const {
 	searchTerm,
 	params,
 	sortByParam,
-} = useTaskList(() => projectId, {position: 'asc' })
+} = useTaskList(() => projectId, {position: 'asc'})
 
 const tasks = ref<ITask[]>([])
 watch(
@@ -203,7 +163,7 @@ watch(
 
 			// If the task is a subtask, make sure the parent task is available in the current view as well
 			for (const pt of t.relatedTasks.parenttask) {
-				if(typeof tasksById[pt.id] === 'undefined') {
+				if (typeof tasksById[pt.id] === 'undefined') {
 					return true
 				}
 			}
@@ -265,16 +225,16 @@ function hideSearchBar() {
 }
 
 const addTaskRef = ref<typeof AddTask | null>(null)
+
 function focusNewTaskInput() {
 	addTaskRef.value?.focusTaskInput()
 }
 
 function updateTaskList(task: ITask) {
-	if (isAlphabeticalSorting.value ) {
+	if (isAlphabeticalSorting.value) {
 		// reload tasks with current filter and sorting
 		loadTasks()
-	}
+	} else {
-	else {
 		allTasks.value = [
 			task,
 			...allTasks.value,
@@ -310,7 +270,7 @@ async function saveTaskPosition(e) {
 }
 
 function prepareFiltersAndLoadTasks() {
-	if(isAlphabeticalSorting.value) {
+	if (isAlphabeticalSorting.value) {
 		sortByParam.value = {}
 		sortByParam.value[ALPHABETICAL_SORT] = 'asc'
 	}

frontend/src/views/project/ProjectTable.vue

@@ -67,7 +67,7 @@
 							</card>
 						</template>
 					</Popup>
-					<FilterPopup v-model="params" />
+					<FilterPopup v-model="params"/>
 				</div>
 			</div>
 		</template>
@@ -207,7 +207,7 @@
 									/>
 								</td>
 								<td v-if="activeColumns.labels">
-										<Labels :labels="t.labels" />
+									<Labels :labels="t.labels"/>
 								</td>
 								<td v-if="activeColumns.assignees">
 									<AssigneeList
@@ -284,9 +284,8 @@ import FilterPopup from '@/components/project/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import {useTaskList} from '@/composables/useTaskList'
-
 import type {SortBy} from '@/composables/useTaskList'
+import {useTaskList} from '@/composables/useTaskList'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
@@ -381,6 +380,11 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 .columns-filter {
 	margin: 0;
 
+	:deep(.card-content .content) {
+		display: flex;
+		flex-direction: column;
+	}
+
 	&.is-open {
 		margin: 2rem 0 1rem;
 	}