From b7e2013589247637c8db6abbe8ac92b7e5d86a9c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 17 Dec 2022 20:26:24 -0800
Subject: [PATCH] visually disable edit fields for permissions

---
 .../common/input/select/select.component.html      |  2 +-
 .../common/input/select/select.component.scss      | 13 +++++++++++++
 .../common/input/tags/tags.component.html          |  2 +-
 .../common/input/tags/tags.component.scss          | 14 ++++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index fbe1e1018..aa005fb1f 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/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"
diff --git a/src-ui/src/app/components/common/input/select/select.component.scss b/src-ui/src/app/components/common/input/select/select.component.scss
index 8faec3bc0..3d5f37526 100644
--- a/src-ui/src/app/components/common/input/select/select.component.scss
+++ b/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;
+        }
+    }
+}
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index ad0a6868b..7d3615787 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/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">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.scss b/src-ui/src/app/components/common/input/tags/tags.component.scss
index 2eaaa4f6d..a1d88a3a9 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.scss
+++ b/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;
+      }
+  }
+}