feat: latest 12 into 12.1 (#991)

* bugfix: Can't save form-io (#969) * Add fix form formIO Sandbox output tab (#971) * feat: task list feedback (#974) * feedback * comment * fixes (#977) * fix tags for specified columns (#978) * remove tab (#981) * Add ids for playwright (#945) * Add ids for Playwright * Add ids for Playwright * cherrypick (#983) * fix form management edit and case detail header (#989) * fix after saving in monaco editor (#990) * fix --------- Co-authored-by: Klaas Schuijtemaker <[email protected]> Co-authored-by: teodor-ritense <[email protected]>
valtimo-platform · May 15, 2024 · 2cf7ed3 · 2cf7ed3
1 parent 054573f
commit 2cf7ed3
Show file tree

Hide file tree

Showing 20 changed files with 259 additions and 602 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -285,7 +285,6 @@
     "@valtimo/dashboard-management": "file:dist/valtimo/dashboard-management",
     "@valtimo/decision": "file:dist/valtimo/decision",
     "@valtimo/document": "file:dist/valtimo/document",
-    "@valtimo/zgw": "file:dist/valtimo/zgw",
     "@valtimo/dossier": "file:dist/valtimo/dossier",
     "@valtimo/dossier-management": "file:dist/valtimo/dossier-management",
     "@valtimo/form-flow-management": "file:dist/valtimo/form-flow-management",

diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.html b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.html
@@ -118,7 +118,7 @@
 </ng-template>
 
 <ng-template #rowDisabled let-data="data">
-  <div *ngIf="data.locked" class="disabled">
+  <div *ngIf="data.locked" class="locked">
     <span
       class="float-right badge badge-pill badge-secondary bg-grey"
       ngbTooltip="{{ lockedTooltipTranslationKey | translate }}"
@@ -153,6 +153,8 @@
 </ng-template>
 
 <ng-template #tagTemplate let-data="data">
+  <ng-container *ngIf="!data.tags">-</ng-container>
+
   <div *ngIf="data.tags" class="tag-template">
     <cds-tag *ngIf="!!data.tags[0].content" class="cds-tag--no-margin" [type]="data.tags[0].type">
       {{ data.tags[0].content }}

diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.scss b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.scss
@@ -36,6 +36,14 @@ td:first-child {
   padding-left: 25px;
 }
 
+::ng-deep tr:has(> td .locked) {
+  cursor: not-allowed;
+
+  td {
+    color: var(--cds-text-on-color-disabled);
+  }
+}
+
 .valtimo-carbon-list {
   ::ng-deep &__header--hidden thead {
     display: none;
@@ -94,7 +102,3 @@ td:first-child {
     }
   }
 }
-
-.disabled {
-  cursor: not-allowed;
-}
diff --git a/projects/valtimo/components/src/lib/components/form-io/form-io-builder.component.ts b/projects/valtimo/components/src/lib/components/form-io/form-io-builder.component.ts
@@ -16,11 +16,11 @@
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Components} from 'formiojs';
-import {distinctUntilChanged, map} from 'rxjs/operators';
-import {Observable} from 'rxjs';
+import {delay, distinctUntilChanged, map, tap} from 'rxjs/operators';
 import {TranslateService} from '@ngx-translate/core';
 import {FormioOptions} from '@formio/angular/formio.common';
 import {FormIoStateService} from './services/form-io-state.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'valtimo-form-io-builder',
@@ -53,7 +53,9 @@ export class FormioBuilderComponent implements OnInit {
 
       this.triggerRebuild.emit(options);
       return options;
-    })
+    }),
+    delay(1000),
+    tap((options) => this.triggerRebuild.emit(options))
   );
 
   constructor(

diff --git a/projects/valtimo/components/src/lib/components/right-sidebar/right-sidebar.component.html b/projects/valtimo/components/src/lib/components/right-sidebar/right-sidebar.component.html
@@ -149,7 +149,9 @@
     <cds-list-row>
       <cds-list-column>
         <cds-dropdown
+          [id]="'language-dropdown'"
           [appendInline]="true"
+          [dropUp]="false"
           (click)="$event.stopPropagation()"
           (selected)="updateUserLanguage($event)"
         >

diff --git a/...ement-detail-container-actions/dossier-management-detail-container-actions.component.html b/...ement-detail-container-actions/dossier-management-detail-container-actions.component.html
@@ -56,6 +56,7 @@
     class="overflow-button"
   >
     <cds-overflow-menu-option
+      [id]="'exportDocumentDefinition'"
       [disabled]="obs.exporting || obs.loadingVersion"
       (selected)="export()"
       >{{
@@ -65,6 +66,7 @@
 
     <cds-overflow-menu-option
       *ngIf="obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly"
+      [id]="'removeDocumentDefinition'"
       [disabled]="obs.exporting || obs.loadingVersion"
       (selected)="openDossierRemoveModal()"
       >{{ 'Remove document definition' | translate }}</cds-overflow-menu-option

diff --git a/...t-statuses/dossier-management-status-modal/dossier-management-status-modal.component.html b/...t-statuses/dossier-management-status-modal/dossier-management-status-modal.component.html
@@ -89,6 +89,7 @@ <h3 cdsModalHeaderHeading>
         {{ 'dossierManagement.statuses.columns.color' | translate }}
 
         <cds-dropdown
+          [id]="'status-color-dropdown'"
           [appendInline]="false"
           [placeholder]="'dossierManagement.statuses.colorPlaceholder' | translate"
           (selected)="colorDropdownChange($event)"

diff --git a/...ent-statuses/dossier-management-status-modal/dossier-management-status-modal.component.ts b/...ent-statuses/dossier-management-status-modal/dossier-management-status-modal.component.ts
@@ -61,7 +61,7 @@ import {TranslateService} from '@ngx-translate/core';
 })
 export class DossierManagementStatusModalComponent implements OnInit, OnDestroy {
   @Input() public set type(value: StatusModalType) {
-    this._type.next(value);
+    this._type$.next(value);
 
     if (value === 'closed') {
       setTimeout(() => {
@@ -81,12 +81,10 @@ export class DossierManagementStatusModalComponent implements OnInit, OnDestroy
 
   @Output() public closeModalEvent = new EventEmitter<StatusModalCloseEvent>();
 
-  private readonly _type = new BehaviorSubject<StatusModalType>(undefined);
+  private readonly _type$ = new BehaviorSubject<StatusModalType>(undefined);
   private readonly _typeAnimationDelay$ = new BehaviorSubject<StatusModalType>(undefined);
   private readonly _prefillStatus = new BehaviorSubject<InternalCaseStatus>(undefined);
 
-  public readonly isClosed$ = this._type.pipe(map(type => type === 'closed'));
-
   public readonly statusFormGroup = this.fb.group({
     title: this.fb.control('', Validators.required),
     key: this.fb.control('', [
@@ -98,11 +96,14 @@ export class DossierManagementStatusModalComponent implements OnInit, OnDestroy
     color: this.fb.control('', Validators.required),
   });
 
+  private _isEdit!: boolean;
+
   public readonly isEdit$ = combineLatest([this._typeAnimationDelay$, this._prefillStatus]).pipe(
     tap(([type, prefillStatus]) => {
       if (type === 'edit' && prefillStatus) this.prefillForm(prefillStatus);
     }),
-    map(([type]) => type === 'edit')
+    map(([type]) => type === 'edit'),
+    tap(isEdit => (this._isEdit = isEdit))
   );
 
   public readonly isAdd$ = this._typeAnimationDelay$.pipe(
@@ -112,6 +113,8 @@ export class DossierManagementStatusModalComponent implements OnInit, OnDestroy
     })
   );
 
+  public readonly isClosed$ = this._type$.pipe(map(type => type === 'closed'));
+
   public readonly disabled$ = new BehaviorSubject<boolean>(false);
 
   private readonly COLORS: InternalCaseStatusColor[] = [
@@ -347,7 +350,7 @@ export class DossierManagementStatusModalComponent implements OnInit, OnDestroy
 
   private uniqueKeyValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null =>
-      this.usedKeys?.every((key: string) => key !== control.value)
+      this.usedKeys?.every((key: string) => key !== control.value) || this._isEdit
         ? null
         : {uniqueKey: {value: control.value}};
   }

diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html b/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.html
@@ -146,21 +146,29 @@
         canAssign: canAssign$ | async,
         canClaim: canClaim$ | async,
         canHaveAssignee: canHaveAssignee$ | async,
-        document: document$ | async
+        document: document$ | async,
+        caseStatus: caseStatus$ | async
       } as obs"
     >
-      <div class="dossier-assign-user" [ngClass]="{'--compact': compactMode$ | async}">
-        <ng-container
-          *ngTemplateOutlet="
-            caseDetailAssignee;
-            context: {
-              canHaveAssignee: obs.canHaveAssignee,
-              document: obs.document,
-              canAssign: obs.canAssign
-            }
-          "
-        ></ng-container>
+      <div class="dossier-status-assign" [ngClass]="{'--compact': compactMode$ | async}">
+        @if (obs.caseStatus) {
+          <cds-tag size="sm" [type]="obs.caseStatus.tagType">{{ obs.caseStatus.title }}</cds-tag>
+        }
+
+        <div class="dossier-assign-user" [ngClass]="{'--compact': compactMode$ | async}">
+          <ng-container
+            *ngTemplateOutlet="
+              caseDetailAssignee;
+              context: {
+                canHaveAssignee: obs.canHaveAssignee,
+                document: obs.document,
+                canAssign: obs.canAssign
+              }
+            "
+          ></ng-container>
+        </div>
       </div>
+
       <div class="buttons-container">
         <cds-overflow-menu
           [ngClass]="{'--compact': compactMode$ | async}"
@@ -203,8 +211,5 @@
         </cds-overflow-menu>
       </div>
     </div>
-    <div *ngIf="caseStatus$ | async as caseStatus" class="dossier-detail-page-header">
-      <cds-tag [type]="caseStatus.tagType">{{ caseStatus.title }}</cds-tag>
-    </div>
   </ng-template>
 </ng-container>
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.scss b/projects/valtimo/dossier/src/lib/components/dossier-detail/dossier-detail.component.scss
@@ -65,9 +65,11 @@
   width: 100%;
   justify-content: space-between;
   align-items: flex-end;
+  padding-bottom: 4px;
 
   &.--compact {
-    align-items: center;
+    padding-bottom: 0;
+    align-items: flex-start;
   }
 
   ::ng-deep .version-selection {
@@ -79,11 +81,17 @@
   }
 }
 
-.dossier-assign-user {
-  padding-bottom: 4px;
-  margin-left: -16px;
+.dossier-status-assign {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+
+  .cds--tag {
+    margin: 0;
+    height: var(--cds-layout-size-height-md);
+  }
 
   &.--compact {
-    margin-left: 0;
+    align-items: center;
   }
 }
diff --git a/projects/valtimo/dossier/src/lib/components/dossier-list/dossier-list.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-list/dossier-list.component.ts
@@ -45,7 +45,6 @@ import {
   Documents,
   DocumentService,
   InternalCaseStatus,
-  InternalCaseStatusColor,
   InternalCaseStatusUtils,
   SpecifiedDocuments,
 } from '@valtimo/document';
@@ -432,7 +431,8 @@ export class DossierListComponent implements OnInit, OnDestroy {
 
       return res.data.map(item => {
         const status = res.statuses.find(
-          (status: InternalCaseStatus) => status.key === item.internalStatus
+          (status: InternalCaseStatus) =>
+            status.key === item.internalStatus || status.key === item.status
         );
         if (!status) return item;
 

diff --git a/.../valtimo/form-management/src/lib/form-management-edit/form-management-edit.component.html b/.../valtimo/form-management/src/lib/form-management-edit/form-management-edit.component.html
@@ -24,44 +24,53 @@
   @if (obs.formDefinition) {
     <ng-container renderInPageHeader [fullWidth]="true">
       <ng-template>
-        <div class="valtimo-form-management-edit__header">
-          <cds-overflow-menu>
-            <cds-overflow-menu-option (selected)="downloadFormDefinition(obs.formDefinition)">
-              {{ 'Download' | translate }}
-            </cds-overflow-menu-option>
+        <div
+          class="valtimo-form-management-edit__header-container"
+          [ngClass]="{'--compact': obs.compactMode}"
+        >
+          @if (obs.formDefinition.readOnly) {
+            <cds-tag size="sm" type="blue">{{ 'formManagement.readOnly' | translate }}</cds-tag>
+          }
 
-            <cds-overflow-menu-option
-              [disabled]="obs.formDefinition.readOnly"
-              (selected)="showUploadModal()"
-            >
-              {{ 'Upload' | translate }}
-            </cds-overflow-menu-option>
+          <div class="valtimo-form-management-edit__header">
+            <cds-overflow-menu>
+              <cds-overflow-menu-option (selected)="downloadFormDefinition(obs.formDefinition)">
+                {{ 'Download' | translate }}
+              </cds-overflow-menu-option>
 
-            <cds-overflow-menu-option
-              [disabled]="obs.formDefinition.readOnly"
-              (selected)="delete(obs.formDefinition)"
-            >
-              {{ 'interface.delete' | translate }}
-            </cds-overflow-menu-option>
+              <cds-overflow-menu-option
+                [disabled]="obs.formDefinition.readOnly"
+                (selected)="showUploadModal()"
+              >
+                {{ 'Upload' | translate }}
+              </cds-overflow-menu-option>
 
-            <cds-overflow-menu-option
-              [disabled]="obs.formDefinition.readOnly"
-              (selected)="showDuplicateModal(obs.formDefinition)"
-            >
-              {{ 'formManagement.duplicate' | translate }}
-            </cds-overflow-menu-option>
-          </cds-overflow-menu>
+              <cds-overflow-menu-option
+                [disabled]="obs.formDefinition.readOnly"
+                (selected)="delete(obs.formDefinition)"
+              >
+                {{ 'interface.delete' | translate }}
+              </cds-overflow-menu-option>
 
-          <button
-            cdsButton="primary"
-            [disabled]="obs.formDefinition.readOnly || !validJsonChange"
-            [size]="obs.compactMode ? 'sm' : 'md'"
-            (click)="modifyFormDefinition(obs.formDefinition)"
-          >
-            {{ 'interface.save' | translate }}
+              <cds-overflow-menu-option
+                [disabled]="obs.formDefinition.readOnly"
+                (selected)="showDuplicateModal(obs.formDefinition)"
+              >
+                {{ 'formManagement.duplicate' | translate }}
+              </cds-overflow-menu-option>
+            </cds-overflow-menu>
+
+            <button
+              cdsButton="primary"
+              [disabled]="obs.formDefinition.readOnly || !validJsonChange"
+              [size]="obs.compactMode ? 'sm' : 'md'"
+              (click)="modifyFormDefinition(obs.formDefinition)"
+            >
+              {{ 'interface.save' | translate }}
 
-            <svg class="cds--btn__icon" cdsIcon="save" size="16"></svg>
-          </button>
+              <svg class="cds--btn__icon" cdsIcon="save" size="16"></svg>
+            </button>
+          </div>
         </div>
       </ng-template>
     </ng-container>

diff --git a/.../valtimo/form-management/src/lib/form-management-edit/form-management-edit.component.scss b/.../valtimo/form-management/src/lib/form-management-edit/form-management-edit.component.scss
@@ -20,6 +20,25 @@
     align-items: center;
     justify-content: flex-end;
     gap: 16px;
+    margin-left: auto;
+  }
+
+  &__header-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 4px;
+
+    .cds--tag {
+      margin: 0;
+      height: var(--cds-layout-size-height-md);
+    }
+
+    &.--compact {
+      align-items: flex-start;
+      padding-bottom: 0;
+    }
   }
 
   &__output .cds--tab-content {