Merge pull request #3309 from paperless-ngx/feature-owner-filtering

Feature: owner filtering

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html

@@ -6,10 +6,10 @@
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
         <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.date)">
-          <div _ngcontent-hga-c166="" class="selected-icon me-1">
-            <svg *ngIf="relativeDate === rd.date" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
-              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
-            </svg>
+          <div class="selected-icon me-1">
+            <svg *ngIf="relativeDate === rd.date" fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+          </svg>
           </div>
           {{rd.name}}
         </button>
@@ -18,8 +18,8 @@
           <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
             <div i18n>After</div>
             <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
-              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              <svg fill="currentColor" class="buttonicon-sm">
+                <use xlink:href="assets/bootstrap-icons.svg#x"/>
               </svg>
               <small i18n>Clear</small>
             </a>
@@ -29,8 +29,8 @@
             <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                     maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
-                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+              <svg fill="currentColor" class="buttonicon-sm">
+                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
               </svg>
             </button>
           </div>
@@ -41,8 +41,8 @@
           <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
             <div i18n>Before</div>
             <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
-              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              <svg fill="currentColor" class="buttonicon-sm">
+                <use xlink:href="assets/bootstrap-icons.svg#x"/>
               </svg>
               <small i18n>Clear</small>
             </a>
@@ -52,8 +52,8 @@
             <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                     maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
-                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+              <svg fill="currentColor" class="buttonicon-sm">
+                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
               </svg>
             </button>
           </div>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html

@@ -1,18 +1,18 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
   <div class="selected-icon me-1">
     <ng-container *ngIf="isChecked()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
-        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+      <svg fill="currentColor" class="buttonicon-sm bi-check">
+        <use xlink:href="assets/bootstrap-icons.svg#check"/>
       </svg>
     </ng-container>
     <ng-container *ngIf="isPartiallyChecked()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
-        <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+      <svg fill="currentColor" class="buttonicon-sm bi-dash">
+        <use xlink:href="assets/bootstrap-icons.svg#dash"/>
       </svg>
     </ng-container>
     <ng-container *ngIf="isExcluded()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
-        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+      <svg fill="currentColor" class="buttonicon-sm bi-x">
+        <use xlink:href="assets/bootstrap-icons.svg#x"/>
       </svg>
     </ng-container>
   </div>

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html

@@ -0,0 +1,82 @@
+<div class="btn-group w-100" ngbDropdown role="group">
+    <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'">
+        <svg class="toolbaricon" fill="currentColor">
+           <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
+        </svg>
+        <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+      <app-clearable-badge [selected]="isActive" (cleared)="reset()"></app-clearable-badge><span class="visually-hidden">selected</span>
+    </button>
+    <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+        <div class="list-group list-group-flush">
+            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
+                <div class="selected-icon me-1">
+                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE" fill="currentColor" class="buttonicon-sm">
+                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                    </svg>
+                </div>
+                <div class="me-1">
+                    <small i18n>All</small>
+                </div>
+            </button>
+            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
+                <div class="selected-icon me-1">
+                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.SELF" fill="currentColor" class="buttonicon-sm">
+                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                    </svg>
+                </div>
+                <div class="me-1">
+                    <small i18n>My documents</small>
+                </div>
+            </button>
+            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
+                <div class="selected-icon me-1">
+                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" fill="currentColor" class="buttonicon-sm">
+                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                    </svg>
+                </div>
+                <div class="me-1">
+                    <small i18n>Shared with me</small>
+                </div>
+            </button>
+            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
+                <div class="selected-icon me-1">
+                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.UNOWNED" fill="currentColor" class="buttonicon-sm">
+                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                    </svg>
+                </div>
+                <div class="me-1">
+                    <small i18n>Unowned</small>
+                </div>
+            </button>
+            <button *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
+                <div class="selected-icon me-1">
+                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.OTHERS" fill="currentColor" class="buttonicon-sm">
+                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                    </svg>
+                </div>
+                <div class="me-1 w-100">
+                    <ng-select
+                        name="user"
+                        class="user-select small"
+                        [(ngModel)]="selectionModel.includeUsers"
+                        [disabled]="disabled"
+                        [clearable]="false"
+                        [items]="users"
+                        bindLabel="username"
+                        multiple="true"
+                        bindValue="id"
+                        placeholder="Users"
+                        i18n-placeholder
+                        (change)="onUserSelect()">
+                    </ng-select>
+                </div>
+            </button>
+            <div *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
+                <div class="form-check form-switch w-100">
+                  <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (change)="onChange()" [disabled]="disabled">
+                  <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.scss

@@ -0,0 +1,8 @@
+.user-select {
+  min-width: 15rem;
+}
+
+.selected-icon {
+    min-width: 1em;
+    min-height: 1em;
+}

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -0,0 +1,132 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { first } from 'rxjs'
+import { PaperlessUser } from 'src/app/data/paperless-user'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+
+export class PermissionsSelectionModel {
+  ownerFilter: OwnerFilterType
+  hideUnowned: boolean
+  userID: number
+  includeUsers: number[]
+  excludeUsers: number[]
+
+  clear() {
+    this.ownerFilter = OwnerFilterType.NONE
+    this.userID = null
+    this.hideUnowned = false
+    this.includeUsers = []
+    this.excludeUsers = []
+  }
+}
+
+export enum OwnerFilterType {
+  NONE = 0,
+  SELF = 1,
+  NOT_SELF = 2,
+  OTHERS = 3,
+  UNOWNED = 4,
+}
+
+@Component({
+  selector: 'app-permissions-filter-dropdown',
+  templateUrl: './permissions-filter-dropdown.component.html',
+  styleUrls: ['./permissions-filter-dropdown.component.scss'],
+})
+export class PermissionsFilterDropdownComponent {
+  public PermissionAction = PermissionAction
+  public PermissionType = PermissionType
+  public OwnerFilterType = OwnerFilterType
+
+  @Input()
+  title: string
+
+  @Input()
+  disabled = false
+
+  @Input()
+  selectionModel: PermissionsSelectionModel
+
+  @Output()
+  ownerFilterSet = new EventEmitter<PermissionsSelectionModel>()
+
+  users: PaperlessUser[]
+
+  hideUnowned: boolean
+
+  get isActive(): boolean {
+    return (
+      this.selectionModel.ownerFilter !== OwnerFilterType.NONE ||
+      this.selectionModel.hideUnowned
+    )
+  }
+
+  constructor(
+    permissionsService: PermissionsService,
+    userService: UserService,
+    private settingsService: SettingsService
+  ) {
+    if (
+      permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.User
+      )
+    ) {
+      userService
+        .listAll()
+        .pipe(first())
+        .subscribe({
+          next: (result) => (this.users = result.results),
+        })
+    }
+  }
+
+  reset() {
+    this.selectionModel.clear()
+    this.onChange()
+  }
+
+  setFilter(type: OwnerFilterType) {
+    this.selectionModel.ownerFilter = type
+    if (this.selectionModel.ownerFilter === OwnerFilterType.SELF) {
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.userID = this.settingsService.currentUser.id
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = [this.settingsService.currentUser.id]
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NONE) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
+    }
+    this.onChange()
+  }
+
+  onChange() {
+    this.ownerFilterSet.emit(this.selectionModel)
+  }
+
+  onUserSelect() {
+    if (this.selectionModel.includeUsers?.length) {
+      this.selectionModel.ownerFilter = OwnerFilterType.OTHERS
+    } else {
+      this.selectionModel.ownerFilter = OwnerFilterType.NONE
+    }
+    this.onChange()
+  }
+}