JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 22:39:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[CR] sorting v-select, [bugy]

Browse Source
This commit is contained in:
romankko2 committed 2023-09-15 17:24:53 +02:00
1 parent 7c94f4c576
commit 4ed354904c
16 files changed
+195 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@overview/_components/z-tasks-search.vue
+45 -5
View File
@@ -8,8 +8,8 @@
:items="enrichedEmployees"
item-title="_fullName"
item-value="id"
:disabled="isSortingActive"
/>
<v-text-field
v-model="searchQuery"
class="subheader-input"
@@ -18,22 +18,33 @@
prepend-inner-icon="mdi-magnify"
@input="onInput"
type="text"
:disabled="isSortingActive"
></v-text-field>
<v-select
v-model="sortOrder"
class="subheader-input"
:items="sortOptions"
variant="outlined"
label="Zoradiť podľa"
item-title="text"
item-value="value"
></v-select>
</v-row>
</template>
<script>
import { mapGetters } from 'vuex'
import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin'
import { mapGetters } from 'vuex'
import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin'
export default {
mixins: [AutocompleteMixin],
emits: ['search', 'employee-selected'],
emits: ['search', 'employee-selected', 'update-sort-order'],
data() {
return {
selectedEmployeeId: null,
searchQuery: ''
searchQuery: '',
sortOrder: null
}
},
@@ -43,17 +54,39 @@ export default {
computed: {
...mapGetters('tm', ['enrichedEmployees']),
sortOptions() {
return [
{ text: 'Zrušiť filter', value: null },
{ text: 'Názov (A-Z)', value: 'nameAsc' },
{ text: 'Názov (Z-A)', value: 'nameDesc' },
{ text: 'Dátum (Najnovší - Najstarší)', value: 'deadlineDesc' },
{ text: 'Dátum (Najstarší - Najnovší)', value: 'deadlineAsc' }
]
},
isSortingActive() {
return this.sortOrder !== null && this.sortOrder !== 'null'
},
},
methods: {
onInput() {
this.$emit('search', this.searchQuery)
},
updateSortOrder() {
this.$emit('update-sort-order', this.sortOrder)
}
},
watch: {
selectedEmployeeId() {
this.$emit('employee-selected', this.selectedEmployeeId)
},
sortOrder() {
this.updateSortOrder()
}
}
}
@@ -92,4 +125,11 @@ export default {
max-width: 100% !important
min-width: 100%
margin-bottom: 15px
:deep(.v-select__selection-text)
display: -webkit-box
-webkit-line-clamp: 1
-webkit-box-orient: vertical
overflow: hidden
text-overflow: ellipsis
</style>
app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
+1 -1
View File
@@ -15,7 +15,7 @@
<tbody>
<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
<td>{{ subtask.project_code }}</td>
<td>{{ subtask.title ?? subtask.master_task?.name ?? subtask.master_task }}</td>
<td>{{ subtask.title ?? subtask.master_task }}</td>
<td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
<v-tooltip text="Deadline z Mastertasku" location="end">
<template v-slot:activator="{ props }">
app/src/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue
+60 -6
View File
@@ -1,10 +1,10 @@
<template>
<div>
<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" />
<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" @update-sort-order="onUpdateSortOrder" />
<W-loadable :content="filteredOngoingTasks" :emptyMessage="searchQuery.length ? 'Neboli nájdené žiadne úlohy' : 'Nenašli sa žiadne záznamy'">
<A-ongoing-table :subtasks="filteredOngoingTasks" />
<A-ongoing-table :subtasks="selectedTasks" />
</W-loadable>
</div>
@@ -23,7 +23,8 @@ export default {
data() {
return {
searchQuery: ''
searchQuery: '',
sortOrder: null
}
},
@@ -32,15 +33,58 @@ export default {
},
computed: {
...mapGetters('tm', ['ongoingSubtasks']),
...mapGetters('tm', ['ongoingSubtasks', 'mastertasks']),
filteredOngoingTasks() {
if (!this.ongoingSubtasks)
return null
return this.ongoingSubtasks.filter(subtask => {
return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.master_task) || this.filterParams(this.searchQuery, subtask.project_code)
return this.ongoingSubtasks.filter(subtask => {
return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.title) || this.filterParams(this.searchQuery, subtask.project_code)
})
},
sortedOngoingTasks() {
if (!this.ongoingSubtasks)
return null
let sortedTasks = this.ongoingSubtasks
//Sorting by name A-Z
if (this.sortOrder === 'nameAsc') {
sortedTasks.sort((a, b) => {
const nameA = (a.title || a.master_task || '').toLowerCase()
const nameB = (b.title || b.master_task || '').toLowerCase()
return nameA.localeCompare(nameB)
})
//Sorting by name Z-A
} else if (this.sortOrder === 'nameDesc') {
sortedTasks.sort((a, b) => {
const nameA = (a.title || a.master_task || '').toLowerCase()
const nameB = (b.title || b.master_task || '').toLowerCase()
return nameB.localeCompare(nameA)
})
//Sorting by date Newest-Oldest
} else if (this.sortOrder === 'deadlineDesc') {
sortedTasks.sort((a, b) => {
const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
return deadlineB - deadlineA
})
//Sorting by date Oldest-Newest
} else if (this.sortOrder === 'deadlineAsc') {
sortedTasks.sort((a, b) => {
const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
return deadlineA - deadlineB
})
}
return sortedTasks
},
selectedTasks() {
return this.sortOrder ? this.sortedOngoingTasks : this.filteredOngoingTasks
}
},
@@ -53,9 +97,19 @@ export default {
this.$store.dispatch('tm/loadOngoingSubtasks', id)
},
onUpdateSortOrder(newSortOrder) {
this.sortOrder = newSortOrder
},
filterParams(searchQuery, row) {
if(!row) return false
return row.toLowerCase().includes(searchQuery.toLowerCase())
},
getMasterTaskDeadline(subtask) {
if(!this.mastertasks) return ''
const masterTask = this.mastertasks.find((mt) => mt.id === subtask.master_task_id)
return masterTask ? masterTask.deadline : ''
}
}
}
app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
+1 -1
View File
@@ -14,7 +14,7 @@
<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
<td>{{ subtask.project_code }}</td>
<td>{{ subtask.title ?? subtask.master_task?.name ?? subtask.master_task }}</td>
<td>{{ subtask.title ?? subtask.master_task }}</td>
<td v-if="subtask?.deadline">{{ getDeadline(subtask) }}</td>
<v-tooltip text="Deadline z Mastertasku" location="end">
<template v-slot:activator="{ props }">
app/src/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue
+59 -6
View File
@@ -1,10 +1,10 @@
<template>
<div>
<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" />
<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" @update-sort-order="onUpdateSortOrder" />
<W-loadable :content="filteredUnscheduledTasks" :emptyMessage="searchQuery.length ? 'Neboli nájdené žiadne úlohy' : 'Nenašli sa žiadne záznamy'">
<A-unscheduled-table :subtasks="filteredUnscheduledTasks" />
<A-unscheduled-table :subtasks="selectedTasks" />
</W-loadable>
</div>
@@ -23,7 +23,8 @@ export default {
data() {
return {
searchQuery: ''
searchQuery: '',
sortOrder: null
}
},
@@ -32,15 +33,57 @@ export default {
},
computed: {
...mapGetters('tm', ['unscheduledSubtasks']),
...mapGetters('tm', ['unscheduledSubtasks', 'mastertasks']),
filteredUnscheduledTasks() {
if (!this.unscheduledSubtasks)
return null
return this.unscheduledSubtasks.filter(subtask => {
return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.master_task) || this.filterParams(this.searchQuery, subtask.project_code)
return this.unscheduledSubtasks.filter(subtask => {
return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.title) || this.filterParams(this.searchQuery, subtask.project_code)
})
},
sortedUnscheduledTasks() {
if (!this.unscheduledSubtasks)
return null
let sortedTasks = this.unscheduledSubtasks
//Sorting by name A-Z
if (this.sortOrder === 'nameAsc') {
sortedTasks.sort((a, b) => {
const nameA = (a.title || a.master_task || '').toLowerCase()
const nameB = (b.title || b.master_task || '').toLowerCase()
return nameA.localeCompare(nameB)
})
//Sorting by name Z-A
} else if (this.sortOrder === 'nameDesc') {
sortedTasks.sort((a, b) => {
const nameA = (a.title || a.master_task || '').toLowerCase()
const nameB = (b.title || b.master_task || '').toLowerCase()
return nameB.localeCompare(nameA)
})
//Sorting by date Newest-Oldest
} else if (this.sortOrder === 'deadlineDesc') {
sortedTasks.sort((a, b) => {
const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
return deadlineB - deadlineA
})
//Sorting by date Oldest-Newest
} else if (this.sortOrder === 'deadlineAsc') {
sortedTasks.sort((a, b) => {
const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
return deadlineA - deadlineB
})
}
return sortedTasks
},
selectedTasks() {
return this.sortOrder ? this.sortedUnscheduledTasks : this.filteredUnscheduledTasks
}
},
@@ -53,9 +96,19 @@ export default {
this.$store.dispatch('tm/loadUnscheduledSubtasks', id)
},
onUpdateSortOrder(newSortOrder) {
this.sortOrder = newSortOrder
},
filterParams(searchQuery, row) {
if(!row) return false
return row.toLowerCase().includes(searchQuery.toLowerCase())
},
getMasterTaskDeadline(subtask) {
if(!this.mastertasks) return ''
const masterTask = this.mastertasks.find((mt) => mt.id === subtask.master_task_id)
return masterTask ? masterTask.deadline : ''
}
}
}