Messing with a suggest button

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html

@@ -1,7 +1,7 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions" placement="bottom-end">
-    <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
+    <button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
       <i-bs name="ui-radios"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
+      <div class="d-none d-lg-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
         <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -72,16 +72,6 @@
     </div>
   </div>
 
-  <pngx-custom-fields-dropdown
-    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
-    [documentId]="documentId"
-    [disabled]="!userCanEdit"
-    [existingFields]="document?.custom_fields"
-    (created)="refreshCustomFields()"
-    (added)="addField($event)">
-  </pngx-custom-fields-dropdown>
-
-
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle>
       <i-bs name="send"></i-bs>
@@ -102,7 +92,7 @@
 </pngx-page-header>
 
 <div class="row">
-  <div class="col-md-6 col-xl-4 mb-4">
+  <div class="col-md-6 col-xl-5 mb-4">
 
     <form [formGroup]='documentForm' (ngSubmit)="save()">
 
@@ -119,6 +109,30 @@
           </button>
         </div>
 
+        <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+          <div class="btn-group pb-3 ms-auto">
+            <button type="button" class="btn btn-sm btn-outline-primary" (click)="getSuggestions()" [disabled]="!userCanEdit || suggestions || suggestionsLoading" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+              @if (suggestionsLoading) {
+                <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>
+            </button>
+          </div>
+
+          <div class="btn-group pb-3 ms-2">
+            <pngx-custom-fields-dropdown
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
+              [documentId]="documentId"
+              [disabled]="!userCanEdit"
+              [existingFields]="document?.custom_fields"
+              (created)="refreshCustomFields()"
+              (added)="addField($event)">
+            </pngx-custom-fields-dropdown>
+          </div>
+        </ng-container>
+
         <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
       </div>
 
@@ -351,14 +365,14 @@
     </form>
   </div>
 
-  <div class="col-md-6 col-xl-8 mb-3 d-none d-md-block position-relative" #pdfPreview>
+  <div class="col-md-6 col-xl-7 mb-3 d-none d-md-block position-relative" #pdfPreview>
     <ng-container *ngTemplateOutlet="previewContent"></ng-container>
   </div>
 
 </div>
 
 <ng-template #saveButtons>
-  <div class="btn-group pb-3 ms-auto">
+  <div class="btn-group pb-3 ms-4">
     <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
       <button type="submit" class="order-3 btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
       @if (hasNext()) {

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -993,7 +993,7 @@ describe('DocumentDetailComponent', () => {
     expect(component.document.custom_fields).toHaveLength(initialLength - 1)
     expect(component.customFieldFormFields).toHaveLength(initialLength - 1)
     expect(
-      fixture.debugElement.query(By.css('form')).nativeElement.textContent
+      fixture.debugElement.query(By.css('form ul')).nativeElement.textContent
     ).not.toContain('Field 1')
     const updateSpy = jest.spyOn(documentService, 'update')
     component.save(true)

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -191,6 +191,7 @@ export class DocumentDetailComponent
   document: Document
   metadata: DocumentMetadata
   suggestions: DocumentSuggestions
+  suggestionsLoading: boolean = false
   users: User[]
 
   title: string
@@ -650,25 +651,7 @@ export class DocumentDetailComponent
       this.tagService.getCachedMany(doc.tags).subscribe((tags) => {
         // only show suggestions if document has inbox tags
         if (tags.some((tag) => tag.is_inbox_tag)) {
-          this.documentsService
-            .getSuggestions(doc.id)
-            .pipe(
-              first(),
-              takeUntil(this.unsubscribeNotifier),
-              takeUntil(this.docChangeNotifier)
-            )
-            .subscribe({
-              next: (result) => {
-                this.suggestions = result
-              },
-              error: (error) => {
-                this.suggestions = null
-                this.toastService.showError(
-                  $localize`Error retrieving suggestions.`,
-                  error
-                )
-              },
-            })
+          this.getSuggestions()
         }
       })
     }
@@ -687,6 +670,31 @@ export class DocumentDetailComponent
     return this.documentForm.get('custom_fields') as FormArray
   }
 
+  getSuggestions() {
+    this.suggestionsLoading = true
+    this.documentsService
+      .getSuggestions(this.documentId)
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (result) => {
+          this.suggestions = result
+          this.suggestionsLoading = false
+        },
+        error: (error) => {
+          this.suggestions = null
+          this.suggestionsLoading = false
+          this.toastService.showError(
+            $localize`Error retrieving suggestions.`,
+            error
+          )
+        },
+      })
+  }
+
   createDocumentType(newName: string) {
     var modal = this.modalService.open(DocumentTypeEditDialogComponent, {
       backdrop: 'static',

src-ui/src/main.ts

@@ -118,6 +118,7 @@ import {
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
+  stars,
   tag,
   tagFill,
   tags,
@@ -324,6 +325,7 @@ const icons = {
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
+  stars,
   tagFill,
   tag,
   tags,