From 9cdeaf9245196a01d586471828529a4c0c72bac3 Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Fri, 12 Apr 2019 16:30:14 +0200
Subject: [PATCH] add tag display in several views

- call list sorting
- category sorting
- motion list
---
 .../sorting-tree/sorting-tree.component.ts    |  6 +++++
 .../call-list/call-list.component.html        | 12 +++++++++-
 .../call-list/call-list.component.scss        | 22 +++++++++++++++++++
 .../modules/call-list/call-list.component.ts  | 20 ++++++++++++++---
 .../category-sort.component.html              | 12 +++++++++-
 .../motion-list/motion-list.component.html    |  7 ++++++
 6 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 client/src/app/site/motions/modules/call-list/call-list.component.scss

diff --git a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts
index 43c619bce..6103451c7 100644
--- a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts
+++ b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts
@@ -53,6 +53,12 @@ class Movement {
     styleUrls: ['./sorting-tree.component.scss']
 })
 export class SortingTreeComponent<T extends Identifiable & Displayable> implements OnInit, OnDestroy {
+    /**
+     * Declare the templateRef to coexist between parent in child
+     */
+    @ContentChild(TemplateRef)
+    public templateRef: TemplateRef<T>;
+
     /**
      * The data to build the tree
      */
diff --git a/client/src/app/site/motions/modules/call-list/call-list.component.html b/client/src/app/site/motions/modules/call-list/call-list.component.html
index 45ca50f8e..6b57797d8 100644
--- a/client/src/app/site/motions/modules/call-list/call-list.component.html
+++ b/client/src/app/site/motions/modules/call-list/call-list.component.html
@@ -26,7 +26,17 @@
         (hasChanged)="receiveChanges($event)"
         [model]="motionsObservable">
         <ng-template #innerNode let-item="item">
-            <span>{{ item.getTitle() }}</span>
+            <div class="line">
+                <div class="left">
+                    {{ item.getTitle() }}
+                </div>
+                <div class="right">
+                    <span *ngFor="let tag of getTags(item)">
+                        <mat-icon inline>local_offer</mat-icon>
+                        {{ tag.getTitle() }}
+                    </span>
+                </div>
+            </div>
         </ng-template>
     </os-sorting-tree>
 </mat-card>
diff --git a/client/src/app/site/motions/modules/call-list/call-list.component.scss b/client/src/app/site/motions/modules/call-list/call-list.component.scss
new file mode 100644
index 000000000..fb1df8fba
--- /dev/null
+++ b/client/src/app/site/motions/modules/call-list/call-list.component.scss
@@ -0,0 +1,22 @@
+// TODO: partial duplicate of sorting-list
+.line {
+    display: table;
+    width: 100%;
+    font-size: 14px;
+    min-height: 50px;
+    margin-bottom: 5px;
+
+    .left {
+        display: table-cell;
+        vertical-align: middle;
+        max-width: 100%;
+    }
+
+    .right {
+        display: table-cell;
+        padding-right: 10px;
+        vertical-align: middle;
+        width: auto;
+        white-space: nowrap;
+    }
+}
diff --git a/client/src/app/site/motions/modules/call-list/call-list.component.ts b/client/src/app/site/motions/modules/call-list/call-list.component.ts
index 0e1560b7d..156bd1e6f 100644
--- a/client/src/app/site/motions/modules/call-list/call-list.component.ts
+++ b/client/src/app/site/motions/modules/call-list/call-list.component.ts
@@ -7,19 +7,22 @@ import { Observable } from 'rxjs';
 
 import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service';
 import { BaseViewComponent } from 'app/site/base/base-view';
+import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard';
+import { FlatNode } from 'app/core/ui-services/tree.service';
 import { MotionCsvExportService } from 'app/site/motions/services/motion-csv-export.service';
 import { MotionPdfExportService } from 'app/site/motions/services/motion-pdf-export.service';
+import { PromptService } from 'app/core/ui-services/prompt.service';
 import { SortingTreeComponent } from 'app/shared/components/sorting-tree/sorting-tree.component';
 import { ViewMotion } from 'app/site/motions/models/view-motion';
-import { PromptService } from 'app/core/ui-services/prompt.service';
-import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard';
+import { ViewTag } from 'app/site/tags/models/view-tag';
 
 /**
  * Sort view for the call list.
  */
 @Component({
     selector: 'os-call-list',
-    templateUrl: './call-list.component.html'
+    templateUrl: './call-list.component.html',
+    styleUrls: ['./call-list.component.scss']
 })
 export class CallListComponent extends BaseViewComponent implements CanComponentDeactivate {
     /**
@@ -124,4 +127,15 @@ export class CallListComponent extends BaseViewComponent implements CanComponent
         }
         return true;
     }
+
+    /**
+     * Get the tags associated with the motion of a sorting item
+     *
+     * @param item A FlatNode from a OsSortignTree
+     * @returns An array of ViewTags (or an empty adrray)
+     */
+    public getTags(item: FlatNode<ViewMotion>): ViewTag[] {
+        const motion = this.motionRepo.getViewModel(item.id);
+        return motion ? motion.tags : [];
+    }
 }
diff --git a/client/src/app/site/motions/modules/category/components/category-sort/category-sort.component.html b/client/src/app/site/motions/modules/category/components/category-sort/category-sort.component.html
index d67f2235f..530ca80e4 100644
--- a/client/src/app/site/motions/modules/category/components/category-sort/category-sort.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-sort/category-sort.component.html
@@ -20,5 +20,15 @@
     >
         <span translate>Number motions</span>
     </button>
-    <os-sorting-list [input]="motionObservable" #sorter></os-sorting-list>
+    <os-sorting-list [input]="motionObservable" #sorter>
+        <!-- implicit motion references into the component using ng-template slot -->
+        <ng-template let-motion>
+            <div class="ellipsis-overflow small" *ngIf="motion.tags && motion.tags.length">
+                <span *ngFor="let tag of motion.tags">
+                    <mat-icon inline>local_offer</mat-icon>
+                    {{ tag.getTitle() }}
+                </span>
+            </div>
+        </ng-template>
+    </os-sorting-list>
 </mat-card>
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 f669f64eb..547b08620 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
@@ -113,6 +113,13 @@
                         <mat-icon>widgets</mat-icon>
                         {{ motion.motion_block.title }}
                     </div>
+                    <div class="small ellipsis-overflow" *ngIf="motion.tags && motion.tags.length">
+                        <mat-icon>local_offer</mat-icon>
+                        <span *ngFor="let tag of motion.tags; let last = last">
+                            {{ tag.getTitle() }}
+                            <span *ngIf="!last">,&nbsp;</span>
+                        </span>
+                    </div>
                 </div>
             </mat-cell>
         </ng-container>