visually disable edit fields for permissions

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

@@ -1,4 +1,4 @@
-<div class="mb-3 paperless-input-select">
+<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
   <label *ngIf="title" class="form-label" [for]="inputId">{{title}}</label>
     <div [class.input-group]="allowCreateNew">
       <ng-select name="inputId" [(ngModel)]="value"

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

@@ -1 +1,14 @@
 // styles for ng-select child are in styles.scss
+.paperless-input-select.disabled {
+    .input-group {
+        cursor: not-allowed;
+    }
+
+    ::ng-deep ng-select {
+        pointer-events: none;
+
+        .ng-select-container {
+            background-color: var(--pngx-bg-alt) !important;
+        }
+    }
+}

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

@@ -1,4 +1,4 @@
-<div class="mb-3 paperless-input-select paperless-input-tags">
+<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled">
   <label class="form-label" for="tags" i18n>Tags</label>
 
   <div class="input-group flex-nowrap">

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

@@ -10,3 +10,17 @@
 .tag-wrap-delete {
   cursor: pointer;
 }
+
+.paperless-input-select.disabled {
+  .input-group {
+      cursor: not-allowed;
+  }
+
+  ::ng-deep ng-select {
+      pointer-events: none;
+
+      .ng-select-container {
+          background-color: var(--pngx-bg-alt) !important;
+      }
+  }
+}