AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented the ability to delete a library from UI. Added update functionality for library.

Browse source
This commit is contained in:
Joseph Milazzo 2021-01-02 14:21:10 -06:00
parent c8bbbceecd
commit 490110407a
8 changed files with 52 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/_services/library.service.ts
View file

@ -45,4 +45,8 @@ export class LibraryService {
return this.httpClient.delete(this.baseUrl + 'library/delete?libraryId=' + libraryId, {});
}
update(model: {name: string, folders: string[], id: number}) {
return this.httpClient.post(this.baseUrl + 'library/update', model);
}
}

2
src/app/admin/_modals/directory-picker/directory-picker.component.html
View file

@ -15,7 +15,7 @@
<button *ngIf="routeStack.peek() !== undefined" (click)="goBack()" class="list-group-item list-group-item-action"><i class="fa fa-arrow-left mr-2"></i>Back</button>
<button *ngFor="let folder of folders" class="list-group-item list-group-item-action" (click)="selectNode(folder)">
<span>{{getStem(folder)}}</span>
<button class="btn btn-primary pull-right" (click)="shareFolder(folder, $event)">Share</button>
<button type="button" class="btn btn-primary pull-right" (click)="shareFolder(folder, $event)">Share</button>
</button>
<div class="text-center" *ngIf="folders.length === 0">
There are no folders here

12
src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html
View file

@ -1,7 +1,7 @@
<form [formGroup]="libraryForm" (ngSubmit)="submitLibrary()">
<form [formGroup]="libraryForm">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">New Library</h4>
<h4 class="modal-title" id="modal-basic-title">{{this.library !== undefined ? 'Edit' : 'New'}} Library</h4>
<button type="button" class="close" aria-label="Close" (click)="close()">
<span aria-hidden="true">&times;</span>
</button>
@ -12,7 +12,7 @@
<input id="library-name" class="form-control" formControlName="name" type="text">
</div>
<div class="form-group">
<div class="form-group" *ngIf="this.library === undefined">
<label for="library-type">Type</label>
<select class="form-control" id="library-type" formControlName="type">
<option [value]="0">Manga</option>
@ -20,8 +20,8 @@
</div>
<h4>Folders:</h4>
<button class="btn btn-primary" (click)="openDirectoryPicker()">Add Folder</button>
<h4>Folders <button type="button" class="btn pull-right" (click)="openDirectoryPicker()"><i class="fa fa-plus"></i></button></h4>
<div class="list-group">
<li class="list-group-item" *ngFor="let folder of selectedFolders; let i = index">
{{folder}}
@ -32,6 +32,6 @@
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="reset()">Reset</button>
<button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
<button type="submit" class="btn btn-primary" (click)="submitLibrary()">Save</button>
</div>
</form>

25
src/app/admin/_modals/library-editor-modal/library-editor-modal.component.spec.ts
View file

@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LibraryEditorModalComponent } from './library-editor-modal.component';
describe('LibraryEditorModalComponent', () => {
let component: LibraryEditorModalComponent;
let fixture: ComponentFixture<LibraryEditorModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LibraryEditorModalComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LibraryEditorModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

34
src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
View file

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Library } from 'src/app/_models/library';
import { LibraryService } from 'src/app/_services/library.service';
import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-picker/directory-picker.component';
@ -9,8 +10,9 @@ import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-pi
templateUrl: './library-editor-modal.component.html',
styleUrls: ['./library-editor-modal.component.scss']
})
export class LibraryEditorModalComponent implements OnInit {
export class LibraryEditorModalComponent implements OnInit, OnChanges {
@Input() library: Library | undefined = undefined;
libraryForm: FormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
@ -22,15 +24,27 @@ export class LibraryEditorModalComponent implements OnInit {
constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal) { }
ngOnInit(): void {
this.setValues();
}
ngOnChanges() {
console.log('Library: ', this.library);
}
submitLibrary() {
const model = this.libraryForm.value;
model.folders = this.selectedFolders;
console.log('Creating library with: ', model);
// this.libraryService.create(model).subscribe(() => {
// this.close(true);
// });
if (this.library !== undefined) {
model.id = this.library.id;
this.libraryService.update(model).subscribe(() => {
this.close(true);
});
} else {
this.libraryService.create(model).subscribe(() => {
this.close(true);
});
}
}
close(returnVal= false) {
@ -38,7 +52,15 @@ export class LibraryEditorModalComponent implements OnInit {
}
reset() {
this.setValues();
}
setValues() {
if (this.library !== undefined) {
this.libraryForm.get('name')?.setValue(this.library.name);
this.libraryForm.get('type')?.setValue(this.library.type);
this.selectedFolders = this.library.folders;
}
}
openDirectoryPicker() {

2
src/app/admin/manage-library/manage-library.component.html
View file

@ -11,7 +11,7 @@
{{library.name | titlecase}}
<div class="pull-right">
<button class="btn btn-danger mr-2 btn-sm" (click)="deleteLibrary(library)"><i class="fa fa-trash" title="Delete {{library.name | titlecase}}"></i></button>
<button class="btn btn-primary btn-sm" ><i class="fa fa-pencil" title="Edit {{library.name | titlecase}}"></i></button>
<button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pencil" title="Edit {{library.name | titlecase}}"></i></button>
</div>
</h4>
<!-- <div>Last Active: {{member.lastActive | date}}</div>

11
src/app/admin/manage-library/manage-library.component.ts
View file

@ -29,6 +29,17 @@ export class ManageLibraryComponent implements OnInit {
});
}
editLibrary(library: Library) {
const modalRef = this.modalService.open(LibraryEditorModalComponent);
console.log('component instance: ', modalRef.componentInstance);
modalRef.componentInstance.library = library;
modalRef.closed.subscribe(refresh => {
if (refresh) {
this.getLibraries();
}
});
}
addLibrary() {
const modalRef = this.modalService.open(LibraryEditorModalComponent);
modalRef.closed.subscribe(refresh => {

2
src/app/shared/series-card/series-card.component.ts
View file

@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/internal/operators/take';
import { take } from 'rxjs/operators';
import { Series } from 'src/app/_models/series';
import { AccountService } from 'src/app/_services/account.service';
import { SeriesService } from 'src/app/_services/series.service';