Added motion category list view.

This commit is contained in:
Emanuel Schütze 2018-08-27 09:07:59 +02:00
parent 56706e6cef
commit ba496d54b4
7 changed files with 129 additions and 4 deletions

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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;
}
});
}
}

View File

@ -6,11 +6,17 @@
<span class='app-name on-transition-fade' translate>Motions</span> <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> <span class='spacer'></span>
<button class='on-transition-fade' mat-icon-button (click)='downloadMotionsButton()'> <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
<fa-icon icon='download'></fa-icon> <fa-icon icon='ellipsis-v'></fa-icon>
</button> </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-toolbar>

View File

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

View File

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