ami/tl-vikunja
1
0
Fork 0
Code

fix(filters): rework filter popup button

Browse Source
This commit is contained in:
kolaente 2024-03-13 17:19:15 +01:00
parent 79577c14b7
commit 15215b30a0
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
6 changed files with 232 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/project/partials/filter-popup.vue
View File

@ -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"

12
frontend/src/components/project/partials/filters.vue
View File

@ -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>

33
frontend/src/styles/components/project.scss
View File

@ -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;

40
frontend/src/views/project/ProjectKanban.vue
View File

@ -5,13 +5,11 @@
view-name="kanban"
>
<template #header>
<div
<div class="filter-container">
<FilterPopup
v-if="!isSavedFilter(project)"
class="filter-container"
>
<div class="items">
<FilterPopup v-model="params" />
</div>
v-model="params"
/>
</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;
}

60
frontend/src/views/project/ProjectList.vue
View File

@ -5,53 +5,13 @@
view-name="project"
>
<template #header>
<div
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>
<div class="filter-container">
<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'
}

12
frontend/src/views/project/ProjectTable.vue
View File

@ -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;
}