From 86b65f3e46130ca9e59c70b0206f736b45bfa25c Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Tue, 9 Jan 2024 11:14:27 +0100 Subject: [PATCH] fix publication preview --- .../new-publication/new-publication.page.html | 8 +- .../publication-detail.page.html | 2 +- .../view-publications.page.html | 2 +- src/app/services/http/http-service.service.ts | 10 +- src/app/shared/API/middleware/interface.d.ts | 5 + .../middleware/middleware-service.service.ts | 7 +- .../new-publication/new-publication.page.ts | 358 +++++++++++++----- .../publication-detail.page.html | 3 +- .../view-publications.page.html | 5 +- .../shared/repository/lakefs/interface.d.ts | 1 + .../lakefs/lakefs-repository.service.ts | 13 +- 11 files changed, 304 insertions(+), 110 deletions(-) create mode 100644 src/app/shared/repository/lakefs/interface.d.ts diff --git a/src/app/pages/publications/new-publication/new-publication.page.html b/src/app/pages/publications/new-publication/new-publication.page.html index 5570f08b0..00b3395be 100644 --- a/src/app/pages/publications/new-publication/new-publication.page.html +++ b/src/app/pages/publications/new-publication/new-publication.page.html @@ -40,7 +40,7 @@ @@ -48,7 +48,7 @@ - +

mais {{ seletedContent.length - displayLimit }}

 @@ -71,7 +71,7 @@
{{publication.OriginalFileName}}.{{publication.FileExtension}}
-
75 Kb
+
75 Kb
@@ -171,4 +171,4 @@ - \ No newline at end of file + diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html index 2150ea06c..e3341a10a 100644 --- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html +++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html @@ -31,7 +31,7 @@
diff --git a/src/app/pages/publications/view-publications/view-publications.page.html b/src/app/pages/publications/view-publications/view-publications.page.html index 919d5c137..b120e6d89 100644 --- a/src/app/pages/publications/view-publications/view-publications.page.html +++ b/src/app/pages/publications/view-publications/view-publications.page.html @@ -53,7 +53,7 @@ diff --git a/src/app/services/http/http-service.service.ts b/src/app/services/http/http-service.service.ts index 2bde9e63d..31a45d110 100644 --- a/src/app/services/http/http-service.service.ts +++ b/src/app/services/http/http-service.service.ts @@ -1,8 +1,6 @@ -import { HttpContext, HttpHeaders, HttpParams } from '@angular/common/http'; +import { HttpHeaders, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { tap, shareReplay, catchError } from "rxjs/operators"; -import { Observable, of } from "rxjs"; @Injectable({ providedIn: 'root' @@ -15,9 +13,8 @@ export class HttpServiceService { return this.http.put(url, body, options as any) } - - post(url: string, body: any | null, options: Options) { - return this.http.post(url, body, options as any) + post(url: string, body, option = null) { + return this.http.post(url, body, option) } get(url: string, options: Options) { @@ -26,7 +23,6 @@ export class HttpServiceService { } - interface Options { headers?: HttpHeaders params?: HttpParams diff --git a/src/app/shared/API/middleware/interface.d.ts b/src/app/shared/API/middleware/interface.d.ts index 2bc00cfa4..72824a7fc 100644 --- a/src/app/shared/API/middleware/interface.d.ts +++ b/src/app/shared/API/middleware/interface.d.ts @@ -152,6 +152,11 @@ interface CreateOrganizer { IsRequired: boolean; UserType: string; } + + +export interface IuploadFileLK { + path: string +} // ================================================ PUT ============================================= diff --git a/src/app/shared/API/middleware/middleware-service.service.ts b/src/app/shared/API/middleware/middleware-service.service.ts index c7271b40b..e81114903 100644 --- a/src/app/shared/API/middleware/middleware-service.service.ts +++ b/src/app/shared/API/middleware/middleware-service.service.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; import { environment } from 'src/environments/environment'; import { HttpServiceService } from 'src/app/services/http/http-service.service'; import { Observable} from 'rxjs'; -import { CreateEvent, EditEvent, EventDetailsDTO, EventsDTO, refreshTokenDTO } from "./interface"; -import { HttpHeaders, HttpParams } from '@angular/common/http'; +import { CreateEvent, EditEvent, EventDetailsDTO, EventsDTO, IuploadFileLK, refreshTokenDTO } from "./interface"; +import { HttpClient, HttpEvent, HttpHeaders, HttpParams } from '@angular/common/http'; import { DetectCalendars, makeHeaderForCalendar } from '../../utils/utils'; import { z } from "zod"; import { ok, err } from 'neverthrow'; @@ -18,6 +18,7 @@ export class MiddlewareServiceService { constructor( private HttpServiceService: HttpServiceService, + private http: HttpClient, ) { window["MiddlewareServiceService"] = this } @@ -152,6 +153,6 @@ export class MiddlewareServiceService { headers: headers }; - return this.HttpServiceService.post(`${geturl}`, formData, options); + return this.http.post(`${geturl}`, formData, options) } } diff --git a/src/app/shared/publication/new-publication/new-publication.page.ts b/src/app/shared/publication/new-publication/new-publication.page.ts index ac83ec3d2..f2a7f8f06 100644 --- a/src/app/shared/publication/new-publication/new-publication.page.ts +++ b/src/app/shared/publication/new-publication/new-publication.page.ts @@ -13,7 +13,7 @@ import { checkFileTypeService } from 'src/app/services/checkFileType.service'; import { FileValidatorService } from "src/app/services/file/file-validator.service" import { MiddlewareServiceService } from "src/app/shared/API/middleware/middleware-service.service" import { LakefsRepositoryService } from '../../repository/lakefs/lakefs-repository.service'; - +import { ok, err, Result } from 'neverthrow'; enum ActionType { newRapid = "1", @@ -174,6 +174,8 @@ export class NewPublicationPage implements OnInit { } ) + newAttachment.needUpload() + this.seletedContent.push(newAttachment) }); @@ -216,6 +218,7 @@ export class NewPublicationPage implements OnInit { } ) + newAttachment.needUpload(); this.seletedContent.push(newAttachment) }); @@ -229,23 +232,25 @@ export class NewPublicationPage implements OnInit { }); - result.files.forEach(async element => { - if(this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') { - this.convertBlobToBase64(element.blob).then((value) => { - this.filesSizeSum = this.filesSizeSum + element.size + result.files.forEach(async blobFile => { + if(this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') { + this.convertBlobToBase64(blobFile.blob).then((value) => { + this.filesSizeSum = this.filesSizeSum + blobFile.size if(this.fileSizeToMB(this.filesSizeSum) <= 20) { - const FileExtension = this.removeTextBeforeSlash(element.mimeType,'/') + const FileExtension = this.removeTextBeforeSlash(blobFile.mimeType,'/') const newAttachment = new PublicationAttachmentEntity( { base64: value, extension: FileExtension, - blob: element.blob, + blobFile: blobFile, FileType: 'video' } ) + newAttachment.needUpload() + this.seletedContent.push(newAttachment) this.filecontent = true; } else { @@ -406,8 +411,26 @@ export class NewPublicationPage implements OnInit { Files: this.seletedContent, } - this.publicationFormMV.setDataToFrom(this.publication) - this.publicationFormMV.uploadVideosFiles(); + + const loader = this.toastService.loading() + + try { + + await this.publications.CreatePublication(this.publication.ProcessId, this.publication).toPromise() + if (this.publicationTitle == '1') { + + } else if (this.publicationTitle == '2') { + this.httpErroHandle.httpsSucessMessagge('Criar publicação') + } else if (this.publicationTitle == '3') { + this.httpErroHandle.httpsSucessMessagge('Editar publicação') + } + + this.goBackToViewPublications.emit(); + } catch (error) { + this.httpErroHandle.httpStatusHandle(error) + } finally { + loader.remove() + } } else { @@ -834,101 +857,164 @@ export class NewPublicationPage implements OnInit { } +// class UploadFileUseCase { +// LakefsRepositoryService: LakefsRepositoryService = window["LakefsRepositoryService"] +// constructor() {} +// execute(attachment: PublicationAttachmentEntity) { + +// const file: File = attachment.blob + +// const chunkSize = 1024 * 100; // Adjust the chunk size as needed +// const fileSize = file.size; +// let uploadedSize = 0 +// const totalChunks = Math.ceil(fileSize / chunkSize); +// let offset = 0; +// let i = 1; +// let j = 0; +// let path; + +// function count () { +// j++ +// return j +// } + +// const readAndUploadChunk = async(index: number) => { +// return new Promise((resolve, reject) => { +// const chunk = file.slice(offset, offset + chunkSize); +// const reader = new FileReader(); + +// reader.onload = async () => { +// const blob = new Blob([reader.result as ArrayBuffer]); +// const formData = new FormData(); +// const file = new File([blob], "test.mp4", { type: blob.type }); + +// uploadedSize =+ file.size + +// formData.append("blobFile", file); +// formData.append("length", totalChunks.toString()); +// formData.append("index", index.toString()); +// formData.append("path", path); + +// try { +// const response = await this.LakefsRepositoryService.uploadFile(formData).toPromise() + +// console.log({response}) + +// resolve() +// } catch (erro) { +// reject() +// } + +// }; + +// reader.readAsArrayBuffer(chunk); +// offset += chunkSize; +// }); +// } + +// const loop = async() => { + +// for (let index = 2; index <= totalChunks; index++) { +// await readAndUploadChunk(index); +// } + +// } + +// const startUpload = async() => { +// const index = count(); +// const chunk = file.slice(offset, offset + chunkSize); +// const reader = new FileReader(); + +// reader.onload = async () => { +// const blob = new Blob([reader.result as ArrayBuffer]); +// const formData = new FormData(); +// const file = new File([blob], "test.mp4", { type: blob.type }); +// uploadedSize =+ file.size +// formData.append("blobFile", file); +// formData.append("length", totalChunks.toString()); +// formData.append("index", index.toString()); + + +// const response: any = await this.LakefsRepositoryService.uploadFile(formData).toPromise() + +// console.log({ response, index }); +// if (index === 1) { +// path = response.path; +// } + +// await loop(); +// }; + +// reader.readAsArrayBuffer(chunk); +// offset += chunkSize; +// } + +// startUpload(); + + +// } +// } + + + + class UploadFileUseCase { LakefsRepositoryService: LakefsRepositoryService = window["LakefsRepositoryService"] constructor() {} - execute(attachment: PublicationAttachmentEntity) { + async execute(ChucksManager: ChucksManager): Promise> { - const file: File = attachment.blob - - const chunkSize = 1024 * 100; // Adjust the chunk size as needed - const fileSize = file.size; - let uploadedSize = 0 - const totalChunks = Math.ceil(fileSize / chunkSize); - let offset = 0; - let i = 1; - let j = 0; let path; - function count () { - j++ - return j + function makeFrom({blobFile, index, path}) { + + const formData = new FormData(); + + formData.append("blobFile", blobFile); + formData.append("length", ChucksManager.chunks.totalChunks.toString()); + formData.append("index", index.toString()); + formData.append("path", path); + + return formData } const readAndUploadChunk = async(index: number) => { - return new Promise((resolve, reject) => { - const chunk = file.slice(offset, offset + chunkSize); - const reader = new FileReader(); - reader.onload = async () => { - const blob = new Blob([reader.result as ArrayBuffer]); - const formData = new FormData(); - const file = new File([blob], "test.mp4", { type: blob.type }); + const chunk = await ChucksManager.chunks.getChunks(index) + const blob = new Blob([chunk]); + const blobFile = new File([blob], "test.mp4", { type: blob.type }); - uploadedSize =+ file.size + const form = makeFrom({blobFile, index, path}) - formData.append("blobFile", file); - formData.append("length", totalChunks.toString()); - formData.append("index", index.toString()); - formData.append("path", path); - - try { - const response = await this.LakefsRepositoryService.uploadFile(formData).toPromise() - - console.log({response}) - - resolve() - } catch (erro) { - reject() - } - - }; - - reader.readAsArrayBuffer(chunk); - offset += chunkSize; - }); + return await this.LakefsRepositoryService.uploadFile(form) } - const loop = async() => { + if(!ChucksManager.hasPath()) { - for (let index = 2; index <= totalChunks; index++) { - await readAndUploadChunk(index); + const initIndex = ChucksManager.uploadsCount + 1 + const chuck = await ChucksManager.chunks.getChunks(initIndex) + const blob = new Blob([chuck]); + const blobFile = new File([blob], "test.mp4", { type: blob.type }); + const form = makeFrom({blobFile, index: initIndex, path}) + + const uploadRequest = await this.LakefsRepositoryService.uploadFile(form) + + if(uploadRequest.isOk()) { + path = uploadRequest.value.path + } else { + return err(ChucksManager) } - } - const startUpload = async() => { - const index = count(); - const chunk = file.slice(offset, offset + chunkSize); - const reader = new FileReader(); + const indexContinuation = ChucksManager.uploadsCount + 1 + for (let index = indexContinuation; index <= ChucksManager.chunks.totalChunks; index++) { + const uploadRequest = await readAndUploadChunk(index) - reader.onload = async () => { - const blob = new Blob([reader.result as ArrayBuffer]); - const formData = new FormData(); - const file = new File([blob], "test.mp4", { type: blob.type }); - uploadedSize =+ file.size - formData.append("blobFile", file); - formData.append("length", totalChunks.toString()); - formData.append("index", index.toString()); - - - const response: any = await this.LakefsRepositoryService.uploadFile(formData).toPromise() - - console.log({ response, index }); - if (index === 1) { - path = response.path; - } - - await loop(); - }; - - reader.readAsArrayBuffer(chunk); - offset += chunkSize; + if(uploadRequest.isErr()) { + return err(ChucksManager) + } } - startUpload(); - - + return ok(ChucksManager) } } @@ -937,12 +1023,14 @@ class PublicationAttachmentEntity { FileExtension: string FileType: 'image' | 'video' OriginalFileName: string - blob: any + blobFile: File + toUpload = false; + chucksManager : ChucksManager - constructor({base64, extension, blob = null, OriginalFileName = null, FileType}) { + constructor({base64, extension, blobFile = null, OriginalFileName = null, FileType}) { this.FileBase64 = base64; this.FileExtension = extension; - this.blob = blob + this.blobFile = blobFile this.OriginalFileName = OriginalFileName this.FileType = FileType @@ -961,6 +1049,18 @@ class PublicationAttachmentEntity { } } + + needUpload() { + this.toUpload = true + } + + setChunkManger (chunks: Chunks) { + this.chucksManager = new ChucksManager({chunks}) + } + + get hasChunkManager() { + return this.chucksManager != null + } } interface IPublicationFormModelEntity { @@ -1004,17 +1104,25 @@ class PublicationFormMV { private async upload(PublicationAttachmentEntity: PublicationAttachmentEntity) { - console.log(PublicationAttachmentEntity) - this.UploadFileUseCase.execute(PublicationAttachmentEntity) + const fileBlob = PublicationAttachmentEntity.blobFile; + const fileChunks = new Chunks({chunkSize: 1024 }) + fileChunks.setFile(fileBlob) + + PublicationAttachmentEntity.setChunkManger(fileChunks) + + + const ChucksManagers = new ChucksManager({chunks: fileChunks}) + + this.UploadFileUseCase.execute(ChucksManagers) } uploadVideosFiles() { const videosFiles = this.getVideoFiles() - console.log(this.form) + const videosFilesToUploads = videosFiles.filter( e => e.toUpload == true) - for(const file of videosFiles) { + for(const file of videosFilesToUploads) { this.upload(file) } } @@ -1022,5 +1130,75 @@ class PublicationFormMV { } +class Chunks { + chunkSize: number + private file: File + constructor({chunkSize}) { + this.chunkSize = chunkSize + } + + get totalChunks () { + return Math.ceil(this.file.size / this.chunkSize); + } + + // Function to read a chunk of the file + readChunk(start: number, end: number): Promise { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + if (reader.result instanceof ArrayBuffer) { + resolve(reader.result); + } else { + reject(new Error("Failed to read chunk")); + } + }; + reader.readAsArrayBuffer(this.file.slice(start, end)); + }); + } + + setFile(file: File) { + this.file = file + } + + async getChunks(i: number) { + i-- + if(i < this.totalChunks) { + const start = i * this.chunkSize; + const end = Math.min(start + this.chunkSize, this.file.size); + const chunk = await this.readChunk(start, end); + + return chunk + } + } + +} + +interface IUploadResponse { + result: Result + attemp: number +} + +class ChucksManager { + chunks: Chunks + uploads: IUploadResponse[] = [] + path: string ='' + + get uploadsCount() { + return this.uploads.length + } + + uploadFunc: Function + constructor({chunks}) { + this.chunks = chunks + } + + setPath(path: string) { + this.path = path + } + + hasPath() { + return this.path != undefined + } +} diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html index 5b8fee2c5..fd27816e8 100644 --- a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html +++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html @@ -41,12 +41,13 @@ + diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html index 82b7f4d79..88e03720e 100644 --- a/src/app/shared/publication/view-publications/view-publications.page.html +++ b/src/app/shared/publication/view-publications/view-publications.page.html @@ -51,11 +51,14 @@ + + +