Render cards inside the calendar

frontend/src/app/features/team-planner/team-planner/calendar-drag-drop.service.ts

@@ -77,7 +77,6 @@ export class CalendarDragDropService {
       duration: {
         days: diff || 1,
       },
-      className: `__hl_background_type_${workPackage.type.id as string}`,
       extendedProps: {
         workPackage,
       },

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html

@@ -31,7 +31,7 @@
 
   <ng-template #resourceContent let-resource="resource">
     <div
-      *ngIf="resource.extendedProps.principal"
+      *ngIf="resource && resource.extendedProps.principal"
       class="tp-assignee"
     >
       <op-principal
@@ -50,12 +50,22 @@
     </div>
 
     <op-tp-add-assignee
-      *ngIf="!resource.extendedProps.principal"
+      *ngIf="resource && !resource.extendedProps.principal"
       (selectAssignee)="addAssignee($event)"
       [alreadySelected]="principalIds$ | async"
     ></op-tp-add-assignee>
   </ng-template>
 
+  <ng-template #eventContent let-event="event">
+    <wp-single-card
+      *ngIf="event.extendedProps.workPackage"
+      [workPackage]="event.extendedProps.workPackage"
+      [orientation]="'horizontal'"
+      [additionalClasses]="'op-wp-single-card_inline'"
+    >
+    </wp-single-card>
+  </ng-template>
+
   <div
     class="wp-inline-create-button op-team-planner--add-assignee"
     *ngIf="!(showAddAssignee$ | async)"

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts

@@ -11,6 +11,7 @@ import {
 import {
   CalendarOptions,
   DateSelectArg,
+  EventContentArg,
   EventDropArg,
   EventInput,
 } from '@fullcalendar/core';
@@ -73,6 +74,8 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
     this.calendar.resizeObserver(v);
   }
 
+  @ViewChild('eventContent') eventContent:TemplateRef<unknown>;
+
   @ViewChild('resourceContent') resourceContent:TemplateRef<unknown>;
 
   @ViewChild('assigneeAutocompleter') assigneeAutocompleter:TemplateRef<unknown>;
@@ -211,6 +214,25 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
 
     // This needs to be done after all the subscribers are set up
     this.showAddAssignee$.next(false);
+
+    /*
+    this
+      .calendar
+      .currentWorkPackages$
+      .pipe(
+        this.untilDestroyed(),
+        debounceTime(0),
+      )
+      .subscribe((workPackages:WorkPackageCollectionResource) => {
+        const api = this.ucCalendar.getApi();
+
+        api.getEvents().forEach((event) => event.remove());
+        const events = this.mapToCalendarEvents(workPackages.elements);
+        events.forEach((event) => {
+          api.addEvent(event);
+        });
+      });
+      */
   }
 
   ngOnDestroy():void {
@@ -296,6 +318,8 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
             eventResize: (resizeInfo:EventResizeDoneArg) => this.updateEvent(resizeInfo),
             eventDrop: (dropInfo:EventDropArg) => this.updateEvent(dropInfo),
             eventReceive: (dropInfo:EventReceiveArg) => this.updateEvent(dropInfo),
+            eventContent: (data:EventContentArg) => this.renderTemplate(this.eventContent, data.event.extendedProps.workPackage.href, data),
+            eventWillUnmount: (data:EventContentArg) => this.unrenderTemplate(data.event.extendedProps.workPackage.href),
           } as CalendarOptions),
         );
       });
@@ -319,7 +343,7 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
     this.calendar.updateTimeframe(fetchInfo, this.projectIdentifier);
   }
 
-  renderTemplate(template:TemplateRef<unknown>, id:string, data:ResourceLabelContentArg):{ domNodes:unknown[] } {
+  renderTemplate(template:TemplateRef<unknown>, id:string, data:ResourceLabelContentArg|EventContentArg):{ domNodes:unknown[] } {
     const ref = this.viewLookup.getView(template, id, data);
     return { domNodes: ref.rootNodes };
   }
@@ -386,8 +410,9 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
           title: workPackage.subject,
           start: this.wpStartDate(workPackage),
           end: this.wpEndDate(workPackage),
+          backgroundColor: '#FFFFFF',
+          borderColor: '#FFFFFF',
           allDay: true,
-          className: `__hl_background_type_${workPackage.type.id as string}`,
           workPackage,
         };
       })

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass

@@ -31,6 +31,16 @@
     &:last-of-type
       margin-bottom: 5px
 
+  &_inline &--content
+    grid-template-columns: max-content max-content auto auto 1fr
+    grid-template-rows: auto max-content
+    grid-template-areas: "status id project project project" "subject subject subject subject subject"
+
+    &-cover-image,
+    &-assignee
+      display: none
+
+
   // Style shadow element while dragging
   wp-single-card:host.gu-transit &
     @include modifying--placeholder

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts

@@ -46,6 +46,8 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
 
   @Input() public shrinkOnMobile = false;
 
+  @Input() public additionalClasses = '';
+
   @Output() onRemove = new EventEmitter<WorkPackageResource>();
 
   @Output() stateLinkClicked = new EventEmitter<{ workPackageId:string, requestedState:string }>();
@@ -112,6 +114,7 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       [`${base}-${this.workPackage.id}`]: !!this.workPackage.id,
       [`${base}_${this.orientation}`]: true,
+      [`${this.additionalClasses}`]: true,
     };
   }