story: additional info tasks (#1278)

* wip working func * remove console logs, fixes fix look and feel * styling fix
valtimo-platform · Nov 19, 2024 · 34f398f · 34f398f
1 parent 5014577
commit 34f398f
Show file tree

Hide file tree

Showing 29 changed files with 410 additions and 222 deletions.
diff --git a/package-lock.json b/package-lock.json
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
@@ -104,7 +104,7 @@
       cdsText
       [defaultValue]="value.value"
       [disabled]="disabled"
-      (change)="onValueChange(value, $event, 'value')"
+      (change)="onValueChange(value, $event.target.value, 'value')"
     />
   </div>
 </ng-template>

diff --git a/projects/valtimo/config/assets/core/de.json b/projects/valtimo/config/assets/core/de.json
@@ -1777,7 +1777,9 @@
     "choosePluginConfiguration": "Plugin-Konfiguration wählen",
     "choosePluginAction": "Wählen Sie Ihre Aktion",
     "configurePluginAction": "Konfigurieren Sie Ihre Aktion",
-    "selectURL": "Konfigurieren Sie Ihre URL"
+    "selectURL": "Konfigurieren Sie Ihre URL",
+    "subtitles": "Untertitels",
+    "addSubtitle": "Untertitel hinzufügen"
   },
   "processLinkTypeDisabledTooltip": {
     "plugin": "Es sind keine Plugin-Konfigurationen verfügbar. Erstellen Sie eine Plugin-Konfiguration, um sie mit einem Prozessschritt verknüpfen zu können.",

diff --git a/projects/valtimo/config/assets/core/en.json b/projects/valtimo/config/assets/core/en.json
@@ -1782,7 +1782,9 @@
     "choosePluginConfiguration": "Select plugin configuration",
     "choosePluginAction": "Choose your action",
     "configurePluginAction": "Configure your action",
-    "selectURL": "Configure your URL"
+    "selectURL": "Configure your URL",
+    "subtitles": "Subtitles",
+    "addSubtitle": "Add subtitle"
   },
   "processLinkTypeDisabledTooltip": {
     "plugin": "No plugin configurations are available. Create a plugin configuration to be able to link it to a process step.",

diff --git a/projects/valtimo/config/assets/core/nl.json b/projects/valtimo/config/assets/core/nl.json
@@ -1783,7 +1783,9 @@
     "choosePluginConfiguration": "Kies pluginconfiguratie",
     "choosePluginAction": "Kies je actie",
     "configurePluginAction": "Configureer je actie",
-    "selectURL": "Configureer je URL"
+    "selectURL": "Configureer je URL",
+    "subtitles": "Ondertitels",
+    "addSubtitle": "Ondertitel toevoegen"
   },
   "processLinkTypeDisabledTooltip": {
     "plugin": "Er zijn geen plugin-configuraties beschikbaar. Maak een pluginconfiguratie aan om deze te kunnen koppelen aan een processtap.",

diff --git a/projects/valtimo/document/src/lib/services/document.service.ts b/projects/valtimo/document/src/lib/services/document.service.ts
@@ -314,7 +314,6 @@ export class DocumentService {
     const params = new HttpParams({
       fromObject: searchRequest as any,
     });
-    console.log({params});
     return this.http.get<ProcessDocumentDefinition[]>(
       `${this.valtimoEndpointUri}v2/process-document/definition/document/${documentId}`,
       {params}

diff --git a/...r/src/lib/components/dossier-detail-task-detail/dossier-detail-task-detail.component.html b/...r/src/lib/components/dossier-detail-task-detail/dossier-detail-task-detail.component.html
@@ -19,13 +19,14 @@
     canAssignUserToTask: canAssignUserToTask$ | async,
     intermediateSaveValue: intermediateSaveValue$ | async,
     task: task$ | async,
+    taskAndProcessLink: taskAndProcessLink$ | async,
   } as obs"
   class="valtimo-dossier-detail-task-detail"
 >
   <section class="valtimo-dossier-detail-task-detail__header">
     <valtimo-task-detail-intermediate-save
       *ngIf="enableIntermediateSave"
-      [task]="obs.task"
+      [taskAndProcessLink]="obs.taskAndProcessLink"
       (currentIntermediateSaveEvent)="onCurrentIntermediateSaveEvent($event)"
     ></valtimo-task-detail-intermediate-save>
 
@@ -69,7 +70,7 @@
     </div>
 
     <valtimo-task-detail-content
-      [task]="task$ | async"
+      [taskAndProcessLink]="obs.taskAndProcessLink"
       (activeChange)="onActiveChangeEvent($event)"
       (formSubmit)="onFormSubmitEvent()"
     ></valtimo-task-detail-content>

diff --git a/...ier/src/lib/components/dossier-detail-task-detail/dossier-detail-task-detail.component.ts b/...ier/src/lib/components/dossier-detail-task-detail/dossier-detail-task-detail.component.ts
@@ -37,7 +37,8 @@ import {
   TaskDetailIntermediateSaveComponent,
 } from '@valtimo/task';
 import {ButtonModule, IconModule} from 'carbon-components-angular';
-import {BehaviorSubject, Observable, switchMap} from 'rxjs';
+import {BehaviorSubject, map, Observable, switchMap} from 'rxjs';
+import {TaskWithProcessLink} from '@valtimo/process-link';
 
 @Component({
   selector: 'valtimo-dossier-detail-task-detail',
@@ -56,13 +57,13 @@ import {BehaviorSubject, Observable, switchMap} from 'rxjs';
   ],
 })
 export class DossierDetailsTaskDetailComponent implements OnDestroy {
-  @Input() public set task(value: ProcessInstanceTask | null) {
+  @Input() public set taskAndProcessLink(value: TaskWithProcessLink | null) {
     if (!value) return;
 
-    this.task$.next(value);
+    this.taskAndProcessLink$.next(value);
     this.pageValue.set({
-      title: value?.name,
-      subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${value?.created}`,
+      title: value?.task.name,
+      subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${value?.task?.created}`,
     });
   }
   @Output() public readonly closeEvent = new EventEmitter();
@@ -71,7 +72,10 @@ export class DossierDetailsTaskDetailComponent implements OnDestroy {
   @Output() public readonly formSubmit = new EventEmitter();
 
   public readonly compactMode$: Observable<boolean> = this.pageHeaderService.compactMode$;
-  public readonly task$ = new BehaviorSubject<ProcessInstanceTask | null>(null);
+  public readonly taskAndProcessLink$ = new BehaviorSubject<TaskWithProcessLink | null>(null);
+  public readonly task$ = this.taskAndProcessLink$.pipe(
+    map(taskAndProcessLink => taskAndProcessLink.task)
+  );
   public readonly canAssignUserToTask$: Observable<boolean> = this.task$.pipe(
     switchMap((task: ProcessInstanceTask | null) =>
       this.permissionService.requestPermission(CAN_ASSIGN_TASK_PERMISSION, {

diff --git a/...ssier/src/lib/components/dossier-detail-task-list/dossier-detail-task-list.component.html b/...ssier/src/lib/components/dossier-detail-task-list/dossier-detail-task-list.component.html
@@ -31,8 +31,10 @@ <h3 class="task-list__subtitle">{{ 'summary.myTasks' | translate }}</h3>
       @if (obs.tasks?.myTasks.length === 0) {
         {{ 'summary.noResultsMyTasks' | translate }}
       } @else {
-        @for (task of obs.tasks?.myTasks; track task.id) {
-          <ng-container *ngTemplateOutlet="taskTemplate; context: {task: task}"></ng-container>
+        @for (taskWithProcessLink of obs.tasks?.myTasks; track taskWithProcessLink.task.id) {
+          <ng-container
+            *ngTemplateOutlet="taskTemplate; context: {taskWithProcessLink: taskWithProcessLink}"
+          ></ng-container>
         }
       }
     </div>
@@ -43,8 +45,10 @@ <h3 class="task-list__subtitle">{{ 'summary.otherTasks' | translate }}</h3>
       @if (obs.tasks?.otherTasks.length === 0) {
         {{ 'summary.noResultsOtherTasks' | translate }}
       } @else {
-        @for (task of obs.tasks?.otherTasks; track task.id) {
-          <ng-container *ngTemplateOutlet="taskTemplate; context: {task: task}"></ng-container>
+        @for (taskWithProcessLink of obs.tasks?.otherTasks; track taskWithProcessLink.task.id) {
+          <ng-container
+            *ngTemplateOutlet="taskTemplate; context: {taskWithProcessLink: taskWithProcessLink}"
+          ></ng-container>
         }
       }
     </div>
@@ -58,14 +62,17 @@ <h3 class="task-list__subtitle">{{ 'summary.otherTasks' | translate }}</h3>
   ></valtimo-task-detail-modal>
 </div>
 
-<ng-template #taskTemplate let-task="task">
-  <cds-clickable-tile [href]="null" (click)="rowTaskClick(task)">
+<ng-template #taskTemplate let-taskWithProcessLink="taskWithProcessLink">
+  <cds-clickable-tile [href]="null" (click)="rowTaskClick(taskWithProcessLink)">
     <div class="task">
       <div class="task__header">
-        <span class="task__title">{{ task.name }}</span>
+        <span class="task__title">{{ taskWithProcessLink.task.name }}</span>
 
-        <cds-tag class="cds-tag--no-margin" [type]="task.isLocked ? 'cool-gray' : 'green'">
-          @if (!task.isLocked) {
+        <cds-tag
+          class="cds-tag--no-margin"
+          [type]="taskWithProcessLink.task.isLocked ? 'cool-gray' : 'green'"
+        >
+          @if (!taskWithProcessLink.task.isLocked) {
             {{ 'summary.taskOpen' | translate }}
           } @else {
             <i class="icon mdi mdi-lock"></i>
@@ -74,7 +81,16 @@ <h3 class="task-list__subtitle">{{ 'summary.otherTasks' | translate }}</h3>
       </div>
 
       <div class="task__description">
-        {{ 'summary.taskCreated' | translate }} {{ task.created }}
+        {{ 'summary.taskCreated' | translate }} {{ taskWithProcessLink.task.created }}
+      </div>
+
+      <div class="task__subtitles">
+        @for (
+          subtitle of taskWithProcessLink?.processLinkActivityResult?.properties?.subtitles || [];
+          track subtitle
+        ) {
+          <p class="task__subtitle">{{ subtitle }}</p>
+        }
       </div>
     </div>
   </cds-clickable-tile>

diff --git a/...ssier/src/lib/components/dossier-detail-task-list/dossier-detail-task-list.component.scss b/...ssier/src/lib/components/dossier-detail-task-list/dossier-detail-task-list.component.scss
@@ -53,28 +53,49 @@
     gap: 8px;
 
     .cds--tag {
+      margin: 0;
       white-space: pre;
     }
   }
 
   &__title {
     width: 100%;
-  }
-
-  &__title,
-  &__description {
     font-size: 14px;
-    font-style: normal;
     font-weight: 600;
     line-height: 20px;
     letter-spacing: 0.16px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+  }
+
+  &__subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0.32px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  &__subtitles {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
   &__description {
+    font-size: 12px;
     font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0.32px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
   }
 }