-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Option to configure an external create case form per case (#1334)
* Add fix for width chaning in plugin config (#1329) * fix files being duplicated on upload (#1330) * WIP: external case create form * Story/fvm fixes (#1332) * fix fvm not showing errors, translations, fix missing updateStartForm handle * feature/fvm-bugfixes fix error message not showing * fix breadcrumbs endpoint call (#1333) * added option to specify an external case create form on dossier management configuration tab * added additional translations * improved URL validation * removed unused method * added translations and toastr * checking case definition setting if an external create case form is configured, if so open the form in a new window instead of the regular start case modal * updated regex due to a code scanning alert was triggered --------- Co-authored-by: teodor-ritense <[email protected]> Co-authored-by: mbritense <[email protected]> Co-authored-by: floris-thijssen-ritense <[email protected]>
- Loading branch information
4 people
authored
Jan 29, 2025
1 parent
3ffdd8e
commit 5deb42a
Showing
13 changed files
with
503 additions
and
788 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
...ent-external-create-case-form/dossier-management-external-create-case-form.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <!-- | ||
| ~ Copyright 2015-2024 Ritense BV, the Netherlands. | ||
| ~ | ||
| ~ Licensed under EUPL, Version 1.2 (the "License"); | ||
| ~ you may not use this file except in compliance with the License. | ||
| ~ You may obtain a copy of the License at | ||
| ~ | ||
| ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 | ||
| ~ | ||
| ~ Unless required by applicable law or agreed to in writing, software | ||
| ~ distributed under the License is distributed on an "AS IS" basis, | ||
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| ~ See the License for the specific language governing permissions and | ||
| ~ limitations under the License. | ||
| --> | ||
|
|
||
| <ng-container | ||
| *ngIf="{ | ||
| documentDefinitionName: documentDefinitionName$ | async, | ||
| caseSettings: caseSettings$ | async | ||
| } as obs" | ||
| > | ||
| <h2 class="mb-4">{{ 'dossierManagement.externalCreateCaseForm.title' | translate }}</h2> | ||
|
|
||
| <div class="card card-border card-contrast"> | ||
| <div class="card-body"> | ||
| <form [formGroup]="form" (ngSubmit)="onSubmit()"> | ||
| <cds-toggle | ||
| formControlName="hasExternalForm" | ||
| label="{{ 'dossierManagement.externalCreateCaseForm.enabledToggle' | translate }}" | ||
| onText="{{ 'dossierManagement.externalCreateCaseForm.enabledToggleOn' | translate }}" | ||
| offText="{{ 'dossierManagement.externalCreateCaseForm.enabledToggleOff' | translate }}" | ||
| ></cds-toggle> | ||
|
|
||
| <div class="mt-2"> | ||
| <cds-label | ||
| warnText="{{ 'dossierManagement.externalCreateCaseForm.externalUrlWarnText' | translate }}" | ||
| invalidText="{{ 'dossierManagement.externalCreateCaseForm.externalUrlInvalidText' | translate }}"> | ||
| {{ 'dossierManagement.externalCreateCaseForm.externalUrl' | translate }} | ||
| <input | ||
| cdsText | ||
| type="text" | ||
| class="input-field" | ||
| formControlName="externalFormUrl" | ||
| placeholder="{{ 'dossierManagement.externalCreateCaseForm.externalUrlPlaceholder' | translate }}" | ||
| maxlength="512" | ||
| /> | ||
| </cds-label> | ||
| </div> | ||
|
|
||
| <div class="mt-3"> | ||
| <button cdsButton="primary" type="submit" [disabled]="!canSubmit()"> | ||
| {{ 'dossierManagement.externalCreateCaseForm.apply' | translate }} | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </ng-container> |
140 changes: 140 additions & 0 deletions
140
...ement-external-create-case-form/dossier-management-external-create-case-form.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import {Component, OnDestroy, OnInit} from '@angular/core'; | ||
| import {BehaviorSubject, filter, map, Observable, Subscription} from 'rxjs'; | ||
| import {CaseSettings, DocumentService} from '@valtimo/document'; | ||
| import {ActivatedRoute} from '@angular/router'; | ||
| import {FormBuilder, FormGroup, Validators} from '@angular/forms'; | ||
| import {NGXLogger} from 'ngx-logger'; | ||
| import {ToastrService} from 'ngx-toastr'; | ||
| import {TranslateService} from '@ngx-translate/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'valtimo-dossier-management-external-create-case-form', | ||
| templateUrl: './dossier-management-external-create-case-form.component.html', | ||
| }) | ||
| export class DossierManagementExternalCreateCaseFormComponent implements OnInit, OnDestroy { | ||
| public form!: FormGroup; | ||
|
|
||
| readonly documentDefinitionName$: Observable<string> = this.route.params.pipe( | ||
| map(params => params?.name), | ||
| filter(docDefName => !!docDefName) | ||
| ); | ||
|
|
||
| readonly caseSettings$: BehaviorSubject<CaseSettings> = new BehaviorSubject(null); | ||
|
|
||
| private readonly urlPattern = new RegExp( | ||
| '^(https?:\\/\\/)(([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,}|\\d{1,3}(\\.\\d{1,3}){3})(:\\d+)?(\\/\\S*)?(\\?\\S*)?(#\\S*)?$' | ||
| ); | ||
|
|
||
| private _subscriptions = new Subscription(); | ||
|
|
||
| constructor( | ||
| private readonly route: ActivatedRoute, | ||
| private readonly documentService: DocumentService, | ||
| private readonly fb: FormBuilder, | ||
| private readonly translateService: TranslateService, | ||
| private readonly toastrService: ToastrService, | ||
| private readonly logger: NGXLogger, | ||
| ) { } | ||
|
|
||
| ngOnInit(): void { | ||
| this.logger.debug('External Case Create Form - onInit'); | ||
|
|
||
| this.form = this.fb.group({ | ||
| hasExternalForm: [false], // Toggle is off by default | ||
| externalFormUrl: [ {value: '', disabled: true}, [ | ||
| Validators.required, | ||
| Validators.pattern(this.urlPattern), | ||
| Validators.maxLength(512) | ||
| ]], | ||
| }); | ||
|
|
||
| // Subscribe to the toggle field value changes | ||
| this._subscriptions.add( | ||
| this.hasExternalForm?.valueChanges.subscribe(isEnabled => { | ||
| if (isEnabled) { | ||
| this.externalFormUrl.enable(); | ||
| } else { | ||
| this.externalFormUrl.disable(); | ||
| this.externalFormUrl.reset(); // Clear the URL field when disabled | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| this._subscriptions.add( | ||
| this.documentDefinitionName$.subscribe(documentDefinitionName => { | ||
| this.logger.debug( | ||
| 'Fetching case definition settings for documentDefinitionName', | ||
| documentDefinitionName | ||
| ); | ||
| this.documentService | ||
| .getCaseSettingsForManagement(documentDefinitionName) | ||
| .subscribe(caseSettings => { | ||
| this.logger.debug('Fetched case definition settings', caseSettings); | ||
| this.caseSettings$.next(caseSettings); | ||
| }); | ||
| }) | ||
| ); | ||
|
|
||
| this._subscriptions.add( | ||
| this.caseSettings$.subscribe(caseSettings => { | ||
| if (caseSettings) { | ||
| this.logger.debug('Applying case definition settings to form', caseSettings); | ||
| this.form.setValue({ | ||
| hasExternalForm: caseSettings.hasExternalCreateCaseForm, | ||
| externalFormUrl: caseSettings.externalCreateCaseFormUrl, | ||
| }); | ||
| } | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.logger.debug('External Case Create Form - onDestroy'); | ||
| // Clean up subscriptions when the component is destroyed | ||
| this._subscriptions.unsubscribe(); | ||
| } | ||
|
|
||
| public get hasExternalForm() { | ||
| return this.form.get('hasExternalForm'); | ||
| } | ||
|
|
||
| public get externalFormUrl() { | ||
| return this.form.get('externalFormUrl'); | ||
| } | ||
|
|
||
| public canSubmit(): boolean { | ||
| return this.form.valid; | ||
| } | ||
|
|
||
| public onSubmit(): void { | ||
| if (this.canSubmit()) { | ||
| this.logger.debug('Submitted case definition settings form with values:', this.form.value); | ||
| const caseSettings = this.caseSettings$.getValue(); | ||
| this.updateCaseSettings(caseSettings.name, { | ||
| hasExternalCreateCaseForm: this.hasExternalForm.value, | ||
| externalCreateCaseFormUrl: (typeof this.externalFormUrl.value === 'string') ? | ||
| this.externalFormUrl.value.trim() : this.externalFormUrl.value | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| private updateCaseSettings(documentDefinitionName: string, caseSettings: CaseSettings): void { | ||
| this.logger.debug('Updating case definition settings', documentDefinitionName, caseSettings); | ||
| this.documentService | ||
| .patchCaseSettingsForManagement(documentDefinitionName, caseSettings) | ||
| .subscribe({ | ||
| next: result => { | ||
| this.logger.debug('Updated case definition settings', result); | ||
| this.caseSettings$.next(result); | ||
| }, | ||
| error: e => { | ||
| this.logger.error('An error occurred while updating case definition settings', e); | ||
| this.toastrService.error(this.translateService.instant('dossierManagement.externalCreateCaseForm.notification.error')) | ||
| }, | ||
| complete: () => { | ||
| this.logger.debug('Finished updating case definition settings'); | ||
| this.toastrService.success(this.translateService.instant('dossierManagement.externalCreateCaseForm.notification.success')); | ||
| }, | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.