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

Fixed up the wiring for uploading by url. Method needs to be implemented.

Browse source
This commit is contained in:
Joseph Milazzo 2024-07-13 12:54:02 -05:00
parent 5f1ea3c306
commit 01185bdb0a
5 changed files with 59 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

4
API/Controllers/FontController.cs
View file

@ -111,8 +111,8 @@ public class FontController : BaseApiController
return Ok(_mapper.Map<EpubFontDto>(font));
}
[HttpPost("upload-url")]
public async Task<ActionResult> UploadFontByUrl(string url)
[HttpPost("upload-by-url")]
public async Task<ActionResult> UploadFontByUrl([FromQuery]string url)
{
// Validate url
try

2
UI/Web/src/app/_services/font.service.ts
View file

@ -56,7 +56,7 @@ export class FontService {
}
uploadFromUrl(url: string) {
return this.httpClient.post(this.baseUrl + "font/upload-by-url?url=" + encodeURIComponent(url), {});
}
deleteFont(id: number) {

55
UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html
View file

@ -37,27 +37,54 @@
@if (files && files.length > 0) {
<app-loading [loading]="isUploadingFont"></app-loading>
} @else if (hasAdmin$ | async) {
} @else {
<ngx-file-drop (onFileDrop)="dropped($event)" [accept]="acceptableExtensions" [directory]="false"
dropZoneClassName="file-upload" contentClassName="file-upload-zone">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<div class="row g-0 mt-3 pb-3">
<div class="mx-auto">
<div class="row g-0 mb-3">
<i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-evenly">
<span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
<span class="ps-1 pe-1">•</span>
<a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
@switch (mode) {
@case ('all') {
<div class="row g-0 mt-3 pb-3">
<div class="mx-auto">
<div class="row g-0 mb-3">
<i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-evenly">
<a class="pe-0" href="javascript:void(0)" (click)="changeMode('url')">
<span class="phone-hidden">{{t('enter-an-url-pre-title', {url: ''})}}</span>{{t('url')}}
</a>
<span class="ps-1 pe-1">•</span>
<span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
<span class="ps-1 pe-1">•</span>
<a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
}
@case ('url') {
<form [formGroup]="form">
<div class="row g-0 mt-3 pb-3 ms-md-2 me-md-2">
<div class="input-group col-auto me-md-2" style="width: 83%">
<label class="input-group-text" for="load-url">{{t('url-label')}}</label>
<input type="text" autofocus autocomplete="off" class="form-control" formControlName="fontUrl"
placeholder="https://" id="load-url">
<button class="btn btn-outline-secondary" type="button" (click)="uploadFromUrl(); changeMode('all');"
[disabled]="(form.get('fontUrl')?.value).length === 0">
{{t('load')}}
</button>
</div>
<button class="btn btn-secondary col-auto" href="javascript:void(0)" (click)="changeMode('all')">
<i class="fas fa-share" aria-hidden="true" style="transform: rotateY(180deg)"></i>&nbsp;
<span class="phone-hidden">{{t('back')}}</span>
</button>
</div>
</form>
}
}
</ng-template>
</ngx-file-drop>

30
UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.ts
View file

@ -15,7 +15,6 @@ import {LoadingComponent} from "../../../shared/loading/loading.component";
import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe";
import {SiteThemeProviderPipe} from "../../../_pipes/site-theme-provider.pipe";
import {ThemeProvider} from "../../../_models/preferences/site-theme";
import {CarouselReelComponent} from "../../../carousel/_components/carousel-reel/carousel-reel.component";
import {DefaultValuePipe} from "../../../_pipes/default-value.pipe";
import {ImageComponent} from "../../../shared/image/image.component";
@ -63,7 +62,10 @@ export class FontManagerComponent implements OnInit {
map(c => c && this.accountService.hasAdminRole(c))
);
form!: FormGroup;
form: FormGroup = new FormGroup({
fontUrl: new FormControl('', [])
});
selectedFont: EpubFont | undefined = undefined;
files: NgxFileDropEntry[] = [];
@ -75,19 +77,12 @@ export class FontManagerComponent implements OnInit {
constructor(@Inject(DOCUMENT) private document: Document) {}
ngOnInit() {
this.form = this.fb.group({
coverImageUrl: new FormControl('', [])
});
this.cdRef.markForCheck();
this.loadFonts();
}
loadFonts() {
this.fontService.getFonts().subscribe(fonts => {
this.fonts = fonts;
// this.fonts.forEach(font => {
// this.fontService.getFontFace(font).load().then(loadedFace => {
// (this.document as any).fonts.add(loadedFace);
// });
// })
this.cdRef.markForCheck();
});
}
@ -119,9 +114,13 @@ export class FontManagerComponent implements OnInit {
this.cdRef.markForCheck();
}
uploadFromUrl(url?: string) {
url = url || this.form.get('coverImageUrl')?.value.trim();
uploadFromUrl() {
const url = this.form.get('fontUrl')?.value.trim();
if (!url || url === '') return;
this.fontService.uploadFromUrl(url).subscribe(() => {
this.loadFonts();
});
}
async deleteFont(id: number) {
@ -137,8 +136,7 @@ export class FontManagerComponent implements OnInit {
changeMode(mode: 'file' | 'url' | 'all') {
this.mode = mode;
this.cdRef.markForCheck();
}
protected readonly ThemeProvider = ThemeProvider;
}

2
openapi.json
View file

@ -2466,7 +2466,7 @@
}
}
},
"/api/Font/upload-url": {
"/api/Font/upload-by-url": {
"post": {
"tags": [
"Font"