Feature: Paperless AI (#10319)

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.html

@@ -0,0 +1,49 @@
+<div class="btn-group">
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="loading || (suggestions && !aiEnabled)">
+    @if (loading) {
+      <div class="spinner-border spinner-border-sm" role="status"></div>
+    } @else {
+      <i-bs width="1.2em" height="1.2em" name="stars"></i-bs>
+    }
+    <span class="d-none d-lg-inline ps-1" i18n>Suggest</span>
+    @if (totalSuggestions > 0) {
+      <span class="badge bg-primary ms-2">{{ totalSuggestions }}</span>
+    }
+  </button>
+
+  @if (aiEnabled) {
+    <div class="btn-group" ngbDropdown #dropdown="ngbDropdown" [popperOptions]="popperOptions">
+      <button type="button" class="btn btn-sm btn-outline-primary" ngbDropdownToggle [disabled]="loading || !suggestions" aria-expanded="false" aria-controls="suggestionsDropdown" aria-label="Suggestions dropdown">
+        <span class="visually-hidden" i18n>Show suggestions</span>
+      </button>
+
+      <div ngbDropdownMenu aria-labelledby="suggestionsDropdown" class="shadow suggestions-dropdown">
+        <div class="list-group list-group-flush small pb-0">
+          @if (!suggestions?.suggested_tags && !suggestions?.suggested_document_types && !suggestions?.suggested_correspondents) {
+            <div class="list-group-item text-muted fst-italic">
+              <small class="text-muted small fst-italic" i18n>No novel suggestions</small>
+            </div>
+          }
+          @if (suggestions?.suggested_tags.length > 0) {
+            <small class="list-group-item text-uppercase text-muted small">Tags</small>
+            @for (tag of suggestions.suggested_tags; track tag) {
+              <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addTag.emit(tag)" i18n>{{ tag }}</button>
+            }
+          }
+          @if (suggestions?.suggested_document_types.length > 0) {
+            <div class="list-group-item text-uppercase text-muted small">Document Types</div>
+            @for (type of suggestions.suggested_document_types; track type) {
+              <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addDocumentType.emit(type)" i18n>{{ type }}</button>
+            }
+          }
+          @if (suggestions?.suggested_correspondents.length > 0) {
+            <div class="list-group-item text-uppercase text-muted small">Correspondents</div>
+            @for (correspondent of suggestions.suggested_correspondents; track correspondent) {
+              <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addCorrespondent.emit(correspondent)" i18n>{{ correspondent }}</button>
+            }
+          }
+        </div>
+      </div>
+    </div>
+  }
+</div>

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.scss

@@ -0,0 +1,3 @@
+.suggestions-dropdown {
+  min-width: 250px;
+}

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SuggestionsDropdownComponent } from './suggestions-dropdown.component'
+
+describe('SuggestionsDropdownComponent', () => {
+  let component: SuggestionsDropdownComponent
+  let fixture: ComponentFixture<SuggestionsDropdownComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgbDropdownModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        SuggestionsDropdownComponent,
+      ],
+      providers: [],
+    })
+    fixture = TestBed.createComponent(SuggestionsDropdownComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should calculate totalSuggestions', () => {
+    component.suggestions = {
+      suggested_correspondents: ['John Doe'],
+      suggested_tags: ['Tag1', 'Tag2'],
+      suggested_document_types: ['Type1'],
+    }
+    expect(component.totalSuggestions).toBe(4)
+  })
+
+  it('should emit getSuggestions when clickSuggest is called and suggestions are null', () => {
+    jest.spyOn(component.getSuggestions, 'emit')
+    component.suggestions = null
+    component.clickSuggest()
+    expect(component.getSuggestions.emit).toHaveBeenCalled()
+  })
+
+  it('should toggle dropdown when clickSuggest is called and suggestions are not null', () => {
+    component.aiEnabled = true
+    fixture.detectChanges()
+    component.suggestions = {
+      suggested_correspondents: [],
+      suggested_tags: [],
+      suggested_document_types: [],
+    }
+    component.clickSuggest()
+    expect(component.dropdown.open).toBeTruthy()
+  })
+})

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.ts

@@ -0,0 +1,64 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { DocumentSuggestions } from 'src/app/data/document-suggestions'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+
+@Component({
+  selector: 'pngx-suggestions-dropdown',
+  imports: [NgbDropdownModule, NgxBootstrapIconsModule],
+  templateUrl: './suggestions-dropdown.component.html',
+  styleUrl: './suggestions-dropdown.component.scss',
+})
+export class SuggestionsDropdownComponent {
+  public popperOptions = pngxPopperOptions
+
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  @Input()
+  suggestions: DocumentSuggestions = null
+
+  @Input()
+  aiEnabled: boolean = false
+
+  @Input()
+  loading: boolean = false
+
+  @Input()
+  disabled: boolean = false
+
+  @Output()
+  getSuggestions: EventEmitter<SuggestionsDropdownComponent> =
+    new EventEmitter()
+
+  @Output()
+  addTag: EventEmitter<string> = new EventEmitter()
+
+  @Output()
+  addDocumentType: EventEmitter<string> = new EventEmitter()
+
+  @Output()
+  addCorrespondent: EventEmitter<string> = new EventEmitter()
+
+  public clickSuggest(): void {
+    if (!this.suggestions) {
+      this.getSuggestions.emit(this)
+    } else {
+      this.dropdown?.toggle()
+    }
+  }
+
+  get totalSuggestions(): number {
+    return (
+      this.suggestions?.suggested_correspondents?.length +
+        this.suggestions?.suggested_tags?.length +
+        this.suggestions?.suggested_document_types?.length || 0
+    )
+  }
+}