Feature: Desktop view - Add additional improvements to basic detail search.

Co-authored-by: Dusan Vuckovic <dv@zammad.com>
Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Martin Gruner <mg@zammad.com>
Co-authored-by: Benjamin Scharf <bs@zammad.com>
Co-authored-by: Florian Liebe <fl@zammad.com>

app/frontend/apps/desktop/components/CommonTable/CommonAdvancedTable.vue

@@ -30,6 +30,7 @@ import {
 } from '#shared/graphql/types.ts'
 import { i18n } from '#shared/i18n.ts'
 import type { ObjectLike } from '#shared/types/utils.ts'
+import emitter from '#shared/utils/emitter.ts'
 
 import CommonActionMenu from '#desktop/components/CommonActionMenu/CommonActionMenu.vue'
 import CommonTableRowsSkeleton from '#desktop/components/CommonTable/Skeleton/CommonTableRowsSkeleton.vue'
@@ -258,6 +259,7 @@ onMounted(() => {
 })
 
 useEventListener('resize', () => initializeHeaderWidths())
+emitter.on('main-sidebar-transition', () => initializeHeaderWidths())
 
 const getTooltipText = (
   item: TableAdvancedItem,

app/frontend/apps/desktop/components/CommonTable/composables/useSkeletonLoadingCount.ts

@@ -0,0 +1,23 @@
+// Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/
+
+import { useWindowSize } from '@vueuse/core'
+import { computed, type ComputedRef, type Ref } from 'vue'
+
+export const useSkeletonLoadingCount = (
+  count: Ref<number | undefined> | ComputedRef<number | undefined>,
+) => {
+  const { height: screenHeight } = useWindowSize()
+
+  const visibleSkeletonLoadingCount = computed(() => {
+    const maxVisibleRowCount = Math.ceil(screenHeight.value / 40)
+
+    if (count.value && count.value > maxVisibleRowCount)
+      return maxVisibleRowCount
+
+    return count.value
+  })
+
+  return {
+    visibleSkeletonLoadingCount,
+  }
+}

app/frontend/apps/desktop/components/Search/QuickSearch/QuickSearch.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/shared'
+import { refDebounced, watchDebounced } from '@vueuse/shared'
 import { computed } from 'vue'
 
 import {
@@ -9,6 +9,7 @@ import {
   useNotifications,
 } from '#shared/components/CommonNotifications/index.ts'
 import { useConfirmation } from '#shared/composables/useConfirmation.ts'
+import { useRecentSearches } from '#shared/composables/useRecentSearches.ts'
 import { useTouchDevice } from '#shared/composables/useTouchDevice.ts'
 import MutationHandler from '#shared/server/apollo/handler/MutationHandler.ts'
 import QueryHandler from '#shared/server/apollo/handler/QueryHandler.ts'
@@ -17,7 +18,6 @@ import SubscriptionHandler from '#shared/server/apollo/handler/SubscriptionHandl
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
 import CommonSectionCollapse from '#desktop/components/CommonSectionCollapse/CommonSectionCollapse.vue'
 import QuickSearchResultList from '#desktop/components/Search/QuickSearch/QuickSearchResultList/QuickSearchResultList.vue'
-import { useRecentSearches } from '#desktop/composables/useRecentSearches.ts'
 import { useUserCurrentRecentViewResetMutation } from '#desktop/entities/user/current/graphql/mutations/userCurrentRecentViewReset.api.ts'
 import { useUserCurrentRecentViewListQuery } from '#desktop/entities/user/current/graphql/queries/userCurrentRecentViewList.api.ts'
 import { useUserCurrentRecentViewUpdatesSubscription } from '#desktop/entities/user/current/graphql/subscriptions/userCurrentRecentViewUpdates.api.ts'
@@ -36,6 +36,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const hasSearchInput = computed(() => props.search?.length > 0)
+
 const debouncedHasSearchInput = refDebounced(
   hasSearchInput,
   DEBOUNCE_TIME + 100, // Add some more delay to the first entered debounced value.
@@ -43,7 +44,13 @@ const debouncedHasSearchInput = refDebounced(
 
 const { isTouchDevice } = useTouchDevice()
 
-const { recentSearches, clearSearches, removeSearch } = useRecentSearches()
+const {
+  ADD_RECENT_SEARCH_DEBOUNCE_TIME,
+  recentSearches,
+  addSearch,
+  clearSearches,
+  removeSearch,
+} = useRecentSearches()
 
 const recentViewListQuery = new QueryHandler(
   useUserCurrentRecentViewListQuery({
@@ -67,12 +74,16 @@ recentViewUpdatesSubscription.onResult(({ data }) => {
   }
 })
 
+watchDebounced(() => props.search, addSearch, {
+  debounce: ADD_RECENT_SEARCH_DEBOUNCE_TIME,
+})
+
 const { waitForConfirmation } = useConfirmation()
 const { notify } = useNotifications()
 
 const confirmRemoveRecentSearch = async (searchQuery: string) => {
   const confirmed = await waitForConfirmation(
-    __('Are you sure? This recent search will get lost.'),
+    __('Are you sure? This recent search will be lost.'),
     { fullscreen: true },
   )
 
@@ -89,7 +100,7 @@ const confirmRemoveRecentSearch = async (searchQuery: string) => {
 
 const confirmClearRecentSearches = async () => {
   const confirmed = await waitForConfirmation(
-    __('Are you sure? Your recent searches will get lost.'),
+    __('Are you sure? Your recent searches will be lost.'),
     { fullscreen: true },
   )
 
@@ -150,14 +161,13 @@ const { resetQuickSearchInputField } = useQuickSearchInput()
           <nav :aria-labelledby="headerId">
             <ul class="m-0 flex flex-col gap-1 p-0">
               <li
-                v-for="searchQuery in recentSearches"
+                v-for="searchQuery in [...recentSearches].reverse()"
                 :key="searchQuery"
                 class="group/recent-search flex justify-center"
               >
                 <CommonLink
                   class="relative flex grow items-center gap-2 rounded-md px-2 py-3 text-neutral-400 hover:bg-blue-900 hover:no-underline!"
                   :link="`/search/${searchQuery}`"
-                  exact-active-class="bg-blue-800! w-full text-white!"
                   internal
                   @click="resetQuickSearchInputField"
                 >

app/frontend/apps/desktop/components/Search/QuickSearch/__tests__/QuickSearch.spec.ts

@@ -6,13 +6,13 @@ import renderComponent from '#tests/support/components/renderComponent.ts'
 import { mockUserCurrent } from '#tests/support/mock-userCurrent.ts'
 import { waitForNextTick } from '#tests/support/utils.ts'
 
+import { useRecentSearches } from '#shared/composables/useRecentSearches.ts'
 import {
   EnumTicketStateColorCode,
   type Organization,
 } from '#shared/graphql/types.ts'
 import { convertToGraphQLId } from '#shared/graphql/utils.ts'
 
-import { useRecentSearches } from '#desktop/composables/useRecentSearches.ts'
 import { mockUserCurrentRecentViewResetMutation } from '#desktop/entities/user/current/graphql/mutations/userCurrentRecentViewReset.mocks.ts'
 import { mockUserCurrentRecentViewListQuery } from '#desktop/entities/user/current/graphql/queries/userCurrentRecentViewList.mocks.ts'
 import { getUserCurrentRecentViewUpdatesSubscriptionHandler } from '#desktop/entities/user/current/graphql/subscriptions/userCurrentRecentViewUpdates.mocks.ts'

app/frontend/apps/desktop/components/Search/graphql/queries/detailSearch.api.ts

@@ -26,6 +26,10 @@ export const DetailSearchDocument = gql`
           id
           fullname
         }
+        owner {
+          id
+          fullname
+        }
         group {
           id
           name

app/frontend/apps/desktop/components/Search/graphql/queries/detailSearch.graphql

@@ -25,6 +25,10 @@ query detailSearch(
           id
           fullname
         }
+        owner {
+          id
+          fullname
+        }
         group {
           id
           name

app/frontend/apps/desktop/components/User/UserListTable.vue

@@ -61,6 +61,13 @@ const { goToItem, goToItemLinkColumn, loadMore, resort, storageKeyId } =
           dataType: 'input',
         },
       ]"
+      :attribute-extensions="{
+        organization_ids: {
+          headerPreferences: {
+            noSorting: true,
+          },
+        },
+      }"
       :items="items"
       :total-items="totalCount"
       :storage-key-id="storageKeyId"

app/frontend/apps/desktop/components/UserTaskbarTabs/Search/Search.vue

@@ -3,20 +3,25 @@
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 
+import type { UserTaskbarItemEntitySearch } from '#shared/graphql/types.ts'
+
 import { useUserTaskbarTabLink } from '#desktop/composables/useUserTaskbarTabLink.ts'
 
 import type { UserTaskbarTabEntityProps } from '../types.ts'
 
-const props = defineProps<UserTaskbarTabEntityProps>()
+const props =
+  defineProps<UserTaskbarTabEntityProps<UserTaskbarItemEntitySearch>>()
 
 const { tabLinkInstance, taskbarTabActive } = useUserTaskbarTabLink(
   toRef(props, 'taskbarTab'),
 )
 
-const currentTitle = computed(() => {
-  console.log('taskbar props', props)
-  return __('Extended Search')
-})
+const currentTitle = computed(
+  () =>
+    props.context?.query ||
+    props.taskbarTab.entity?.query ||
+    __('Extended Search'),
+)
 </script>
 
 <template>

app/frontend/apps/desktop/components/UserTaskbarTabs/plugins/search.ts

@@ -1,7 +1,10 @@
 // Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/
 
 import { TicketTaskbarTabAttributesFragmentDoc } from '#shared/entities/ticket/graphql/fragments/ticketTaskbarTabAttributes.api.ts'
-import { EnumTaskbarEntity } from '#shared/graphql/types.ts'
+import {
+  EnumTaskbarEntity,
+  type UserTaskbarItemEntitySearch,
+} from '#shared/graphql/types.ts'
 
 import type { UserTaskbarTabPlugin } from '#desktop/components/UserTaskbarTabs/types.ts'
 
@@ -15,16 +18,19 @@ export default <UserTaskbarTabPlugin>{
   entityType,
   entityDocument: TicketTaskbarTabAttributesFragmentDoc,
   buildEntityTabKey: () => entityType,
-  buildTaskbarTabParams: (entityInternalId: string) => {
-    return {
-      search: entityInternalId,
-    }
-  },
-  buildTaskbarTabLink: (entity) => {
-    console.log('search entity', entity)
-    // :TODO add search term and query for entity
-    return '/search'
-    // return `/search/${entity}`
+  buildTaskbarTabEntityId: () => undefined,
+  buildTaskbarTabParams: (route) => ({
+    query: route.params.searchTerm,
+    model: route.query.entity,
+  }),
+  buildTaskbarTabLink: (entity: UserTaskbarItemEntitySearch) => {
+    const { query, model } = entity
+
+    let url = '/search'
+    if (query) url += `/${query}`
+    if (model) url += `?entity=${model}`
+
+    return encodeURI(url)
   },
-  confirmTabRemove: true,
+  confirmTabRemove: false,
 }

app/frontend/apps/desktop/components/UserTaskbarTabs/plugins/ticket.ts

@@ -17,13 +17,9 @@ export default <UserTaskbarTabPlugin>{
   component: Ticket,
   entityType,
   entityDocument: TicketTaskbarTabAttributesFragmentDoc,
-  buildEntityTabKey: (entityInternalId: string) =>
-    `${entityType}-${entityInternalId}`,
-  buildTaskbarTabParams: (entityInternalId: string) => {
-    return {
-      ticket_id: entityInternalId,
-    }
-  },
+  buildEntityTabKey: (route) => `${entityType}-${route.params.internalId}`,
+  buildTaskbarTabEntityId: (route) => route.params.internalId,
+  buildTaskbarTabParams: (route) => ({ ticket_id: route.params.internalId }),
   buildTaskbarTabLink: (entity?: TicketType, entityKey?: string) => {
     if (!entity?.internalId) {
       if (!entityKey) return
@@ -32,4 +28,5 @@ export default <UserTaskbarTabPlugin>{
     return `/tickets/${entity.internalId}`
   },
   confirmTabRemove: true,
+  touchExistingTab: true,
 }