@vanillabp/bc-ui 0.0.3

package/dist/components/ListOfTasks.js

@@ -0,0 +1,1327 @@
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, CheckBox, Drop, Grid, Grommet, Text, TextInput, Tip } from "grommet";
+import {
+  colorForEndedItemsOrUndefined,
+  colorRowAccordingToUpdateStatus,
+  debounce,
+  DefaultListCell,
+  ENDED_FONT_COLOR,
+  Link,
+  ListCell as StyledListCell,
+  ListItemStatus,
+  useOnClickOutside,
+  useResponsiveScreen
+} from "@vanillabp/bc-shared";
+import {
+  ListCell,
+  SearchableAndSortableUpdatingList,
+  TypeOfItem,
+  useFederationModules
+} from "../index.js";
+import { Blank, ContactInfo, FormTrash, FormView, Hide, Refresh, User as UserIcon } from "grommet-icons";
+import { User } from "./User.js";
+import { ListColumnHeader } from "./ListColumnHeader.js";
+import { useTheme } from "styled-components";
+const minWidthOfTitleColumn = "20rem";
+const updateModuleDefinitions = (userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks) => {
+  const newModuleDefinitions = userTasks.filter((userTask) => userTask.workflowModuleId !== void 0).reduce((moduleDefinitions, userTask) => moduleDefinitions.includes(userTask) ? moduleDefinitions : moduleDefinitions.concat(userTask), existingModuleDefinitions || []);
+  if ((existingModuleDefinitions == null ? void 0 : existingModuleDefinitions.length) !== newModuleDefinitions.length) {
+    setModulesOfTasks(newModuleDefinitions);
+    const newUserTaskDefinitions = __spreadValues({}, existingUserTaskDefinitions);
+    userTasks.filter((userTask) => userTask.taskDefinition !== void 0).forEach((userTask) => newUserTaskDefinitions[`${userTask.workflowModuleId}#${userTask.taskDefinition}`] = userTask);
+    if (existingUserTaskDefinitions === void 0 || Object.keys(existingUserTaskDefinitions).length !== Object.keys(newUserTaskDefinitions).length) {
+      setDefinitionsOfTasks(newUserTaskDefinitions);
+    }
+  }
+};
+const loadUserTasks = (tasklistApi, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, pageSize, pageNumber, initialTimestamp, sort, sortAscending, mapToBcUserTask) => __async(void 0, null, function* () {
+  const result = yield tasklistApi.getUserTasks(
+    (/* @__PURE__ */ new Date()).getTime().toString(),
+    pageNumber,
+    pageSize,
+    sort,
+    sortAscending,
+    initialTimestamp
+  );
+  setNumberOfUserTasks(result.page.totalElements);
+  updateModuleDefinitions(result.userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks);
+  return {
+    serverTimestamp: result.serverTimestamp,
+    items: result.userTasks.map((userTask) => mapToBcUserTask(userTask))
+  };
+});
+const reloadUserTasks = (tasklistApi, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, numberOfItems, knownItemsIds, initialTimestamp, sort, sortAscending, mapToBcUserTask, allSelected) => __async(void 0, null, function* () {
+  const result = yield tasklistApi.getUserTasksUpdate(
+    (/* @__PURE__ */ new Date()).getTime().toString(),
+    numberOfItems,
+    knownItemsIds,
+    sort,
+    sortAscending,
+    initialTimestamp
+  );
+  setNumberOfUserTasks(result.page.totalElements);
+  updateModuleDefinitions(result.userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks);
+  return {
+    serverTimestamp: result.serverTimestamp,
+    items: result.userTasks.map((userTask) => {
+      return __spreadProps(__spreadValues({}, mapToBcUserTask(userTask)), {
+        selected: allSelected
+      });
+    })
+  };
+});
+const SetReadStatusButtons = ({
+  t,
+  disabled,
+  markAsRead,
+  markAsUnread
+}) => {
+  const color = disabled ? "light-4" : "dark-3";
+  const textColor = disabled ? "dark-4" : "dark-1";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      direction: "row",
+      round: { size: "0.4rem" },
+      border: { color },
+      elevation: "small",
+      children: [
+        /* @__PURE__ */ jsx(
+          Tip,
+          {
+            content: t("mark_as_read"),
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                hoverIndicator: "light-2",
+                focusIndicator: false,
+                onClick: markAsRead,
+                width: "2rem",
+                height: "2rem",
+                round: { size: "0.4rem", corner: "left" },
+                align: "center",
+                justify: "center",
+                children: /* @__PURE__ */ jsx(
+                  FormView,
+                  {
+                    color: textColor
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tip,
+          {
+            content: t("mark_as_unread"),
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                hoverIndicator: "light-2",
+                focusIndicator: false,
+                onClick: markAsUnread,
+                width: "2rem",
+                height: "2rem",
+                round: { size: "0.4rem", corner: "right" },
+                align: "center",
+                justify: "center",
+                border: { color, side: "left" },
+                children: /* @__PURE__ */ jsx(
+                  Hide,
+                  {
+                    color: textColor
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const ClaimButtons = ({
+  t,
+  disabled,
+  claimTasks,
+  unclaimTasks
+}) => {
+  const color = disabled ? "light-4" : "dark-3";
+  const textColor = disabled ? "dark-4" : "dark-1";
+  const { isNotPhone } = useResponsiveScreen();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      direction: "row",
+      elevation: "small",
+      round: { size: "0.4rem" },
+      border: { color },
+      children: [
+        /* @__PURE__ */ jsx(
+          Tip,
+          {
+            content: t("claim_tasks"),
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                hoverIndicator: "light-2",
+                focusIndicator: false,
+                onClick: claimTasks,
+                height: "2rem",
+                pad: { horizontal: "0.4rem" },
+                gap: "0.4rem",
+                round: { size: "0.4rem", corner: "left" },
+                align: "center",
+                direction: "row",
+                justify: "center",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    UserIcon,
+                    {
+                      size: "20rem",
+                      color: textColor
+                    }
+                  ),
+                  isNotPhone && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      truncate: "tip",
+                      color: textColor,
+                      children: t("claim_task")
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tip,
+          {
+            content: t("unclaim_tasks"),
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                hoverIndicator: "light-2",
+                focusIndicator: false,
+                onClick: unclaimTasks,
+                round: { size: "0.4rem", corner: "right" },
+                style: { position: "relative" },
+                width: "2rem",
+                height: "2rem",
+                align: "center",
+                justify: "center",
+                border: { color, side: "left" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    UserIcon,
+                    {
+                      style: { position: "absolute" },
+                      color: textColor,
+                      size: "20rem"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Blank,
+                    {
+                      style: { position: "absolute" },
+                      color: textColor,
+                      size: "20rem",
+                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("line", { x1: "24", y1: "4", x2: "4", y2: "24", strokeWidth: "2" }) })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const AssignButton = ({
+  t,
+  tasklistApi,
+  disabled,
+  assign
+}) => {
+  const [edit, setEdit] = useState(false);
+  const [hide, setHide] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const [active, setActive] = useState(false);
+  const [query, setQuery] = useState("");
+  const currentQuery = useRef("");
+  const [users, setUsers] = useState(void 0);
+  const inputRef = useRef(null);
+  const loadResult = () => __async(void 0, null, function* () {
+    const result = yield tasklistApi.findUsers(currentQuery.current, 10);
+    setUsers(result.users);
+  });
+  const showEdit = () => {
+    if (edit)
+      return;
+    loadResult();
+    setEdit(true);
+    setHide(false);
+    setFocus(false);
+  };
+  const finalizeShowEdit = () => {
+    inputRef.current.focus();
+    setActive(true);
+  };
+  const hideEdit = () => {
+    if (!edit)
+      return;
+    setHide(true);
+    setFocus(false);
+    setActive(false);
+  };
+  const finalizeHideEdit = () => {
+    setEdit(false);
+    setHide(false);
+  };
+  useOnClickOutside(inputRef, hideEdit);
+  const findUsersDebounced = useMemo(() => debounce(loadResult, 300), [tasklistApi, currentQuery]);
+  const updateResult = (newQuery) => {
+    currentQuery.current = newQuery;
+    setQuery(newQuery);
+    findUsersDebounced();
+  };
+  const color = disabled ? "light-4" : "dark-3";
+  const textColor = disabled ? "dark-4" : "dark-1";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      elevation: "small",
+      hoverIndicator: edit ? "white" : "light-2",
+      focusIndicator: false,
+      onClick: showEdit,
+      round: { size: "0.4rem" },
+      style: { position: "relative" },
+      border: { color },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            height: "2rem",
+            width: "15rem",
+            align: "center",
+            justify: "center",
+            style: { position: "relative" },
+            overflow: "hidden",
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  gap: "0.4rem",
+                  pad: { horizontal: "0.4rem" },
+                  align: "center",
+                  direction: "row",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ContactInfo,
+                      {
+                        color: textColor
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        truncate: "tip",
+                        color: textColor,
+                        children: t("assign_task")
+                      }
+                    )
+                  ]
+                }
+              ),
+              edit ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  fill: true,
+                  overflow: "visible",
+                  style: { position: "absolute", top: hide ? "3.85rem" : "-0.15rem" },
+                  animation: { type: hide ? "slideDown" : "slideUp", size: "xlarge", duration: 700 },
+                  onAnimationEnd: hide ? finalizeHideEdit : finalizeShowEdit,
+                  children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      margin: { vertical: "0.4rem", horizontal: "0.4rem" },
+                      pad: "0.1rem",
+                      direction: "row",
+                      justify: "center",
+                      background: "white",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          TextInput,
+                          {
+                            plain: "full",
+                            ref: inputRef,
+                            placeholder: t("assign_placeholder"),
+                            autoFocus: focus,
+                            value: query,
+                            onChange: (event) => updateResult(event.target.value),
+                            focusIndicator: false,
+                            reverse: true
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ContactInfo,
+                          {
+                            color: textColor
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) : void 0
+            ]
+          }
+        ),
+        active || hide ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            animation: { type: hide ? "fadeOut" : "fadeIn", duration: 700 },
+            style: { position: "absolute", zIndex: 20, top: "1.6rem", left: "-1px", right: "-1px", maxWidth: "unset" },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                background: "white",
+                elevation: "small",
+                gap: "xsmall",
+                pad: { top: "0.4rem", horizontal: "0.4rem" },
+                round: { corner: "bottom", size: "0.4rem" },
+                border: [{ color, side: "left" }, { color, side: "bottom" }, { color, side: "right" }],
+                animation: { type: !active ? "fadeOut" : "fadeIn", duration: 700 },
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    pad: { top: "0.2rem" },
+                    height: { max: "24rem" },
+                    overflow: { vertical: "auto" },
+                    children: users === void 0 ? t("assign_loading") : users.map((user) => /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        height: { min: "2rem" },
+                        onClick: () => assign(user.id),
+                        children: /* @__PURE__ */ jsx(
+                          User,
+                          {
+                            user,
+                            isUserLoggedIn: false,
+                            iconSize: "small",
+                            size: "medium"
+                          }
+                        )
+                      },
+                      user.id
+                    ))
+                  }
+                )
+              }
+            )
+          }
+        ) : void 0
+      ]
+    }
+  );
+};
+const RefreshButton = ({
+  t,
+  disabled,
+  refresh
+}) => {
+  const color = disabled ? "light-4" : "dark-3";
+  const textColor = disabled ? "dark-4" : "dark-1";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      hoverIndicator: disabled ? "light-2" : "accent-1",
+      focusIndicator: false,
+      onClick: refresh,
+      direction: "row",
+      elevation: "small",
+      background: !disabled ? { color: "accent-1", opacity: "strong" } : void 0,
+      round: { size: "0.4rem" },
+      border: { color },
+      children: /* @__PURE__ */ jsx(
+        Tip,
+        {
+          content: t("refresh_tasks"),
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              height: "2rem",
+              pad: { horizontal: "0.4rem" },
+              align: "center",
+              direction: "row",
+              justify: "center",
+              children: /* @__PURE__ */ jsx(
+                Refresh,
+                {
+                  size: "20rem",
+                  color: textColor
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const DefaultFooter = ({
+  t,
+  isPhone,
+  isTablet,
+  numberOfTasks
+}) => {
+  const isNotPhone = !isPhone;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      direction: "row",
+      justify: "between",
+      align: "center",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            pad: "xsmall",
+            children: [
+              t("total"),
+              " ",
+              numberOfTasks
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            direction: "row",
+            gap: "medium",
+            pad: "xsmall",
+            align: "center",
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  direction: "row",
+                  align: "center",
+                  gap: "xsmall",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        direction: "row",
+                        height: "1rem",
+                        border: { color: "light-4", size: "1px" },
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            width: "1rem",
+                            height: "100%",
+                            align: "center",
+                            justify: "center",
+                            background: "white",
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                          }
+                        )
+                      }
+                    ),
+                    isNotPhone ? /* @__PURE__ */ jsx(Box, { children: t("legend_unchanged") }) : void 0
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  direction: "row",
+                  align: "center",
+                  gap: "xsmall",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        direction: "row",
+                        height: "1rem",
+                        border: { color: "light-4", size: "1px" },
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            width: "1rem",
+                            height: "100%",
+                            align: "center",
+                            justify: "center",
+                            background: { color: "accent-3", opacity: 0.1 },
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                          }
+                        )
+                      }
+                    ),
+                    isNotPhone ? /* @__PURE__ */ jsx(Box, { children: t("legend_new") }) : void 0
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  direction: "row",
+                  align: "center",
+                  gap: "xsmall",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        direction: "row",
+                        height: "1rem",
+                        border: { color: "light-4", size: "1px" },
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            width: "1rem",
+                            height: "100%",
+                            align: "center",
+                            justify: "center",
+                            background: { color: "accent-1", opacity: 0.35 },
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                          }
+                        )
+                      }
+                    ),
+                    isNotPhone ? /* @__PURE__ */ jsx(Box, { children: t("legend_updated") }) : void 0
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  direction: "row",
+                  align: "center",
+                  gap: "xsmall",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        direction: "row",
+                        height: "1rem",
+                        border: { color: "light-4", size: "1px" },
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            width: "1rem",
+                            height: "100%",
+                            align: "center",
+                            justify: "center",
+                            background: { color: "light-2", opacity: 0.5 },
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: ENDED_FONT_COLOR, children: "T" })
+                          }
+                        )
+                      }
+                    ),
+                    isNotPhone ? /* @__PURE__ */ jsx(Box, { children: t("legend_completed") }) : void 0
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  direction: "row",
+                  align: "center",
+                  gap: "xsmall",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        direction: "row",
+                        height: "1rem",
+                        border: { color: "light-4", size: "1px" },
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            width: "1rem",
+                            height: "100%",
+                            align: "center",
+                            justify: "center",
+                            background: { color: "light-2", opacity: 0.5 },
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                          }
+                        )
+                      }
+                    ),
+                    isNotPhone ? /* @__PURE__ */ jsx(Box, { children: t("legend_filtered") }) : void 0
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    "footer"
+  );
+};
+const DefaultHeader = ({
+  tasklistApi,
+  t,
+  refresh,
+  refreshDisabled,
+  markAsRead,
+  markAsUnread,
+  markAsReadDisabled,
+  claimTasks,
+  unclaimTasks,
+  claimTasksDisabled,
+  assignTasks,
+  assignDisabled
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      fill: true,
+      background: "white",
+      direction: "row",
+      align: "center",
+      justify: "start",
+      gap: "small",
+      pad: { horizontal: "xsmall" },
+      children: [
+        /* @__PURE__ */ jsx(
+          SetReadStatusButtons,
+          {
+            t,
+            disabled: markAsReadDisabled,
+            markAsRead,
+            markAsUnread
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ClaimButtons,
+          {
+            t,
+            disabled: claimTasksDisabled,
+            claimTasks,
+            unclaimTasks
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AssignButton,
+          {
+            tasklistApi,
+            t,
+            disabled: assignDisabled,
+            assign: assignTasks
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RefreshButton,
+          {
+            t,
+            refresh,
+            disabled: refreshDisabled
+          }
+        )
+      ]
+    }
+  );
+};
+const CandidateUsersListCell = ({
+  item
+}) => {
+  var _a, _b;
+  const targetRef = useRef(null);
+  const [dropIdentifier, setDropIdentifier] = useState(void 0);
+  const background = colorRowAccordingToUpdateStatus(item);
+  return /* @__PURE__ */ jsx(
+    StyledListCell,
+    {
+      background,
+      align: "center",
+      children: item.data.candidateUsers && ((_a = item.data.candidateUsers) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            onMouseEnter: () => setDropIdentifier(item.id),
+            ref: targetRef,
+            children: /* @__PURE__ */ jsx(ContactInfo, {})
+          }
+        ),
+        dropIdentifier && dropIdentifier === item.id && /* @__PURE__ */ jsx(
+          Drop,
+          {
+            inline: true,
+            round: "xsmall",
+            onMouseLeave: () => setDropIdentifier(void 0),
+            target: targetRef,
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                direction: "column",
+                margin: "xsmall",
+                gap: "xsmall",
+                children: (_b = item.data.candidateUsers) == null ? void 0 : _b.map((user) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    direction: "row",
+                    align: "center",
+                    justify: "center",
+                    children: [
+                      user,
+                      /* @__PURE__ */ jsx(FormTrash, { onClick: () => item.data.unassign(user) })
+                    ]
+                  }
+                ))
+              }
+            )
+          }
+        )
+      ] }) : void 0
+    }
+  );
+};
+const SelectDefaultListCell = ({
+  item,
+  selectItem
+}) => {
+  const background = colorRowAccordingToUpdateStatus(item);
+  return /* @__PURE__ */ jsx(
+    StyledListCell,
+    {
+      background,
+      align: "center",
+      children: /* @__PURE__ */ jsx(
+        CheckBox,
+        {
+          checked: item.selected,
+          onChange: (event) => selectItem(event.currentTarget.checked)
+        }
+      )
+    }
+  );
+};
+const TitleDefaultListCell = ({
+  item,
+  currentLanguage
+}) => {
+  const titleLanguages = Object.keys(item.data["title"]);
+  let title;
+  if (titleLanguages.includes(currentLanguage)) {
+    title = item.data["title"][currentLanguage];
+  } else {
+    title = item.data["title"][titleLanguages[0]];
+  }
+  const background = colorRowAccordingToUpdateStatus(item);
+  return /* @__PURE__ */ jsx(
+    StyledListCell,
+    {
+      align: "left",
+      background,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          color: colorForEndedItemsOrUndefined(item),
+          weight: item.read === void 0 ? "bold" : "normal",
+          truncate: "tip",
+          children: item.status === ListItemStatus.ENDED ? /* @__PURE__ */ jsx(Fragment, { children: title }) : /* @__PURE__ */ jsx(
+            Link,
+            {
+              onClick: item.data.open,
+              children: title
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const UserTaskDefaultListCell = (_a) => {
+  var _b = _a, { column } = _b, props = __objRest(_b, ["column"]);
+  let Cell;
+  if (column.path === "id") {
+    Cell = SelectDefaultListCell;
+  } else if (column.path === "candidateUsers") {
+    Cell = CandidateUsersListCell;
+  } else if (column.path === "title") {
+    Cell = TitleDefaultListCell;
+  } else {
+    Cell = DefaultListCell;
+  }
+  return /* @__PURE__ */ jsx(
+    Cell,
+    __spreadValues({
+      column
+    }, props)
+  );
+};
+const ListOfTasks = ({
+  showLoadingIndicator,
+  useGuiSse,
+  useTasklistApi,
+  openTask,
+  navigateToWorkflow,
+  t,
+  currentLanguage,
+  defaultSort,
+  defaultSortAscending,
+  name,
+  columns,
+  children,
+  headerHeight = "3rem",
+  footer,
+  footerHeight = "2rem",
+  rowSeparator = true,
+  applyBackgroundColor = true,
+  showColumnHeaders = true,
+  excludeIdColumn = false,
+  columnHeader,
+  columnHeaderBackground = "dark-3",
+  columnHeaderSeparator
+}) => {
+  const { isPhone, isTablet } = useResponsiveScreen();
+  const wakeupSseCallback = useRef(void 0);
+  const tasklistApi = useTasklistApi(wakeupSseCallback);
+  const [refreshIndicator, setRefreshIndicator] = useState(/* @__PURE__ */ new Date());
+  const updateListRef = useRef(void 0);
+  const updateList = useMemo(() => (ev) => __async(void 0, null, function* () {
+    if (!updateListRef.current)
+      return;
+    const listOfUpdatedTasks = ev.data.map((userTaskEvent) => userTaskEvent.event.id);
+    updateListRef.current(listOfUpdatedTasks);
+  }), [updateListRef]);
+  wakeupSseCallback.current = useGuiSse(
+    updateList,
+    /^UserTask$/
+  );
+  const refreshItemRef = useRef(void 0);
+  const mapToBcUserTask = (userTask) => {
+    return __spreadProps(__spreadValues({}, userTask), {
+      open: () => openTask(userTask),
+      navigateToWorkflow: () => navigateToWorkflow(userTask),
+      unassign: (userId) => unassign(userTask.id, userId)
+    });
+  };
+  const userTasks = useRef(void 0);
+  const [numberOfTasks, setNumberOfTasks] = useState(0);
+  const [modulesOfTasks, setModulesOfTasks] = useState(void 0);
+  const [languagesOfTitles, setLanguagesOfTitles] = useState([currentLanguage]);
+  const [definitionsOfTasks, setDefinitionsOfTasks] = useState(void 0);
+  useEffect(
+    () => {
+      const loadMetaInformation = () => __async(void 0, null, function* () {
+        const result = yield loadUserTasks(
+          tasklistApi,
+          setNumberOfTasks,
+          modulesOfTasks,
+          setModulesOfTasks,
+          definitionsOfTasks,
+          setDefinitionsOfTasks,
+          20,
+          0,
+          void 0,
+          void 0,
+          true,
+          mapToBcUserTask
+        );
+        const titleLanguages = result.items.flatMap((userTask) => Object.keys(userTask.title)).reduce((allLanguages, titleLanguage) => {
+          if (!allLanguages.includes(titleLanguage)) {
+            allLanguages.push(titleLanguage);
+          }
+          return allLanguages;
+        }, new Array(currentLanguage));
+        setLanguagesOfTitles(titleLanguages);
+      });
+      if (userTasks.current === void 0) {
+        showLoadingIndicator(true);
+        loadMetaInformation();
+      }
+    },
+    // tasklistApi is not part of dependency because it changes one time but this is irrelevant to the
+    // purpose of preloading modules used by usertasks
+    [userTasks, setNumberOfTasks, setModulesOfTasks, setDefinitionsOfTasks, showLoadingIndicator, refreshIndicator, setLanguagesOfTitles]
+  );
+  const [columnsOfTasks, setColumnsOfTasks] = useState(void 0);
+  const modules = useFederationModules(modulesOfTasks, "UserTaskList");
+  useEffect(() => {
+    if (modules === void 0) {
+      return;
+    }
+    if (definitionsOfTasks === void 0) {
+      return;
+    }
+    const totalColumns = Object.keys(definitionsOfTasks).map((definition) => definitionsOfTasks[definition]).map((definition) => {
+      const columnsOfProcess = modules.filter((m) => m !== void 0).filter((m) => m.workflowModuleId === definition.workflowModuleId).filter((m) => m.userTaskListColumns !== void 0).map((m) => m.userTaskListColumns(definition));
+      if (columnsOfProcess.length === 0)
+        return void 0;
+      return columnsOfProcess[0];
+    }).filter((columnsOfTask) => columnsOfTask !== void 0).reduce((totalColumns2, columnsOfTask) => {
+      columnsOfTask.forEach((column) => {
+        totalColumns2[column.path] = column;
+      });
+      return totalColumns2;
+    }, {});
+    if (totalColumns.id === void 0 && !excludeIdColumn) {
+      totalColumns.id = {
+        title: { [currentLanguage]: "id" },
+        path: "id",
+        width: "2.2rem",
+        priority: -1,
+        show: true,
+        sortable: false,
+        filterable: false,
+        resizeable: false
+      };
+    }
+    if (totalColumns.title === void 0) {
+      totalColumns.title = {
+        title: { [currentLanguage]: t("column_title") },
+        path: "title",
+        width: "",
+        priority: 0,
+        show: true,
+        sortable: true,
+        filterable: true,
+        resizeable: true
+      };
+    }
+    if (totalColumns.assignee === void 0) {
+      totalColumns.assignee = {
+        path: "assignee",
+        show: true,
+        sortable: false,
+        filterable: false,
+        title: { [currentLanguage]: t("column_assignee") },
+        width: "10rem",
+        resizeable: true,
+        priority: 1
+      };
+    }
+    if (totalColumns.candidateUsers === void 0) {
+      totalColumns.candidateUsers = {
+        path: "candidateUsers",
+        show: true,
+        sortable: false,
+        filterable: false,
+        title: { [currentLanguage]: t("column_candidateUsers") },
+        width: "3rem",
+        resizeable: false,
+        priority: 2
+      };
+    }
+    const existingColumnsSignature = columnsOfTasks === void 0 ? " " : columnsOfTasks.map((c) => c.path).join("|");
+    const columnsToShow = Object.values(totalColumns).sort((a, b) => a.priority - b.priority);
+    const newColumnsSignature = columnsToShow.map((c) => c.path).join("|");
+    if (existingColumnsSignature === newColumnsSignature) {
+      return;
+    }
+    setColumnsOfTasks(columnsToShow);
+  }, [modules, definitionsOfTasks, columnsOfTasks, setColumnsOfTasks, refreshIndicator]);
+  const [allSelected, setAllSelected] = useState(false);
+  const [anySelected, setAnySelected] = useState(false);
+  const [refreshNecessary, setRefreshNecessary] = useState(false);
+  const [effectiveSort, _setSort] = useState(defaultSort);
+  const sort = (effectiveSort == null ? void 0 : effectiveSort.startsWith("title.")) ? "title" : effectiveSort;
+  const [sortAscending, _setSortAscending] = useState(defaultSortAscending === void 0 ? true : defaultSortAscending);
+  const refreshList = () => {
+    userTasks.current = void 0;
+    setRefreshNecessary(false);
+    setColumnsOfTasks(void 0);
+    setRefreshIndicator(/* @__PURE__ */ new Date());
+  };
+  const setSort = (column) => {
+    if (column) {
+      if (column.path === "title") {
+        _setSort("title." + languagesOfTitles.join(",title."));
+      } else {
+        _setSort(column.path);
+      }
+    } else {
+      _setSort(defaultSort);
+    }
+    _setSortAscending(defaultSortAscending === void 0 ? true : defaultSortAscending);
+    refreshList();
+  };
+  const setSortAscending = (sortAscending2) => {
+    _setSortAscending(sortAscending2);
+    refreshList();
+  };
+  const unassign = (userTaskId, userId) => {
+    tasklistApi.assignTask(userTaskId, userId, true);
+  };
+  const [columnWidthAdjustments, setColumnWidthAdjustments] = useState({});
+  const getColumnSize = (column) => {
+    return !column.resizeable ? column.width : column.width !== "" ? `max(4rem, calc(${column.width} + ${columnWidthAdjustments[column.path] ? columnWidthAdjustments[column.path] : 0}px))` : columnWidthAdjustments[column.path] ? `${columnWidthAdjustments[column.path]}px` : void 0;
+  };
+  const setColumnWidthAdjustment = (column, adjustment) => {
+    if (column.width === "") {
+      column.width = `${adjustment}px`;
+      return;
+    }
+    const current = columnWidthAdjustments[column.path];
+    if (current === adjustment)
+      return;
+    setColumnWidthAdjustments(__spreadProps(__spreadValues({}, columnWidthAdjustments), { [column.path]: adjustment }));
+  };
+  const selectAll = (select) => {
+    refreshItemRef.current(
+      userTasks.current.reduce((allItemIds, item) => {
+        item.selected = select;
+        allItemIds.push(item.id);
+        return allItemIds;
+      }, new Array())
+    );
+    setAllSelected(select);
+    if (anySelected !== select) {
+      setAnySelected(select);
+    }
+  };
+  const selectItem = (item, select) => {
+    item.selected = select;
+    refreshItemRef.current([item.id]);
+    const currentlyAllSelected = userTasks.current.reduce((allSelected2, userTask) => allSelected2 && userTask.selected, true);
+    if (currentlyAllSelected !== allSelected) {
+      setAllSelected(currentlyAllSelected);
+    }
+    const currentlyAnySelected = userTasks.current.reduce((anySelected2, userTask) => anySelected2 || userTask.selected, false);
+    if (anySelected !== currentlyAnySelected) {
+      setAnySelected(currentlyAnySelected);
+    }
+  };
+  const columnsOfList = columnsOfTasks === void 0 ? [] : columnsOfTasks.filter((column) => column.show).filter((column) => columns === void 0 || columns.includes(column.path)).map((column, columnIndex, allColumns) => ({
+    property: column.path,
+    size: getColumnSize(column),
+    plain: true,
+    verticalAlign: "top",
+    header: /* @__PURE__ */ jsx(
+      ListColumnHeader,
+      {
+        t,
+        currentLanguage,
+        nameOfList: name,
+        columnHeader,
+        hasColumnWidthAdjustment: columnWidthAdjustments[column.path] !== void 0,
+        setColumnWidthAdjustment,
+        sort: sort === column.path,
+        setSort,
+        sortAscending,
+        setSortAscending,
+        column,
+        columnIndex,
+        numberOfAllColumns: allColumns.length,
+        allSelected,
+        selectAll
+      }
+    ),
+    render: (item) => /* @__PURE__ */ jsx(
+      ListCell,
+      {
+        modulesAvailable: modules,
+        column,
+        currentLanguage,
+        nameOfList: name,
+        typeOfItem: TypeOfItem.TaskList,
+        showUnreadAsBold: true,
+        t,
+        item,
+        selectItem,
+        defaultListCell: UserTaskDefaultListCell
+      }
+    )
+  }));
+  const markAsRead = (unread) => {
+    const read = unread ? void 0 : /* @__PURE__ */ new Date();
+    const userTaskMarkedIds = userTasks.current.filter((userTask) => userTask.selected).map((userTask) => {
+      userTask.read = read;
+      userTask.selected = false;
+      return userTask.id;
+    }).reduce((userTaskIds, userTaskId) => {
+      userTaskIds.push(userTaskId);
+      return userTaskIds;
+    }, new Array());
+    refreshItemRef.current(userTaskMarkedIds);
+    setAllSelected(false);
+    setAnySelected(false);
+    tasklistApi.markUserTasksAsRead(userTaskMarkedIds, unread);
+  };
+  const claim = (unclaim) => {
+    const userTaskMarkedIds = userTasks.current.filter((userTask) => userTask.selected).map((userTask) => {
+      userTask.selected = false;
+      return userTask.id;
+    }).reduce((userTaskIds, userTaskId) => {
+      userTaskIds.push(userTaskId);
+      return userTaskIds;
+    }, new Array());
+    refreshItemRef.current(userTaskMarkedIds);
+    setAllSelected(false);
+    setAnySelected(false);
+    tasklistApi.claimTasks(userTaskMarkedIds, unclaim);
+  };
+  const assign = (userId) => {
+    const userTaskMarkedIds = userTasks.current.filter((userTask) => userTask.selected).map((userTask) => {
+      userTask.selected = false;
+      return userTask.id;
+    }).reduce((userTaskIds, userTaskId) => {
+      userTaskIds.push(userTaskId);
+      return userTaskIds;
+    }, new Array());
+    refreshItemRef.current(userTaskMarkedIds);
+    setAllSelected(false);
+    setAnySelected(false);
+    tasklistApi.assignTasks(userTaskMarkedIds, userId);
+  };
+  const defaultFooter = () => /* @__PURE__ */ jsx(
+    DefaultFooter,
+    {
+      isPhone,
+      isTablet,
+      numberOfTasks,
+      t
+    }
+  );
+  const defaultHeader = () => /* @__PURE__ */ jsx(
+    DefaultHeader,
+    {
+      tasklistApi,
+      t,
+      refresh: refreshList,
+      refreshDisabled: !refreshNecessary,
+      markAsRead: () => markAsRead(false),
+      markAsUnread: () => markAsRead(true),
+      markAsReadDisabled: !anySelected,
+      claimTasks: () => claim(false),
+      unclaimTasks: () => claim(true),
+      claimTasksDisabled: !anySelected,
+      assignTasks: assign,
+      assignDisabled: !anySelected
+    }
+  );
+  const themeContext = useTheme();
+  return /* @__PURE__ */ jsx(
+    Grommet,
+    {
+      plain: true,
+      style: { height: "100%", minHeight: "100%", maxHeight: "100%" },
+      theme: themeContext,
+      children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          rows: [headerHeight, "auto", footerHeight],
+          fill: true,
+          children: [
+            children !== void 0 ? children(
+              isPhone,
+              isTablet,
+              numberOfTasks,
+              columnsOfTasks,
+              sort,
+              setSort,
+              sortAscending,
+              setSortAscending,
+              selectAll,
+              allSelected,
+              refreshList,
+              !refreshNecessary,
+              () => markAsRead(false),
+              () => markAsRead(true),
+              !anySelected,
+              () => claim(false),
+              () => claim(true),
+              !anySelected,
+              assign,
+              !anySelected
+            ) : defaultHeader(),
+            columnsOfTasks === void 0 ? /* @__PURE__ */ jsx(Box, {}, "list") : /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+              SearchableAndSortableUpdatingList,
+              {
+                rowSeparator,
+                applyBackgroundColor,
+                showLoadingIndicator,
+                minWidthOfAutoColumn: minWidthOfTitleColumn,
+                columns: columnsOfList,
+                itemsRef: userTasks,
+                showColumnHeaders,
+                columnHeaderBackground,
+                columnHeaderSeparator,
+                updateListRef,
+                refreshItemRef,
+                refreshNecessaryCallback: () => setRefreshNecessary(true),
+                retrieveItems: (pageNumber, pageSize, initialTimestamp) => __async(void 0, null, function* () {
+                  return (
+                    // @ts-ignore
+                    yield loadUserTasks(
+                      tasklistApi,
+                      setNumberOfTasks,
+                      modulesOfTasks,
+                      setModulesOfTasks,
+                      definitionsOfTasks,
+                      setDefinitionsOfTasks,
+                      pageSize,
+                      pageNumber,
+                      initialTimestamp,
+                      effectiveSort,
+                      sortAscending,
+                      mapToBcUserTask
+                    )
+                  );
+                }),
+                reloadItems: (numberOfItems, updatedItemsIds, initialTimestamp) => __async(void 0, null, function* () {
+                  return (
+                    // @ts-ignore
+                    yield reloadUserTasks(
+                      tasklistApi,
+                      setNumberOfTasks,
+                      modulesOfTasks,
+                      setModulesOfTasks,
+                      definitionsOfTasks,
+                      setDefinitionsOfTasks,
+                      numberOfItems,
+                      updatedItemsIds,
+                      initialTimestamp,
+                      effectiveSort,
+                      sortAscending,
+                      mapToBcUserTask
+                    )
+                  );
+                })
+              }
+            ) }, "list"),
+            footer !== void 0 ? footer(
+              isPhone,
+              isTablet,
+              numberOfTasks,
+              columnsOfTasks,
+              sort,
+              setSort,
+              sortAscending,
+              setSortAscending,
+              selectAll,
+              allSelected,
+              refreshList,
+              !refreshNecessary,
+              () => markAsRead(false),
+              () => markAsRead(true),
+              !anySelected,
+              () => claim(false),
+              () => claim(true),
+              !anySelected,
+              assign,
+              !anySelected
+            ) : defaultFooter()
+          ]
+        },
+        "grid"
+      )
+    }
+  );
+};
+export {
+  ListOfTasks
+};