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

add lazy loading to modals and dropdowns to improve time page render performance

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-17 13:54:26 +01:00
parent 7f145cf1c2
commit f1d001e03e
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/packages/ui/src/Icons/BillableIcon.vue
View File

@@ -1,12 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed, inject, type ComputedRef } from 'vue';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery'; import type { Organization } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import DollarIcon from './DollarIcon.vue'; import DollarIcon from './DollarIcon.vue';
import EuroIcon from './EuroIcon.vue'; import EuroIcon from './EuroIcon.vue';
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!); const organization = inject<ComputedRef<Organization>>('organization');
const icon = computed(() => (organization.value?.currency === 'EUR' ? EuroIcon : DollarIcon)); const icon = computed(() => (organization?.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
</script> </script>
<template> <template>

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

@@ -91,6 +91,7 @@ const showCreateTagModal = ref(false);
<template> <template>
<TagCreateModal <TagCreateModal
v-if="showCreateTagModal"
v-model:show="showCreateTagModal" v-model:show="showCreateTagModal"
:create-tag="createAndAddTag"></TagCreateModal> :create-tag="createAndAddTag"></TagCreateModal>
<Dropdown <Dropdown

1
resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
View File

@@ -228,6 +228,7 @@ async function handleDeleteTimeEntry() {
</div> </div>
<TimeEntryEditModal <TimeEntryEditModal
v-if="showEditModal"
v-model:show="showEditModal" v-model:show="showEditModal"
:time-entry="timeEntry" :time-entry="timeEntry"
:enable-estimated-time="enableEstimatedTime" :enable-estimated-time="enableEstimatedTime"

13
resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid'; import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue'; import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { computed, nextTick, ref, watch, watchEffect } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue'; import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
import type { import type {
CreateClientBody, CreateClientBody,
@@ -33,6 +33,7 @@ const searchValue = ref('');
watch(open, (isOpen) => { watch(open, (isOpen) => {
if (isOpen) { if (isOpen) {
updateFilteredResults();
nextTick(() => { nextTick(() => {
initializeHighlightedItem(); initializeHighlightedItem();
searchInput.value?.focus({ preventScroll: true }); searchInput.value?.focus({ preventScroll: true });
@@ -148,7 +149,7 @@ function addProjectToFilterObject(
} }
} }
watchEffect(() => { function updateFilteredResults() {
const tempFilteredClients: ClientsWithProjectsWithTasks = []; const tempFilteredClients: ClientsWithProjectsWithTasks = [];
if (searchValue.value.length === 0) { if (searchValue.value.length === 0) {
@@ -243,6 +244,13 @@ watchEffect(() => {
}); });
filteredResults.value = tempFilteredClients; filteredResults.value = tempFilteredClients;
}
// Recompute filtered results when search value changes while open
watch(searchValue, () => {
if (open.value) {
updateFilteredResults();
}
}); });
async function addClientIfNoneExists() { async function addClientIfNoneExists() {
@@ -648,6 +656,7 @@ const showCreateProject = ref(false);
</template> </template>
</Dropdown> </Dropdown>
<ProjectCreateModal <ProjectCreateModal
v-if="showCreateProject"
v-model:show="showCreateProject" v-model:show="showCreateProject"
:create-client :create-client
:enable-estimated-time="enableEstimatedTime" :enable-estimated-time="enableEstimatedTime"