Skip to content

Commit b68b0cf

Browse files
minotticminottic
authored
Use CDKScroll for overview
* Add scroll component based on cdk * Add tests * Simplify logbook cover not to depend on matcard * Fix scrolling and update on resize * Add missing html change * Add overview table preliminary changes * Fix overview tests * Enable search, add spinner * Fix delete and edit for scroll * Fit image in given space
1 parent fe171c0 commit b68b0cf

20 files changed

+507
-276
lines changed

‎scilog/src/app/app.module.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ import { ResizedDirective } from '@shared/directives/resized.directive';
8787
import { OverviewTableComponent } from './overview/overview-table/overview-table.component';
8888
import { MatPaginatorModule } from '@angular/material/paginator';
8989
import { MatSortModule } from '@angular/material/sort';
90+
import { OverviewScrollComponent } from './overview/overview-scroll/overview-scroll.component';
9091

9192
const appConfigInitializerFn = (appConfig: AppConfigService) => {
9293
return () => appConfig.loadAppConfig();
@@ -133,7 +134,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
133134
SearchWindowComponent,
134135
TaskComponent,
135136
ResizedDirective,
136-
OverviewTableComponent
137+
OverviewTableComponent,
138+
OverviewScrollComponent
137139
],
138140
imports: [
139141
BrowserModule,

‎scilog/src/app/core/remote-data.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,7 @@ export class SearchDataService extends RemoteDataService {
622622
return this._searchString;
623623
}
624624
public set searchString(value: string) {
625-
this._searchString = value;
625+
this._searchString = value ?? '';
626626
}
627627

628628
protected addIncludeScope(): Object {

‎scilog/src/app/core/toolbar/toolbar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</button>
1313
</div>
1414
<div *ngIf='showSearch' class="searchWindow">
15-
<search-window #searchWindow [configsArray]='config' [searched]="searched" (close)="closeSearch()" (overviewSearch)="overviewSearch($event)"></search-window>
15+
<search-window #searchWindow [configsArray]='config' [searched]="searched" (close)="closeSearch()" (overviewSearch)="setSearch($event)"></search-window>
1616
</div>
1717
<div class="flexExpand">
1818
<button mat-icon-button class='searchButton' (click)="openSearch()" *ngIf="!showMenuIcon">

‎scilog/src/app/core/toolbar/toolbar.component.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('ToolbarComponent', () => {
3333
expect(component).toBeTruthy();
3434
});
3535

36-
it('should overviewSearch', () => {
36+
it('should setSearch', () => {
3737
component.showSearch = true;
3838
fixture.detectChanges();
3939
fixture.debugElement.query(

‎scilog/src/app/core/toolbar/toolbar.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { UserInfo } from '@model/user-info';
1010
import { Views } from '@model/views';
1111
import { SettingsComponent } from '@shared/settings/settings.component'
1212
import { WidgetConfig } from '@model/config';
13-
import { SearchWindowComponent } from '@shared/search-window/search-window.component';
1413
import { AppConfigService, AppConfig } from 'src/app/app-config.service';
1514
import { CookiesService } from '../cookies.service';
1615

@@ -37,6 +36,7 @@ export class ToolbarComponent implements OnInit {
3736
config: WidgetConfig[];
3837

3938
@Output() openMenu = new EventEmitter<any>();
39+
@Output() overviewSearch = new EventEmitter<string>();
4040

4141
private logbookTitleRef: ElementRef;
4242
@ViewChild('logbookTitle', { static: false }) set content(content: ElementRef) {
@@ -93,8 +93,9 @@ export class ToolbarComponent implements OnInit {
9393
console.log(this.showVersionInfo)
9494
}
9595

96-
overviewSearch($event) {
97-
this.searched = $event
96+
setSearch(search: string) {
97+
this.searched = search;
98+
this.overviewSearch.emit(search);
9899
}
99100

100101
logout() {

‎scilog/src/app/logbook/core/search-window/search-window.component.spec.ts

-2
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,9 @@ describe('SearchWindowComponent', () => {
4949
component.logbookId = undefined;
5050
const search = 'some';
5151
component.searchString = search;
52-
const resetSpy = spyOn(component['logbookIconScrollService'], 'reset');
5352
const emitSpy = spyOn(component.overviewSearch, 'emit');
5453
const closeSearchSpy = spyOn(component, 'closeSearch');
5554
component.submitSearch();
56-
expect(resetSpy).toHaveBeenCalledOnceWith(search);
5755
expect(emitSpy).toHaveBeenCalledOnceWith(search);
5856
expect(closeSearchSpy).toHaveBeenCalled();
5957
});

‎scilog/src/app/logbook/core/search-window/search-window.component.ts

-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { UserPreferencesService } from '@shared/user-preferences.service';
55
import { LogbookInfoService } from '@shared/logbook-info.service';
66
import { TagService } from '@shared/tag.service';
77
import { Hotkeys } from '@shared/hotkeys.service';
8-
import { LogbookIconScrollService } from 'src/app/overview/logbook-icon-scroll-service.service';
98
import { SearchScrollService } from 'src/app/core/search-scroll.service';
109

1110
@Component({
@@ -41,7 +40,6 @@ export class SearchWindowComponent implements OnInit {
4140
private logbookInfo: LogbookInfoService,
4241
private tagService: TagService,
4342
private hotkeys: Hotkeys,
44-
private logbookIconScrollService: LogbookIconScrollService,
4543
private searchScrollService: SearchScrollService,
4644
) { }
4745

@@ -72,7 +70,6 @@ export class SearchWindowComponent implements OnInit {
7270
this.searchScrollService.reset(this.concatSearchStrings());
7371
return
7472
}
75-
this.logbookIconScrollService.reset(this.searchString);
7673
this.overviewSearch.emit(this.searchString);
7774
this.closeSearch();
7875
}

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.logbook-module {
2-
32
width: 300px;
43
height: 400px;
54
}

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.html

+23-65
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,13 @@
1-
<div [ngSwitch]="matView">
2-
<div *ngSwitchCase="'logbook-headline'">
3-
<ng-container *ngTemplateOutlet="logbookHeadline"></ng-container>
4-
</div>
5-
<div *ngSwitchCase="'logbook-module'">
6-
<ng-container *ngTemplateOutlet="logbookModule"></ng-container>
7-
</div>
8-
</div>
9-
10-
<ng-template #logbookModule>
11-
<mat-card [ngClass]="matView">
12-
<mat-card-header>
13-
<mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
14-
<mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
15-
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
16-
class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
17-
matTooltip="{{ isActionAllowed.tooltips.edit }}">
18-
<mat-icon>more_vert</mat-icon>
19-
</button>
20-
<mat-menu #menu="matMenu">
21-
<span [matTooltip]="isActionAllowed.tooltips.update">
22-
<button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
23-
<mat-icon>edit</mat-icon>
24-
<span>Edit</span>
25-
</button>
26-
</span>
27-
<span [matTooltip]="isActionAllowed.tooltips.delete">
28-
<button mat-menu-item (click)="deleteLogbook()" [disabled]="isActionAllowed.tooltips.delete">
29-
<mat-icon>delete</mat-icon>
30-
<span>Delete</span>
31-
</button>
32-
</span>
33-
</mat-menu>
34-
</mat-card-header>
35-
<div class="image-container">
36-
<img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
37-
*ngIf=" !isImageLoading">
38-
</div>
39-
<mat-card-content>
40-
<p>
41-
{{ logbook?.description }}
42-
</p>
43-
</mat-card-content>
44-
<mat-divider></mat-divider>
45-
<mat-card-actions class="mat-card-actions">
46-
<button mat-button (click)="selection()" [routerLink]="['/logbooks', logbook?.id, 'dashboard']">
47-
Open
48-
</button>
49-
</mat-card-actions>
50-
</mat-card>
51-
</ng-template>
52-
53-
<ng-template #logbookHeadline>
54-
<mat-card [ngClass]="matView">
55-
<div (dblclick)="selectOnDoubleClick()" class="card-container">
56-
<mat-card-content class="title">{{ logbook?.name }}</mat-card-content>
57-
<mat-card-content class="description">{{ logbook?.description }}</mat-card-content>
58-
<mat-card-content class="owner">{{ logbook?.ownerGroup }}</mat-card-content>
59-
<mat-card-content class="date">{{ logbook?.createdAt | date }}</mat-card-content>
60-
<img [src]="imageToShow" alt="" *ngIf=" !isImageLoading">
61-
</div>
62-
<button mat-icon-button [matMenuTriggerFor]="menuHeadline" aria-label="Example icon-button with a menu"
1+
<mat-card class="logbook-module">
2+
<mat-card-header>
3+
<mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
4+
<mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
5+
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
636
class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
647
matTooltip="{{ isActionAllowed.tooltips.edit }}">
658
<mat-icon>more_vert</mat-icon>
669
</button>
67-
<mat-menu #menuHeadline="matMenu">
10+
<mat-menu #menu="matMenu">
6811
<span [matTooltip]="isActionAllowed.tooltips.update">
6912
<button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
7013
<mat-icon>edit</mat-icon>
@@ -78,5 +21,20 @@
7821
</button>
7922
</span>
8023
</mat-menu>
81-
</mat-card>
82-
</ng-template>
24+
</mat-card-header>
25+
<div class="image-container">
26+
<img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
27+
*ngIf=" !isImageLoading">
28+
</div>
29+
<mat-card-content>
30+
<p>
31+
{{ logbook?.description }}
32+
</p>
33+
</mat-card-content>
34+
<mat-divider></mat-divider>
35+
<mat-card-actions class="mat-card-actions">
36+
<button mat-button (click)="selection()" [routerLink]="['/logbooks', logbook?.id, 'dashboard']">
37+
Open
38+
</button>
39+
</mat-card-actions>
40+
</mat-card>

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.spec.ts

-19
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { LogbookInfoService } from '@shared/logbook-info.service';
66
import { of } from 'rxjs';
77
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
88
import { Logbooks } from '@model/logbooks';
9-
import { MatCardType } from '../overview.component';
109

1110
class UserPreferencesMock {
1211
userInfo = {
@@ -79,22 +78,4 @@ describe('LogbookWidgetComponent', () => {
7978
expect(isAnyEditAllowedSpy).toHaveBeenCalledTimes(1);
8079
});
8180

82-
['logbook-module', 'logbook-headline'].forEach(t => {
83-
it(`should test ng-template: ${t}`, () => {
84-
component.matView = t as MatCardType;
85-
fixture.detectChanges();
86-
expect(fixture.debugElement.nativeElement.querySelector(`.${t}`)).toEqual(jasmine.anything());
87-
})
88-
})
89-
90-
it('should test on doubleClick', () => {
91-
component.matView = 'logbook-headline';
92-
const selectOnDoubleClickSpy = spyOn(component, 'selectOnDoubleClick');
93-
fixture.detectChanges();
94-
const cardContainer = fixture.debugElement.nativeElement.querySelector('.card-container');
95-
cardContainer.dispatchEvent(new Event('click'));
96-
cardContainer.dispatchEvent(new Event('dblclick'));
97-
expect(selectOnDoubleClickSpy).toHaveBeenCalledTimes(1);
98-
});
99-
10081
});

‎scilog/src/app/overview/logbook-cover/logbook-cover.component.ts

-3
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ export class LogbookWidgetComponent implements OnInit {
2121
@Input()
2222
logbook: Logbooks;
2323

24-
@Input()
25-
matView: MatCardType;
26-
2724
@ViewChild('cardHeader') cardHeader: ElementRef;
2825

2926
imageToShow: any;

‎scilog/src/app/overview/overview-scroll/overview-scroll.component.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
cdk-virtual-scroll-viewport {
2+
height: 400px;
3+
width: 100%;
4+
border: 1px solid #ccc;
5+
}
6+
7+
.logbook-container {
8+
overflow: scroll;
9+
height: calc(100vh - 250px);
10+
width: calc(100vw - 20px);
11+
border-color: transparent;
12+
}
13+
14+
.logbook-content > .logbook-inline {
15+
padding: 7px;
16+
}
17+
18+
.logbook-inline {
19+
display: inline-flex;
20+
}

‎scilog/src/app/overview/overview-scroll/overview-scroll.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="logbook-container" (resized)="onResized($event)">
2+
<div *cdkVirtualFor="let logbookGroup of logbooks; trackBy: trackByGroupId" class="logbook-content">
3+
<span *ngFor="let logbook of logbookGroup" class="logbook-inline">
4+
<app-logbook-cover [logbook]="logbook" (logbookEdit)="editLogbook($event)"
5+
(logbookSelection)="logbookSelected($event)" (logbookDelete)="deleteLogbook($event)">
6+
</app-logbook-cover>
7+
</span>
8+
</div>
9+
</cdk-virtual-scroll-viewport>

0 commit comments

Comments
 (0)