-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replaces overview headlines with MatTable (#409)
* Add overview table and use in overview (with sorting, pagination and draggable columns) * Add overview table tests * Add overview component reload on add and edit * Add overview tests * Move getCount to parent class * Add remote data test * Fix styles
- Loading branch information
Showing
10 changed files
with
395 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
scilog/src/app/overview/overview-table/overview-table.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <section class="scrollable-container mat-elevation-z8" tabindex="0"> | ||
| <table mat-table [dataSource]="dataSource" matSort cdkDropList cdkDropListOrientation="horizontal" | ||
| (cdkDropListDropped)="drop($event)" (matSortChange)="onSortChange()"> | ||
| <ng-container matColumnDef="name"> | ||
| <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Title </th> | ||
| <td mat-cell *matCellDef="let row"> {{row.name}} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="description"> | ||
| <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Description </th> | ||
| <td mat-cell *matCellDef="let row"> {{row.description}} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="ownerGroup"> | ||
| <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>ownerGroup </th> | ||
| <td mat-cell *matCellDef="let row"> {{row.ownerGroup}} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="createdAt"> | ||
| <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Date </th> | ||
| <td mat-cell *matCellDef="let row"> {{row.createdAt | date}} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="thumbnail"> | ||
| <th mat-header-cell cdkDrag *matHeaderCellDef>Thumbnail </th> | ||
| <td mat-cell *matCellDef="let row"><img [src]="getImage(row.thumbnail)" style="height: 100%;" /> </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="actions"> | ||
| <th mat-header-cell *matHeaderCellDef class="mat-fab-top-right"></th> | ||
| <td mat-cell *matCellDef="let row" class="mat-fab-top-right"> | ||
| <button mat-icon-button aria-label="Actions" [matMenuTriggerFor]="menu" | ||
| [disabled]="isActionAllowed.tooltips.edit" matTooltip="{{ isActionAllowed.tooltips.edit }}"> | ||
| <mat-icon>more_vert</mat-icon> | ||
| </button> | ||
| <mat-menu #menu="matMenu"> | ||
| <span [matTooltip]="isActionAllowed.tooltips.update"> | ||
| <button mat-menu-item (click)="editLogbook(row)" [disabled]="isActionAllowed.tooltips.update"> | ||
| <mat-icon>edit</mat-icon> | ||
| Edit | ||
| </button> | ||
| </span> | ||
| <span [matTooltip]="isActionAllowed.tooltips.delete"> | ||
| <button mat-menu-item (click)="deleteLogbook(row.id)" [disabled]="isActionAllowed.tooltips.delete"> | ||
| <mat-icon>delete</mat-icon> | ||
| Delete | ||
| </button> | ||
| </span> | ||
| </mat-menu> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> | ||
| <tr mat-row class="logbooks" *matRowDef="let row; columns: displayedColumns;" (dblclick)="openLogbook(row.id)"></tr> | ||
| </table> | ||
|
|
||
| </section> | ||
|
|
||
| <mat-paginator [length]="totalItems" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" (page)="onPageChange()" | ||
| showFirstLastButtons></mat-paginator> |
40 changes: 40 additions & 0 deletions
40
scilog/src/app/overview/overview-table/overview-table.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| table { | ||
| width: 100%; | ||
| table-layout: fixed; | ||
| } | ||
|
|
||
| table th, | ||
| table td { | ||
| white-space: nowrap; | ||
| overflow: scroll; | ||
| } | ||
|
|
||
|
|
||
| .logbooks:hover { | ||
| background-color: var(--main-background)!important; | ||
| -webkit-transition: background-color 100ms linear, color 100ms linear; | ||
| -ms-transition: background-color 100ms linear, color 100ms linear; | ||
| transition: background-color 100ms linear, color 100ms linear; | ||
| } | ||
|
|
||
| .logbooks { | ||
| height: 65px; | ||
| } | ||
|
|
||
| .logbooks img { | ||
| max-height: 60px; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| .mat-fab-top-right { | ||
| text-align: right; | ||
| width: 2px; | ||
| padding-right: 40px!important; | ||
| overflow: hidden!important; | ||
| } | ||
|
|
||
| .scrollable-container { | ||
| max-height: 65px * 11; | ||
| width: 100%; | ||
| overflow: auto; | ||
| } |
105 changes: 105 additions & 0 deletions
105
scilog/src/app/overview/overview-table/overview-table.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; | ||
| import { OverviewTableComponent } from './overview-table.component'; | ||
| import { LogbookDataService } from 'src/app/core/remote-data.service'; | ||
| import { UserPreferencesService } from 'src/app/core/user-preferences.service'; | ||
| import { Logbooks } from 'src/app/core/model/logbooks'; | ||
| import { CdkDragDrop } from '@angular/cdk/drag-drop'; | ||
| import { MatPaginatorModule } from '@angular/material/paginator'; | ||
| import { NoopAnimationsModule } from '@angular/platform-browser/animations'; | ||
|
|
||
| class UserPreferencesMock { | ||
| userInfo = { roles: ["roles"] }; | ||
| } | ||
|
|
||
| describe('OverviewTableComponent', () => { | ||
| let component: OverviewTableComponent; | ||
| let fixture: ComponentFixture<OverviewTableComponent>; | ||
| const logbookDataSpy = jasmine.createSpyObj( | ||
| 'LogbookDataService', | ||
| ['getDataBuffer', 'getCount'], | ||
| { imagesLocation: 'server/images' } | ||
| ); | ||
| logbookDataSpy.getCount.and.returnValue({ count: 1 }); | ||
| logbookDataSpy.getDataBuffer.and.returnValue([{ abc: 1 }]); | ||
| const paginatorSpy = jasmine.createSpyObj("MatPaginator", {}, { pageIndex: 0, pageSize: 5 }); | ||
| const sortSpy = jasmine.createSpyObj("MatSort", ['sort']); | ||
|
|
||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [OverviewTableComponent], | ||
| imports: [MatPaginatorModule, NoopAnimationsModule], | ||
| providers: [ | ||
| { provide: LogbookDataService, useValue: logbookDataSpy }, | ||
| { provide: UserPreferencesService, useClass: UserPreferencesMock }, | ||
| ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(OverviewTableComponent); | ||
| component = fixture.componentInstance; | ||
| component.config = { general: {}, filter: {}, view: {} }; | ||
| fixture.detectChanges(); | ||
| component.sort = sortSpy; | ||
| component.sort.active = 'name'; | ||
| component.sort.direction = 'asc'; | ||
| component.paginator = paginatorSpy; | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should test itemsCount', async () => { | ||
| await component['itemsCount'](); | ||
| expect(component.totalItems).toEqual(1); | ||
| }); | ||
|
|
||
| it('should test getLogbooks', async () => { | ||
| logbookDataSpy.getDataBuffer.calls.reset(); | ||
| await component.getLogbooks(); | ||
| expect(logbookDataSpy.getDataBuffer).toHaveBeenCalledOnceWith(0, 5, component.config); | ||
| expect(component.dataSource.data).toEqual([{ abc: 1 } as Logbooks]); | ||
| }); | ||
|
|
||
| it('should test openLogbook', () => { | ||
| const routerSpy = spyOn(component['router'], 'navigateByUrl'); | ||
| component.openLogbook('123'); | ||
| expect(routerSpy).toHaveBeenCalledOnceWith('/logbooks/123/dashboard'); | ||
| }); | ||
|
|
||
| it('should test drop', () => { | ||
| expect(component.displayedColumns).toEqual(['name', 'description', 'ownerGroup', 'createdAt', 'thumbnail', 'actions']); | ||
| component.drop({ previousIndex: 1, currentIndex: 2 } as CdkDragDrop<string[]>); | ||
| expect(component.displayedColumns).toEqual(['name', 'ownerGroup', 'description', 'createdAt', 'thumbnail', 'actions']); | ||
| }); | ||
|
|
||
| [undefined, '123'].forEach(t => { | ||
| it(`should test getImage ${t}`, () => { | ||
| expect(component.getImage(t)).toEqual(t ? 'server/images/123' : t); | ||
| }); | ||
| }); | ||
|
|
||
| it('should test onPageChange', () => { | ||
| const getLogbooks = spyOn(component, 'getLogbooks'); | ||
| component.onPageChange(); | ||
| expect(getLogbooks).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('should test onSortChange', () => { | ||
| const getDatasetsSpy = spyOn(component, 'getLogbooks'); | ||
| component.onSortChange(); | ||
| expect(component['_config'].view.order).toEqual(['name asc']); | ||
| expect(getDatasetsSpy).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('should test resetSortAndReload', async () => { | ||
| await component.resetSortAndReload(); | ||
| expect(component.sort.active).toEqual(''); | ||
| expect(component.sort.direction).toEqual(''); | ||
| expect(component['_config']).toEqual({ general: {}, filter: {}, view: {} }); | ||
| }); | ||
|
|
||
| }) |
Oops, something went wrong.