mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-05-24 02:02:23 -04:00
57 lines
2.7 KiB
HTML
57 lines
2.7 KiB
HTML
<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)">
|
|
<svg class="sidebaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#x"/>
|
|
</svg> <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">
|
|
<svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
|
|
<use xlink:href="assets/bootstrap-icons.svg#x"/>
|
|
</svg>
|
|
<a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
|
|
<svg class="sidebaricon-sm me-1" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#file-text"/>
|
|
</svg><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>
|
|
@if (hint) {
|
|
<small class="form-text text-muted">{{hint}}</small>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|