Merge pull request #4595 from MaximilianKrambach/tagDisplay

add tag display in several views

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
      */

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>

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;
+    }
+}

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 : [];
+    }
 }

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>

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>