feature(filuppladdning): Informativ rapport med bilaga. (TV-874)

Merge in TEA/mina-sidor-fa-web from feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be to develop

Squashed commit of the following:

commit 2fdc27affebd4310fa432830ae4e2cf19a3669e9
Merge: 2706cd4e 609698eb
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 30 08:29:48 2021 +0100

    Merge branch 'develop' into feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be

commit 2706cd4e61b497b50d82518bdfd5e5c310dcc7aa
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 29 13:33:24 2021 +0100

    Added uploaded file to submitData

commit aa477af83df371e7701885aed7418a283fcf0a2d
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 29 10:12:34 2021 +0100

    Amends

commit 8c36a32e3d5f9c7d9530959d341d1ebf3e41be9d
Merge: b49a06f3 85f398ca
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Nov 26 10:28:19 2021 +0100

    Merge branch 'develop' into feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be

commit b49a06f36616f2b49b62f66dfc53fb5ee7572273
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 09:39:42 2021 +0100

    Laddningssnurra för informativ rapport

commit 1fb6b51af5325a199b86630a12769ab3ac00f70c
Merge: c516a91b f0354d0a
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 22 14:17:14 2021 +0100

    - Merge branch 'develop' into feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be
    - Added label text to ui-select to prevent digi-core warning in console and added display:none; to hide it.

commit c516a91b8f2aabca7e2393f2ccb997447be5bedf
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 22 13:57:55 2021 +0100

    Prettier, changed in-parameter type.

commit d78e8e867ca3b632e86669af1780b5e5249eacd2
Merge: 1aa96b52 a0d10765
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 15 09:57:13 2021 +0100

    Merge branch 'develop' into feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be

commit 1aa96b5275115f0d60d0c0637b34bfc3174a4b34
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Nov 12 11:20:51 2021 +0100

    - Reset package-lock.json
    - Changed type from unknown to file

commit abae56f4e3b9803552d2028f3c55184662181b22
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Nov 12 11:13:35 2021 +0100

    File-upload

commit b1bc6f931a6fd043573a57cf489cf964796e2943
Merge: 5fe8cace 873b6a0c
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 10 12:49:57 2021 +0100

    Merge branch 'develop' into feature/TV-874-fe-lagg-till-mojlighet-att-lagga-upp-fil-och-synka-med-be

commit 5fe8cace262a75b75e4bebde6fa4c3effb11e39f
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 9 14:21:24 2021 +0100

    - Fortsatt utveckling av filuppladdaren
    - Byt alla af till ui, digi-ng referenser till digi-core/projektets
    - Ersätt digiNgFormValidatioMmesage till digi-cores
    - Validering (Måste ha fil) (funkar inte riktigt ännu då valideringens sker på alla kategorier eftersom den finns i modellen.

commit bda789b4451983ad69ab6c05a3bad1723b438c2d
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Nov 1 16:40:16 2021 +0100

    File-upload
This commit is contained in:
Nikola Holst Nikolic
2021-11-30 08:33:55 +01:00
parent 609698eb4e
commit af4f6cbefc
12 changed files with 855 additions and 324 deletions

View File

@@ -57,7 +57,30 @@
[uiInvalid]="formControlIsInvalid('category')"
[uiOptions]="categorySelectItems"
[uiValidationMessage]="categoryFormControl.errors?.required"
(uiOnChange)="categorySelectChange(categoryFormControl.value)"
></ui-select>
<ng-container *ngIf="formData$ | async as formData">
<ui-file-upload
*ngIf="formData.category === 'dokument'"
ngDefaultControl
[formControl]="fileFormControl"
uiId="informativRapportFileUpload"
uiUploadBtnText="Välj fil"
uiLabel="Bifoga dokument"
uiLabelDescription="Exempel på dokument är individuell utvecklingsplan."
[uiRequired]="true"
[uiInvalid]="fileFormControl.invalid && informativRapportFormGroup.touched"
[uiAnnounceIfOptional]="true"
uploadBtnAriaLabel="Välj en fil att ladda upp"
[uiMultiple]="false"
[uiMaxFileSize]="8192"
uiAccept="application/pdf"
uiName="informativRapportFileUpload"
(uiOnUploadFiles)="setUploadedFile($event)"
(uiOnRemoveFile)="removeUploadedFile()"
[uiInvalidMessage]="fileFormControl.errors?.required"
></ui-file-upload>
</ng-container>
</div>
<div class="informativ-rapport-form__form-item">
<ui-textarea
@@ -71,7 +94,6 @@
[uiMaxLength]="2000"
></ui-textarea>
</div>
<footer class="informativ-rapport-form__footer">
<div class="informativ-rapport-form__cta-wrapper">
<digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
@@ -81,7 +103,6 @@
</ui-link-button>
</div>
</footer>
<digi-ng-dialog
[afActive]="confirmDialogOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog()"
@@ -101,6 +122,14 @@
<dd>{{getInformativRapportCategory(submitData.category)}}</dd>
<dt>Kompletterande information</dt>
<dd>{{submitData.comment}}</dd>
<ng-container *ngIf="submitData.file?.size">
<dt>Dokument</dt>
<dd>
<a [href]="getInformativRapportFileUrl(submitData.file)" [download]="submitData.file?.name">
{{submitData.file?.name}}
</a>
</dd>
</ng-container>
</ng-container>
</msfa-report-description-list>
<digi-notification-alert
@@ -123,8 +152,6 @@
afAriaLabel="Här står det mer detaljerad information för vad kategorierna innebär"
id="category-information"
>
<!-- <h3>Skicka dokumentation till Arbetsförmedlingen</h3>
<p>Skicka in dokumentation som Arbetsförmedlingen begärt.</p> -->
<h3>Behov av annan insats</h3>
<p>
Informera om att deltagaren kan behöva en arbetsmarknadspolitisk insats, exempelvis utbildning,
@@ -142,6 +169,8 @@
Informera om att det behövs dialog gällande deltagarens ärende, exempelvis inför eventuellt
stöd/anpassning eller hälsa.
</p>
<h3>Skicka dokumentation till Arbetsförmedlingen</h3>
<p>Skicka in dokumentation som Arbetsförmedlingen begärt.</p>
</digi-ng-dialog>
</form>
</ng-template>

View File

@@ -3,7 +3,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { InformativRapportCategory, InformativRapportCategoryKey } from '@msfa-enums/informativ-rapport-category.enum';
import { InformativRapportRequest } from '@msfa-models/api/informativ-rapport.request.model';
import {
InformativRapportRequest,
InformativRapportWithFileRequest,
} from '@msfa-models/api/informativ-rapport.request.model';
import { DeltagareAvrop } from '@msfa-models/avrop.model';
import { CustomError } from '@msfa-models/error/custom-error';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
@@ -11,6 +14,7 @@ import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { map, shareReplay, switchMap, take } from 'rxjs/operators';
import { InformativRapportFormData } from './informativ-rapport-form.model';
import { InformativRapportFormService } from './informativ-rapport-form.service';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'msfa-informativ-rapport-form',
@@ -19,6 +23,7 @@ import { InformativRapportFormService } from './informativ-rapport-form.service'
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InformativRapportFormComponent {
categoryDocumentSelected = false;
shouldValidate$ = new BehaviorSubject<boolean>(false);
confirmDialogOpen$ = new BehaviorSubject<boolean>(false);
categoryInformationDialogOpen$ = new BehaviorSubject<boolean>(false);
@@ -36,6 +41,7 @@ export class InformativRapportFormComponent {
informativRapportFormGroup = new FormGroup({
category: new FormControl(null, [RequiredValidator('Ett ärende måste väljas')]),
comment: new FormControl('', [RequiredValidator('Kompletterande information är obligatoriskt')]),
file: new FormControl(null),
});
categorySelectItems: SelectOption[] = Object.entries(InformativRapportCategory).map(([value, name]) => ({
name,
@@ -51,7 +57,8 @@ export class InformativRapportFormComponent {
);
constructor(
private informativRapportFormService: InformativRapportFormService,
private activatedRoute: ActivatedRoute
private activatedRoute: ActivatedRoute,
private domSanitizer: DomSanitizer
) {}
get categoryFormControl(): FormControl {
@@ -60,23 +67,41 @@ export class InformativRapportFormComponent {
get commentFormControl(): FormControl {
return this.informativRapportFormGroup.get('comment') as FormControl;
}
get fileFormControl(): FormControl {
return this.informativRapportFormGroup.get('file') as FormControl;
}
private _formDataToSubmitData(
genomforandeReferens: number,
formData: InformativRapportFormData
): InformativRapportRequest {
): InformativRapportRequest | InformativRapportWithFileRequest {
const { category, comment } = formData;
return {
genomforandeReferens,
category,
comment,
};
const file: File = (this.fileFormControl?.value as File) ?? null;
return this.categoryDocumentSelected
? { genomforandeReferens, category, comment, file }
: { genomforandeReferens, category, comment };
}
getInformativRapportFileUrl(doc: File): string {
const url = URL.createObjectURL(new Blob([doc]));
return this.domSanitizer.bypassSecurityTrustUrl(url) as string;
}
private _markFormAsTouchedAndDirty(): void {
this.informativRapportFormGroup.markAllAsTouched();
this.commentFormControl.markAsDirty();
this.categoryFormControl.markAsDirty();
this.fileFormControl?.markAsDirty();
}
setUploadedFile(file: File): void {
this.fileFormControl.setValue(file[0]);
}
removeUploadedFile(): void {
this.fileFormControl.setValue(null);
}
getInformativRapportCategory(category: InformativRapportCategoryKey): InformativRapportCategory {
@@ -95,6 +120,18 @@ export class InformativRapportFormComponent {
this.categoryInformationDialogOpen$.next(false);
}
categorySelectChange(category: string): void {
this.categoryDocumentSelected = category === 'dokument';
this.informativRapportFormGroup
.get('file')
.setValidators(this.categoryDocumentSelected ? [RequiredValidator('En fil måste väljas')] : null);
if (!this.categoryDocumentSelected) {
this.removeUploadedFile();
}
}
openConfirmDialog(): void {
this.shouldValidate$.next(true);
this._markFormAsTouchedAndDirty();

View File

@@ -13,7 +13,9 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { InformativRapportFormComponent } from './informativ-rapport-form.component';
import { InformativRapportFormService } from './informativ-rapport-form.service';
import { UiFileUploadModule } from '@ui/file-upload/file-upload.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -31,7 +33,9 @@ import { UiSelectModule } from '@ui/select/select.module';
UiSelectModule,
DigiNgDialogModule,
UiTextareaModule,
UiFileUploadModule,
UiLinkButtonModule,
UiLoaderModule,
],
providers: [InformativRapportFormService],
exports: [InformativRapportFormComponent],

View File

@@ -3,6 +3,7 @@ export enum InformativRapportCategory {
hjalpmedel = 'Behov av hjälpmedel',
teckensprakstolk = 'Behov av teckenspråkstolk',
dialog = 'Behov av dialog med Arbetsförmedlingen',
dokument = 'Skicka dokumentation till Arbetsförmedlingen',
}
export type InformativRapportCategoryKey = keyof InformativRapportCategory;

View File

@@ -4,3 +4,10 @@ export interface InformativRapportRequest {
category: InformativRapportCategoryKey;
comment: string;
}
export interface InformativRapportWithFileRequest {
genomforandeReferens: number;
category: InformativRapportCategoryKey;
comment: string;
file: File;
}