diff --git a/src/app/api-connector/news.service.ts b/src/app/api-connector/news.service.ts index c46ba8a57e..ca00c04606 100644 --- a/src/app/api-connector/news.service.ts +++ b/src/app/api-connector/news.service.ts @@ -85,6 +85,21 @@ export class NewsService { ); } + getTestimonial(project_application_id: string): Observable { + const params: HttpParams = new HttpParams().set('project_application_id', project_application_id); + + return this.http.get(`${ApiSettings.getApiBaseURL()}wagtail-management/testimonial/`, { + params, + withCredentials: true, + }); + } + + uploadImageTest(formData: FormData): Observable { + return this.http.post(`${ApiSettings.getApiBaseURL()}wagtail-management/imagetest/`, formData, { + withCredentials: true, + }); + } + sendTestimonialDraft( title: string, text: string, @@ -95,6 +110,34 @@ export class NewsService { simple_vm: boolean, image_url: string, project_application_id: string, + file: File, + ): Observable { + const formData: FormData = new FormData(); + formData.append('file', file); + formData.append('title', title); + formData.append('text', text); + formData.append('excerpt', excerpt); + formData.append('contributor', contributor); + formData.append('institution', institution); + formData.append('workgroup', workgroup); + formData.append('simple_vm', JSON.stringify(simple_vm)); + formData.append('project_application_id', project_application_id); + console.log(formData); + + return this.http.post(`${ApiSettings.getApiBaseURL()}wagtail-management/testimonial/`, formData, { + withCredentials: true, + }); + } + + autoSaveTestimonialDraft( + title: string, + text: string, + excerpt: string, + contributor: string, + institution: string, + workgroup: string, + simple_vm: boolean, + project_application_id: string, ): Observable { const testimonialData: any = { title, @@ -104,13 +147,16 @@ export class NewsService { institution, workgroup, simple_vm, - image_url, project_application_id, }; - return this.http.post(`${ApiSettings.getApiBaseURL()}wagtail-management/testimonial/`, testimonialData, { - withCredentials: true, - }); + return this.http.post( + `${ApiSettings.getApiBaseURL()}wagtail-management/testimonial/autosave/`, + testimonialData, + { + withCredentials: true, + }, + ); } private handleError(result?: T) { diff --git a/src/app/applications/application.model/application.model.ts b/src/app/applications/application.model/application.model.ts index 137fb431bf..d5f9fe39a5 100644 --- a/src/app/applications/application.model/application.model.ts +++ b/src/app/applications/application.model/application.model.ts @@ -87,6 +87,7 @@ export class Application { project_application_member_applications: ProjectMemberApplication[]; project_application_manager_comment: string; project_application_testimonial_submitted: boolean; + project_application_testimonial_draft_id: number; migrated_simple_vm_resources: boolean = false; diff --git a/src/app/projectmanagement/modals/doi/doi.component.html b/src/app/projectmanagement/modals/testimonial/extension-entry.component.html similarity index 58% rename from src/app/projectmanagement/modals/doi/doi.component.html rename to src/app/projectmanagement/modals/testimonial/extension-entry.component.html index b2f2e10942..584dc60adf 100644 --- a/src/app/projectmanagement/modals/doi/doi.component.html +++ b/src/app/projectmanagement/modals/testimonial/extension-entry.component.html @@ -1,6 +1,6 @@ -
+
-

Publications

+

Experiences and publications

-
-

- Do you have any new publications that were made during your work with the de.NBI Cloud or in which the de.NBI - Cloud is mentioned? -

+
+ We are very pleased that the de.NBI Cloud meets with your expectations and that you would like to extend your + project. As an academic cloud that provides its resources free of charge, we depend on our users. +
+ In order to be able to continue to offer these services free of charge in the future, it is essential for us, for + example, to publish publications which resulted from the work in the de.NBI Cloud or are in any way connected to + it. Please enter the DOIs of those publications in the form below. +
+ We also want to promote the use of the cloud with positive experiences from users and the community in order to + make this service available to many more researchers. For this reason, we rely on testimonials from our users, + which we can use for this purpose. To submit a testimonial, please use the form below on this project overview + page. You can find an overview of already published testimonials here. +
+ We really appreciate your help!
-
-
-
- -
-
- -
-
-
-
- -
- -
-
-

Digital object identifier (DOI)

-
@@ -118,18 +90,21 @@

Digital object identifier (DOI)

- -
- +
+
+
+
+ +
- L +
diff --git a/src/app/projectmanagement/modals/doi/doi.component.scss b/src/app/projectmanagement/modals/testimonial/extension-entry.component.scss similarity index 100% rename from src/app/projectmanagement/modals/doi/doi.component.scss rename to src/app/projectmanagement/modals/testimonial/extension-entry.component.scss diff --git a/src/app/projectmanagement/modals/doi/doi.component.ts b/src/app/projectmanagement/modals/testimonial/extension-entry.component.ts similarity index 75% rename from src/app/projectmanagement/modals/doi/doi.component.ts rename to src/app/projectmanagement/modals/testimonial/extension-entry.component.ts index 61b92e1272..6f95dcfb09 100644 --- a/src/app/projectmanagement/modals/doi/doi.component.ts +++ b/src/app/projectmanagement/modals/testimonial/extension-entry.component.ts @@ -1,19 +1,20 @@ -import { - Component, EventEmitter, OnDestroy, -} from '@angular/core'; +import { Component, EventEmitter, OnDestroy } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal'; import { Subscription } from 'rxjs'; -import { WIKI_PUBLICATIONS } from '../../../../links/links'; +import { TESTIMONIAL_PAGE_LINK, WIKI_PUBLICATIONS } from '../../../../links/links'; import { Doi } from '../../../applications/doi/doi'; import { GroupService } from '../../../api-connector/group.service'; @Component({ - selector: 'app-doi', - templateUrl: './doi.component.html', - styleUrls: ['./doi.component.scss'], + selector: 'app-extension-entry', + templateUrl: './extension-entry.component.html', + styleUrls: ['./extension-entry.component.scss'], providers: [GroupService], }) -export class DoiComponent implements OnDestroy { +export class ExtensionEntryComponent implements OnDestroy { + private subscription: Subscription = new Subscription(); + public event: EventEmitter = new EventEmitter(); + TESTIMONIAL_PAGE_LINK = TESTIMONIAL_PAGE_LINK; WIKI_PUBLICATIONS: string = WIKI_PUBLICATIONS; @@ -23,22 +24,13 @@ export class DoiComponent implements OnDestroy { application_id: string | number; disableInput: boolean = false; - doiQuestionModal: boolean = true; - doiModal: boolean = false; - - private subscription: Subscription = new Subscription(); - public event: EventEmitter = new EventEmitter(); - - constructor( - public bsModalRef: BsModalRef, - private groupService: GroupService, - ) { + constructor(public bsModalRef: BsModalRef, private groupService: GroupService) { // eslint-disable-next-line no-empty-function } - ngOnDestroy() { + ngOnDestroy(): void { this.subscription.unsubscribe(); - this.event.emit({ reloadDoi: false }); + this.event.emit({ reloadDoi: false, showExtension: true }); } isNewDoi(): boolean { @@ -91,10 +83,4 @@ export class DoiComponent implements OnDestroy { }), ); } - - setDoiModalState(): void { - this.doiQuestionModal = false; - this.doiModal = true; - } - } diff --git a/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.html b/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.html deleted file mode 100644 index edf3322c7c..0000000000 --- a/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.html +++ /dev/null @@ -1,41 +0,0 @@ -
-
-

Publications

- -
-
-
-

- We are very pleased that the de.NBI Cloud meets with your expectations and that you would like to extend your - project. We would be happy if you drafted a testimonial to describe your work and your positive experiences with - and in the Cloud. Please use the form below on this project overview page. You can find an overview of already - published testimonials here. -

-
-
-
-
- -
-
-
-
- -
diff --git a/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.scss b/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.ts b/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.ts deleted file mode 100644 index 022afd7b26..0000000000 --- a/src/app/projectmanagement/modals/testimonial/testimonial-modal.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, EventEmitter, OnDestroy } from '@angular/core'; -import { BsModalRef } from 'ngx-bootstrap/modal'; -import { Subscription } from 'rxjs'; -import { TESTIMONIAL_PAGE_LINK } from '../../../../links/links'; - -@Component({ - selector: 'app-testimonial-information', - templateUrl: './testimonial-modal.component.html', - styleUrls: ['./testimonial-modal.component.scss'], - providers: [], -}) -export class TestimonialModalComponent implements OnDestroy { - private subscription: Subscription = new Subscription(); - public event: EventEmitter = new EventEmitter(); - TESTIMONIAL_PAGE_LINK = TESTIMONIAL_PAGE_LINK; - - constructor(public bsModalRef: BsModalRef) { - // eslint-disable-next-line no-empty-function - } - - ngOnDestroy() { - this.subscription.unsubscribe(); - this.event.emit(); - } -} diff --git a/src/app/projectmanagement/overview.component.html b/src/app/projectmanagement/overview.component.html index b10234b0e3..a2adf2d540 100644 --- a/src/app/projectmanagement/overview.component.html +++ b/src/app/projectmanagement/overview.component.html @@ -324,7 +324,7 @@

+

+
@@ -1122,29 +1147,7 @@

- - +
- - - -
@@ -1158,20 +1161,22 @@

+
+
+ +
-
- -
+
- Credit Usage history of + Credit Usage history of {{ project_application?.project_application_shortname }}
diff --git a/src/app/projectmanagement/overview.component.ts b/src/app/projectmanagement/overview.component.ts index 3275c00ced..e5b4f4dacc 100644 --- a/src/app/projectmanagement/overview.component.ts +++ b/src/app/projectmanagement/overview.component.ts @@ -46,9 +46,8 @@ import { Application_States, ExtensionRequestType } from '../shared/shared_modul import { ProjectMember } from './project_member.model'; import { ModificationRequestComponent } from './modals/modification-request/modification-request.component'; import { LifetimeRequestComponent } from './modals/lifetime-request/lifetime-request.component'; -import { DoiComponent } from './modals/doi/doi.component'; import { CreditsRequestComponent } from './modals/credits-request/credits-request.component'; -import { TestimonialModalComponent } from './modals/testimonial/testimonial-modal.component'; +import { ExtensionEntryComponent } from './modals/testimonial/extension-entry.component'; /** * Projectoverview component. @@ -248,6 +247,12 @@ export class OverviewComponent extends ApplicationBaseClassComponent implements this.getUserProjectApplications(); this.isLoaded = true; + + this.activatedRoute.fragment.subscribe(fragment => { + if (fragment !== null) { + this.scrollTo(fragment); + } + }); }, (error: any): void => { this.isLoaded = false; @@ -262,6 +267,16 @@ export class OverviewComponent extends ApplicationBaseClassComponent implements ); } + scrollTo(element: any): void { + setTimeout(() => { + (document.getElementById(element) as HTMLElement).scrollIntoView({ + behavior: 'smooth', + block: 'start', + inline: 'nearest', + }); + }, 1500); + } + getUserinfo(): void { this.subscription.add( this.userService.getUserInfo().subscribe((userinfo: Userinfo): void => { @@ -313,35 +328,23 @@ export class OverviewComponent extends ApplicationBaseClassComponent implements this.subscribeForExtensionResult(this.ExtensionRequestType.MODIFICATION); } - showDoiModal(): void { + showExtensionInformationModal(): void { const initialState = { dois: this.dois, application_id: this.application_id, }; - - this.bsModalRef = this.modalService.show(DoiComponent, { initialState }); - this.bsModalRef.setClass('modal-lg'); + this.bsModalRef = this.modalService.show(ExtensionEntryComponent, { initialState, class: 'modal-lg' }); this.subscription.add( - this.bsModalRef.content.event.subscribe((result: any) => { - if ('reloadDoi' in result && result['reloadDoi']) { + this.bsModalRef.content.event.subscribe((event: any): void => { + if (event.reloadDoi) { this.getDois(); - } else if ('reloadDoi' in result && !result['reloadDoi']) { + } else if (event.showExtension) { this.showLifetimeExtensionModal(); } }), ); } - showTestimonialModal(): void { - this.bsModalRef = this.modalService.show(TestimonialModalComponent, {}); - this.bsModalRef.setClass('modal-lg'); - this.subscription.add( - this.bsModalRef.content.event.subscribe((): void => { - this.showDoiModal(); - }), - ); - } - showLifetimeExtensionModal(): void { if (this.lifetimeExtensionDisabled) { return; diff --git a/src/app/projectmanagement/projectmanagement.module.ts b/src/app/projectmanagement/projectmanagement.module.ts index 2a1c69ff35..98811c3dc7 100644 --- a/src/app/projectmanagement/projectmanagement.module.ts +++ b/src/app/projectmanagement/projectmanagement.module.ts @@ -20,8 +20,7 @@ import { ApplicationProgressComponent } from './application-progress/application import { LifetimeRequestComponent } from './modals/lifetime-request/lifetime-request.component'; import { ModificationRequestComponent } from './modals/modification-request/modification-request.component'; import { CreditsRequestComponent } from './modals/credits-request/credits-request.component'; -import { DoiComponent } from './modals/doi/doi.component'; -import { TestimonialModalComponent } from './modals/testimonial/testimonial-modal.component'; +import { ExtensionEntryComponent } from './modals/testimonial/extension-entry.component'; import { ResultComponent } from './modals/result/result.component'; import { SharedModuleModule } from '../shared/shared_modules/shared-module.module'; @@ -54,10 +53,9 @@ import { SharedModuleModule } from '../shared/shared_modules/shared-module.modul LifetimeRequestComponent, CreditsRequestComponent, ModificationRequestComponent, - DoiComponent, ResultComponent, - TestimonialModalComponent, + ExtensionEntryComponent, ], - exports: [ProjectOsDetailsComponent, TestimonialModalComponent], + exports: [ProjectOsDetailsComponent, ExtensionEntryComponent], }) export class ProjectManagementModule {} diff --git a/src/app/shared/shared_modules/shared-module.module.ts b/src/app/shared/shared_modules/shared-module.module.ts index 39b85685f6..84e21b6a97 100644 --- a/src/app/shared/shared_modules/shared-module.module.ts +++ b/src/app/shared/shared_modules/shared-module.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ModalModule } from 'ngx-bootstrap/modal'; import { ProgressModule, ToastModule } from '@coreui/angular'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; import { ApplicationBaseClassComponent } from './baseClass/application-base-class.component'; import { NotificationModalComponent } from '../modal/notification-modal'; @@ -40,6 +40,7 @@ import { PipeModuleModule } from '../../pipe-module/pipe-module.module'; PipeModuleModule, NgSelectModule, SharedDirectivesModule, + ReactiveFormsModule, ], declarations: [ ApplicationBaseClassComponent, diff --git a/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.html b/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.html index fc4641192e..68c5d7417a 100644 --- a/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.html +++ b/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.html @@ -1,275 +1,311 @@ -
-
Add testimonial
-
-
-
-
- An overview of the testimonials already published can be found - here. Both the text and - the excerpt can be based on the testimonials there. -
- Please note: All information entered here as well as the image is checked. There is no guarantee that the - testimonial will be published. We reserve the right to make changes to the data submitted. -
+
+
Add testimonial draft
+
+
+
+ An overview of the testimonials already published can be found + here. For both the text and + the excerpt, you can use the examples found there as a guide. +
+ On the procedure: +

+ All information entered here is verified before the testimonial is available online. We reserve the right to + adjust the information entered. In this case, the responsible person will be contacted and the adjusted + information must be accepted by mutual consent. In the case of adjustments, no testimonial will be published + without the explicit consent of the author or an appropriately responsible person. +

+
+

+ Note: The information entered in this form will be publicly available after it was + successfully reviewed. +

-
-
-
-
- -
+
+
+ +
+
+ +
-
-
- -
+
+
+
-
-
- -
+
+
+
+ +
-
-
- -
+
+
+
+
-
-
- -
+
+
+ +
-
-
- -
+
+
+
+
-
-
- -
+
+
+ +
-
-
- -
+
+
+
+
-
-
- -
+
+
+ +
-
-
- -
+
+
+
+
-
-
- -
+
+
+ +
-
-
- -
+
+
+
+
-
-
- -
+
+
+ +
-
-
- URL +
+
+
+
- -
-
-
- As a testimonial has already been submitted for your project, we ask for your understanding that you cannot submit - another draft here. If you would still like to submit a testimonial, please contact the helpdesk via - {{ CLOUD_PORTAL_SUPPORT_MAIL }}.
+ +
+
+
+ Another user of your project is making changes to this form. To avoid inconsistencies, several people cannot work on + this form at the same time. If the user does not make any further changes to the entries, this form is released + again. + You may try again in a few minutes - reload the page for this.
-
-
-
-
- - -
+
+
+
+ As a testimonial has already been submitted for your project, we ask for your understanding that you cannot submit + another draft here. If you would still like to submit a testimonial, please contact the helpdesk via + {{ CLOUD_PORTAL_SUPPORT_MAIL }}. +
+
+
+
+
    +
  • + Please provide a title. +
    • +
  • + Please provide a longer text. +
    • +
  • + Please provide an excerpt, which is at least 50 characters long but does not exceed 1000 characters. +
    • +
  • + Please provide a contributor. +
    • +
  • + Please provide an institution. +
    • +
  • + Please provide a workgroup. +
    • +
  • Please provide a valid image file.
    • +
+
+
+
+
+
+
+
+ + + Autosaving ... + +
+
+ + Autosaving successfull + +
diff --git a/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.ts b/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.ts index 027c2de693..f9779e8b89 100644 --- a/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.ts +++ b/src/app/shared/shared_modules/testimonial-forms/testimonial-form.component.ts @@ -3,9 +3,10 @@ import { } from '@angular/core'; import { Subscription } from 'rxjs'; import { ModalDirective } from 'ngx-bootstrap/modal'; -import { NgForm } from '@angular/forms'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { TESTIMONIAL_PAGE_LINK, CLOUD_PORTAL_SUPPORT_MAIL } from '../../../../links/links'; import { NewsService } from '../../../api-connector/news.service'; +import { Application } from '../../../applications/application.model/application.model'; @Component({ selector: 'app-testimonial-form', @@ -19,19 +20,37 @@ export class TestimonialFormComponent implements OnInit, OnDestroy { TESTIMONIAL_PAGE_LINK: string = TESTIMONIAL_PAGE_LINK; CLOUD_PORTAL_SUPPORT_MAIL: string = CLOUD_PORTAL_SUPPORT_MAIL; @ViewChild('testimonialModal') testimonialModal: ModalDirective; - @ViewChild(NgForm, { static: false }) testimonialForm: NgForm; + + testimonialFormGroup: UntypedFormGroup; + formBuilder: UntypedFormBuilder = new UntypedFormBuilder(); @Input() title: string = ''; + initialTitle: string = ''; text: string = ''; + initialText: string = ''; excerpt: string = ''; + initialExcerpt: string = ''; @Input() contributor: string = ''; + initialContributor: string = ''; @Input() institution: string = ''; + initialInstitution: string = ''; @Input() workgroup: string = ''; + initialWorkgroup: string = ''; @Input() simple_vm: boolean = false; - @Input() project_application_id: string; + @Input() project_application: Application; @Input() testimonialSent: boolean; + initialLoadingSuccessful: boolean = false; image_url: string = ''; submissionSuccessful: boolean = false; + autosaveTimer: ReturnType; + autosaveTimeout: number = 60000; + userInteractedWithForm: boolean = false; + autoSaveInProgress: boolean = false; + showAutosaveSucess: boolean = false; + showAutosaveFail: boolean = false; + autosaveStatusTimer: ReturnType; + file: File = null; + hideTestimonialForm: boolean = false; // eslint-disable-next-line @typescript-eslint/no-useless-constructor constructor(private newsService: NewsService) { @@ -39,14 +58,198 @@ export class TestimonialFormComponent implements OnInit, OnDestroy { } ngOnInit(): void { + this.setInitialData(); this.subscription = new Subscription(); + this.getTestimonialData(); + } + + createFormGroup(): void { + this.testimonialFormGroup = this.formBuilder.group({ + testimonial_title: [this.title, Validators.compose([Validators.required, Validators.minLength(5)])], + testimonial_text: [this.text, Validators.compose([Validators.required, Validators.minLength(200)])], + testimonial_excerpt: [ + this.excerpt, + Validators.compose([Validators.required, Validators.minLength(50), Validators.maxLength(1000)]), + ], + testimonial_contributor: [this.contributor, Validators.required], + testimonial_institution: [this.institution, Validators.required], + testimonial_workgroup: [this.workgroup, Validators.required], + }); + this.listenToChanges(); + } + + listenToChanges(): void { + this.testimonialFormGroup.get('testimonial_title').valueChanges.subscribe((val: string): void => { + this.title = val; + }); + this.testimonialFormGroup.get('testimonial_text').valueChanges.subscribe((val: string): void => { + this.text = val; + }); + this.testimonialFormGroup.get('testimonial_excerpt').valueChanges.subscribe((val: string): void => { + this.excerpt = val; + }); + this.testimonialFormGroup.get('testimonial_contributor').valueChanges.subscribe((val: string): void => { + this.contributor = val; + }); + this.testimonialFormGroup.get('testimonial_institution').valueChanges.subscribe((val: string): void => { + this.institution = val; + }); + this.testimonialFormGroup.get('testimonial_workgroup').valueChanges.subscribe((val: string): void => { + this.workgroup = val; + }); + this.testimonialFormGroup.valueChanges.subscribe((): void => { + this.checkAutosaveNeed(); + }); + } + + setInitialData(): void { + this.initialTitle = this.title; + this.initialText = this.text; + this.initialExcerpt = this.excerpt; + this.initialContributor = this.contributor; + this.initialInstitution = this.institution; + this.initialWorkgroup = this.workgroup; + } + + checkAutosaveNeed(): void { + const initial: string[] = [ + this.initialTitle, + this.initialText, + this.initialExcerpt, + this.initialContributor, + this.initialInstitution, + this.initialWorkgroup, + ]; + const current: string[] = [this.title, this.text, this.excerpt, this.contributor, this.institution, this.workgroup]; + let setInteractionValue: boolean = false; + for (let i: number = 0; i < initial.length; i += 1) { + if (initial[i] !== current[i]) { + setInteractionValue = true; + break; + } + } + this.userInteractedWithForm = setInteractionValue; + if (this.userInteractedWithForm) { + this.setInitialData(); + } + if (!this.autosaveTimer) { + this.autosaveLoop(); + } + } + getTestimonialData(): void { + if ( + this.project_application.project_application_testimonial_draft_id + && !this.project_application.project_application_testimonial_submitted + ) { + this.subscription.add( + this.newsService.getTestimonial(this.project_application.project_application_id.toString()).subscribe( + (result: any): void => { + this.adjustFormWithSavedData(result); + this.createFormGroup(); + this.initialLoadingSuccessful = true; + if (!this.project_application.project_application_testimonial_submitted) { + this.autosaveLoop(); + } + }, + (error: any): void => { + if (error.error['other_user']) { + this.hideTestimonialForm = true; + } else { + this.createFormGroup(); + } + }, + ), + ); + } else { + this.createFormGroup(); + } + } + + adjustFormWithSavedData(result: any): void { + this.title = result['title']; + this.text = result['testimonials_text']; + this.excerpt = result['excerpt']; + this.institution = result['institution']; + this.workgroup = result['workgroup']; + this.contributor = result['contributor']; } + + stopAutosaveTimer(): void { + if (this.autosaveTimer) { + clearTimeout(this.autosaveTimer); + } + } + + stopAutosaveStatusTimer(): void { + if (this.autosaveStatusTimer) { + clearTimeout(this.autosaveStatusTimer); + } + } + + startDisappearTimer(): void { + this.autosaveStatusTimer = setTimeout((): void => { + this.showAutosaveSucess = false; + this.showAutosaveFail = false; + }, 5000); + } + + autosaveLoop(timeout: number = this.autosaveTimeout): void { + this.stopAutosaveTimer(); + this.autosaveTimer = setTimeout((): void => { + if (this.userInteractedWithForm) { + this.autoSaveInProgress = true; + this.showAutosaveSucess = false; + this.stopAutosaveStatusTimer(); + this.subscription.add( + this.newsService + .autoSaveTestimonialDraft( + this.title, + this.text, + this.excerpt, + this.contributor, + this.institution, + this.workgroup, + this.simple_vm, + this.project_application.project_application_id.toString(), + ) + .subscribe( + (): void => { + this.autoSaveInProgress = false; + this.userInteractedWithForm = false; + this.showAutosaveSucess = true; + this.startDisappearTimer(); + }, + (error: any): void => { + this.autoSaveInProgress = false; + this.userInteractedWithForm = false; + if (error.error['other_user']) { + this.hideTestimonialForm = true; + } else { + this.showAutosaveFail = true; + this.startDisappearTimer(); + this.stopAutosaveTimer(); + } + }, + ), + ); + } + this.autosaveLoop(); + }, timeout); + } + + adjustFile(event): void { + const accepted: string[] = ['image/png', 'image/jpeg']; + if (accepted.includes((event.target.files[0] as File).type)) { + this.file = event.target.files[0]; + } + } + sendTestimonial(): void { this.testimonialSent = true; this.subscription.add( this.newsService .sendTestimonialDraft( - `${this.title} DRAFT`, + `${this.title} FINAL DRAFT`, this.text, this.excerpt, this.contributor, @@ -54,10 +257,13 @@ export class TestimonialFormComponent implements OnInit, OnDestroy { this.workgroup, this.simple_vm, this.image_url, - this.project_application_id, + this.project_application.project_application_id.toString(), + this.file, ) .subscribe((result: any): any => { this.submissionSuccessful = result['created']; + this.project_application.project_application_testimonial_submitted = true; + this.stopAutosaveTimer(); this.testimonialModal.show(); }), );