Added motion category list view.

client/src/app/site/motions/category-list/category-list.component.html

@@ -0,0 +1,38 @@
+<mat-toolbar color='primary'>
+
+    <button class='generic-plus-button on-transition-fade' routerLink='new' mat-fab>
+        <fa-icon icon='plus'></fa-icon>
+    </button>
+
+    <span class='app-name on-transition-fade' translate>Category</span>
+
+
+    <!-- <button class='on-transition-fade' mat-icon-button (click)='downloadMotionsButton()'> -->
+    <span class='spacer'></span>
+    <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
+        <fa-icon icon='ellipsis-v'></fa-icon>
+    </button>
+    <mat-menu #motionExtraMenu="matMenu">
+        <!-- TODO the functions for the buttons -->
+        <button mat-menu-item translate><fa-icon icon='download'></fa-icon> Export As...</button>
+        <button mat-menu-item routerLink='category' translate>Categories</button>
+    </mat-menu>
+
+</mat-toolbar>
+
+<mat-table class='on-transition-fade' [dataSource]="dataSource" matSort>
+    <!-- name column -->
+    <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+        <mat-cell *matCellDef="let category"> {{category.name}} </mat-cell>
+    </ng-container>
+
+    <!-- prefix column -->
+    <ng-container matColumnDef="prefix">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Prefix </mat-header-cell>
+        <mat-cell *matCellDef="let category"> {{category.prefix}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="['name', 'prefix']"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: ['name', 'prefix']"></mat-row>
+</mat-table>

client/src/app/site/motions/category-list/category-list.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategoryListComponent } from './category-list.component';
+
+describe('CategoryListComponent', () => {
+    let component: CategoryListComponent;
+    let fixture: ComponentFixture<CategoryListComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [CategoryListComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CategoryListComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/site/motions/category-list/category-list.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Category } from '../../../shared/models/motions/category';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import { BaseComponent } from '../../../base.component';
+import { MatSort, MatTable, MatTableDataSource } from '@angular/material';
+
+@Component({
+    selector: 'app-category-list',
+    templateUrl: './category-list.component.html',
+    styleUrls: ['./category-list.component.scss']
+})
+export class CategoryListComponent extends BaseComponent implements OnInit {
+    /**
+     * Store the categories
+     */
+    categoryArray: Array<Category>;
+
+    /**
+     * Will be processed by the mat-table
+     */
+    dataSource: MatTableDataSource<Category>;
+
+    /**
+     * The table itself.
+     */
+    @ViewChild(MatTable) table: MatTable<Category>;
+
+    /**
+     * Sort the Table
+     */
+    @ViewChild(MatSort) sort: MatSort;
+
+    constructor(protected titleService: Title, protected translate: TranslateService, private router: Router) {
+        super(titleService, translate);
+    }
+
+    ngOnInit() {
+        super.setTitle('Category');
+        this.categoryArray = this.DS.get(Category) as Category[];
+        this.dataSource = new MatTableDataSource(this.categoryArray);
+        this.dataSource.sort = this.sort;
+
+        // Observe DataStore for motions. Initially, executes once for every motion.
+        // The alternative approach is to put the observable as DataSource to the table
+        this.DS.getObservable().subscribe(newModel => {
+            if (newModel instanceof Category) {
+                this.categoryArray = this.DS.get(Category) as Category[];
+                this.dataSource.data = this.categoryArray;
+            }
+        });
+    }
+}

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

@@ -6,11 +6,17 @@
 
     <span class='app-name on-transition-fade' translate>Motions</span>
 
-    <!-- download button on the right -->
+  
+    <!-- <button class='on-transition-fade' mat-icon-button (click)='downloadMotionsButton()'> -->
     <span class='spacer'></span>
-    <button class='on-transition-fade' mat-icon-button (click)='downloadMotionsButton()'>
-        <fa-icon icon='download'></fa-icon>
+    <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
+        <fa-icon icon='ellipsis-v'></fa-icon>
     </button>
+    <mat-menu #motionExtraMenu="matMenu">
+        <!-- TODO the functions for the buttons -->
+        <button mat-menu-item translate><fa-icon icon='download'></fa-icon> Export As...</button>
+        <button mat-menu-item routerLink='category' translate>Categories</button>
+    </mat-menu>
 
 </mat-toolbar>
 

client/src/app/site/motions/motions-routing.module.ts

@@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MotionListComponent } from './motion-list/motion-list.component';
 import { MotionDetailComponent } from './motion-detail/motion-detail.component';
+import { CategoryListComponent } from './category-list/category-list.component';
 
 const routes: Routes = [
     { path: '', component: MotionListComponent },
+    { path: 'category', component: CategoryListComponent },
     { path: 'new', component: MotionDetailComponent },
     { path: ':id', component: MotionDetailComponent }
 ];

client/src/app/site/motions/motions.module.ts

@@ -5,9 +5,10 @@ import { MotionsRoutingModule } from './motions-routing.module';
 import { SharedModule } from '../../shared/shared.module';
 import { MotionListComponent } from './motion-list/motion-list.component';
 import { MotionDetailComponent } from './motion-detail/motion-detail.component';
+import { CategoryListComponent } from './category-list/category-list.component';
 
 @NgModule({
     imports: [CommonModule, MotionsRoutingModule, SharedModule],
-    declarations: [MotionListComponent, MotionDetailComponent]
+    declarations: [MotionListComponent, MotionDetailComponent, CategoryListComponent]
 })
 export class MotionsModule {}