♻️ refactor(frontend): replace chair.assigneeName and chair.assigneeProfileId with -> chair.assigneeProfile so that more profile related data can be displayed on chairs if necessary

Author: ge85riz

frontend/src/components/canvas/EventListeners.tsx

@@ -481,7 +481,7 @@ export const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>, el: ElementP
         updateMultipleWithoutUndoRedo(updates),
       );
 
-      if ((el as Chair).assigneeProfileId) {
+      if ((el as Chair).assigneeProfile) {
         toast.error("Cannot remove occupied chairs. Unassign participants before removing chairs from the table.");
         setTimeout(() => dispatch(undo(true)), 100);
       }

frontend/src/components/canvas/KonvaCanvas.tsx

@@ -198,9 +198,9 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
 
       const selectedChair = chairs.find((chair) => chair.id === selectedIds[0]);
       if (selectedChair) {
-        if (!selectedChair.assigneeProfileId && selectedChair.attachedTo && (state.chairIdForManualAssignment === null || (state.chairIdForManualAssignment !== selectedChair.id))) {
+        if (!selectedChair.assigneeProfile && selectedChair.attachedTo && (state.chairIdForManualAssignment === null || (state.chairIdForManualAssignment !== selectedChair.id))) {
           dispatch(setChairIdForManualAssignment(selectedChair.id));
-        } else if (selectedChair.assigneeProfileId && state.chairIdForManualAssignment !== null && state.chairIdForManualAssignment === selectedChair.id) {
+        } else if (selectedChair.assigneeProfile && state.chairIdForManualAssignment !== null && state.chairIdForManualAssignment === selectedChair.id) {
           dispatch(setChairIdForManualAssignment(null));
         }
       }

frontend/src/components/canvas/elements/Chair.tsx

@@ -2,6 +2,7 @@ import { v4 as uuidv4 } from "uuid";
 import { Circle, Group, Text } from "react-konva";
 import type { ElementProperties, ShapeType, UUID } from "components/canvas/utils/constants.tsx";
 import { handleMouseOut, handleMouseOver } from "components/canvas/utils/functions.tsx";
+import { getFullName, type Profile } from "types/employee.ts";
 
 export class Chair implements ElementProperties {
   id: UUID;
@@ -13,8 +14,7 @@ export class Chair implements ElementProperties {
   attachedTo: string | undefined;
   draggable: boolean;
   offset: { dx: number; dy: number };
-  assigneeProfileId?: string;
-  assigneeName?: string;
+  assigneeProfile?: Profile;
   belongsToVisitor?: boolean;
 
   constructor(stageCenter: { x: number, y: number }) {
@@ -27,8 +27,7 @@ export class Chair implements ElementProperties {
     this.attachedTo = undefined;
     this.draggable = true;
     this.offset = { dx: 0, dy: 0 };
-    this.assigneeProfileId = undefined;
-    this.assigneeName = undefined;
+    this.assigneeProfile = undefined;
     this.belongsToVisitor = false;
   }
 }
@@ -43,9 +42,9 @@ export function ChairRender(chair: Chair) {
         fill={chair.color || "#cccccc"}
         perfectDrawEnabled={false}
       />
-      {chair.assigneeName && (
+      {chair.assigneeProfile && (
         <Text
-          text={chair.assigneeName}
+          text={getFullName(chair.assigneeProfile)}
           x={-chair.radius - 5}
           y={-chair.radius - 15}
           fontSize={10}

frontend/src/components/canvas/reducers/CanvasReducer.tsx

@@ -156,8 +156,7 @@ export function reducer(state: AppState, action: Action) {
               x: (original as Chair).x + 50,
               y: (original as Chair).y + 50,
             };
-            delete (newChair as Chair).assigneeName;
-            delete (newChair as Chair).assigneeProfileId;
+            delete (newChair as Chair).assigneeProfile;
             newElements.push(newChair);
           } else if (
             original.type === "rectTable" ||

frontend/src/components/canvas/utils/functions.tsx

@@ -65,6 +65,7 @@ export const handleExport = async (stageRef: React.RefObject<Konva.Stage | null>
   if (!stageRef.current) return;
 
   const stage = stageRef.current;
+  stage.scale({ x: 1, y: 1 });
   const layers = stage.getLayers();
 
   // Check if there are any layers with content
@@ -160,7 +161,7 @@ export const validateCanvasElementDeletion = (state: AppState, selectedIds: UUID
   }
 
   // Check directly selected assigned chairs
-  const hasAssignedChairs = chairsToBeDeleted.some(chair => chair.assigneeProfileId);
+  const hasAssignedChairs = chairsToBeDeleted.some(chair => chair.assigneeProfile);
   if (hasAssignedChairs) {
     toast.error("Cannot delete chair(s) that have assigned participants. Please unassign first.");
     return false;
@@ -174,7 +175,7 @@ export const validateCanvasElementDeletion = (state: AppState, selectedIds: UUID
 
       const hasAssignedAttachedChairs = table.attachedChairs.some(chairId => {
         const chair = allChairMap.get(chairId);
-        return chair?.assigneeProfileId;
+        return chair?.assigneeProfile;
       });
 
       if (hasAssignedAttachedChairs) {
@@ -220,9 +221,9 @@ export function extractedNeighboringEmployeeProfileIds(
     neighbourProfileIds = state.elements.reduce<string[]>((acc, el) => {
       if (el.type === "chair" &&
         neighborChairIds.has(el.id) &&
-        (el as Chair).assigneeProfileId &&
+        (el as Chair).assigneeProfile &&
         !(el as Chair).belongsToVisitor) {
-        acc.push((el as Chair).assigneeProfileId!);
+        acc.push((el as Chair).assigneeProfile!.id!);
       }
       return acc;
     }, []);

frontend/src/pages/Events/EventSeatAllocation.tsx

@@ -14,7 +14,13 @@ import { CanvasTooltip } from "components/CanvasTooltip.tsx";
 import { areNeighbours, extractedNeighboringEmployeeProfileIds } from "components/canvas/utils/functions.tsx";
 import { setCanvasPosition, setChairIdForManualAssignment } from "components/canvas/actions/actions.tsx";
 import type { SeatAllocationResult } from "types/event.ts";
-import { FullscreenExitOutlined, LeftOutlined, LoginOutlined, LogoutOutlined, RightOutlined } from "@ant-design/icons";
+import {
+  FullscreenExitOutlined,
+  LoginOutlined,
+  LogoutOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from "@ant-design/icons";
 import Konva from "konva";
 import { useAuth } from "../../contexts/AuthContext.tsx";
 import toast from "react-hot-toast";
@@ -143,15 +149,13 @@ const SeatAllocationContent = ({
     state.elements
       ?.forEach((e: ElementProperties) => {
         if (e.type === "chair" && chairProfileMap.has(e.id)) {
-          (e as Chair).assigneeProfileId = chairProfileMap.get(e.id)!.id;
-          (e as Chair).assigneeName = getFullName(chairProfileMap.get(e.id)!);
+          (e as Chair).assigneeProfile = { ...chairProfileMap.get(e.id)! };
           (e as Chair).belongsToVisitor = chairProfileMap.get(e.id)!.isVisitor;
           if (!(e as Chair).attachedTo) {
             toast.error("Some participants are assigned to chairs that are not linked to a table. It might cause inconsistencies. Please be aware.");
           }
         } else if (e.type === "chair") {
-          (e as Chair).assigneeProfileId = undefined;
-          (e as Chair).assigneeName = undefined;
+          (e as Chair).assigneeProfile = undefined;
           (e as Chair).belongsToVisitor = undefined;
           emptyChairCount++;
         }
@@ -243,8 +247,8 @@ const SeatAllocationContent = ({
             style={{ transition: "all 0.2s ease" }}
             title={isCollapsed ? "Expand" : "Collapse"}
           >
-            {isCollapsed ? <LeftOutlined style={{ fontSize: "12px" }} /> :
-              <RightOutlined style={{ fontSize: "12px" }} />}
+            {isCollapsed ? <MenuFoldOutlined style={{ fontSize: "12px" }} /> :
+              <MenuUnfoldOutlined style={{ fontSize: "12px" }} />}
           </Button>
         </Space>
       </div>
@@ -338,7 +342,7 @@ const SeatAllocationContent = ({
                     (getFullName(item.profile).toLowerCase() || "").includes(unallocatedSearch.toLowerCase()) ||
                     (item.profile.email?.toLowerCase() || "").includes(unallocatedSearch.toLowerCase()),
                   ), [unallocated, unallocatedSearch])}
-                pagination={{ pageSize: 5, showLessItems: true }}
+                pagination={{ defaultPageSize: 5, showLessItems: true, showSizeChanger: true }}
                 renderItem={item => (
                   <List.Item
                     actions={[
@@ -393,7 +397,7 @@ const SeatAllocationContent = ({
               />
               {/* List of employees who are assigned to any seat */}
               <List
-                pagination={{ pageSize: 5, showLessItems: true }}
+                pagination={{ defaultPageSize: 5, showLessItems: true, showSizeChanger: true }}
                 dataSource={useMemo(() =>
                   allocated.filter(item =>
                     (getFullName(item.profile).toLowerCase() || "").includes(allocatedSearch.toLowerCase()) ||

frontend/src/pages/Events/EventsList.tsx

@@ -338,7 +338,7 @@ export const EventsList = () => {
             rowKey="id"
             columns={columns}
             dataSource={pastEvents}
-            pagination={{ pageSize: 15 }}
+            pagination={{ defaultPageSize: 15, showSizeChanger: true }}
             loading={loading}
           />
         ) : (

frontend/src/services/apiService.ts

@@ -311,8 +311,8 @@ export default function useApiService() {
         // We don't need to persist them into the AppState, the main data are stored and used from EmployeeParticipation/VisitorParticipation Tables
         canvasStateToPersist.elements.forEach((el) => {
           if (el.type === "chair") {
-            delete (el as Chair).assigneeProfileId;
-            delete (el as Chair).assigneeName;
+            delete (el as Chair).assigneeProfile;
+            delete (el as Chair).belongsToVisitor;
           }
         });
         const response = await request(`/schematics/${id}`, {