From b3c60b383b084ed53e08d131b36560770fe03c7e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 8 Sep 2024 17:46:24 -0700
Subject: [PATCH] Slightly better embedded doc link element

---
 ...ustom-fields-query-dropdown.component.html |   3 +-
 ...ustom-fields-query-dropdown.component.scss |  15 +++
 .../document-link.component.html              | 102 ++++++++++--------
 .../document-link/document-link.component.ts  |   3 +
 4 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index fc0fae824..578955d96 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -79,8 +79,7 @@
         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
       }
       @case (CustomFieldQueryOperator.Contains) {
-        <!-- TODO: needs visual work -->
-        <pngx-input-document-link [(ngModel)]="atom.value" [horizontal]="true"></pngx-input-document-link>
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select" placeholder="Search docs" [minimal]="true"></pngx-input-document-link>
       }
       @default {
         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
index 14056474b..3995ffc5e 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
@@ -15,3 +15,18 @@
   min-width: 35%;
   font-size: 14px;
 }
+
+::ng-deep .doc-link-select {
+  padding-top: 0 !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+
+  .ng-select-container {
+    border: none !important;
+    min-height: auto !important;
+  }
+  .ng-select {
+    max-width: 200px;
+    min-width: 140px;
+  }
+}
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.html b/src-ui/src/app/components/common/input/document-link/document-link.component.html
index a8ecce4e6..94b6033b4 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@@ -1,50 +1,58 @@
-<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
-  <div class="row">
-    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      @if (title) {
-        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      }
-      @if (removable) {
-        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
-        </button>
-      }
-    </div>
-    <div [class.col-md-9]="horizontal">
-      <div>
-        <ng-select name="inputId" [(ngModel)]="selectedDocuments"
-          [disabled]="disabled"
-          [items]="foundDocuments$ | async"
-          placeholder="Search for documents"
-          [notFoundText]="notFoundText"
-          [multiple]="true"
-          bindValue="id"
-          [compareWith]="compareDocuments"
-          [trackByFn]="trackByFn"
-          [minTermLength]="2"
-          [loading]="loading"
-          [typeahead]="documentsInput$"
-          (change)="onChange(selectedDocuments)">
-          <ng-template ng-label-tmp let-document="item">
-            <div class="d-flex align-items-center">
-              <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
-              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-                <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
-              </a>
-            </div>
-          </ng-template>
-          <ng-template ng-loadingspinner-tmp>
-            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-            <div class="visually-hidden" i18n>Loading...</div>
-          </ng-template>
-          <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
-            <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
-          </ng-template>
-        </ng-select>
+@if (minimal) {
+  <ng-container *ngTemplateOutlet="select"></ng-container>
+} @else {
+  <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
+    <div class="row">
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        @if (title) {
+          <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        }
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
+      </div>
+      <div [class.col-md-9]="horizontal">
+        <ng-container *ngTemplateOutlet="select"></ng-container>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
       </div>
-      @if (hint) {
-        <small class="form-text text-muted">{{hint}}</small>
-      }
     </div>
   </div>
-</div>
+}
+
+<ng-template #select>
+  <div class="doc-link-select">
+    <ng-select name="inputId" [(ngModel)]="selectedDocuments"
+      [disabled]="disabled"
+      [items]="foundDocuments$ | async"
+      placeholder="Search for documents"
+      [notFoundText]="notFoundText"
+      [multiple]="true"
+      bindValue="id"
+      [compareWith]="compareDocuments"
+      [trackByFn]="trackByFn"
+      [minTermLength]="2"
+      [loading]="loading"
+      [typeahead]="documentsInput$"
+      (change)="onChange(selectedDocuments)">
+      <ng-template ng-label-tmp let-document="item">
+        <div class="d-flex align-items-center">
+          <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+          <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
+            <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
+          </a>
+        </div>
+      </ng-template>
+      <ng-template ng-loadingspinner-tmp>
+        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+        <div class="visually-hidden" i18n>Loading...</div>
+      </ng-template>
+      <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+        <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+      </ng-template>
+    </ng-select>
+  </div>
+</ng-template>
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.ts b/src-ui/src/app/components/common/input/document-link/document-link.component.ts
index 83a6a742e..0e06da34b 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.ts
@@ -46,6 +46,9 @@ export class DocumentLinkComponent
   @Input()
   parentDocumentID: number
 
+  @Input()
+  minimal: boolean = false
+
   constructor(private documentsService: DocumentService) {
     super()
   }