@vanillabp/bc-ui 0.0.5 → 0.0.6

package/dist/components/ListCell.d.ts

@@ -1,4 +1,4 @@
-import { Column, TranslationFunction, DefaultListCellProps } from '@vanillabp/bc-shared';
+import { Column, Person, TranslationFunction, DefaultListCellProps } from '@vanillabp/bc-shared';
 import { FC } from 'react';
 import { ListItemData, ListItem } from './SearchableAndSortableUpdatingList.js';
 import { ModuleDefinition, Module } from '../utils/module-federation.js';
@@ -13,6 +13,7 @@ interface ListCellParameters<T extends ListItemData & ModuleDefinition> {
     modulesAvailable: Module[];
     column: Column;
     currentLanguage: string;
+    currentUser?: Person;
     nameOfList?: string;
     typeOfItem: TypeOfItem;
     item: ListItem<T>;
@@ -21,6 +22,6 @@ interface ListCellParameters<T extends ListItemData & ModuleDefinition> {
     showUnreadAsBold?: boolean;
     selectItem: (item: ListItem<T>, select: boolean) => void;
 }
-declare const ListCell: <T extends ListItemData & ModuleDefinition>({ modulesAvailable, column, currentLanguage, nameOfList, typeOfItem, item, t, showUnreadAsBold, defaultListCell, selectItem, }: ListCellParameters<T>) => JSX.Element;
+declare const ListCell: <T extends ListItemData & ModuleDefinition>({ modulesAvailable, column, currentLanguage, currentUser, nameOfList, typeOfItem, item, t, showUnreadAsBold, defaultListCell, selectItem, }: ListCellParameters<T>) => JSX.Element;
 
 export { ListCell, TypeOfItem };

package/dist/components/ListCell.js

@@ -19,6 +19,7 @@ const ListCell = ({
   modulesAvailable,
   column,
   currentLanguage,
+  currentUser,
   nameOfList,
   typeOfItem,
   item,
@@ -107,6 +108,7 @@ const ListCell = ({
       column,
       showUnreadAsBold,
       currentLanguage,
+      currentUser,
       defaultCell: defaultListCell,
       nameOfList,
       isPhone,

package/dist/components/ListOfTasks.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { SearchQuery } from '@vanillabp/bc-official-gui-client';
-import { ShowLoadingIndicatorFunction, GuiSseHook, TranslationFunction, DefaultListHeaderAwareProps } from '@vanillabp/bc-shared';
+import { ShowLoadingIndicatorFunction, GuiSseHook, TranslationFunction, Person, DefaultListHeaderAwareProps } from '@vanillabp/bc-shared';
 import { BackgroundType, ColorType } from 'grommet/utils';
 import { OpenTaskFunction, NavigateToWorkflowFunction } from '../types/navigate.js';
 import { TasklistApiHook } from '../types/apis.js';
 import { ListOfTasksHeaderFooterFunction } from '../types/lists.js';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
 
-declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, openTask, navigateToWorkflow, t, currentLanguage, defaultSort, defaultSortAscending, name, columns, minWidthOfColumns, minWidthOfAutoColumn, children, headerHeight, footer, footerHeight, rowSeparator, applyBackgroundColor, showColumnHeaders, excludeIdColumn, columnHeader, columnHeaderBackground, columnHeaderSeparator, defaultSearchQueries, }: {
+declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, openTask, navigateToWorkflow, t, currentLanguage, currentUser, defaultSort, defaultSortAscending, name, columns, minWidthOfColumns, minWidthOfAutoColumn, children, headerHeight, footer, footerHeight, rowSeparator, applyBackgroundColor, showColumnHeaders, excludeIdColumn, columnHeader, columnHeaderBackground, columnHeaderSeparator, defaultSearchQueries, }: {
     showLoadingIndicator: ShowLoadingIndicatorFunction;
     useGuiSse: GuiSseHook;
     useTasklistApi: TasklistApiHook;
@@ -15,6 +15,7 @@ declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, o
     navigateToWorkflow: NavigateToWorkflowFunction;
     t: TranslationFunction;
     currentLanguage: string;
+    currentUser?: Person | undefined;
     defaultSort?: string | undefined;
     defaultSortAscending?: boolean | undefined;
     name?: string | undefined;

package/dist/components/ListOfTasks.js

@@ -5,10 +5,9 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, CheckBox, Drop, Grid, Grommet, Text, TextInput, Tip } from "grommet";
 import {
-  backgroundColorAccordingToStatus,
   debounce,
   DefaultListCell,
   Link,
@@ -27,10 +26,21 @@ import {
   TypeOfItem,
   useFederationModules
 } from "../index.js";
-import { Blank, ContactInfo, FormTrash, FormView, Hide, Refresh, User as UserIcon } from "grommet-icons";
+import {
+  Blank,
+  CaretLeftFill,
+  ContactInfo,
+  FormNext,
+  FormPrevious,
+  FormTrash,
+  FormView,
+  Hide,
+  Refresh,
+  User as UserIcon
+} from "grommet-icons";
 import { User } from "./User.js";
 import { AUTO_SIZE_COLUMN, ListColumnHeader } from "./ListColumnHeader.js";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 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) {
@@ -768,33 +778,87 @@ const DefaultHeader = ({
     }
   );
 };
+const StyledIcon = styled.span`
+  line-height: 0;
+  * > svg {
+    overflow: visible;
+  }
+  * > svg > path {
+    stroke-width: ${(props) => props.strike};
+  }
+`;
 const CandidateUsersListCell = ({
   t,
-  item
+  item,
+  currentUser,
+  showUnreadAsBold
 }) => {
   var _a, _b;
   const targetRef = useRef(null);
   const [dropIdentifier, setDropIdentifier] = useState(void 0);
-  const background = backgroundColorAccordingToStatus(item);
+  const color = textColorAccordingToStatus(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(
+        /* @__PURE__ */ jsx(StyledIcon, { strike: showUnreadAsBold && item.read === void 0 ? 3 : 2, children: /* @__PURE__ */ jsxs(
           Box,
           {
-            onMouseEnter: () => setDropIdentifier(item.id),
-            ref: targetRef,
-            children: /* @__PURE__ */ jsx(ContactInfo, {})
+            style: { position: "relative" },
+            direction: "row",
+            align: "center",
+            margin: { left: "0.75rem" },
+            justify: "center",
+            children: [
+              currentUser && !item.data.assignee && item.data.candidateUsers.findIndex((person) => person.id === (currentUser == null ? void 0 : currentUser.id)) !== -1 ? /* @__PURE__ */ jsx(
+                CaretLeftFill,
+                {
+                  onClick: item.data.claim,
+                  style: { position: "absolute", left: "-90%" },
+                  size: "1.8rem",
+                  color
+                }
+              ) : currentUser && (!item.data.assignee || item.data.assignee.id !== currentUser.id) && item.data.candidateUsers.findIndex((person) => person.id === (currentUser == null ? void 0 : currentUser.id)) !== -1 ? /* @__PURE__ */ jsx(
+                FormPrevious,
+                {
+                  onClick: item.data.claim,
+                  style: { position: "absolute", left: "-75%" },
+                  size: "1.2rem",
+                  color
+                }
+              ) : currentUser && item.data.assignee && item.data.assignee.id === (currentUser == null ? void 0 : currentUser.id) && item.data.candidateUsers.findIndex((person) => person.id === (currentUser == null ? void 0 : currentUser.id)) !== -1 ? /* @__PURE__ */ jsx(
+                FormNext,
+                {
+                  onClick: item.data.unclaim,
+                  style: { position: "absolute", right: "90%" },
+                  size: "1.2rem",
+                  color
+                }
+              ) : void 0,
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  onMouseEnter: () => setDropIdentifier(item.id),
+                  ref: targetRef,
+                  children: /* @__PURE__ */ jsx(
+                    ContactInfo,
+                    {
+                      color
+                    }
+                  )
+                }
+              )
+            ]
           }
-        ),
+        ) }),
         dropIdentifier && dropIdentifier === item.id && /* @__PURE__ */ jsx(
           Drop,
           {
             inline: true,
             stretch: true,
+            onEsc: () => setDropIdentifier(void 0),
+            onClickOutside: () => setDropIdentifier(void 0),
             round: "xsmall",
             onMouseLeave: () => setDropIdentifier(void 0),
             target: targetRef,
@@ -807,9 +871,16 @@ const CandidateUsersListCell = ({
                     style: { whiteSpace: "nowrap" },
                     tip: { content: /* @__PURE__ */ jsx(UserDetailsBox, { user, t }) },
                     children: (_b2 = (_a2 = user.displayShort) != null ? _a2 : user.email) != null ? _b2 : user.id
-                  }
+                  },
+                  user.id
                 ),
-                /* @__PURE__ */ jsx(FormTrash, { onClick: () => item.data.unassign(user.id) })
+                /* @__PURE__ */ jsx(
+                  FormTrash,
+                  {
+                    onClick: () => item.data.unassign(user.id)
+                  },
+                  user.id
+                )
               ] });
             }) })
           }
@@ -821,24 +892,20 @@ const CandidateUsersListCell = ({
 const SelectDefaultListCell = ({
   item,
   selectItem
-}) => {
-  const background = backgroundColorAccordingToStatus(item);
-  return /* @__PURE__ */ jsx(
-    StyledListCell,
-    {
-      background,
-      align: "center",
-      children: /* @__PURE__ */ jsx(
-        CheckBox,
-        {
-          id: item.id,
-          checked: item.selected,
-          onChange: (event) => selectItem(event.currentTarget.checked)
-        }
-      )
-    }
-  );
-};
+}) => /* @__PURE__ */ jsx(
+  StyledListCell,
+  {
+    align: "center",
+    children: /* @__PURE__ */ jsx(
+      CheckBox,
+      {
+        id: item.id,
+        checked: item.selected,
+        onChange: (event) => selectItem(event.currentTarget.checked)
+      }
+    )
+  }
+);
 const TitleDefaultListCell = ({
   item,
   currentLanguage
@@ -850,13 +917,11 @@ const TitleDefaultListCell = ({
   } else {
     title = item.data["title"][titleLanguages[0]];
   }
-  const background = backgroundColorAccordingToStatus(item);
   const text = textColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     StyledListCell,
     {
       align: "left",
-      background,
       children: /* @__PURE__ */ jsx(
         Text,
         {
@@ -875,13 +940,172 @@ const TitleDefaultListCell = ({
     }
   );
 };
-const UserTaskDefaultListCell = (_a) => {
-  var _b = _a, { column } = _b, props = __objRest(_b, ["column"]);
+const AssigneeDefaultListCell = memo((_a) => {
+  var _b = _a, {
+    item,
+    showUnreadAsBold,
+    t,
+    currentUser
+  } = _b, props = __objRest(_b, [
+    "item",
+    "showUnreadAsBold",
+    "t",
+    "currentUser"
+  ]);
+  var _a2, _b2, _c;
+  const text = textColorAccordingToStatus(item);
+  const value = item.data.assignee;
+  const targetRef = useRef(null);
+  const [dropIdentifier, setDropIdentifier] = useState(void 0);
+  useEffect(() => {
+    if (!dropIdentifier) {
+      return;
+    }
+    const moveHandler = (event) => {
+      if (event.currentTarget !== void 0 && targetRef.current !== void 0) {
+        const clientRect = targetRef.current.getBoundingClientRect();
+        if (event.clientY >= clientRect.top && event.clientX >= clientRect.left && event.clientY <= clientRect.bottom && event.clientX <= clientRect.right) {
+          return;
+        }
+      }
+      setDropIdentifier(void 0);
+    };
+    window.addEventListener("mousemove", moveHandler);
+    return () => {
+      window.removeEventListener("mousemove", moveHandler);
+    };
+  }, [dropIdentifier, setDropIdentifier]);
+  return /* @__PURE__ */ jsx(
+    StyledListCell,
+    {
+      align: "left",
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          style: { position: "relative" },
+          fill: true,
+          direction: "row",
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                direction: "row",
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      height: "1rem",
+                      border: (currentUser == null ? void 0 : currentUser.id) === (value == null ? void 0 : value.id) ? [{ side: "left", size: "0.15rem", color: text }] : void 0,
+                      children: "\xA0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    __spreadProps(__spreadValues({
+                      truncate: true,
+                      color: text,
+                      weight: showUnreadAsBold && item.read === void 0 ? "bold" : "normal",
+                      tip: { content: /* @__PURE__ */ jsx(UserDetailsBox, { user: value, t }) }
+                    }, props), {
+                      children: value === void 0 ? void 0 : (_b2 = (_a2 = value.displayShort) != null ? _a2 : value.email) != null ? _b2 : value.id
+                    })
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                ref: targetRef,
+                width: "1.75rem",
+                height: "1.75rem",
+                onMouseEnter: () => setDropIdentifier(item.id),
+                style: { position: "absolute", right: "0", top: "-0.1rem" },
+                children: dropIdentifier && dropIdentifier === item.id && (currentUser && ((_c = item.data.assignee) == null ? void 0 : _c.id) == (currentUser == null ? void 0 : currentUser.id) ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onClick: item.data.unclaim,
+                    focusIndicator: false,
+                    direction: "row",
+                    background: "white",
+                    elevation: "small",
+                    pad: "0.25rem",
+                    round: { size: "0.4rem" },
+                    children: /* @__PURE__ */ jsx(
+                      Tip,
+                      {
+                        content: t("unclaim_task"),
+                        children: /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            style: { position: "relative" },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                UserIcon,
+                                {
+                                  size: "1.2rem",
+                                  color: text
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Blank,
+                                {
+                                  size: "1.2rem",
+                                  style: { position: "absolute", top: "0", left: "0" },
+                                  color: text,
+                                  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" }) })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onClick: item.data.claim,
+                    focusIndicator: false,
+                    direction: "row",
+                    background: "white",
+                    elevation: "small",
+                    pad: "0.25rem",
+                    round: { size: "0.4rem" },
+                    children: /* @__PURE__ */ jsx(
+                      Tip,
+                      {
+                        content: t("claim_task"),
+                        children: /* @__PURE__ */ jsx(
+                          UserIcon,
+                          {
+                            size: "1.2rem",
+                            color: text
+                          }
+                        )
+                      }
+                    )
+                  }
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+const UserTaskDefaultListCell = (_c) => {
+  var _d = _c, { column } = _d, props = __objRest(_d, ["column"]);
   let Cell;
   if (column.path === "id") {
     Cell = SelectDefaultListCell;
   } else if (column.path === "candidateUsers") {
     Cell = CandidateUsersListCell;
+  } else if (column.path === "assignee") {
+    Cell = AssigneeDefaultListCell;
   } else if (column.path === "title") {
     Cell = TitleDefaultListCell;
   } else {
@@ -902,6 +1126,7 @@ const ListOfTasks = ({
   navigateToWorkflow,
   t,
   currentLanguage,
+  currentUser,
   defaultSort,
   defaultSortAscending = true,
   name,
@@ -1168,6 +1393,7 @@ const ListOfTasks = ({
           modulesAvailable: modules,
           column,
           currentLanguage,
+          currentUser,
           nameOfList: name,
           typeOfItem: TypeOfItem.TaskList,
           showUnreadAsBold: true,

package/dist/components/ListOfWorkflows.d.ts

@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import { SearchQuery } from '@vanillabp/bc-official-gui-client';
-import { ShowLoadingIndicatorFunction, GuiSseHook, DefaultListHeaderAwareProps, TranslationFunction } from '@vanillabp/bc-shared';
+import { ShowLoadingIndicatorFunction, GuiSseHook, Person, DefaultListHeaderAwareProps, TranslationFunction } from '@vanillabp/bc-shared';
 import { BackgroundType, ColorType } from 'grommet/utils';
 import { OpenTaskFunction, NavigateToWorkflowFunction } from '../types/navigate.js';
 import { WorkflowlistApiHook, TasklistApiHook } from '../types/apis.js';
 import { ListOfWorkflowsHeaderFooterFunction } from '../types/lists.js';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
 
-declare const ListOfWorkflows: ({ showLoadingIndicator, useGuiSse, useWorkflowlistApi, useTasklistApi, openTask, navigateToWorkflow, currentLanguage, defaultSort, defaultSortAscending, name, minWidthOfColumns, minWidthOfAutoColumn, columns, children, headerHeight, footer, footerHeight, t, rowSeparator, applyBackgroundColor, showColumnHeaders, excludeIdColumn, columnHeader, columnHeaderBackground, columnHeaderSeparator, defaultSearchQueries, }: {
+declare const ListOfWorkflows: ({ showLoadingIndicator, useGuiSse, useWorkflowlistApi, useTasklistApi, openTask, navigateToWorkflow, currentLanguage, currentUser, defaultSort, defaultSortAscending, name, minWidthOfColumns, minWidthOfAutoColumn, columns, children, headerHeight, footer, footerHeight, t, rowSeparator, applyBackgroundColor, showColumnHeaders, excludeIdColumn, columnHeader, columnHeaderBackground, columnHeaderSeparator, defaultSearchQueries, }: {
     showLoadingIndicator: ShowLoadingIndicatorFunction;
     useGuiSse: GuiSseHook;
     useWorkflowlistApi: WorkflowlistApiHook;
@@ -15,6 +15,7 @@ declare const ListOfWorkflows: ({ showLoadingIndicator, useGuiSse, useWorkflowli
     openTask: OpenTaskFunction;
     navigateToWorkflow: NavigateToWorkflowFunction;
     currentLanguage: string;
+    currentUser?: Person | undefined;
     defaultSort?: string | undefined;
     defaultSortAscending?: boolean | undefined;
     name?: string | undefined;

package/dist/components/ListOfWorkflows.js

@@ -429,6 +429,7 @@ const ListOfWorkflows = ({
   openTask,
   navigateToWorkflow,
   currentLanguage,
+  currentUser,
   defaultSort,
   defaultSortAscending = true,
   name,
@@ -685,6 +686,7 @@ const ListOfWorkflows = ({
           modulesAvailable: modules,
           column,
           currentLanguage,
+          currentUser,
           nameOfList: name,
           typeOfItem: TypeOfItem.WorkflowList,
           showUnreadAsBold: false,

package/dist/components/SearchableAndSortableUpdatingList.js

@@ -65,6 +65,9 @@ const reloadData = (reloadItems, setItems, items, updatedItemsIds, initialTimest
         result2.number = index + 1;
         anyUpdate = true;
       }
+      if (newItem !== void 0 && (oldItem == null ? void 0 : oldItem.selected)) {
+        newItem.selected = oldItem == null ? void 0 : oldItem.selected;
+      }
       return result2;
     },
     (first, second) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillabp/bc-ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -16,13 +16,13 @@
     "package.json"
   ],
   "dependencies": {
-    "@vanillabp/bc-official-gui-client": "0.0.5",
-    "@vanillabp/bc-shared": "0.0.5"
+    "@vanillabp/bc-official-gui-client": "0.0.6",
+    "@vanillabp/bc-shared": "0.0.6"
   },
   "peerDependencies": {
     "@fontsource/roboto": "4.5.8",
     "grommet": "2.33.2",
-    "grommet-icons": "4.10.0",
+    "grommet-icons": "4.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-jsx": "1.0.0",