adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 08:12:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

use pinned selection instead of fix items on dropdown open so async

Browse Source 
loaded collections update the dropdown properly
This commit is contained in:
Gregor Vostrak
2026-07-08 18:06:58 +02:00
parent 56c45adc1a
commit 4a5ba9ff28
3 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/Components/Common/Project/ProjectDropdown.vue
View File

@@ -37,7 +37,18 @@ const emit = defineEmits(['update:modelValue', 'changed']);
const activeClients = computed(() => clients.value.filter((c) => !c.is_archived));
const sortedProjects = ref<Project[]>([]);
// The selected project is pinned when the dropdown opens so rows don't re-sort while
// the user interacts, but the project list itself stays reactive — projects may still
// be loading (fetchAllPages) when the dropdown opens.
const pinnedProjectId = ref<string | null>(null);
const sortedProjects = computed(() => {
return [...projects.value].sort((a, b) => {
const aPinned = pinnedProjectId.value === a.id ? 0 : 1;
const bPinned = pinnedProjectId.value === b.id ? 0 : 1;
return aPinned - bPinned;
});
});
const shownProjects = computed(() => {
return sortedProjects.value.filter((project) => {
@@ -65,9 +76,7 @@ watch(open, (isOpen) => {
searchInput.value?.$el?.focus();
});
sortedProjects.value = [...projects.value].sort((iteratingProject) => {
return model.value === iteratingProject.id ? -1 : 1;
});
pinnedProjectId.value = model.value;
}
});

23
resources/js/packages/ui/src/Input/MultiselectDropdown.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts" generic="T">
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { computed, type Ref, ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
import {
ComboboxAnchor,
@@ -33,20 +33,27 @@ const props = defineProps<{
const open = ref(false);
const searchValue = ref('');
const sortedItems = ref<T[]>([]) as Ref<T[]>;
// The selection is pinned when the dropdown opens so rows don't re-sort while the user
// toggles checkboxes, but the item list itself stays reactive — items may still be
// loading (fetchAllPages) when the dropdown opens.
const pinnedSelection = ref<Set<string>>(new Set());
watch(open, (isOpen) => {
if (isOpen) {
searchValue.value = '';
sortedItems.value = [...props.items].sort((a, b) => {
const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1;
const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1;
if (aSelected !== bSelected) return aSelected - bSelected;
return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
});
pinnedSelection.value = new Set(model.value);
}
});
const sortedItems = computed(() => {
return [...props.items].sort((a, b) => {
const aSelected = pinnedSelection.value.has(props.getKeyFromItem(a)) ? 0 : 1;
const bSelected = pinnedSelection.value.has(props.getKeyFromItem(b)) ? 0 : 1;
if (aSelected !== bSelected) return aSelected - bSelected;
return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
});
});
const filteredItems = computed(() => {
const search = searchValue.value.toLowerCase().trim();
if (!search) return sortedItems.value;

19
resources/js/packages/ui/src/Tag/TagDropdown.vue
View File

@@ -37,19 +37,26 @@ const model = defineModel<string[]>({
const open = ref(false);
const searchValue = ref('');
const sortedTags = ref<Tag[]>([]);
// The selection is pinned when the dropdown opens so rows don't re-sort while the user
// toggles tags, but the tag list itself stays reactive — tags may still be loading
// when the dropdown opens.
const pinnedSelection = ref<Set<string>>(new Set());
watch(open, (isOpen) => {
if (isOpen) {
searchValue.value = '';
sortedTags.value = [...props.tags].sort((a, b) => {
const aSelected = model.value.includes(a.id) ? 0 : 1;
const bSelected = model.value.includes(b.id) ? 0 : 1;
return aSelected - bSelected;
});
pinnedSelection.value = new Set(model.value);
}
});
const sortedTags = computed(() => {
return [...props.tags].sort((a, b) => {
const aSelected = pinnedSelection.value.has(a.id) ? 0 : 1;
const bSelected = pinnedSelection.value.has(b.id) ? 0 : 1;
return aSelected - bSelected;
});
});
const filteredTags = computed(() => {
const search = searchValue.value.toLowerCase().trim();
if (!search) return sortedTags.value;