diff --git a/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html index 2ea3f3c08..42367e8c3 100644 --- a/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html +++ b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html @@ -5,11 +5,11 @@
+
+ +
+
diff --git a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.scss b/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.scss similarity index 100% rename from comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.scss rename to comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.scss diff --git a/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.spec.ts b/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.spec.ts new file mode 100644 index 000000000..1de3963b1 --- /dev/null +++ b/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.spec.ts @@ -0,0 +1,79 @@ +/* + * ComiXed - A digital comic book library management application. + * Copyright (C) 2020, The ComiXed Project + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComicFileCoversComponent } from './comic-file-covers.component'; +import { LoggerModule } from '@angular-ru/logger'; +import { MockStore, provideMockStore } from '@ngrx/store/testing'; +import { + COMIC_FILE_1, + COMIC_FILE_2, + COMIC_FILE_3, + COMIC_FILE_4 +} from '@app/comic-files/comic-file.fixtures'; +import { + COMIC_IMPORT_FEATURE_KEY, + initialState as initialComicImportState +} from '@app/comic-files/reducers/comic-import.reducer'; +import { TranslateModule } from '@ngx-translate/core'; + +describe('ComicFileCoversComponent', () => { + const initialState = { [COMIC_IMPORT_FEATURE_KEY]: initialComicImportState }; + const FILES = [COMIC_FILE_1, COMIC_FILE_2, COMIC_FILE_3, COMIC_FILE_4]; + const FILE = COMIC_FILE_4; + + let component: ComicFileCoversComponent; + let fixture: ComponentFixture; + let store: MockStore; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ComicFileCoversComponent], + imports: [TranslateModule.forRoot(), LoggerModule.forRoot()], + providers: [provideMockStore({ initialState })] + }).compileComponents(); + + fixture = TestBed.createComponent(ComicFileCoversComponent); + component = fixture.componentInstance; + store = TestBed.inject(MockStore); + spyOn(store, 'dispatch'); + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('checking a selection', () => { + const SELECTED_FILE = FILES[1]; + const NOT_SELECTED_FILE = FILES[2]; + + beforeEach(() => { + component.files = FILES; + component.selectedFiles = [SELECTED_FILE]; + }); + + it('returns true for an selected file', () => { + expect(component.isFileSelected(SELECTED_FILE)).toBeTrue(); + }); + + it('returns false for an unselected file', () => { + expect(component.isFileSelected(NOT_SELECTED_FILE)).toBeFalse(); + }); + }); +}); diff --git a/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.ts b/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.ts new file mode 100644 index 000000000..2dd3170e9 --- /dev/null +++ b/comixed-webui/src/app/comic-files/components/comic-file-covers/comic-file-covers.component.ts @@ -0,0 +1,40 @@ +/* + * ComiXed - A digital comic book library management application. + * Copyright (C) 2020, The ComiXed Project + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see + */ + +import { Component, Input, OnInit } from '@angular/core'; +import { ComicFile } from '@app/comic-files/models/comic-file'; +import { LoggerService } from '@angular-ru/logger'; +import { Store } from '@ngrx/store'; + +@Component({ + selector: 'cx-comic-file-covers', + templateUrl: './comic-file-covers.component.html', + styleUrls: ['./comic-file-covers.component.scss'] +}) +export class ComicFileCoversComponent implements OnInit { + @Input() files: ComicFile[] = []; + @Input() selectedFiles: ComicFile[] = []; + + constructor(private logger: LoggerService, private store: Store) {} + + ngOnInit(): void {} + + isFileSelected(file: ComicFile): boolean { + return this.selectedFiles.includes(file); + } +} diff --git a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.html b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.html index cedd0952e..eea04fdb6 100644 --- a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.html +++ b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.html @@ -1,12 +1,21 @@ - + {{ file.baseFilename }} - +

selected: {{ selected }}

+
+ +
@@ -16,43 +25,4 @@ }}
- -
- - - - -
- diff --git a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.spec.ts b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.spec.ts index ebb8ae7d5..b5940c4c3 100644 --- a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.spec.ts +++ b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.spec.ts @@ -17,10 +17,7 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { - CARD_WIDTH_PADDING, - ComicFileDetailsComponent -} from './comic-file-details.component'; +import { ComicFileDetailsComponent } from './comic-file-details.component'; import { LoggerModule } from '@angular-ru/logger'; import { MockStore, provideMockStore } from '@ngrx/store/testing'; import { @@ -29,49 +26,28 @@ import { COMIC_FILE_3 } from '@app/comic-files/comic-file.fixtures'; import { setComicFilesSelectedState } from '@app/comic-files/actions/comic-file-list.actions'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { - COMIC_FILE_LIST_FEATURE_KEY, - initialState as initialComicFileListState -} from '@app/comic-files/reducers/comic-file-list.reducer'; import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component'; describe('ComicFileDetailsComponent', () => { const FILE = COMIC_FILE_2; const COMIC_FILES = [COMIC_FILE_1, COMIC_FILE_2, COMIC_FILE_3]; - const initialState = { - [COMIC_FILE_LIST_FEATURE_KEY]: initialComicFileListState - }; + const initialState = {}; let component: ComicFileDetailsComponent; let fixture: ComponentFixture; let store: MockStore; - let dialog: jasmine.SpyObj>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [LoggerModule.forRoot()], declarations: [ComicFileDetailsComponent, ComicPageComponent], - providers: [ - provideMockStore({ initialState }), - { - provide: MatDialogRef, - useValue: {} - }, - { - provide: MAT_DIALOG_DATA, - useValue: {} - } - ] + providers: [provideMockStore({ initialState })] }).compileComponents(); fixture = TestBed.createComponent(ComicFileDetailsComponent); component = fixture.componentInstance; store = TestBed.inject(MockStore); spyOn(store, 'dispatch'); - dialog = TestBed.inject(MatDialogRef) as jasmine.SpyObj< - MatDialogRef - >; fixture.detectChanges(); })); @@ -86,7 +62,8 @@ describe('ComicFileDetailsComponent', () => { describe('selecting the comic', () => { beforeEach(() => { - component.onSelectFile(true); + component.selected = false; + component.onSelectFile(); }); it('fires an action', () => { @@ -98,7 +75,8 @@ describe('ComicFileDetailsComponent', () => { describe('deselecting the comic', () => { beforeEach(() => { - component.onSelectFile(false); + component.selected = true; + component.onSelectFile(); }); it('fires an action', () => { @@ -108,72 +86,4 @@ describe('ComicFileDetailsComponent', () => { }); }); }); - - describe('the card width', () => { - const PAGE_SIZE = 400; - - beforeEach(() => { - component.pageSize = PAGE_SIZE; - }); - - it('returns a padded card size', () => { - expect(component.cardWidth).toEqual( - `${PAGE_SIZE + CARD_WIDTH_PADDING}px` - ); - }); - }); - - describe('navigating the comic files', () => { - beforeEach(() => { - store.setState({ - ...initialState, - [COMIC_FILE_LIST_FEATURE_KEY]: { - ...initialComicFileListState, - files: COMIC_FILES - } - }); - }); - - it('disables the previous button when on the first entry', () => { - component.file = COMIC_FILES[0]; - component.updateNavigationButtons(); - expect(component.noPreviousFile).toBeTrue(); - }); - - it('disables the next button when on the last entry', () => { - component.file = COMIC_FILES[2]; - component.updateNavigationButtons(); - expect(component.noNextFile).toBeTrue(); - }); - - describe('going to the previous comic', () => { - beforeEach(() => { - component.file = COMIC_FILES[2]; - component.onPreviousFile(); - }); - - it('updates the current comic file', () => { - expect(component.file).toEqual(COMIC_FILES[1]); - }); - - it('enables the previous button', () => { - expect(component.noPreviousFile).toBeFalse(); - }); - }); - - describe('going to the next comic', () => { - beforeEach(() => { - component.file = COMIC_FILES[0]; - component.onNextFile(); - }); - - it('updates the current comic file', () => { - expect(component.file).toEqual(COMIC_FILES[1]); - }); - - it('enables the next button', () => { - expect(component.noNextFile).toBeFalse(); - }); - }); - }); }); diff --git a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.ts b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.ts index 7d8d4d8a7..ccdf8e347 100644 --- a/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.ts +++ b/comixed-webui/src/app/comic-files/components/comic-file-details/comic-file-details.component.ts @@ -16,18 +16,11 @@ * along with this program. If not, see */ -import { Component, Inject, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ComicFile } from '@app/comic-files/models/comic-file'; import { LoggerService } from '@angular-ru/logger'; import { Store } from '@ngrx/store'; import { setComicFilesSelectedState } from '@app/comic-files/actions/comic-file-list.actions'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { ComicFileDetailsData } from '@app/library/models/ui/comic-file-details-data'; -import { Subscription } from 'rxjs'; -import { - selectComicFiles, - selectComicFileSelections -} from '@app/comic-files/selectors/comic-file-list.selectors'; export const CARD_WIDTH_PADDING = 20; @@ -37,78 +30,22 @@ export const CARD_WIDTH_PADDING = 20; styleUrls: ['./comic-file-details.component.scss'] }) export class ComicFileDetailsComponent implements OnInit, OnDestroy { - file: ComicFile = null; - pageSize: number; - - filesSubscription: Subscription; - files: ComicFile[]; - selectedFilesSubscription: Subscription; - selectedFiles: ComicFile[]; + @Input() + file: ComicFile; + @Input() selected = false; - noPreviousFile = true; - noNextFile = true; - - constructor( - private logger: LoggerService, - private store: Store, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: ComicFileDetailsData - ) { - this.file = this.data.file; - this.pageSize = this.data.pageSize; - this.filesSubscription = this.store - .select(selectComicFiles) - .subscribe(files => { - this.files = files; - this.updateNavigationButtons(); - }); - this.selectedFilesSubscription = this.store - .select(selectComicFileSelections) - .subscribe(selectedFiles => { - this.selectedFiles = selectedFiles; - this.selected = this.selectedFiles.includes(this.file); - }); - } - - get cardWidth(): string { - return `${this.pageSize + CARD_WIDTH_PADDING}px`; - } + constructor(private logger: LoggerService, private store: Store) {} ngOnInit(): void {} - ngOnDestroy(): void { - this.filesSubscription.unsubscribe(); - this.selectedFilesSubscription.unsubscribe(); - } + ngOnDestroy(): void {} - onSelectFile(selected: boolean): void { - this.logger.debug( - `${selected ? 'Selecting' : 'Deselecting'} current file:`, - this.file - ); + onSelectFile(): void { + const selected = this.selected === false; + this.logger.debug('Toggling selected:', selected); this.store.dispatch( setComicFilesSelectedState({ files: [this.file], selected }) ); } - - onPreviousFile(): void { - const index = this.files.indexOf(this.file) - 1; - this.file = this.files[index]; - this.selected = this.selectedFiles.includes(this.file); - this.updateNavigationButtons(); - } - - onNextFile(): void { - const index = this.files.indexOf(this.file) + 1; - this.file = this.files[index]; - this.selected = this.selectedFiles.includes(this.file); - this.updateNavigationButtons(); - } - - updateNavigationButtons(): void { - const index = this.files.indexOf(this.file); - this.noPreviousFile = index === 0; - this.noNextFile = index === this.files.length - 1; - } } diff --git a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.html b/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.html deleted file mode 100644 index 32d9a0c3f..000000000 --- a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - {{ "comic-files.header.filename" | translate }} - - {{ file.baseFilename }} - - - - - {{ "comic-files.header.size" | translate }} - - - {{ file.size / 1024 | number: "1.2-2" }} - - - - - - diff --git a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.spec.ts b/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.spec.ts deleted file mode 100644 index 5db659c26..000000000 --- a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.spec.ts +++ /dev/null @@ -1,217 +0,0 @@ -/* - * ComiXed - A digital comic book library management application. - * Copyright (C) 2020, The ComiXed Project - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see - */ - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ComicFileListComponent } from './comic-file-list.component'; -import { LoggerModule } from '@angular-ru/logger'; -import { MockStore, provideMockStore } from '@ngrx/store/testing'; -import { - COMIC_FILE_1, - COMIC_FILE_2, - COMIC_FILE_3, - COMIC_FILE_4 -} from '@app/comic-files/comic-file.fixtures'; -import { - COMIC_IMPORT_FEATURE_KEY, - initialState as initialComicImportState -} from '@app/comic-files/reducers/comic-import.reducer'; -import { MatTableModule } from '@angular/material/table'; -import { TranslateModule } from '@ngx-translate/core'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { setComicFilesSelectedState } from '@app/comic-files/actions/comic-file-list.actions'; - -describe('ComicFileListComponent', () => { - const initialState = { [COMIC_IMPORT_FEATURE_KEY]: initialComicImportState }; - const FILES = [COMIC_FILE_1, COMIC_FILE_2, COMIC_FILE_3, COMIC_FILE_4]; - const FILE = COMIC_FILE_4; - - let component: ComicFileListComponent; - let fixture: ComponentFixture; - let store: MockStore; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ComicFileListComponent], - imports: [ - TranslateModule.forRoot(), - LoggerModule.forRoot(), - MatTableModule, - MatCheckboxModule - ], - providers: [provideMockStore({ initialState })] - }).compileComponents(); - - fixture = TestBed.createComponent(ComicFileListComponent); - component = fixture.componentInstance; - store = TestBed.inject(MockStore); - spyOn(store, 'dispatch'); - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('setting the list of comic files', () => { - beforeEach(() => { - component.files = FILES; - }); - - it('updates the set of files', () => { - expect(component.files).toEqual(FILES); - }); - }); - - describe('setting the list of selected comic files', () => { - beforeEach(() => { - component.files = FILES; - component.selectedFiles = FILES; - }); - - it('updates the set of selected files', () => { - expect(component.selectedFiles).toEqual(FILES); - }); - }); - - describe('checking a selection', () => { - const SELECTED_FILE = FILES[1]; - const NOT_SELECTED_FILE = FILES[2]; - - beforeEach(() => { - component.files = FILES; - component.selectedFiles = [SELECTED_FILE]; - }); - - it('returns true for an selected file', () => { - expect(component.isFileSelected(SELECTED_FILE)).toBeTrue(); - }); - - it('returns false for an unselected file', () => { - expect(component.isFileSelected(NOT_SELECTED_FILE)).toBeFalse(); - }); - }); - - describe('selecting a comic file', () => { - beforeEach(() => { - component.onSelectFile(FILE, true); - }); - - it('fires an action', () => { - expect(store.dispatch).toHaveBeenCalledWith( - setComicFilesSelectedState({ files: [FILE], selected: true }) - ); - }); - }); - - describe('deselecting a comic file', () => { - beforeEach(() => { - component.onSelectFile(FILE, false); - }); - - it('fires an action', () => { - expect(store.dispatch).toHaveBeenCalledWith( - setComicFilesSelectedState({ files: [FILE], selected: false }) - ); - }); - }); - - describe('selecting all comics', () => { - beforeEach(() => { - component.files = FILES; - component.onSelectAll(true); - }); - - it('fires an action', () => { - expect(store.dispatch).toHaveBeenCalledWith( - setComicFilesSelectedState({ files: FILES, selected: true }) - ); - }); - }); - - describe('deselecting all comics', () => { - beforeEach(() => { - component.files = FILES; - component.onSelectAll(false); - }); - - it('fires an action', () => { - expect(store.dispatch).toHaveBeenCalledWith( - setComicFilesSelectedState({ files: FILES, selected: false }) - ); - }); - }); - - describe('selecting a row', () => { - it('emits an event', () => { - component.currentFile.subscribe(response => - expect(response).toEqual(FILE) - ); - }); - - afterEach(() => { - component.onRowSelected(FILE); - }); - }); - - describe('sorting the data', () => { - beforeEach(() => { - component.files = FILES; - component.selectedFiles = [COMIC_FILE_2, COMIC_FILE_4]; - }); - - describe('sorting by selection state', () => { - beforeEach(() => { - component.onSortChanged({ active: '', direction: '' }); - }); - - it('still has data', () => { - expect(component.files).not.toEqual([]); - }); - }); - - describe('sorting by selection state', () => { - beforeEach(() => { - component.onSortChanged({ active: 'selected', direction: 'asc' }); - }); - - it('still has data', () => { - expect(component.files).not.toEqual([]); - }); - }); - - describe('sorting by filename', () => { - beforeEach(() => { - component.onSortChanged({ active: 'filename', direction: 'asc' }); - }); - - it('still has data', () => { - expect(component.files).not.toEqual([]); - }); - }); - - describe('sorting by size', () => { - beforeEach(() => { - component.onSortChanged({ active: 'size', direction: 'asc' }); - }); - - it('still has data', () => { - expect(component.files).not.toEqual([]); - }); - }); - }); -}); diff --git a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.ts b/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.ts deleted file mode 100644 index 5e61dccfe..000000000 --- a/comixed-webui/src/app/comic-files/components/comic-file-list/comic-file-list.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -/* - * ComiXed - A digital comic book library management application. - * Copyright (C) 2020, The ComiXed Project - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see - */ - -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { ComicFile } from '@app/comic-files/models/comic-file'; -import { MatTableDataSource } from '@angular/material/table'; -import { LoggerService } from '@angular-ru/logger'; -import { Store } from '@ngrx/store'; -import { setComicFilesSelectedState } from '@app/comic-files/actions/comic-file-list.actions'; -import { Sort } from '@angular/material/sort'; -import { compare } from '@app/core'; - -@Component({ - selector: 'cx-comic-file-list', - templateUrl: './comic-file-list.component.html', - styleUrls: ['./comic-file-list.component.scss'] -}) -export class ComicFileListComponent implements OnInit { - @Output() currentFile = new EventEmitter(); - dataSource = new MatTableDataSource(); - displayedColumns = ['selected', 'filename', 'size']; - allSelected = false; - - constructor(private logger: LoggerService, private store: Store) {} - - private _files: ComicFile[] = []; - - get files(): ComicFile[] { - return this._files; - } - - @Input() set files(files: ComicFile[]) { - this.logger.debug('Setting files'); - this._files = files; - this.dataSource.data = files; - this.currentFile.emit(null); - } - - private _selectedFiles: ComicFile[] = []; - - get selectedFiles(): ComicFile[] { - return this._selectedFiles; - } - - @Input() set selectedFiles(selectedFiles: ComicFile[]) { - this.logger.debug('Setting selected files'); - this._selectedFiles = selectedFiles; - this.allSelected = - this.files.length > 0 && this.files.length === this.selectedFiles.length; - this.logger.debug(`allSelected is now ${this.allSelected}`); - } - - ngOnInit(): void {} - - isFileSelected(file: ComicFile): boolean { - return this.selectedFiles.includes(file); - } - - onSelectAll(selected: boolean): void { - this.logger.debug(`${selected ? 'Selecting' : 'Deselecting'} all files`); - this.store.dispatch( - setComicFilesSelectedState({ files: this.files, selected }) - ); - } - - onSelectFile(file: ComicFile, selected: boolean): void { - this.logger.debug('Selecting file:', file); - this.store.dispatch( - setComicFilesSelectedState({ files: [file], selected }) - ); - } - - onRowSelected(file: ComicFile): void { - this.currentFile.emit(file); - } - - onSortChanged(sort: Sort): void { - this.logger.debug('Sorting changed:', sort); - const data = this.files.slice(); - if (!sort.active || sort.direction === '') { - this.files = data; - return; - } - this.files = data.sort((a, b) => { - const isAsc = sort.direction === 'asc'; - switch (sort.active) { - case 'selected': - return compare( - this.isFileSelected(a) ? 1 : 0, - this.isFileSelected(b) ? 1 : 0, - isAsc - ); - case 'filename': - return compare(a.filename, b.filename, isAsc); - case 'size': - return compare(a.size, b.size, isAsc); - } - }); - } -} diff --git a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.html b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.html index 8325f260e..a08528674 100644 --- a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.html +++ b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.html @@ -7,8 +7,6 @@

{{ "comic-files.busy-title" | translate }}

[user]="user" [comicFiles]="files" [selectedComicFiles]="selectedFiles" - [ignoreMetadata]="ignoreMetadata" - [deleteBlockedPages]="deleteBlockedPages" >

{{ @@ -16,10 +14,9 @@

| translate: { count: files.length, selected: selectedFiles.length } }}

- + > diff --git a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.spec.ts b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.spec.ts index 2a8c16ffc..6ab761727 100644 --- a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.spec.ts +++ b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.spec.ts @@ -46,7 +46,7 @@ import { USER_ADMIN, USER_READER } from '@app/user/user.fixtures'; import { User } from '@app/user/models/user'; import { MatIconModule } from '@angular/material/icon'; import { ComicFileToolbarComponent } from '@app/comic-files/components/comic-file-toolbar/comic-file-toolbar.component'; -import { ComicFileListComponent } from '@app/comic-files/components/comic-file-list/comic-file-list.component'; +import { ComicFileCoversComponent } from '@app/comic-files/components/comic-file-covers/comic-file-covers.component'; import { ComicFileDetailsComponent } from '@app/comic-files/components/comic-file-details/comic-file-details.component'; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; @@ -94,7 +94,7 @@ describe('ImportComicsPageComponent', () => { declarations: [ ImportComicsPageComponent, ComicFileToolbarComponent, - ComicFileListComponent, + ComicFileCoversComponent, ComicFileDetailsComponent, ComicFileCoverUrlPipe, ComicPageComponent @@ -213,30 +213,6 @@ describe('ImportComicsPageComponent', () => { }); }); - describe('when a file is selected', () => { - beforeEach(() => { - component.pageSize = PAGE_SIZE; - component.onCurrentFile(FILE); - }); - - it('opens a dialog', () => { - expect(dialog.open).toHaveBeenCalledWith(ComicFileDetailsComponent, { - data: { file: FILE, pageSize: PAGE_SIZE } - }); - }); - }); - - describe('when no file is selected', () => { - beforeEach(() => { - component.pageSize = PAGE_SIZE; - component.onCurrentFile(null); - }); - - it('does not open a dialog', () => { - expect(dialog.open).not.toHaveBeenCalled(); - }); - }); - describe('when sending files', () => { describe('when sending starts', () => { beforeEach(() => { diff --git a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.ts b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.ts index df830b36f..c1af63cb0 100644 --- a/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.ts +++ b/comixed-webui/src/app/comic-files/pages/import-comics-page/import-comics-page.component.ts @@ -74,7 +74,6 @@ export class ImportComicsPageComponent implements OnInit, OnDestroy { private store: Store, private confirmationService: ConfirmationService, private translateService: TranslateService, - private dialog: MatDialog, private titleService: TitleService ) { this.translateSubscription = this.translateService.onLangChange.subscribe( @@ -130,18 +129,6 @@ export class ImportComicsPageComponent implements OnInit, OnDestroy { this.comicImportStateSubscription.unsubscribe(); } - onCurrentFile(file: ComicFile): void { - this.logger.debug('Showing details for file:', file); - if (!!file) { - this.dialog.open(ComicFileDetailsComponent, { - data: { - file, - pageSize: this.pageSize - } as ComicFileDetailsData - }); - } - } - onStartImport(): void { this.confirmationService.confirm({ title: this.translateService.instant('comic-files.confirm-start-title'), diff --git a/comixed-webui/src/styles.scss b/comixed-webui/src/styles.scss index d81c2c2fd..bcfca8cd4 100644 --- a/comixed-webui/src/styles.scss +++ b/comixed-webui/src/styles.scss @@ -283,6 +283,17 @@ th { display: inline-block; } +.cx-detail-card-selected { + filter: sepia(100%) !important; + background-color: $cx-selected-comic-background-color !important; + color: $cx-selected-comic-color; +} + +.cx-detail-card-blurred { + filter: grayscale(75%); + filter: blur(3px); +} + // flexible containers .cx-horizontal-container {