From 530dcf490a059c841e4beb28b50c1d9afafa9cd1 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Tue, 16 Jul 2019 10:48:48 +0200
Subject: [PATCH] Enhance subcategories

- show parents over children in motion list, motion detail and PDF
- indent children of categories in the filter list
---
 .../ui-services/base-filter-list.service.ts   | 14 +++++++--
 .../icon-container.component.scss             |  1 +
 .../filter-menu/filter-menu.component.html    |  2 +-
 .../filter-menu/filter-menu.component.scss    |  4 +++
 .../app/site/motions/models/view-category.ts  | 11 +++++++
 .../motion-detail.component.html              | 16 +++++++---
 .../motion-list/motion-list.component.html    | 31 +------------------
 .../motions/services/motion-pdf.service.ts    | 10 +++++-
 client/src/styles.scss                        |  4 +++
 9 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/client/src/app/core/ui-services/base-filter-list.service.ts b/client/src/app/core/ui-services/base-filter-list.service.ts
index b9333dc07..e467bf520 100644
--- a/client/src/app/core/ui-services/base-filter-list.service.ts
+++ b/client/src/app/core/ui-services/base-filter-list.service.ts
@@ -36,6 +36,7 @@ export interface OsFilterOption {
     label: string;
     condition: OsFilterOptionCondition;
     isActive?: boolean;
+    isChild?: boolean;
 }
 
 /**
@@ -46,6 +47,14 @@ export interface OsFilterIndicator {
     option: OsFilterOption;
 }
 
+/**
+ * Extends the BaseViewModel with a parent
+ * Required to represent parent-child relationships in the filter
+ */
+interface HierarchyModel extends BaseViewModel {
+    parent: BaseViewModel;
+}
+
 /**
  * Define the type of a filter condition
  */
@@ -266,10 +275,11 @@ export abstract class BaseFilterListService<V extends BaseViewModel> {
 
                 filterProperties = viewModel
                     .filter(model => (excludeIds && excludeIds.length ? !excludeIds.includes(model.id) : true))
-                    .map(model => {
+                    .map((model: HierarchyModel) => {
                         return {
                             condition: model.id,
-                            label: model.getTitle()
+                            label: model.getTitle(),
+                            isChild: !!model.parent
                         };
                     });
 
diff --git a/client/src/app/shared/components/icon-container/icon-container.component.scss b/client/src/app/shared/components/icon-container/icon-container.component.scss
index d52dfe256..1b350f70a 100644
--- a/client/src/app/shared/components/icon-container/icon-container.component.scss
+++ b/client/src/app/shared/components/icon-container/icon-container.component.scss
@@ -37,5 +37,6 @@ os-icon-container {
         margin: auto 5px;
         text-overflow: ellipsis;
         overflow: hidden;
+        white-space: pre-line;
     }
 }
diff --git a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.html b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.html
index 0bb9ef514..b0b42612d 100644
--- a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.html
+++ b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.html
@@ -14,7 +14,7 @@
                     <div *ngFor="let option of filter.options">
                         <div *ngIf="isFilter(option)">
                             <mat-checkbox
-                                class="filter-title"
+                                [ngClass]="option.isChild ? 'filter-child' : ''"
                                 [checked]="option.isActive"
                                 (change)="service.toggleFilterOption(filter.property, option)"
                             >
diff --git a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
index 6f3d99f0b..191b24a66 100644
--- a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
+++ b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
@@ -28,6 +28,10 @@ mat-divider {
     font-style: italic;
 }
 
+.filter-child {
+    margin-left: 20px;
+}
+
 // adds breaks to mat-checkboxes with long labels
 ::ng-deep .mat-checkbox-layout {
     white-space: normal !important;
diff --git a/client/src/app/site/motions/models/view-category.ts b/client/src/app/site/motions/models/view-category.ts
index bb05bd70a..9ba876c60 100644
--- a/client/src/app/site/motions/models/view-category.ts
+++ b/client/src/app/site/motions/models/view-category.ts
@@ -64,6 +64,17 @@ export class ViewCategory extends BaseViewModel<Category> implements CategoryTit
         return name;
     }
 
+    /**
+     * Shows the (direct) parent above the current category
+     */
+    public get nameWithParentAbove(): string {
+        if (this.parent) {
+            return `${this.parent.toString()}\n${this.toString()}`;
+        } else {
+            return this.toString();
+        }
+    }
+
     public constructor(category: Category, parent?: ViewCategory) {
         super(Category.COLLECTIONSTRING, category);
         this._parent = parent;
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
index 85a4b2cb8..3ea4bdd03 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@@ -152,9 +152,7 @@
 
         <!-- Sequential number -->
         <span class="main-nav-color title-font">
-            <span *ngIf="showSequential">
-                <span translate>Sequential number</span>&nbsp;{{ motion.id }}
-            </span>
+            <span *ngIf="showSequential"> <span translate>Sequential number</span>&nbsp;{{ motion.id }} </span>
             <span *ngIf="showSequential && motion.parent_id">&#xb7;&nbsp;</span>
             <span *ngIf="motion.parent_id">
                 <span>
@@ -345,10 +343,18 @@
             <mat-basic-chip
                 *ngIf="perms.isAllowed('change_metadata', motion)"
                 [matMenuTriggerFor]="categoryMenu"
-                class="grey"
+                class="grey multi-line-chip"
                 disableRipple
             >
-                {{ motion.category ? motion.category.prefixedNameWithParents : '–' }}
+                <div *ngIf="motion.category">
+                    <div *ngIf="motion.category.parent">
+                        {{ motion.category.parent }}
+                    </div>
+                    <span *ngIf="motion.category.parent">{{ 'Subcategory' | translate }}:</span>
+                    {{ motion.category }}
+                </div>
+
+                <span *ngIf="!motion.category">-</span>
             </mat-basic-chip>
             <mat-basic-chip
                 *ngIf="!perms.isAllowed('change_metadata', motion) && motion.category"
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
index 52555a95b..d11b7497c 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
@@ -104,35 +104,6 @@
                     </span>
                 </div>
 
-                <!-- state column -->
-                <ng-container matColumnDef="state">
-                    <mat-header-cell *matHeaderCellDef mat-sort-header>State</mat-header-cell>
-                    <mat-cell (click)="openEditInfo(motion, $event)" *matCellDef="let motion">
-                        <div class="fill">
-                            <div class="innerTable state-column">
-                                <div class="ellipsis-overflow" *ngIf="motion.category">
-                                    <os-icon-container icon="device_hub">
-                                        {{ motion.category.prefixedNameWithParents }}
-                                    </os-icon-container>
-                                </div>
-                                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.motion_block">
-                                    <os-icon-container icon="widgets">
-                                        {{ motion.motion_block.title }}
-                                    </os-icon-container>
-                                </div>
-                                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.tags && motion.tags.length">
-                                    <os-icon-container icon="local_offer">
-                                        <span *ngFor="let tag of motion.tags; let last = last">
-                                            {{ tag.getTitle() }}
-                                            <span *ngIf="!last">,&nbsp;</span>
-                                        </span>
-                                    </os-icon-container>
-                                </div>
-                            </div>
-                        </div>
-                    </mat-cell>
-                </ng-container>
-
                 <!-- Workflow state -->
                 <div class="ellipsis-overflow white">
                     <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
@@ -163,7 +134,7 @@
                 <!-- Category -->
                 <div class="ellipsis-overflow" *ngIf="motion.category">
                     <os-icon-container icon="device_hub">
-                        {{ motion.category.prefixedNameWithParents }}
+                        {{ motion.category.nameWithParentAbove }}
                     </os-icon-container>
                 </div>
 
diff --git a/client/src/app/site/motions/services/motion-pdf.service.ts b/client/src/app/site/motions/services/motion-pdf.service.ts
index 66ccd00f6..ba547970b 100644
--- a/client/src/app/site/motions/services/motion-pdf.service.ts
+++ b/client/src/app/site/motions/services/motion-pdf.service.ts
@@ -310,13 +310,21 @@ export class MotionPdfService {
 
         // category
         if (motion.category && (!infoToExport || infoToExport.includes('category'))) {
+            let categoryText = '';
+            if (!!motion.category.parent) {
+                categoryText = `${motion.category.parent.toString()}\n${this.translate.instant(
+                    'Subcategory'
+                )}: ${motion.category.toString()}`;
+            } else {
+                categoryText = motion.category.toString();
+            }
             metaTableBody.push([
                 {
                     text: `${this.translate.instant('Category')}:`,
                     style: 'boldText'
                 },
                 {
-                    text: motion.category.prefixedNameWithParents
+                    text: categoryText
                 }
             ]);
         }
diff --git a/client/src/styles.scss b/client/src/styles.scss
index e093c9462..076bbcdf8 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -732,6 +732,10 @@ button.mat-menu-item.selected {
     color: rgba(0, 0, 0, 0.87) !important;
 }
 
+.multi-line-chip {
+    white-space: pre-line
+}
+
 /* TODO: move to site.component.scss-theme.scss (does not work currently) */
 
 /* make the .user-menu expansion panel look like the nav-toolbar above */