Story/129861 widget field ellipsis (#1296)

valtimo-platform · Dec 4, 2024 · 0a98138 · 0a98138
1 parent 39581a1
commit 0a98138
Show file tree

Hide file tree

Showing 18 changed files with 156 additions and 62 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/pipes/ellipsis.pipe.ts b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts
@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'valtimoEllipsis', standalone: true})
+export class EllipsisPipe implements PipeTransform {
+  public transform(content: string, limit: number | null): string {
+    if (!limit) return content;
+
+    return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
+  }
+}
diff --git a/projects/valtimo/components/src/lib/pipes/index.ts b/projects/valtimo/components/src/lib/pipes/index.ts
@@ -18,3 +18,4 @@ export * from './menu-item-translation.pipe';
 export * from './components-pipes.module';
 export * from './case-count.pipe';
 export * from './is-array.pipe';
+export * from './ellipsis.pipe'
diff --git a/projects/valtimo/config/assets/core/de.json b/projects/valtimo/config/assets/core/de.json
@@ -816,7 +816,10 @@
         "type": "Anzeigetyp",
         "typePlaceholder": "Wählen Sie Typ",
         "value": "Wert",
-        "valuePlaceholder": "Weg zum Wert"
+        "valuePlaceholder": "Weg zum Wert",
+        "ellipsisCharacterLimit": "Zeichenbeschränkung für Auslassungszeichen",
+        "ellipsisCharacterLimitTooltip": "Geben Sie die Anzahl der Zeichen ein, die angezeigt werden sollen, bevor Auslassungspunkte angezeigt werden",
+        "ellipsisCharacterLimitPlaceholder": "Wählen Sie eine Anzahl von Zeichen (optional)"
       },
       "displayType": {
         "text": "Text",

diff --git a/projects/valtimo/config/assets/core/en.json b/projects/valtimo/config/assets/core/en.json
@@ -817,7 +817,10 @@
         "type": "Display type",
         "typePlaceholder": "Choose type",
         "value": "Value",
-        "valuePlaceholder": "Path to value"
+        "valuePlaceholder": "Path to value",
+        "ellipsisCharacterLimit": "Ellipsis character limit",
+        "ellipsisCharacterLimitTooltip": "Enter the number of characters that will display before an ellipsis is shown",
+        "ellipsisCharacterLimitPlaceholder": "Choose a number of characters (optional)"
       },
       "displayType": {
         "text": "Text",

diff --git a/projects/valtimo/config/assets/core/nl.json b/projects/valtimo/config/assets/core/nl.json
@@ -816,7 +816,10 @@
         "type": "Weergavetype",
         "typePlaceholder": "Kies type",
         "value": "Waarde",
-        "valuePlaceholder": "Pad naar waarde"
+        "valuePlaceholder": "Pad naar waarde",
+        "ellipsisCharacterLimit": "Tekenlimiet met beletseltekens",
+        "ellipsisCharacterLimitTooltip": "Voer het aantal tekens in dat wordt weergegeven voordat er een weglatingsteken wordt weergegeven",
+        "ellipsisCharacterLimitPlaceholder": "Kies een aantal karakters (optioneel)"
       },
       "displayType": {
         "text": "Tekst",

diff --git a/...widget-configurators/fields/column/dossier-management-widget-fields-column.component.html b/...widget-configurators/fields/column/dossier-management-widget-fields-column.component.html
@@ -306,6 +306,30 @@
                 </cds-text-label>
               }
             }
+
+            <cds-text-label
+              *ngIf="
+                formRow.get('type').value.id === CaseWidgetDisplayTypeKey.TEXT && isFieldWidget
+              "
+            >
+              <v-input-label
+                [title]="'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate"
+                tooltip="{{
+                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate
+                }}"
+              >
+              </v-input-label>
+
+              <input
+                cdsText
+                [attr.data-carbon-theme]="inputTheme"
+                [placeholder]="
+                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate
+                "
+                type="text"
+                formControlName="ellipsisCharacterLimit"
+              />
+            </cds-text-label>
           </div>
         </form>
       </cds-accordion-item>

diff --git a/...t-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts b/...t-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts
@@ -47,6 +47,7 @@ import {
   CaseWidgetDisplayTypeKey,
   CaseWidgetEnumDisplayType,
   CaseWidgetNumberDisplayType,
+  CaseWidgetTextDisplayType,
   CaseWidgetType,
   FieldsCaseWidgetValue,
 } from '@valtimo/dossier';
@@ -86,6 +87,7 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
   @HostBinding('class') public readonly class = 'valtimo-dossier-management-widget-field-column';
   @Input({required: true}) public columnData: FieldsCaseWidgetValue[];
   @Input() public addTranslateKey = 'widgetTabManagement.content.fields.add';
+  @Input() public isFieldWidget = false;
   @Input() public fieldWidthDropdown?: TemplateRef<Dropdown>;
 
   @Output() public columnUpdateEvent = new EventEmitter<{
@@ -151,6 +153,10 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
         ]),
         title: this.fb.control<string>('', Validators.required),
         content: this.fb.control<string>('', Validators.required),
+        ellipsisCharacterLimit: this.fb.control<number | null>(
+          null,
+          Validators.pattern('[1-9][0-9]*')
+        ),
       })
     );
   }
@@ -198,6 +204,13 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
       ),
       title: this.fb.control<string>(row.title, Validators.required),
       content: this.fb.control<string>(row.value, Validators.required),
+      ...((!row.displayProperties ||
+        row.displayProperties?.type === CaseWidgetDisplayTypeKey.TEXT) && {
+        ellipsisCharacterLimit: this.fb.control<number | null>(
+          (row.displayProperties as CaseWidgetTextDisplayType)?.ellipsisCharacterLimit ?? null,
+          Validators.pattern('[1-9][0-9]*')
+        ),
+      }),
       ...([CaseWidgetDisplayTypeKey.NUMBER, CaseWidgetDisplayTypeKey.PERCENT].includes(
         row.displayProperties?.type as CaseWidgetDisplayTypeKey
       ) && {
@@ -264,19 +277,21 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD
           key: row.title.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase(),
           title: row.title,
           value: row.content,
-          ...(!!row?.type.id &&
-            row?.type.id !== CaseWidgetDisplayTypeKey.TEXT && {
-              displayProperties: {
-                type: row.type.id,
-                ...(!!row?.currencyCode && {currencyCode: row.currencyCode}),
-                ...(!!row?.display && {display: row.display}),
-                ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}),
-                ...(!!row?.format && {format: row.format}),
-                ...(!!row?.values && {
-                  values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}),
-                }),
-              },
-            }),
+          ...(!!row?.type.id && {
+            displayProperties: {
+              type: row.type.id,
+              ...(!!row?.ellipsisCharacterLimit && {
+                ellipsisCharacterLimit: row.ellipsisCharacterLimit,
+              }),
+              ...(!!row?.currencyCode && {currencyCode: row.currencyCode}),
+              ...(!!row?.display && {display: row.display}),
+              ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}),
+              ...(!!row?.format && {format: row.format}),
+              ...(!!row?.values && {
+                values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}),
+              }),
+            },
+          }),
         }));
         this.columnUpdateEvent.emit({data: mappedRows, valid: this.formGroup.valid});
       })

diff --git a/...er-management-widget-configurators/fields/dossier-management-widget-fields.component.html b/...er-management-widget-configurators/fields/dossier-management-widget-fields.component.html
@@ -46,6 +46,7 @@
     >
       <valtimo-dossier-management-widget-fields-column
         *ngIf="activeTab() === $index"
+        [isFieldWidget]="true"
         [columnData]="selectedWidgetContent()?.[$index]"
         (columnUpdateEvent)="onColumnUpdateEvent($event, $index)"
       ></valtimo-dossier-management-widget-fields-column>

diff --git a/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts b/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts
@@ -98,6 +98,7 @@ export class WidgetFieldsService {
       case CaseWidgetDisplayTypeKey.BOOLEAN:
         break;
       case CaseWidgetDisplayTypeKey.TEXT:
+        formGroup.addControl('ellipsisCharacterLimit', this.fb.control(''));
         break;
       case CaseWidgetDisplayTypeKey.CURRENCY:
         formGroup.addControl('currencyCode', this.fb.control(''));

diff --git a/...rc/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html b/...rc/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html
@@ -43,11 +43,15 @@ <h4 class="widget-field__title">{{ obs?.widgetConfiguration?.title }}</h4>
       @for (column of obs?.widgetPropertyValue; track column.key) {
         <div class="widget-field__column">
           @for (property of column; track property) {
-            <cds-label>
-              <span [attr.title]="property?.title"> {{ property?.title }}</span>
+            <div class="widget-field__field">
+              <label class="widget-field__field-label" [attr.title]="property?.title">
+                {{ property?.title }}</label
+              >
 
-              <input cdsText [value]="property?.value" [readonly]="true" />
-            </cds-label>
+              <div [attr.title]="property?.value" class="widget-field__field-value">
+                {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}
+              </div>
+            </div>
           }
         </div>
       }

diff --git a/...rc/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss b/...rc/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss
@@ -39,6 +39,25 @@
     grid-template-columns: repeat(4, 1fr);
   }
 
+  &__field {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 8px;
+
+    &-label {
+      font-size: 12px;
+      color: var(--cds-text-secondary);
+    }
+
+    &-value {
+      color: var(--cds-text-primary);
+      padding: 8px 16px;
+      border-bottom: 1px solid var(--cds-border-subtle-01);
+      font-size: 14px;
+    }
+  }
+
   .cds--label {
     width: 100%;
     white-space: nowrap;

diff --git a/.../src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts b/.../src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {CommonModule} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -26,12 +26,11 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {CarbonListModule, ViewContentService} from '@valtimo/components';
-import {CommonModule} from '@angular/common';
-import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs';
-import {FieldsCaseWidget} from '../../../../../../models';
-import {InputModule} from 'carbon-components-angular';
 import {TranslateModule} from '@ngx-translate/core';
+import {CarbonListModule, EllipsisPipe, ViewContentService} from '@valtimo/components';
+import {InputModule} from 'carbon-components-angular';
+import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs';
+import {CaseWidgetTextDisplayType, FieldsCaseWidget} from '../../../../../../models';
 
 @Component({
   selector: 'valtimo-widget-field',
@@ -40,7 +39,7 @@ import {TranslateModule} from '@ngx-translate/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [CommonModule, WidgetFieldComponent, InputModule, TranslateModule, CarbonListModule],
+  imports: [CommonModule, InputModule, TranslateModule, CarbonListModule, EllipsisPipe],
 })
 export class WidgetFieldComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class') public readonly class = 'widget-field';
@@ -64,33 +63,37 @@ export class WidgetFieldComponent implements AfterViewInit, OnDestroy {
   public readonly widgetConfiguration$ = new BehaviorSubject<FieldsCaseWidget | null>(null);
   public readonly widgetData$ = new BehaviorSubject<object | null>(null);
 
-  public readonly widgetPropertyValue$: Observable<{title: string; value: string}[][]> =
-    combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(
-      map(([widget, widgetData]) =>
-        widget?.properties.columns.map(column =>
-          column.reduce(
-            (columnFields, property) => [
-              ...columnFields,
-              ...(widgetData?.hasOwnProperty(property.key)
-                ? [
-                    {
-                      title: property.title,
-                      value:
-                        widgetData[property.key] !== null && widgetData[property.key] !== undefined
-                          ? this.viewContentService.get(widgetData[property.key], {
-                              ...property.displayProperties,
-                              viewType: property.displayProperties?.type ?? 'text',
-                            })
-                          : '-',
-                    },
-                  ]
-                : []),
-            ],
-            []
-          )
+  public readonly widgetPropertyValue$: Observable<
+    {title: string; value: string; ellipsisCharacterLimit: number | null}[][]
+  > = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(
+    map(([widget, widgetData]) =>
+      widget?.properties.columns.map(column =>
+        column.reduce(
+          (columnFields, property) => [
+            ...columnFields,
+            ...(widgetData?.hasOwnProperty(property.key)
+              ? [
+                  {
+                    title: property.title,
+                    ellipsisCharacterLimit:
+                      (property.displayProperties as CaseWidgetTextDisplayType)
+                        ?.ellipsisCharacterLimit ?? null,
+                    value:
+                      widgetData[property.key] !== null && widgetData[property.key] !== undefined
+                        ? this.viewContentService.get(widgetData[property.key], {
+                            ...property.displayProperties,
+                            viewType: property.displayProperties?.type ?? 'text',
+                          })
+                        : '-',
+                  },
+                ]
+              : []),
+          ],
+          []
         )
       )
-    );
+    )
+  );
 
   private _observer!: ResizeObserver;
 

diff --git a/...b/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts b/...b/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts
@@ -81,7 +81,6 @@ import {WIDGET_HEIGHT_1X} from '../../../../../../constants';
 })
 export class WidgetBlockComponent implements AfterViewInit, OnDestroy {
   @ViewChild('widgetBlockContent') private _widgetBlockContentRef: ElementRef<HTMLDivElement>;
-  @ViewChild('widgetBlock') private _widgetBlockRef: ElementRef<HTMLDivElement>;
 
   @Input() public set widget(value: CaseWidgetWithUuid) {
     this._widgetUuid = value.uuid;

diff --git a/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts
@@ -15,7 +15,7 @@
  */
 
 import {CaseWidgetDisplayType} from './case-widget-display.model';
-import {CollectionFieldWidth, FieldsCaseWidgetValue} from './case-widget.model';
+import {FieldsCaseWidgetValue} from './case-widget.model';
 
 interface WidgetFieldsContent {
   columns: FieldsCaseWidgetValue[][];