From 8159b7574ca1e390345b936c8c86d4bf25b14623 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 10 Dec 2022 17:02:02 -0800
Subject: [PATCH] Use accordion for permissions in object edit dialogs

---
 .../correspondent-edit-dialog.component.html    |  2 +-
 .../document-type-edit-dialog.component.html    |  2 +-
 .../storage-path-edit-dialog.component.html     |  2 +-
 .../tag-edit-dialog.component.html              |  2 +-
 .../permissions-form.component.html             | 17 ++++++++++++++++-
 .../permissions-form.component.ts               |  3 +++
 src-ui/src/styles.scss                          | 15 +++++++++++++++
 7 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
index f1a3ee59d..393ccd0a2 100644
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -12,7 +12,7 @@
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
 
     <div *ifOwner="object">
-      <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
     </div>
 
   </div>
diff --git a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
index cc0358875..404705e8e 100644
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -14,7 +14,7 @@
       </div>
 
       <div *ifOwner="object">
-        <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
       </div>
 
     </div>
diff --git a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
index 29f8b8cad..6d7cdbe90 100644
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@@ -17,7 +17,7 @@
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
     <div *ifOwner="object">
-      <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
     </div>
 
   </div>
diff --git a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
index b12c40ebd..17fe5e6be 100644
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -15,7 +15,7 @@
       <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
       <div *ifOwner="object">
-        <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
       </div>
 
     </div>
diff --git a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
index 56c9e4dfa..d7ae5ee7b 100644
--- a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
+++ b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
@@ -1,4 +1,18 @@
-<h5 i18n>Permissions</h5>
+<ng-container *ngIf="!accordion">
+  <h5 i18n>Permissions</h5>
+  <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+</ng-container>
+<ng-container *ngIf="accordion">
+  <ngb-accordion #acc="ngbAccordion" activeIds="">
+    <ngb-panel i18n-title title="Edit Permissions">
+      <ng-template ngbPanelContent>
+        <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+      </ng-template>
+    </ngb-panel>
+  </ngb-accordion>
+</ng-container>
+
+<ng-template #permissionsForm>
 <div [formGroup]="form">
   <div class="row">
     <div class="col-lg-3">
@@ -51,3 +65,4 @@
     </div>
   </div>
 </div>
+</ng-template>
diff --git a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
index 1c1df164c..728f83162 100644
--- a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
+++ b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
@@ -36,6 +36,9 @@ export class PermissionsFormComponent
   @Input()
   users: PaperlessUser[]
 
+  @Input()
+  accordion: boolean = false
+
   form = new FormGroup({
     owner: new FormControl(null),
     set_permissions: new FormGroup({
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index a9169f038..fdb8a05ac 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -604,3 +604,18 @@ a.badge {
 code {
   color: var(--pngx-body-color-accent)
 }
+
+.accordion {
+  --bs-accordion-btn-padding-x: 0.75rem;
+  --bs-accordion-btn-padding-y: 0.375rem;
+  --bs-accordion-btn-bg: var(--bs-light);
+  --bs-accordion-btn-color: var(--bs-primary);
+  --bs-accordion-color: var(--bs-body-color);
+  --bs-accordion-bg: var(--bs-light);
+  --bs-accordion-active-color: var(--bs-primary);
+  --bs-accordion-active-bg: var(--pngx-bg-alt);
+}
+
+.accordion-button::after {
+  filter: invert(0.5) saturate(0);
+}