Enhancement: global search tweaks (#6674)

src-ui/src/app/components/app-frame/global-search/global-search.component.ts

@@ -41,6 +41,7 @@ import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
 import { HotKeyService } from 'src/app/services/hot-key.service'
+import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
 
 @Component({
   selector: 'pngx-global-search',
@@ -87,7 +88,7 @@ export class GlobalSearchComponent implements OnInit {
       })
   }
 
-  ngOnInit() {
+  public ngOnInit() {
     this.hotkeyService
       .addShortcut({ keys: '/', description: $localize`Global search` })
       .subscribe(() => {
@@ -104,17 +105,22 @@ export class GlobalSearchComponent implements OnInit {
     })
   }
 
-  public primaryAction(type: string, object: ObjectWithId) {
+  public primaryAction(
+    type: string,
+    object: ObjectWithId,
+    event: PointerEvent = null
+  ) {
+    const newWindow = event?.metaKey || event?.ctrlKey
     this.reset(true)
     let filterRuleType: number
     let editDialogComponent: any
     let size: string = 'md'
     switch (type) {
       case DataType.Document:
-        this.router.navigate(['/documents', object.id])
+        this.navigateOrOpenInNewWindow(['/documents', object.id], newWindow)
         return
       case DataType.SavedView:
-        this.router.navigate(['/view', object.id])
+        this.navigateOrOpenInNewWindow(['/view', object.id], newWindow)
         return
       case DataType.Correspondent:
         filterRuleType = FILTER_HAS_CORRESPONDENT_ANY
@@ -154,9 +160,10 @@ export class GlobalSearchComponent implements OnInit {
     }
 
     if (filterRuleType) {
-      this.documentListViewService.quickFilter([
+      let params = queryParamsFromFilterRules([
         { rule_type: filterRuleType, value: object.id.toString() },
       ])
+      this.navigateOrOpenInNewWindow(['/documents', params], newWindow)
     } else if (editDialogComponent) {
       const modalRef: NgbModalRef = this.modalService.open(
         editDialogComponent,
@@ -213,6 +220,7 @@ export class GlobalSearchComponent implements OnInit {
 
   private reset(close: boolean = false) {
     this.queryDebounce.next(null)
+    this.query = null
     this.searchResults = null
     this.currentItemIndex = -1
     if (close) {
@@ -233,7 +241,7 @@ export class GlobalSearchComponent implements OnInit {
     item.nativeElement.focus()
   }
 
-  onItemHover(event: MouseEvent) {
+  public onItemHover(event: MouseEvent) {
     const item: ElementRef = this.resultItems
       .toArray()
       .find((item) => item.nativeElement === event.currentTarget)
@@ -241,7 +249,7 @@ export class GlobalSearchComponent implements OnInit {
     this.setCurrentItem()
   }
 
-  onButtonHover(event: MouseEvent) {
+  public onButtonHover(event: MouseEvent) {
     ;(event.currentTarget as HTMLElement).focus()
   }
 
@@ -262,19 +270,14 @@ export class GlobalSearchComponent implements OnInit {
       event.preventDefault()
       this.currentItemIndex = this.searchResults.total - 1
       this.setCurrentItem()
-    } else if (
-      event.key === 'Enter' &&
-      this.searchResults?.total === 1 &&
-      this.resultsDropdown.isOpen()
-    ) {
-      this.primaryButtons.first.nativeElement.click()
-      this.searchInput.nativeElement.blur()
-    } else if (
-      event.key === 'Enter' &&
-      this.searchResults?.total &&
-      !this.resultsDropdown.isOpen()
-    ) {
-      this.resultsDropdown.open()
+    } else if (event.key === 'Enter') {
+      if (this.searchResults?.total === 1 && this.resultsDropdown.isOpen()) {
+        this.primaryButtons.first.nativeElement.click()
+        this.searchInput.nativeElement.blur()
+      } else if (this.query?.length) {
+        this.runAdvanedSearch()
+        this.reset(true)
+      }
     } else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
       if (this.query?.length) {
         this.reset(true)
@@ -284,7 +287,7 @@ export class GlobalSearchComponent implements OnInit {
     }
   }
 
-  dropdownKeyDown(event: KeyboardEvent) {
+  public dropdownKeyDown(event: KeyboardEvent) {
     if (
       this.searchResults?.total &&
       this.resultsDropdown.isOpen() &&
@@ -327,14 +330,9 @@ export class GlobalSearchComponent implements OnInit {
     }
   }
 
-  onButtonKeyDown(event: KeyboardEvent) {
-    // prevents ngBootstrap issue with keydown events
-    if (
-      !['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Escape'].includes(
-        event.key
-      )
-    ) {
-      event.stopImmediatePropagation()
+  public onButtonKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.target.dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
     }
   }
 
@@ -373,10 +371,19 @@ export class GlobalSearchComponent implements OnInit {
     )
   }
 
-  runAdvanedSearch() {
+  public runAdvanedSearch() {
     this.documentListViewService.quickFilter([
       { rule_type: FILTER_FULLTEXT_QUERY, value: this.query },
     ])
     this.reset(true)
   }
+
+  private navigateOrOpenInNewWindow(commands: any, newWindow: boolean = false) {
+    if (newWindow) {
+      const url = this.router.serializeUrl(this.router.createUrlTree(commands))
+      window.open(url, '_blank')
+    } else {
+      this.router.navigate(commands)
+    }
+  }
 }