From 5dddfc45ca556dad3b7758cf5e8fcb27d39cd9f9 Mon Sep 17 00:00:00 2001 From: minottic Date: Fri, 20 Sep 2024 14:07:39 +0200 Subject: [PATCH 1/7] Add overview table and use in overview --- scilog/src/app/app.module.ts | 15 ++- scilog/src/app/core/remote-data.service.ts | 4 + .../overview-table.component.html | 60 ++++++++++++ .../overview-table.component.scss | 30 ++++++ .../overview-table.component.ts | 97 +++++++++++++++++++ .../src/app/overview/overview.component.html | 12 ++- scilog/src/app/overview/overview.component.ts | 11 +-- 7 files changed, 211 insertions(+), 18 deletions(-) create mode 100644 scilog/src/app/overview/overview-table/overview-table.component.html create mode 100644 scilog/src/app/overview/overview-table/overview-table.component.scss create mode 100644 scilog/src/app/overview/overview-table/overview-table.component.ts diff --git a/scilog/src/app/app.module.ts b/scilog/src/app/app.module.ts index d46572e2..4d6905d8 100644 --- a/scilog/src/app/app.module.ts +++ b/scilog/src/app/app.module.ts @@ -13,7 +13,7 @@ import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@ang import { MatSidenavModule } from '@angular/material/sidenav'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'; -import { DragDropModule } from '@angular/cdk/drag-drop'; +import { CdkDrag, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { HttpClientModule } from '@angular/common/http'; import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; @@ -84,6 +84,9 @@ import { AppConfigService } from "./app-config.service"; import { NavigationGuardService } from './logbook/core/navigation-guard-service'; import { TaskComponent } from './logbook/core/task/task.component'; import { ResizedDirective } from '@shared/directives/resized.directive'; +import { OverviewTableComponent } from './overview/overview-table/overview-table.component'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; const appConfigInitializerFn = (appConfig: AppConfigService) => { return () => appConfig.loadAppConfig(); @@ -129,7 +132,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => { SearchComponent, SearchWindowComponent, TaskComponent, - ResizedDirective + ResizedDirective, + OverviewTableComponent ], imports: [ BrowserModule, @@ -170,7 +174,12 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => { MatTabsModule, UiScrollModule, MatProgressBarModule, - MatSnackBarModule + MatSnackBarModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + CdkDrag, + CdkDropList, ], providers: [ AppConfigService, diff --git a/scilog/src/app/core/remote-data.service.ts b/scilog/src/app/core/remote-data.service.ts index 5a2ef1a5..176015bd 100644 --- a/scilog/src/app/core/remote-data.service.ts +++ b/scilog/src/app/core/remote-data.service.ts @@ -25,6 +25,10 @@ interface Count { export class RemoteDataService { + get imagesLocation () { + return `${this.serverSettings.getServerAddress()}/images` + } + constructor(private httpClient: HttpClient, private serverSettings: ServerSettingsService) { } diff --git a/scilog/src/app/overview/overview-table/overview-table.component.html b/scilog/src/app/overview/overview-table/overview-table.component.html new file mode 100644 index 00000000..91467ef3 --- /dev/null +++ b/scilog/src/app/overview/overview-table/overview-table.component.html @@ -0,0 +1,60 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Title {{row.name}} Description {{row.description}} ownerGroup {{row.ownerGroup}} Date {{row.createdAt | date}} Thumbnail + + + + + + + + + +
+ +
+ + diff --git a/scilog/src/app/overview/overview-table/overview-table.component.scss b/scilog/src/app/overview/overview-table/overview-table.component.scss new file mode 100644 index 00000000..b0e6d22e --- /dev/null +++ b/scilog/src/app/overview/overview-table/overview-table.component.scss @@ -0,0 +1,30 @@ +table { + width: 100%; +} + +.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: 60px; +} + +.logbooks img { + max-height: 60px; + object-fit: contain; +} + +.mat-fab-top-right { + text-align: right; + width: 2px; +} + +.scrollable-container { + max-height: 73vh; + width: 100%; + overflow: auto; +} diff --git a/scilog/src/app/overview/overview-table/overview-table.component.ts b/scilog/src/app/overview/overview-table/overview-table.component.ts new file mode 100644 index 00000000..da9ed99c --- /dev/null +++ b/scilog/src/app/overview/overview-table/overview-table.component.ts @@ -0,0 +1,97 @@ +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { Logbooks } from '../../core/model/logbooks'; +import { WidgetItemConfig } from '../../core/model/config'; +import { LogbookDataService } from '../../core/remote-data.service'; +import { Router } from '@angular/router'; +import { IsAllowedService } from '../is-allowed.service'; + +@Component({ + selector: 'overview-table', + templateUrl: './overview-table.component.html', + styleUrls: ['./overview-table.component.scss'], + providers: [IsAllowedService], +}) +export class OverviewTableComponent implements OnInit { + + @Input() config: WidgetItemConfig; + + @Output() logbookEdit = new EventEmitter(); + @Output() logbookDelete = new EventEmitter(); + + @ViewChild(MatPaginator) paginator!: MatPaginator; + @ViewChild(MatSort) sort!: MatSort; + + dataSource: MatTableDataSource; + totalItems: number; + displayedColumns = ['name', 'description', 'ownerGroup', 'createdAt', 'thumbnail', 'actions']; + private _config: WidgetItemConfig; + + constructor( + private dataService: LogbookDataService, + private router: Router, + protected isActionAllowed: IsAllowedService, + ) {} + + ngOnInit() { + this._config = JSON.parse(JSON.stringify(this.config)); + } + + ngAfterViewInit() { + this.getLogbooks(); + this.itemsCount(); + } + + onSortChange(): void { + this.paginator.pageIndex = 0; + this._config.view.order = [`${this.sort.active} ${this.sort.direction || 'DESC'}`]; + this.getLogbooks(); + }; + + onPageChange(): void { + this.getLogbooks(); + } + + private async itemsCount() { + this.totalItems = (await this.dataService.getCount(this._config)).count; + } + + async getLogbooks() { + const data = await this.dataService.getDataBuffer(this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize, this._config); + this.dataSource = new MatTableDataSource(data); + } + + async resetSortAndReload() { + this.sort.active = ''; + this.sort.direction = ''; + this.sort.sort({ id: '', start: 'asc', disableClear: false }); + this.paginator.pageIndex = 0; + this._config = JSON.parse(JSON.stringify(this.config)); + await this.getLogbooks(); + } + + openLogbook(row: string) { + this.router.navigateByUrl(`/logbooks/${encodeURIComponent(row)}/dashboard`); + } + + drop(event: CdkDragDrop) { + moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex); + } + + getImage(thumbnailId: string | undefined) { + if (!thumbnailId) return; + return `${this.dataService.imagesLocation}/${thumbnailId}`; + } + + editLogbook(logbook: Logbooks) { + this.logbookEdit.emit(logbook); + } + + deleteLogbook(logbookId: string) { + this.logbookDelete.emit(logbookId); + } + +} diff --git a/scilog/src/app/overview/overview.component.html b/scilog/src/app/overview/overview.component.html index 31af0cb4..9b49c37a 100644 --- a/scilog/src/app/overview/overview.component.html +++ b/scilog/src/app/overview/overview.component.html @@ -2,19 +2,21 @@

Logbooks

- + view_module view_headline
-
+ +
+ (logbookSelection)="logbookSelected($event)" (logbookDelete)="deleteLogbook($event)" [matView]="matCardType" + [ngClass]="matCardType">
diff --git a/scilog/src/app/overview/overview.component.ts b/scilog/src/app/overview/overview.component.ts index 61f066bb..5d2ae746 100644 --- a/scilog/src/app/overview/overview.component.ts +++ b/scilog/src/app/overview/overview.component.ts @@ -73,19 +73,10 @@ export class OverviewComponent implements OnInit { this.logbookSubscription.unsubscribe(); } this.config = this._prepareConfig(); - this.logbookIconScrollService.groupSize = this.groupSize(this.logbookContainer.nativeElement.clientWidth); this.logbookIconScrollService.initialize(this.config); })); } - - reInitScrollAfterToggle(matCardType: MatCardType) { - this.matCardType = matCardType; - const newSize = this.groupSize(this.logbookContainer.nativeElement[this.clientSide]); - this.logbookIconScrollService.groupSize = newSize; - this.logbookIconScrollService.initialize(this.config); - } - @HostListener('window:resize') onResized(event: ResizedEvent) { if (!event) return @@ -93,7 +84,7 @@ export class OverviewComponent implements OnInit { const newSize = this.groupSize(event.newRect[side]); if (newSize === this.logbookIconScrollService.groupSize) return this.logbookIconScrollService.groupSize = newSize; - if (event.newRect[side] > 2 * event.oldRect[side] || event.oldRect[side] > 2 * event.newRect[side]) { + if (event.newRect?.[side] > 2 * event.oldRect?.[side] || event.oldRect?.[side] > 2 * event.newRect?.[side]) { this.logbookIconScrollService.initialize(this.config); } else From 578a36715abef634200e7949801db9bb88ee3518 Mon Sep 17 00:00:00 2001 From: minottic Date: Thu, 24 Oct 2024 14:50:53 +0200 Subject: [PATCH 2/7] Add overview table tests --- .../overview-table.component.spec.ts | 105 ++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 scilog/src/app/overview/overview-table/overview-table.component.spec.ts diff --git a/scilog/src/app/overview/overview-table/overview-table.component.spec.ts b/scilog/src/app/overview/overview-table/overview-table.component.spec.ts new file mode 100644 index 00000000..b8450005 --- /dev/null +++ b/scilog/src/app/overview/overview-table/overview-table.component.spec.ts @@ -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; + 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); + 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: {} }); + }); + +}) From 41410d6b37f282c164318d270192951a493dd41b Mon Sep 17 00:00:00 2001 From: minottic Date: Thu, 24 Oct 2024 21:04:57 +0200 Subject: [PATCH 3/7] Add overview component reload on add and edit --- scilog/src/app/overview/overview.component.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/scilog/src/app/overview/overview.component.ts b/scilog/src/app/overview/overview.component.ts index 5d2ae746..dfa0dd6b 100644 --- a/scilog/src/app/overview/overview.component.ts +++ b/scilog/src/app/overview/overview.component.ts @@ -12,6 +12,7 @@ import { LogbookDataService } from '@shared/remote-data.service'; import { LogbookIconScrollService } from './logbook-icon-scroll-service.service'; import { ResizedEvent } from '@shared/directives/resized.directive'; import { animate, style, transition, trigger } from '@angular/animations'; +import { OverviewTableComponent } from './overview-table/overview-table.component'; enum ContentType { COLLECTION = 'collection', @@ -47,6 +48,7 @@ export class OverviewComponent implements OnInit { subscriptions: Subscription[] = []; _matCardSide = { 'logbook-module': 352, 'logbook-headline': 47 }; @ViewChild('logbookContainer', { static: true }) logbookContainer: ElementRef; + @ViewChild(OverviewTableComponent) overviewTable: OverviewTableComponent matCardType: MatCardType = 'logbook-module'; @@ -143,10 +145,17 @@ export class OverviewComponent implements OnInit { this.subscriptions.push(dialogRef.afterClosed().subscribe(async result => { console.log("Dialog result:", result); - await this.logbookIconScrollService.reload(); + await this.reloadData('edit'); })); } + private async reloadData(action: 'edit' | 'add') { + const overviewMethod = action === 'edit'? 'getLogbooks': 'resetSortAndReload'; + this.matCardType === 'logbook-module' + ? await this.logbookIconScrollService.reload() + : await this.overviewTable[overviewMethod](); + } + async deleteLogbook(logbookId: string) { await this.dataService.deleteLogbook(logbookId); await this.logbookIconScrollService.reload(); @@ -170,7 +179,7 @@ export class OverviewComponent implements OnInit { } this.subscriptions.push(dialogRef.afterClosed().subscribe(async result => { if (typeof result != "undefined") { - await this.logbookIconScrollService.reload(); + await this.reloadData('add'); } })); } From 98c07a02e49658b7116635c2c320bf082a464c6c Mon Sep 17 00:00:00 2001 From: minottic Date: Thu, 24 Oct 2024 14:49:49 +0200 Subject: [PATCH 4/7] Add overview tests --- .../app/overview/overview.component.spec.ts | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/scilog/src/app/overview/overview.component.spec.ts b/scilog/src/app/overview/overview.component.spec.ts index 21c4cd63..fd82530d 100644 --- a/scilog/src/app/overview/overview.component.spec.ts +++ b/scilog/src/app/overview/overview.component.spec.ts @@ -10,6 +10,7 @@ import { of } from 'rxjs'; import { RouterTestingModule } from '@angular/router/testing'; import { ResizedEvent } from '@shared/directives/resized.directive'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { LogbookIconScrollService } from './logbook-icon-scroll-service.service'; class UserPreferencesMock { userInfo = { @@ -35,17 +36,20 @@ describe('OverviewComponent', () => { cookiesSpy = jasmine.createSpyObj("CookieService", ["lastLogbook"]); cookiesSpy.lastLogbook.and.returnValue([]); + const tableSpy = jasmine.createSpyObj("OverviewTableComponent", ['getLogbooks', 'resetSortAndReload']); + const logbookIconSpy = jasmine.createSpyObj("logbookIconScrollService", ['reload', 'initialize']); beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ OverviewComponent], imports: [MatDialogModule, RouterTestingModule, BrowserAnimationsModule], providers: [ - { provide: MAT_DIALOG_DATA, useValue: {} }, + {provide: MAT_DIALOG_DATA, useValue: {}}, {provide: LogbookInfoService, useValue: logbookInfoSpy}, {provide: UserPreferencesService, useClass: UserPreferencesMock}, {provide: CookieService}, {provide: LogbookDataService, useValue: logbookDataSpy}, + {provide: LogbookIconScrollService, useValue: logbookIconSpy}, ] }) @@ -57,6 +61,7 @@ describe('OverviewComponent', () => { component = fixture.componentInstance; fixture.detectChanges(); component.logbookIconScrollService.groupSize = 3; + component.overviewTable = tableSpy; }); it('should create', () => { @@ -93,11 +98,11 @@ describe('OverviewComponent', () => { [{newRect: {width: 400}, oldRect: {width: 300}}, [0, 1]], ].forEach((t, i) => { it(`should test onResized ${i}:logbook-module`, () => { - const initializeSpy = spyOn(component["logbookIconScrollService"], "initialize"); - const reloadSpy = spyOn(component["logbookIconScrollService"], "reload"); + logbookIconSpy.initialize.calls.reset(); + logbookIconSpy.reload.calls.reset(); component.onResized(t[0] as ResizedEvent); - expect(initializeSpy).toHaveBeenCalledTimes(t[1][0]); - expect(reloadSpy).toHaveBeenCalledTimes(t[1][1]); + expect(logbookIconSpy.initialize).toHaveBeenCalledTimes(t[1][0]); + expect(logbookIconSpy.reload).toHaveBeenCalledTimes(t[1][1]); }); }); @@ -109,12 +114,12 @@ describe('OverviewComponent', () => { [{newRect: {height: 400}, oldRect: {height: 300}}, [0, 1]], ].forEach((t, i) => { it(`should test onResized ${i}:logbook-headline`, () => { + logbookIconSpy.initialize.calls.reset(); + logbookIconSpy.reload.calls.reset(); component.matCardType = 'logbook-headline'; - const initializeSpy = spyOn(component["logbookIconScrollService"], "initialize"); - const reloadSpy = spyOn(component["logbookIconScrollService"], "reload"); component.onResized(t[0] as ResizedEvent); - expect(initializeSpy).toHaveBeenCalledTimes(t[1][0]); - expect(reloadSpy).toHaveBeenCalledTimes(t[1][1]); + expect(logbookIconSpy.initialize).toHaveBeenCalledTimes(t[1][0]); + expect(logbookIconSpy.reload).toHaveBeenCalledTimes(t[1][1]); }); }); @@ -128,21 +133,23 @@ describe('OverviewComponent', () => { }); }); - [ - ['logbook-module', 2], - ['logbook-headline', 3] - ].forEach(t => { - it(`should test reInitScrollAfterToggle ${t[0]}`, () => { - component.logbookContainer.nativeElement = { clientWidth: 704, clientHeight: 147 } as HTMLElement; - component.reInitScrollAfterToggle(t[0] as MatCardType); - expect(component.logbookIconScrollService.groupSize).toEqual(t[1] as number); - }); - }); - it('should trigger onResized on window resize', () => { const onResizedSpy = spyOn(component, 'onResized'); window.dispatchEvent(new Event('resize')); expect(onResizedSpy).toHaveBeenCalled(); }); + [ + ['logbook-module', logbookIconSpy.reload, 'add'], + ['logbook-headline', tableSpy.getLogbooks, 'edit'], + ['logbook-headline', tableSpy.resetSortAndReload, 'add'], + ].forEach((t, i) => { + it(`should test reloadData ${i}`, async() => { + t[1].calls.reset(); + component.matCardType = t[0] as MatCardType; + await component['reloadData'](t[2] as 'edit' | 'add'); + expect(t[1]).toHaveBeenCalledTimes(1); + }); + }); + }); From 6750e18aeec46f5833883f3c622eb7fff01a67f9 Mon Sep 17 00:00:00 2001 From: minottic Date: Thu, 24 Oct 2024 21:34:19 +0200 Subject: [PATCH 5/7] Move getCount to parent component --- scilog/src/app/core/remote-data.service.ts | 41 +++++++++++----------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/scilog/src/app/core/remote-data.service.ts b/scilog/src/app/core/remote-data.service.ts index 176015bd..c4bbc4f0 100644 --- a/scilog/src/app/core/remote-data.service.ts +++ b/scilog/src/app/core/remote-data.service.ts @@ -132,6 +132,14 @@ export class RemoteDataService { }; } + async getCount(config: any) { + let filter = this._prepareFilters(config); + console.log(filter); + let params = new HttpParams(); + params = params.set('where', JSON.stringify(filter["where"])); + return this.getSnippets('basesnippets/count', { params: params }).toPromise() + } + } @Injectable({ @@ -210,16 +218,6 @@ export class LogbookItemDataService extends RemoteDataService { return this.getSnippets('basesnippets/' + id, { headers: headers, params: params }).toPromise(); } - async getCount(config: any) { - let filter = this._prepareFilters(config); - // let whereFilter = filter["where"]; - console.log(filter); - let params = new HttpParams(); - params = params.set('where', JSON.stringify(filter["where"])); - // let count:Count = await this.getSnippets('basesnippets/count', {params:params}).toPromise(); - return this.getSnippets('basesnippets/count', { params: params }).toPromise() - } - async getIndex(id: string, config: any) { let filter = this._prepareFilters(config); console.log(filter); @@ -372,9 +370,20 @@ export class LogbookDataService extends RemoteDataService { headers = headers.set('Content-Type', 'application/json; charset=utf-8'); this._searchString = this._searchString.trim(); + let httpFilter: Object = this._prepareFilters(config, index, count); + let params = new HttpParams(); + params = params.set('filter', JSON.stringify(httpFilter)) + + if (this._searchString.length == 0) { + return this.getSnippets('basesnippets', { headers: headers, params: params }).toPromise(); + } else { + return this.getSnippets('basesnippets/search=' + this._searchString, { headers: headers, params: params }).toPromise(); + } + } + protected _prepareFilters(config: WidgetItemConfig, index: number = 0, count: number = Infinity): Object { let httpFilter: Object = {}; - httpFilter["order"] = ["defaultOrder DESC"]; + httpFilter["order"] = config.view.order ?? ["defaultOrder DESC"]; let whereFilter: Object[] = []; whereFilter.push({ "snippetType": "logbook", deleted: false }); @@ -391,16 +400,8 @@ export class LogbookDataService extends RemoteDataService { if (this._searchString.length > 0) { httpFilter["include"] = [{ "relation": "subsnippets" }]; } - let params = new HttpParams(); - params = params.set('filter', JSON.stringify(httpFilter)) - - if (this._searchString.length == 0) { - return this.getSnippets('basesnippets', { headers: headers, params: params }).toPromise(); - } else { - return this.getSnippets('basesnippets/search=' + this._searchString, { headers: headers, params: params }).toPromise(); - } + return httpFilter; } - } @Injectable({ From b464de2022729f22ddd4114ca01d828b469dca2f Mon Sep 17 00:00:00 2001 From: minottic Date: Thu, 24 Oct 2024 21:34:45 +0200 Subject: [PATCH 6/7] Add remote data test --- scilog/src/app/core/remote-data.service.spec.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scilog/src/app/core/remote-data.service.spec.ts b/scilog/src/app/core/remote-data.service.spec.ts index 0f87662c..f24f6322 100644 --- a/scilog/src/app/core/remote-data.service.spec.ts +++ b/scilog/src/app/core/remote-data.service.spec.ts @@ -289,7 +289,6 @@ describe('LogbookDataService', () => { expect(spyGetSnippets.calls.mostRecent().args[0]).toEqual("logbooks/1"); }); - it('should call getSnippets with list of ids', () => { const spyGetSnippets = spyOn(service, "getSnippets").and.returnValue(of([])); service.getLogbooksInfo(["1", "2", "3"]); @@ -297,6 +296,16 @@ describe('LogbookDataService', () => { toEqual("filter=%7B%22where%22:%7B%22id%22:%7B%22inq%22:%5B%221%22,%222%22,%223%22%5D%7D%7D%7D"); }); + it('should test _prepareFilters', () => { + const filters = service['_prepareFilters']({ general: {}, filter: {}, view: {} }, 10, 20); + expect(filters).toEqual({ + order: ['defaultOrder DESC'], + where: {and: [{snippetType: 'logbook', deleted: false}]}, + limit: 20, + skip: 10 + }); + }); + }); describe('SearchDataService', () => { From 0f5b49a221c933abcf0a0b06fd3f87535489afab Mon Sep 17 00:00:00 2001 From: minottic Date: Fri, 25 Oct 2024 13:40:11 +0200 Subject: [PATCH 7/7] Fix styles --- .../overview-table/overview-table.component.html | 2 +- .../overview-table/overview-table.component.scss | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/scilog/src/app/overview/overview-table/overview-table.component.html b/scilog/src/app/overview/overview-table/overview-table.component.html index 91467ef3..aa1c7615 100644 --- a/scilog/src/app/overview/overview-table/overview-table.component.html +++ b/scilog/src/app/overview/overview-table/overview-table.component.html @@ -28,7 +28,7 @@ - +