feat: reflect django permissions on UI

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -10,7 +10,7 @@
     </svg>
     <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
   </a>
-  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1">
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *ifPermissions='["documents.view_document"]'>
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
       <svg width="1em" height="1em" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#search"/>
@@ -39,7 +39,7 @@
           <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
           <div class="dropdown-divider"></div>
         </div>
-        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()">
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *ifPermissions='["documents.view_uisettings"]'>
           <svg class="sidebaricon me-2" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#gear"/>
           </svg><ng-container i18n>Settings</ng-container>
@@ -72,7 +72,7 @@
               </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
             </a>
           </li>
-          <li class="nav-item">
+          <li class="nav-item" *ifPermissions='["documents.view_document"]'>
             <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#files"/>
@@ -80,79 +80,82 @@
             </a>
           </li>
         </ul>
+        <div *ifPermissions='["documents.view_savedview"]'>
+          <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
+            <span i18n>Saved views</span>
+            <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+          </h6>
+          <ul class="nav flex-column mb-2">
+            <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
+              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <svg class="sidebaricon" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
+                </svg><span>&nbsp;{{view.name}}</span>
+              </a>
+            </li>
+          </ul>
+        </div>
 
-        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
-          <span i18n>Saved views</span>
-          <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
-            <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
-              </svg><span>&nbsp;{{view.name}}</span>
-            </a>
-          </li>
-        </ul>
-
-        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
-          <span i18n>Open documents</span>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item w-100" *ngFor='let d of openDocuments'>
-            <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-              </svg><span>&nbsp;{{d.title | documentTitle}}</span>
-              <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+        <div *ifPermissions='["documents.view_document"]'>
+          <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
+            <span i18n>Open documents</span>
+          </h6>
+          <ul class="nav flex-column mb-2">
+            <li class="nav-item w-100" *ngFor='let d of openDocuments'>
+              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <svg class="sidebaricon" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                </svg><span>&nbsp;{{d.title | documentTitle}}</span>
+                <span class="close" (click)="closeDocument(d); $event.preventDefault()">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+                    <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                  </svg>
+                </span>
+              </a>
+            </li>
+            <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
+              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <svg class="sidebaricon" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                </svg>
-              </span>
-            </a>
-          </li>
-          <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
-            <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
-            </a>
-          </li>
-        </ul>
+                </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+              </a>
+            </li>
+          </ul>
+      </div>
 
         <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
           <span i18n>Manage</span>
         </h6>
         <ul class="nav flex-column mb-2">
-          <li class="nav-item">
+          <li class="nav-item" *ifPermissions='["documents.view_correspondent"]'>
             <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#person"/>
               </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" tourAnchor="tour.tags">
+          <li class="nav-item" *ifPermissions='["documents.view_tag"]' tourAnchor="tour.tags">
             <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#tags"/>
               </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
             </a>
           </li>
-          <li class="nav-item">
+          <li class="nav-item" *ifPermissions='["documents.view_documenttype"]'>
             <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Document types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#hash"/>
               </svg><span>&nbsp;<ng-container i18n>Document types</ng-container></span>
             </a>
           </li>
-          <li class="nav-item">
+          <li class="nav-item" *ifPermissions='["documents.view_storagepath"]'>
             <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Storage paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#folder"/>
               </svg><span>&nbsp;<ng-container i18n>Storage paths</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" tourAnchor="tour.file-tasks">
+          <li class="nav-item" *ifPermissions='["documents.view_paperlesstask"]' tourAnchor="tour.file-tasks">
             <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
               <svg class="sidebaricon" fill="currentColor">
@@ -160,21 +163,21 @@
               </svg><span>&nbsp;<ng-container i18n>File Tasks<span *ngIf="tasksService.failedFileTasks.length > 0"><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span></ng-container></span>
             </a>
           </li>
-          <li class="nav-item">
+          <li class="nav-item" *ifPermissions='["documents.view_log"]'>
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
               </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" tourAnchor="tour.settings">
+          <li class="nav-item" *ifPermissions='["documents.view_uisettings"]' tourAnchor="tour.settings">
             <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#gear"/>
               </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" tourAnchor="tour.admin">
+          <li class="nav-item" *ifPermissions='["admin.view_logentry"]' tourAnchor="tour.admin">
             <a class="nav-link" href="admin/" ngbPopover="Admin" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#toggles"/>