Skip to content

Commit

Permalink
story: value selector in multi input (#1306)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@mbritense @teodor-ritense
mbritense and teodor-ritense authored Dec 24, 2024
1 parent 4c05cbb commit 058cbb5
Show file tree
Hide file tree
Showing 47 changed files with 1,187 additions and 928 deletions.
694 changes: 6 additions & 688 deletions package-lock.json
View file

Large diffs are not rendered by default.

193 changes: 78 additions & 115 deletions projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,84 @@
*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>
}
}

<button
*ngIf="!hideDeleteButton"
Expand Down Expand Up @@ -97,97 +154,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>
48 changes: 32 additions & 16 deletions projects/valtimo/components/src/lib/components/multi-input/carbon-multi-input.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading

0 comments on commit 058cbb5

Please sign in to comment.