From b47d2acac838c3db798b45c6451139d394a843f4 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sun, 20 Dec 2020 18:02:57 -0600 Subject: [PATCH] Cleaned up the code a bit and some UX --- src/app/_models/member.ts | 2 +- src/app/_services/account.service.ts | 5 ++- src/app/_services/library.service.ts | 5 +++ .../library-access-modal.component.html | 9 +++-- .../library-access-modal.component.ts | 37 +++++++++++++++++-- src/app/admin/admin.module.ts | 4 +- .../manage-library.component.html | 12 ++++-- .../manage-users/manage-users.component.html | 7 ++-- .../manage-users/manage-users.component.ts | 8 ++++ src/app/app.component.ts | 4 +- 10 files changed, 73 insertions(+), 20 deletions(-) diff --git a/src/app/_models/member.ts b/src/app/_models/member.ts index f8a990f2e..aacdad561 100644 --- a/src/app/_models/member.ts +++ b/src/app/_models/member.ts @@ -5,5 +5,5 @@ export interface Member { lastActive: string; // datetime created: string; // datetime isAdmin: boolean; - libraries?: Library[]; + libraries: Library[]; } \ No newline at end of file diff --git a/src/app/_services/account.service.ts b/src/app/_services/account.service.ts index a9f5ebb81..33762a16d 100644 --- a/src/app/_services/account.service.ts +++ b/src/app/_services/account.service.ts @@ -11,6 +11,7 @@ import { User } from '../_models/user'; export class AccountService { baseUrl = environment.apiUrl; + userKey = 'kavita-user'; // Stores values, when someone subscribes gives (1) of last values seen. private currentUserSource = new ReplaySubject(1); @@ -31,12 +32,12 @@ export class AccountService { } setCurrentUser(user: User) { - localStorage.setItem('user', JSON.stringify(user)); + localStorage.setItem(this.userKey, JSON.stringify(user)); this.currentUserSource.next(user); } logout() { - localStorage.removeItem('user'); + localStorage.removeItem(this.userKey); this.currentUserSource.next(undefined); } diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts index 2a3d32f86..49399a650 100644 --- a/src/app/_services/library.service.ts +++ b/src/app/_services/library.service.ts @@ -29,4 +29,9 @@ export class LibraryService { return this.httpClient.get(this.baseUrl + 'library/' + username); } + updateLibrariesForMember(username: string, selectedLibraries: Library[]) { + return this.httpClient.post(this.baseUrl + '/library/update-for', {username, selectedLibraries}); + } + + } diff --git a/src/app/admin/_modals/library-access-modal/library-access-modal.component.html b/src/app/admin/_modals/library-access-modal/library-access-modal.component.html index f6828883d..458880b5e 100644 --- a/src/app/admin/_modals/library-access-modal/library-access-modal.component.html +++ b/src/app/admin/_modals/library-access-modal/library-access-modal.component.html @@ -7,16 +7,17 @@
-
  • +
  • - - + +
    • - +
    diff --git a/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts b/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts index da4943d1d..2ec0efd0d 100644 --- a/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts +++ b/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts @@ -13,13 +13,26 @@ import { LibraryService } from 'src/app/_services/library.service'; export class LibraryAccessModalComponent implements OnInit { @Input() member: Member | undefined; - libraries: Library[] = []; + allLibraries: Library[] = []; + selectedLibraries: Array<{selected: boolean, data: Library}> = []; constructor(public modal: NgbActiveModal, private libraryService: LibraryService, private fb: FormBuilder) { } ngOnInit(): void { - this.libraryService.getLibrariesForMember(this.member?.username + '').subscribe(libs => { - this.libraries = libs; + this.libraryService.getLibraries().subscribe(libs => { + this.allLibraries = libs; + this.selectedLibraries = libs.map(item => { + return {selected: false, data: item}; + }); + + if (this.member !== undefined) { + this.member.libraries.forEach(lib => { + const foundLibrary = this.selectedLibraries.filter(item => item.data.name === lib.name); + if (foundLibrary.length > 0) { + foundLibrary[0].selected = true; + } + }); + } }); } @@ -28,11 +41,29 @@ export class LibraryAccessModalComponent implements OnInit { } save() { + if (this.member?.username === undefined) { + return; + } + this.libraryService.updateLibrariesForMember(this.member?.username, this.selectedLibraries.map(item => item.data)).subscribe(() => { + this.modal.close(); + }); } reset() { + this.selectedLibraries = this.allLibraries.map(item => { + return {selected: false, data: item}; + }); + + if (this.member !== undefined) { + this.member.libraries.forEach(lib => { + const foundLibrary = this.selectedLibraries.filter(item => item.data.name === lib.name); + if (foundLibrary.length > 0) { + foundLibrary[0].selected = true; + } + }); + } } } diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts index b8a9d9fe8..64ee124e7 100644 --- a/src/app/admin/admin.module.ts +++ b/src/app/admin/admin.module.ts @@ -9,6 +9,7 @@ import { LibraryEditorModalComponent } from './_modals/library-editor-modal/libr import { SharedModule } from '../shared/shared.module'; import { LibraryAccessModalComponent } from './_modals/library-access-modal/library-access-modal.component'; import { DirectoryPickerComponent } from './_modals/directory-picker/directory-picker.component'; +import { FormsModule } from '@angular/forms'; @@ -25,7 +26,8 @@ import { DirectoryPickerComponent } from './_modals/directory-picker/directory-p CommonModule, AdminRoutingModule, NgbNavModule, - SharedModule + SharedModule, + FormsModule ], providers: [] }) diff --git a/src/app/admin/manage-library/manage-library.component.html b/src/app/admin/manage-library/manage-library.component.html index f4ab32726..4b2505ce3 100644 --- a/src/app/admin/manage-library/manage-library.component.html +++ b/src/app/admin/manage-library/manage-library.component.html @@ -7,11 +7,17 @@
  • -
    {{library.name}}
    +

    + {{library.name | titlecase}} +
    + + +
    +

    +
    - -
    • diff --git a/src/app/admin/manage-users/manage-users.component.html b/src/app/admin/manage-users/manage-users.component.html index d43b5ac18..28db42c81 100644 --- a/src/app/admin/manage-users/manage-users.component.html +++ b/src/app/admin/manage-users/manage-users.component.html @@ -12,13 +12,12 @@

    {{member.username | titlecase}} Admin
    - - + +

    Last Active: {{member.lastActive | date}}
    -
    Sharing: {{member?.libraries ? member?.libraries : 'None'}}
    - +
    Sharing: {{formatLibraries(member)}}
    diff --git a/src/app/admin/manage-users/manage-users.component.ts b/src/app/admin/manage-users/manage-users.component.ts index 80bb72587..6ce77b0ab 100644 --- a/src/app/admin/manage-users/manage-users.component.ts +++ b/src/app/admin/manage-users/manage-users.component.ts @@ -56,4 +56,12 @@ export class ManageUsersComponent implements OnInit { console.log('Closed Result', closeResult); }); } + + formatLibraries(member: Member) { + if (member.libraries.length === 0) { + return 'None'; + } + + return member.libraries.map(item => item.name + ', '); + } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0944f2a6c..d5c41fdfe 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -17,8 +17,8 @@ export class AppComponent implements OnInit { setCurrentUser() { - const userString = localStorage.getItem('user'); - if (userString !== '' || localStorage.getItem('user') !== undefined) { + const userString = localStorage.getItem(this.accountService.userKey); + if (userString !== '' || localStorage.getItem(this.accountService.userKey) !== undefined) { const user: User = JSON.parse(userString + ''); this.accountService.setCurrentUser(user); }