Merge pull request #2839 from paperless-ngx/handle-private-objects

Fix: frontend handle "private" tags, doctypes, correspondents

src-ui/src/app/components/common/input/select/select.component.html

@@ -5,6 +5,7 @@
         [disabled]="disabled"
         [style.color]="textColor"
         [style.background]="backgroundColor"
+        [class.private]="isPrivate"
         [clearable]="allowNull"
         [items]="items"
         [addTag]="allowCreateNew && addItemRef"

src-ui/src/app/components/common/input/select/select.component.scss

@@ -12,3 +12,8 @@
         }
     }
 }
+
+::ng-deep .private .ng-value-container {
+    font-style: italic;
+    opacity: .75;
+}

src-ui/src/app/components/common/input/select/select.component.ts

@@ -26,8 +26,23 @@ export class SelectComponent extends AbstractInputComponent<number> {
     this.addItemRef = this.addItem.bind(this)
   }
 
+  _items: any[]
+
   @Input()
-  items: any[]
+  set items(items) {
+    if (this.value && items.find((i) => i.id === this.value) === undefined) {
+      items.push({
+        id: this.value,
+        name: $localize`Private`,
+        private: true,
+      })
+    }
+    this._items = items
+  }
+
+  get items(): any[] {
+    return this._items
+  }
 
   @Input()
   textColor: any
@@ -61,6 +76,10 @@ export class SelectComponent extends AbstractInputComponent<number> {
     return this.createNew.observers.length > 0
   }
 
+  get isPrivate(): boolean {
+    return this.items.find((i) => i.id === this.value)?.private
+  }
+
   getSuggestions() {
     if (this.suggestions && this.items) {
       return this.suggestions

src-ui/src/app/components/common/tag/tag.component.html

@@ -1,2 +1,9 @@
-<span *ngIf="!clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
-<a [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>
+<ng-container *ngIf="tag !== undefined; else privateTag" >
+    <span *ngIf="!clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
+    <a [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>
+</ng-container>
+
+<ng-template #privateTag>
+    <span *ngIf="!clickable" class="badge private" i18n>Private</span>
+    <a [title]="linkTitle" *ngIf="clickable" class="badge private" i18n>Private</a>
+</ng-template>

src-ui/src/app/components/common/tag/tag.component.scss

@@ -4,3 +4,10 @@ a {
     word-break: break-word;
     text-align: end;
 }
+
+.private {
+    background-color: #000000;
+    color: #ffffff;
+    opacity: .5;
+    font-style: italic;
+}