Changed category label for motion views

client/src/app/core/repositories/motions/category-repository.service.ts

@@ -63,7 +63,8 @@ export class CategoryRepositoryService extends BaseRepository<ViewCategory, Cate
     };
 
     protected createViewModel(category: Category): ViewCategory {
-        return new ViewCategory(category);
+        const parent = this.viewModelStoreService.get(ViewCategory, category.parent_id);
+        return new ViewCategory(category, parent);
     }
 
     /**

client/src/app/site/motions/models/view-category.ts

@@ -48,24 +48,22 @@ export class ViewCategory extends BaseViewModel<Category> implements CategoryTit
         return this.category.level;
     }
 
-    /**
-     * TODO: Where is this used? Try to avoid this.
-     */
-    /*public set prefix(prefix: string) {
-        this._model.prefix = prefix;
-    }*/
-
-    /**
-     * TODO: Where is this used? Try to avoid this.
-     */
-    /*public set name(name: string) {
-        this._model.name = name;
-    }*/
-
     public get prefixedName(): string {
         return this.prefix ? this.prefix + ' - ' + this.name : this.name;
     }
 
+    /**
+     * @returns the name with all parents in brackets: "<Cat> (<CatParent>, <CatParentParent>)"
+     */
+    public get prefixedNameWithParents(): string {
+        const parents = this.collectParents();
+        let name = this.prefixedName;
+        if (parents.length) {
+            name += ' (' + parents.map(parent => parent.prefixedName).join(', ') + ')';
+        }
+        return name;
+    }
+
     public constructor(category: Category, parent?: ViewCategory) {
         super(Category.COLLECTIONSTRING, category);
         this._parent = parent;
@@ -79,6 +77,21 @@ export class ViewCategory extends BaseViewModel<Category> implements CategoryTit
         return '/motions/category';
     }
 
+    /**
+     * @returns an array with all parents. The ordering is the direct parent
+     * is in front of the array and the "highest" parent the last entry. Returns
+     * an empty array if the category does not have any parents.
+     */
+    public collectParents(): ViewCategory[] {
+        if (this.parent) {
+            const parents = this.parent.collectParents();
+            parents.unshift(this.parent);
+            return parents;
+        } else {
+            return [];
+        }
+    }
+
     /**
      * Updates the local objects if required
      * @param update

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -322,7 +322,7 @@
                     (click)="setCategory(category.id)"
                 >
                     <mat-icon *ngIf="motion.category_id === category.id">check</mat-icon>
-                    {{ category }}
+                    {{ category.prefixedNameWithParents }}
                 </button>
             </mat-menu>
             <mat-basic-chip
@@ -331,14 +331,14 @@
                 class="grey"
                 disableRipple
             >
-                {{ motion.category || '–' }}
+                {{ motion.category.prefixedNameWithParents || '–' }}
             </mat-basic-chip>
             <mat-basic-chip
                 *ngIf="!perms.isAllowed('change_metadata', motion) && motion.category"
                 class="grey"
                 disableRipple
             >
-                {{ motion.category }}
+                {{ motion.category.prefixedNameWithParents }}
             </mat-basic-chip>
         </div>
 

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html

@@ -104,7 +104,7 @@
                         <div class="fill">
                             <div class="innerTable state-column">
                                 <div class="ellipsis-overflow" *ngIf="motion.category">
-                                    <os-icon-container icon="device_hub">{{ motion.category }}</os-icon-container>
+                                    <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">{{
@@ -153,7 +153,7 @@
             <div class="column-state innerTable">
                 <!-- Category -->
                 <div class="ellipsis-overflow" *ngIf="motion.category">
-                    <os-icon-container icon="device_hub">{{ motion.category }}</os-icon-container>
+                    <os-icon-container icon="device_hub">{{ motion.category.prefixedNameWithParents }}</os-icon-container>
                 </div>
 
                 <!-- Motion Block -->