Skip to content

Commit

Permalink
[Issue comixed#233] Integrate ReadingListEdit into the application.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcpierce
mcpierce committed May 24, 2020
1 parent 5a6aea1 commit 455c994
Show file tree
Hide file tree
Showing 9 changed files with 129 additions and 135 deletions.
48 changes: 25 additions & 23 deletions ...ontend/src/app/library/components/comic-list-toolbar/comic-list-toolbar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,34 @@
* along with this program. If not, see <http://www.gnu.org/licenses>
*/

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { EffectsModule } from '@ngrx/effects';
import { Store, StoreModule } from '@ngrx/store';
import { TranslateModule } from '@ngx-translate/core';
import { ScrapingAdaptor } from 'app/comics/adaptors/scraping.adaptor';
import { COMIC_1, COMIC_3, COMIC_5 } from 'app/comics/comics.fixtures';
import { ComicsModule } from 'app/comics/comics.module';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing';
import {EffectsModule} from '@ngrx/effects';
import {Store, StoreModule} from '@ngrx/store';
import {TranslateModule} from '@ngx-translate/core';
import {ScrapingAdaptor} from 'app/comics/adaptors/scraping.adaptor';
import {COMIC_1, COMIC_3, COMIC_5} from 'app/comics/comics.fixtures';
import {ComicsModule} from 'app/comics/comics.module';
import {
AppState,
LibraryAdaptor,
LibraryDisplayAdaptor,
ReadingListAdaptor,
SelectionAdaptor
} from 'app/library';
import { LibraryEffects } from 'app/library/effects/library.effects';
import {LibraryEffects} from 'app/library/effects/library.effects';
import * as fromLibrary from 'app/library/reducers/library.reducer';
import * as fromSelect from 'app/library/reducers/selection.reducer';
import { AuthenticationAdaptor } from 'app/user';
import { LoggerModule } from '@angular-ru/logger';
import {AuthenticationAdaptor} from 'app/user';
import {LoggerModule} from '@angular-ru/logger';
import {
ButtonModule,
CheckboxModule,
ConfirmationService,
ContextMenuModule,
DropdownModule,
MessageService,
ScrollPanelModule,
Expand All @@ -52,9 +53,9 @@ import {
TooltipModule,
TreeModule
} from 'primeng/primeng';
import { ComicListToolbarComponent } from './comic-list-toolbar.component';
import { LibraryNavigationTreeComponent } from 'app/library/components/library-navigation-tree/library-navigation-tree.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {ComicListToolbarComponent} from './comic-list-toolbar.component';
import {LibraryNavigationTreeComponent} from 'app/library/components/library-navigation-tree/library-navigation-tree.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

describe('ComicListToolbarComponent', () => {
const COMICS = [COMIC_1, COMIC_3, COMIC_5];
Expand All @@ -79,12 +80,12 @@ describe('ComicListToolbarComponent', () => {
LoggerModule.forRoot(),
StoreModule.forRoot({}),
StoreModule.forFeature(
fromLibrary.LIBRARY_FEATURE_KEY,
fromLibrary.reducer
fromLibrary.LIBRARY_FEATURE_KEY,
fromLibrary.reducer
),
StoreModule.forFeature(
fromSelect.SELECTION_FEATURE_KEY,
fromSelect.reducer
fromSelect.SELECTION_FEATURE_KEY,
fromSelect.reducer
),
EffectsModule.forRoot([]),
EffectsModule.forFeature([LibraryEffects]),
Expand All @@ -96,7 +97,8 @@ describe('ComicListToolbarComponent', () => {
CheckboxModule,
SidebarModule,
TreeModule,
ScrollPanelModule
ScrollPanelModule,
ContextMenuModule
],
declarations: [ComicListToolbarComponent, LibraryNavigationTreeComponent],
providers: [
Expand Down Expand Up @@ -133,7 +135,7 @@ describe('ComicListToolbarComponent', () => {

it('emits an event', () => {
component.startScraping.subscribe(response =>
expect(response).toBeTruthy()
expect(response).toBeTruthy()
);
});
});
Expand Down
70 changes: 0 additions & 70 deletions comixed-frontend/src/app/library/components/comic-list/comic-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@ import {
LibraryDisplayAdaptor,
SelectionAdaptor
} from 'app/library';
import { ReadingListAdaptor } from 'app/library/adaptors/reading-list.adaptor';
import { LibraryFilter } from 'app/library/models/library-filter';
import { ReadingList } from 'app/library/models/reading-list/reading-list';
import { ReadingListEntry } from 'app/library/models/reading-list/reading-list-entry';
import { LoadPageEvent } from 'app/library/models/ui/load-page-event';
import { AuthenticationAdaptor } from 'app/user';
import { generateContextMenuItems } from 'app/user-experience';
Expand All @@ -62,8 +59,6 @@ export const COMIC_LIST_MENU_CONVERT_COMIC = 'comic-list-convert-comic';
export class ComicListComponent implements OnInit, OnDestroy {
_comics: Comic[] = [];
_selectedComics: Comic[] = [];
readingListsSubscription: Subscription;
readingLists: ReadingList[];

@Input() showSelections: boolean;
@Input() imageUrl: string;
Expand Down Expand Up @@ -102,7 +97,6 @@ export class ComicListComponent implements OnInit, OnDestroy {
private libraryAdaptor: LibraryAdaptor,
private libraryDisplayAdaptor: LibraryDisplayAdaptor,
private selectionAdaptor: SelectionAdaptor,
private readingListAdaptor: ReadingListAdaptor,
private contextMenuAdaptor: ContextMenuAdaptor,
private scrapingAdaptor: ScrapingAdaptor,
private translateService: TranslateService,
Expand Down Expand Up @@ -158,10 +152,6 @@ export class ComicListComponent implements OnInit, OnDestroy {
}
}
);
this.readingListsSubscription = this.readingListAdaptor.reading_list$.subscribe(
reading_lists => (this.readingLists = reading_lists)
);
this.readingListAdaptor.get_reading_lists();
}

ngOnInit() {}
Expand All @@ -175,7 +165,6 @@ export class ComicListComponent implements OnInit, OnDestroy {
this.sameHeightSubscription.unsubscribe();
this.coverSizeSubscription.unsubscribe();
this.activatedRouteSubscription.unsubscribe();
this.readingListsSubscription.unsubscribe();
this.removeContextMenuItems();
}

Expand Down Expand Up @@ -267,65 +256,6 @@ export class ComicListComponent implements OnInit, OnDestroy {
});
}

addToReadingList(readingList: ReadingList): void {
const entries = readingList.entries;
this.selectedComics.forEach((comic: Comic) => {
if (
!entries.find((entry: ReadingListEntry) => entry.comic.id === comic.id)
) {
entries.push({ id: null, comic: comic });
}
});

this.saveReadingList(readingList, entries);
}

removeFromReadingList(readingList: ReadingList): void {
this.confirmationService.confirm({
header: this.translateService.instant(
'comic-list.remove-from-reading-list.header'
),
message: this.translateService.instant(
'comic-list.remove-from-reading-list.message',
{ reading_list_name: readingList.name }
),
accept: () => {
const entries = readingList.entries.filter(
(entry: ReadingListEntry) => {
return !this.selectedComics.some(
comic => comic.id === entry.comic.id
);
}
);
this.saveReadingList(readingList, entries);
}
});
}

saveReadingList(readingList: ReadingList, entries: ReadingListEntry[]): void {
this.readingListAdaptor.save(readingList, entries);
}

alreadyInReadingList(readingList: ReadingList): boolean {
const result = readingList.entries.some((entry: ReadingListEntry) => {
return this.selectedComics.some((comic: Comic) => {
return comic.id === entry.comic.id;
});
});

return result;
}

allInReadingList(readingList: ReadingList): boolean {
const result = readingList.entries.some((entry: ReadingListEntry) => {
return this.selectedComics.every((comic: Comic) => {
return comic.id === entry.comic.id;
});
});

return result;
}

toggleComicSelection(comic: Comic, selected: boolean): void {
if (!!comic) {
if (selected) {
Expand Down
6 changes: 5 additions & 1 deletion ...src/app/library/components/library-navigation-tree/library-navigation-tree.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,9 @@ <h3>{{'library-navigation-tree.title'|translate}}</h3>
[value]='nodes'
selectionMode='single'
filter='true'
(onNodeSelect)='showSelectedCollection($event.node)'></p-tree>
[contextMenu]='navTreeMenu'
(onNodeSelect)='nodeSelected($event.node)'
(onNodeContextMenuSelect)='showContextMenu($event.originalEvent, $event.node)'></p-tree>
<p-contextMenu #navTreeMenu
[model]='navTreeMenuItems'></p-contextMenu>
</p-scrollPanel>
10 changes: 8 additions & 2 deletions .../app/library/components/library-navigation-tree/library-navigation-tree.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LibraryNavigationTreeComponent } from './library-navigation-tree.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MessageService, ScrollPanelModule, TreeModule } from 'primeng/primeng';
import {
ContextMenuModule,
MessageService,
ScrollPanelModule,
TreeModule
} from 'primeng/primeng';
import { LoggerModule } from '@angular-ru/logger';
import { TranslateModule } from '@ngx-translate/core';
import { LibraryAdaptor, ReadingListAdaptor } from 'app/library';
Expand Down Expand Up @@ -53,7 +58,8 @@ describe('LibraryNavigationTreeComponent', () => {
EffectsModule.forRoot([]),
EffectsModule.forFeature([LibraryEffects]),
TreeModule,
ScrollPanelModule
ScrollPanelModule,
ContextMenuModule
],
declarations: [LibraryNavigationTreeComponent],
providers: [LibraryAdaptor, ReadingListAdaptor, MessageService]
Expand Down
47 changes: 45 additions & 2 deletions ...d/src/app/library/components/library-navigation-tree/library-navigation-tree.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { ComicCollectionEntry } from 'app/library/models/comic-collection-entry'
import { NavigationDataPayload } from 'app/library/models/navigation-data-payload';
import { CollectionType } from 'app/library/models/collection-type.enum';
import { Router } from '@angular/router';
import { MenuItem } from 'primeng/components/common/menuitem';

const PUBLISHER_NODE = 0;
const SERIES_NODE = 1;
Expand Down Expand Up @@ -59,9 +60,11 @@ export class LibraryNavigationTreeComponent implements OnInit, OnDestroy {
private locationSubscription: Subscription;
private storiesSubscription: Subscription;
private readingListSubscription: Subscription;
private langChangeSubscription: Subscription;

nodes: TreeNode[];
treeFilter = '';
navTreeMenuItems: MenuItem[] = [];

constructor(
private logger: LoggerService,
Expand Down Expand Up @@ -170,6 +173,10 @@ export class LibraryNavigationTreeComponent implements OnInit, OnDestroy {
this.readingListSubscription = this.libraryAdaptor.readingLists$.subscribe(
lists => this.loadReadingLists(lists)
);
this.langChangeSubscription = this.translateService.onLangChange.subscribe(
() => this.loadTranslations()
);
this.loadTranslations();
}

ngOnInit() {}
Expand Down Expand Up @@ -225,7 +232,7 @@ export class LibraryNavigationTreeComponent implements OnInit, OnDestroy {
} as TreeNode;
}

showSelectedCollection(node: TreeNode) {
nodeSelected(node: TreeNode) {
const nodeData = node.data as NavigationDataPayload;
switch (nodeData.type) {
case CollectionType.PUBLISHERS:
Expand Down Expand Up @@ -258,7 +265,8 @@ export class LibraryNavigationTreeComponent implements OnInit, OnDestroy {
key: list.name,
data: {
type: CollectionType.READING_LISTS,
name: list.name
name: list.name,
original: list
} as NavigationDataPayload,
icon: 'pi pi-list',
expanded: false,
Expand All @@ -267,4 +275,39 @@ export class LibraryNavigationTreeComponent implements OnInit, OnDestroy {
})
} as TreeNode;
}

private loadTranslations() {
this.loadNavTreeMenuItems();
}

private loadNavTreeMenuItems() {
this.navTreeMenuItems = [];
}

showContextMenu(event: MouseEvent, node: TreeNode): void {
this.loadNavTreeMenuItems();
if (node === this.nodes[0].children[READING_LISTS]) {
this.navTreeMenuItems.push({
label: this.translateService.instant(
'library-navigation-tree.popup-menu.create-reading-list'
),
icon: 'fa fa-fw fa-list',
command: () => this.readingListAdaptor.create()
});
} else if (!!node.data && node.data.type === CollectionType.READING_LISTS) {
const readingList = this.libraryAdaptor.getReadingList(
node.data.original.name
);
this.navTreeMenuItems = this.navTreeMenuItems.concat([
{
label: this.translateService.instant(
'library-navigation-tree.popup-menu.edit-reading-list',
{ name: readingList.name }
),
icon: 'fa fa-fw fa-edit',
command: () => this.readingListAdaptor.edit(readingList)
}
]);
}
}
}
1 change: 1 addition & 0 deletions comixed-frontend/src/app/library/models/navigation-data-payload.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,5 @@ import { CollectionType } from 'app/library/models/collection-type.enum';
export interface NavigationDataPayload {
type: CollectionType;
name: string;
original?: any;
}
2 changes: 2 additions & 0 deletions comixed-frontend/src/app/library/pages/library-page/library-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<app-reading-list-edit></app-reading-list-edit>

<h2 *ngIf='!!collectionType'>
{{'library-page.title-for-collection'|translate:{type: collectionType, name: collectionName, count: comics.length} }}
</h2>
Expand Down

0 comments on commit 455c994

Please sign in to comment.