Merge pull request #3830 from emanuelschuetze/categoryListView
Added motion category list view.
This commit is contained in:
commit
b3e86c0507
@ -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>
|
@ -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();
|
||||
});
|
||||
});
|
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
||||
|
@ -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 }
|
||||
];
|
||||
|
@ -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 {}
|
||||
|
Loading…
Reference in New Issue
Block a user