story: merge next-minor into next-major (#1316)

* Story/129861 widget field ellipsis (#1296) * fix config for personal dashboard * 128341 Can use process variable or document property in verloop tijd in dagen field. * Add handler for array of strings (#1299) * Bugfix/130515 boolean resolver (#1300) * story/fix-fvm-updating fix form view model not updating (#1301) * #57: Configurable Documenten API Upload fields (#1298) doc: It is now possible to configure the fields that are needed when uploading to the Documenten API * doc: fix: Linking a form to a user-task without selecting the task-display-type will no longer result in an error (#1303) * Add fix for ellipsis cutting one character short (#1307) * Story/130613 reset form value (#1308) * Add form display configuration * Remove code * Add no access page for case details * Remove no access page for case details * Reset form value when submitting the start process form * fix error (#1309) * story: value selector in multi input (#1306) * refactor * abstract keyvalue to separate component * abstract singlevalue * abstract key dropdown value * abstract arbitrary amount * working value path selector in multi input * fix verzoek ui * add value path selector value * wip * small fixes * final fixes * Update projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.ts Co-authored-by: teodor-ritense <[email protected]> * pr comment --------- Co-authored-by: teodor-ritense <[email protected]> * Story/124923 widget resolver (#1310) * Story/fix fvm translations (#1311) * story/fix-fvm-updating fix form view model not updating * story/fix-fvm-translations fix translations * story: value path selector on dashboard widget data source config (#1312) * value path selecter dropdown * add to case counts * Update projects/valtimo/dashboard/src/lib/data-sources/case-group-by/components/case-group-by-configuration/case-group-by-configuration.component.scss Co-authored-by: teodor-ritense <[email protected]> * pr suggestion --------- Co-authored-by: teodor-ritense <[email protected]> * story: task data source for dashboard (#1305) * wip * fix fe helper text * pr comments --------- Co-authored-by: teodor-ritense <[email protected]> Co-authored-by: jarred-ritense <[email protected]> Co-authored-by: jarred-ritense <[email protected]> Co-authored-by: floris-thijssen-ritense <[email protected]> Co-authored-by: Klaas Schuijtemaker <[email protected]> Co-authored-by: Sofia <[email protected]>
valtimo-platform · Jan 7, 2025 · 2d84181 · 2d84181
1 parent f9c67da
commit 2d84181
Show file tree

Hide file tree

Showing 136 changed files with 4,256 additions and 849 deletions.
diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts
@@ -72,6 +72,7 @@ import {
   TAG_ELLIPSIS_LIMIT,
   ViewType,
 } from '../../models';
+import {EllipsisPipe} from '../../pipes';
 import {KeyStateService} from '../../services/key-state.service';
 import {ViewContentService} from '../view-content/view-content.service';
 import {CarbonListFilterPipe} from './CarbonListFilterPipe.directive';
@@ -256,6 +257,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   constructor(
+    private readonly ellipsisPipe: EllipsisPipe,
     private readonly filterPipe: CarbonListFilterPipe,
     private readonly iconService: IconService,
     private readonly logger: NGXLogger,
@@ -461,7 +463,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
                 title: resolvedObject ?? '-',
                 data:
                   (field.tooltipCharLimit
-                    ? this.transformContentEllipsis(resolvedObject, field.tooltipCharLimit)
+                    ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit)
                     : resolvedObject) ?? '-',
                 template: this.defaultTemplate,
                 item,
@@ -702,7 +704,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
 
     const tags = itemTags.map((tag: CarbonTag, index: number) =>
       index === 0
-        ? {...tag, ellipsisContent: this.transformContentEllipsis(tag.content, TAG_ELLIPSIS_LIMIT)}
+        ? {...tag, ellipsisContent: this.ellipsisPipe.transform(tag.content, TAG_ELLIPSIS_LIMIT)}
         : tag
     );
 
@@ -711,8 +713,4 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy {
       template: this.tagTemplate,
     });
   }
-
-  private transformContentEllipsis(content: string, limit: number): string {
-    return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
-  }
 }
diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts
@@ -29,6 +29,7 @@ import {
   TagModule,
 } from 'carbon-components-angular';
 import {ValtimoCdsModalDirectiveModule} from '../../directives/valtimo-cds-modal/valtimo-cds-modal-directive.module';
+import {EllipsisPipe} from '../../pipes';
 import {CardModule} from '../card/card.module';
 import {ViewContentModule} from '../view-content/view-content.module';
 import {CarbonListComponent} from './carbon-list.component';
@@ -63,5 +64,6 @@ import {CarbonTagsModalComponent} from './tags-modal/tags-modal.component';
     ViewContentModule,
   ],
   exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent],
+  providers: [EllipsisPipe],
 })
 export class CarbonListModule {}
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
@@ -47,27 +47,102 @@
       *ngFor="let value of values$ | async as values; trackBy: trackByFn; index as i"
       class="v-multi-input__row"
     >
-      <ng-container *ngIf="type === 'value'">
-        <ng-container *ngTemplateOutlet="singleValue; context: {value: value}"></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyValue'">
-        <ng-container
-          *ngTemplateOutlet="keyValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'keyDropdownValue'">
-        <ng-container
-          *ngTemplateOutlet="keyDropdownValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="type === 'arbitraryAmount'">
-        <ng-container
-          *ngTemplateOutlet="arbitraryAmountValue; context: {value: value, index: i}"
-        ></ng-container>
-      </ng-container>
+      @switch (type) {
+        @case ('value') {
+          <valtimo-single-value
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, 'value')"
+          ></valtimo-single-value>
+        }
+        @case ('keyValue') {
+          <valtimo-key-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value>
+        }
+        @case ('keyDropdownValue') {
+          <valtimo-key-dropdown-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [dropdownColumnTitle]="dropdownColumnTitle"
+            [index]="i"
+            [value]="value"
+            [dropdownItems$]="getDropdownItemsForRow(i)"
+            [dropdownWidth]="dropdownWidth"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-dropdown-value>
+        }
+        @case ('arbitraryAmount') {
+          <valtimo-arbitrary-amount-value
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [arbitraryAmountTitles]="arbitraryAmountTitles"
+            [amountOfArbitraryValuesArray$]="amountOfArbitraryValuesArray$"
+            (valueChange)="
+              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)
+            "
+          ></valtimo-arbitrary-amount-value>
+        }
+        @case ('keyValuePathSelector') {
+          <valtimo-key-value-path-selector
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-key-value-path-selector>
+        }
+        @case ('valuePathSelectorValue') {
+          <valtimo-value-path-selector-value
+            [keyColumnTitle]="keyColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-value-path-selector-value>
+        }
+        @case ('valuePathSelectorDropdownValue') {
+          <valtimo-value-path-selector-dropdown-value
+            [keyColumnTitle]="keyColumnTitle"
+            [dropdownColumnTitle]="dropdownColumnTitle"
+            [valueColumnTitle]="valueColumnTitle"
+            [index]="i"
+            [value]="value"
+            [fullWidth]="fullWidth"
+            [disabled]="disabled"
+            [documentDefinitionName]="valuePathSelectorDocumentDefinitionName"
+            [prefixes]="valuePathSelectorPrefixes"
+            [dropdownItems$]="getDropdownItemsForRow(i)"
+            [dropdownWidth]="dropdownWidth"
+            [showDocumentDefinitionSelector]="valuePathSelectorShowDocumentDefinitionSelector"
+            [notation]="valuePathSelectorNotation"
+            (valueChange)="onValueChange($event.value, $event.inputValue, $event.type)"
+          ></valtimo-value-path-selector-dropdown-value>
+        }
+      }
 
       <button
         *ngIf="!hideDeleteButton"
@@ -97,97 +172,3 @@
     </div>
   </div>
 </div>
-
-<ng-template #singleValue let-value="value">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (change)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyValue let-value="value" let-index="index">
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      keyColumnTitle
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-  <div class="v-multi-input__input" [ngClass]="{'--full-width': fullWidth}">
-    <cds-label *ngIf="index === 0 && keyColumnTitle && valueColumnTitle">{{
-      valueColumnTitle
-    }}</cds-label>
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
-
-<ng-template #arbitraryAmountValue let-value="value" let-index="index">
-  <div
-    class="v-multi-input__input"
-    [ngClass]="{'--full-width': fullWidth}"
-    *ngFor="let _ of amountOfArbitraryValuesArray$ | async; index as i"
-  >
-    <cds-label *ngIf="index === 0">{{
-      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''
-    }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value ? value['' + i] : ''"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'arbitrary', i)"
-    />
-  </div>
-</ng-template>
-
-<ng-template #keyDropdownValue let-value="value" let-index="index">
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && keyColumnTitle">{{ keyColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.key"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'key')"
-    />
-  </div>
-
-  <div [style.minWidth.px]="dropdownWidth" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && dropdownColumnTitle">{{ dropdownColumnTitle }}</cds-label>
-
-    <cds-dropdown
-      (selected)="onValueChange(value, $event.item.id, 'dropdown')"
-      [appendInline]="true"
-    >
-      <cds-dropdown-list
-        [items]="getDropdownItemsForRow(index) | async"
-        type="multi"
-      ></cds-dropdown-list>
-    </cds-dropdown>
-  </div>
-
-  <div [ngClass]="{'--full-width': fullWidth}" class="v-multi-input__input">
-    <cds-label *ngIf="index === 0 && valueColumnTitle">{{ valueColumnTitle }}</cds-label>
-
-    <input
-      cdsText
-      [defaultValue]="value.value"
-      [disabled]="disabled"
-      (input)="onValueChange(value, $event.target.value, 'value')"
-    />
-  </div>
-</ng-template>
diff --git a/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss b/projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
@@ -14,25 +14,41 @@
  * limitations under the License.
  */
 
-.v-multi-input--margin {
-  margin-block-end: var(--v-input-margin);
-}
+.v-multi-input {
+  &--margin {
+    margin-block-end: var(--v-input-margin);
+  }
 
-.v-multi-input__row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  margin-block-end: var(--v-multi-input-row-spacing-block);
-}
+  &__row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    margin-block-end: var(--v-multi-input-row-spacing-block);
+  }
 
-.v-multi-input__input {
-  margin-inline-end: var(--v-multi-input-input-spacing-inline);
+  &__input {
+    margin-inline-end: var(--v-multi-input-input-spacing-inline);
 
-  &.--full-width {
-    width: 100%;
+    &.--full-width {
+      flex: 1;
+    }
   }
-}
 
-.v-multi-input--no-delete-button .v-multi-input__input:last-child {
-  margin-inline-end: 0;
+  &__separator {
+    height: 40px;
+    width: 12px;
+    display: flex;
+    justify-content: flex-start;
+
+    &::before {
+      content: '';
+      height: 100%;
+      width: 1px;
+      background-color: var(--cds-border-subtle-selected);
+    }
+  }
+
+  &--no-delete-button &__input:last-child {
+    margin-inline-end: 0;
+  }
 }