@vanillabp/bc-ui 0.0.3 → 0.0.4

package/README.md

@@ -1 +1 @@
-For details see [https://github.com/vanillabp/business-cockpit](https://github.com/vanillabp/business-cockpit).
+For details see [https://github.com/vanillabp/business-cockpit](https://github.com/vanillabp/business-cockpit).

package/dist/components/CustomWorkflowModuleComponent.d.ts

@@ -0,0 +1,13 @@
+import { ShowLoadingIndicatorFunction, ToastFunction, TranslationFunction } from '@vanillabp/bc-shared';
+import { WorkflowModule } from '@vanillabp/bc-official-gui-client';
+
+declare const CustomWorkflowModuleComponent: ({ showLoadingIndicator, toast, workflowModule, useCase, t, entryPoint }: {
+    showLoadingIndicator: ShowLoadingIndicatorFunction;
+    toast: ToastFunction;
+    workflowModule: WorkflowModule;
+    useCase: string;
+    t: TranslationFunction;
+    entryPoint?: string | undefined;
+}) => JSX.Element;
+
+export { CustomWorkflowModuleComponent };

package/dist/components/CustomWorkflowModuleComponent.js

@@ -0,0 +1,54 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { UiUriType, useFederationModule } from "../utils/index.js";
+import { NoElementGivenByModule } from "./NoElementGivenByModule.js";
+import { useMemo } from "react";
+const CustomWorkflowModuleComponent = ({
+  showLoadingIndicator,
+  toast,
+  workflowModule,
+  useCase,
+  t,
+  entryPoint = "/remoteEntry.js"
+}) => {
+  const module = useMemo(() => ({
+    uiUriType: UiUriType.WebpackMfReact,
+    uiUri: `${workflowModule.uri}${entryPoint}`,
+    workflowModuleId: workflowModule.id,
+    workflowModuleUri: workflowModule.uri
+  }), [workflowModule.id, workflowModule.uri, entryPoint]);
+  const federatedModule = useFederationModule(module, useCase);
+  if (federatedModule == null ? void 0 : federatedModule.retry) {
+    console.error("Could not load module!");
+    return /* @__PURE__ */ jsx(
+      NoElementGivenByModule,
+      {
+        t,
+        loading: false,
+        showLoadingIndicator,
+        retry: federatedModule.retry
+      }
+    );
+  }
+  const Component = federatedModule && federatedModule[useCase];
+  if (!Component) {
+    return /* @__PURE__ */ jsx(
+      NoElementGivenByModule,
+      {
+        t,
+        loading: true,
+        showLoadingIndicator
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      toast,
+      workflowModule
+    }
+  );
+};
+export {
+  CustomWorkflowModuleComponent
+};

package/dist/components/FulltextSearchInput.d.ts

@@ -0,0 +1,13 @@
+import { TranslationFunction } from '@vanillabp/bc-shared';
+
+declare const FulltextSearchInput: ({ t, initialQuery, limitListToKwic, kwic, }: {
+    t: TranslationFunction;
+    initialQuery: (columnPath?: string) => string;
+    limitListToKwic: (columnPath: string | undefined, query?: string) => void;
+    kwic: (columnPath: string | undefined, query: string) => Promise<Array<{
+        item: string;
+        count: number;
+    }>>;
+}) => JSX.Element;
+
+export { FulltextSearchInput };

package/dist/components/FulltextSearchInput.js

@@ -0,0 +1,159 @@
+import {
+  __async
+} from "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { debounce, useResponsiveScreen } from "@vanillabp/bc-shared";
+import { useMemo, useRef, useState } from "react";
+import { Box, Grid, Text, TextInput, Tip } from "grommet";
+import { Clear, Search } from "grommet-icons";
+const FulltextSearchInput = ({
+  t,
+  initialQuery,
+  limitListToKwic,
+  kwic
+}) => {
+  const { isPhone } = useResponsiveScreen();
+  const textFieldRef = useRef(null);
+  const [query, setQuery] = useState(initialQuery);
+  const currentQuery = useRef(initialQuery(void 0));
+  const [suggestions, setSuggestions] = useState(void 0);
+  const ignoreKeyEnter = useRef(false);
+  const select = (value, suggestion) => {
+    if (suggestion) {
+      ignoreKeyEnter.current = true;
+    } else if (ignoreKeyEnter.current) {
+      ignoreKeyEnter.current = false;
+      return;
+    }
+    if (value === void 0)
+      return;
+    setSuggestions(void 0);
+    setQuery(value);
+    currentQuery.current = value;
+    limitListToKwic(void 0, value);
+  };
+  const kwicDebounced = useMemo(() => debounce(() => __async(void 0, null, function* () {
+    const result = yield kwic(void 0, currentQuery.current);
+    const newSuggestions = result.map((r) => ({
+      value: r.item,
+      label: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          direction: "row",
+          justify: "between",
+          pad: "xsmall",
+          children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                weight: "bold",
+                truncate: "tip",
+                children: r.item
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                align: "right",
+                children: r.count
+              }
+            )
+          ]
+        }
+      )
+    }));
+    setSuggestions(
+      newSuggestions.length > 20 ? [...newSuggestions.slice(0, 20), { value: void 0, label: /* @__PURE__ */ jsx(Box, { pad: "xsmall", children: t("kwic_to-many-hits") }) }] : newSuggestions
+    );
+  }), 300), [currentQuery, setSuggestions]);
+  const updateResult = (newQuery) => {
+    currentQuery.current = newQuery;
+    setQuery(newQuery);
+    if (newQuery.length < 3) {
+      if (suggestions) {
+        setSuggestions(void 0);
+      }
+      return;
+    }
+    kwicDebounced();
+  };
+  const clear = () => {
+    currentQuery.current = "";
+    setQuery("");
+    setSuggestions(void 0);
+    textFieldRef.current.focus();
+    limitListToKwic(void 0, void 0);
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      width: isPhone ? "100%" : "min(100%, 18rem)",
+      elevation: "small",
+      alignContent: "center",
+      hoverIndicator: "white",
+      focusIndicator: false,
+      round: { size: "0.4rem" },
+      border: { color: "dark-4" },
+      children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          columns: ["auto", "2rem"],
+          fill: true,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                pad: { horizontal: "0.4rem", vertical: "0.25rem" },
+                direction: "row",
+                justify: "center",
+                children: /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    plain: "full",
+                    ref: textFieldRef,
+                    value: query,
+                    placeholder: t("kwic_placeholder"),
+                    onKeyDown: (event) => event.key === "Enter" ? select(query, false) : void 0,
+                    onChange: (event) => updateResult(event.target.value),
+                    suggestions: suggestions === void 0 ? [] : suggestions.length === 0 ? [{ value: void 0, label: /* @__PURE__ */ jsx(Box, { pad: "xsmall", children: t("kwic_no-hit") }) }] : suggestions,
+                    onSuggestionSelect: (x) => select(x.suggestion.value, true),
+                    focusIndicator: false,
+                    reverse: true
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tip,
+              {
+                content: t("kwic_tooltip"),
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    align: "center",
+                    justify: "center",
+                    children: Boolean(query) ? /* @__PURE__ */ jsx(
+                      Clear,
+                      {
+                        onMouseUp: clear,
+                        color: "dark-4"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      Search,
+                      {
+                        color: "dark-4"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  FulltextSearchInput
+};

package/dist/components/ListCell.d.ts

@@ -12,7 +12,6 @@ declare enum TypeOfItem {
 interface ListCellParameters<T extends ListItemData & ModuleDefinition> {
     modulesAvailable: Module[];
     column: Column;
-    defaultLanguage?: string;
     currentLanguage: string;
     nameOfList?: string;
     typeOfItem: TypeOfItem;
@@ -22,6 +21,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, defaultLanguage, currentLanguage, nameOfList, typeOfItem, item, t, showUnreadAsBold, defaultListCell, selectItem, }: ListCellParameters<T>) => JSX.Element;
+declare const ListCell: <T extends ListItemData & ModuleDefinition>({ modulesAvailable, column, currentLanguage, nameOfList, typeOfItem, item, t, showUnreadAsBold, defaultListCell, selectItem, }: ListCellParameters<T>) => JSX.Element;
 
 export { ListCell, TypeOfItem };

package/dist/components/ListCell.js

@@ -4,7 +4,7 @@ import {
   useResponsiveScreen,
   WarningListCell
 } from "@vanillabp/bc-shared";
-import { memo } from "react";
+import { memo, Suspense } from "react";
 var TypeOfItem = /* @__PURE__ */ ((TypeOfItem2) => {
   TypeOfItem2[TypeOfItem2["TaskList"] = 0] = "TaskList";
   TypeOfItem2[TypeOfItem2["WorkflowList"] = 1] = "WorkflowList";
@@ -18,7 +18,6 @@ const warningsForWorkflowCells = {};
 const ListCell = ({
   modulesAvailable,
   column,
-  defaultLanguage = "en",
   currentLanguage,
   nameOfList,
   typeOfItem,
@@ -100,7 +99,7 @@ const ListCell = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
     Cell,
     {
       t,
@@ -108,14 +107,13 @@ const ListCell = ({
       column,
       showUnreadAsBold,
       currentLanguage,
-      defaultLanguage,
       defaultCell: defaultListCell,
       nameOfList,
       isPhone,
       isTablet,
       selectItem: (select) => selectItem(item, select)
     }
-  );
+  ) });
 };
 export {
   ListCell,

package/dist/components/ListColumnHeader.d.ts

@@ -1,7 +1,8 @@
 import { TranslationFunction, Column, DefaultListHeaderAwareProps } from '@vanillabp/bc-shared';
 import { FC } from 'react';
 
-declare const ListColumnHeader: ({ t, currentLanguage, column, columnIndex, numberOfAllColumns, nameOfList, columnHeader, hasColumnWidthAdjustment, setColumnWidthAdjustment, sort, sortAscending, setSort, setSortAscending, allSelected, selectAll }: {
+declare const AUTO_SIZE_COLUMN = "";
+declare const ListColumnHeader: ({ t, currentLanguage, column, columnIndex, numberOfAllColumns, nameOfList, columnHeader, columnWidthAdjustment, setAutoColumnWidth, setColumnWidthAdjustment, sort, isDefaultSort, sortAscending, defaultSortAscending, setSort, setSortAscending, allSelected, selectAll }: {
     t: TranslationFunction;
     currentLanguage: string;
     column: Column;
@@ -9,14 +10,17 @@ declare const ListColumnHeader: ({ t, currentLanguage, column, columnIndex, numb
     numberOfAllColumns: number;
     nameOfList?: string | undefined;
     columnHeader?: FC<DefaultListHeaderAwareProps<any>> | undefined;
-    hasColumnWidthAdjustment: boolean;
+    columnWidthAdjustment?: number | undefined;
+    setAutoColumnWidth: (column: Column, width: number) => void;
     setColumnWidthAdjustment: (column: Column, adjustment: number) => void;
     sort?: boolean | undefined;
+    isDefaultSort: boolean;
     sortAscending?: boolean | undefined;
+    defaultSortAscending: boolean;
     setSort: (column?: Column) => void;
     setSortAscending: (ascending: boolean) => void;
     allSelected: boolean;
     selectAll: (select: boolean) => void;
 }) => JSX.Element;
 
-export { ListColumnHeader };
+export { AUTO_SIZE_COLUMN, ListColumnHeader };

package/dist/components/ListColumnHeader.js

@@ -6,6 +6,7 @@ import {
 } from "@vanillabp/bc-shared";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "grommet";
+const AUTO_SIZE_COLUMN = "";
 const ListColumnHeader = ({
   t,
   currentLanguage,
@@ -14,10 +15,13 @@ const ListColumnHeader = ({
   numberOfAllColumns,
   nameOfList,
   columnHeader,
-  hasColumnWidthAdjustment,
+  columnWidthAdjustment,
+  setAutoColumnWidth,
   setColumnWidthAdjustment,
   sort,
+  isDefaultSort,
   sortAscending,
+  defaultSortAscending,
   setSort,
   setSortAscending,
   allSelected,
@@ -25,12 +29,13 @@ const ListColumnHeader = ({
 }) => {
   const { isPhone, isTablet } = useResponsiveScreen();
   const resize = useRef(-1);
-  const [widthAdjustment, setWidthAdjustment] = useState(0);
+  const [widthAdjustment, setWidthAdjustment] = useState(columnWidthAdjustment != null ? columnWidthAdjustment : 0);
   const startResize = (event) => {
     event.stopPropagation();
     event.preventDefault();
     resize.current = event.clientX;
     document.body.style.cursor = "col-resize";
+    moveHandler(event.nativeEvent);
   };
   const moveHandler = useCallback((ev) => {
     if (resize.current == -1)
@@ -65,14 +70,11 @@ const ListColumnHeader = ({
       ref: (element) => {
         if (element === null)
           return;
-        if (hasColumnWidthAdjustment)
+        if (columnWidthAdjustment !== void 0)
           return;
-        if (column.width !== "")
+        if (column.width !== AUTO_SIZE_COLUMN)
           return;
-        setColumnWidthAdjustment(
-          column,
-          element.getBoundingClientRect().width
-        );
+        setAutoColumnWidth(column, element.getBoundingClientRect().width);
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -95,7 +97,9 @@ const ListColumnHeader = ({
                 selectAll,
                 allSelected,
                 sort,
+                isDefaultSort,
                 sortAscending,
+                defaultSortAscending,
                 setSort,
                 setSortAscending
               }
@@ -110,26 +114,37 @@ const ListColumnHeader = ({
                 selectAll,
                 allSelected,
                 sort,
+                isDefaultSort,
                 sortAscending,
+                defaultSortAscending,
                 setSort,
                 setSortAscending
               }
             )
           }
         ),
-        column.resizeable ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Box,
           {
             align: "center",
-            onMouseDown: startResize,
-            style: { cursor: "col-resize", position: "absolute", top: "-0.5rem", bottom: "-0.5rem", right: "-0.2rem", zIndex: 1e3 },
+            onMouseDown: column.resizeable ? startResize : void 0,
+            style: {
+              cursor: column.resizeable ? "col-resize" : "not-allowed",
+              position: "absolute",
+              top: "-0.5rem",
+              bottom: "-0.5rem",
+              right: "-0.2rem",
+              width: "0.5rem",
+              zIndex: 1e3
+            },
             children: "\xA0"
           }
-        ) : void 0
+        )
       ]
     }
   );
 };
 export {
+  AUTO_SIZE_COLUMN,
   ListColumnHeader
 };

package/dist/components/ListOfTasks.d.ts

@@ -1,13 +1,13 @@
-import { FC } from 'react';
+import React from 'react';
+import { SearchQuery } from '@vanillabp/bc-official-gui-client';
 import { ShowLoadingIndicatorFunction, GuiSseHook, TranslationFunction, 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';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
 
-declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, openTask, navigateToWorkflow, t, currentLanguage, defaultSort, defaultSortAscending, name, columns, children, headerHeight, footer, footerHeight, rowSeparator, applyBackgroundColor, showColumnHeaders, excludeIdColumn, columnHeader, columnHeaderBackground, columnHeaderSeparator, }: {
+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, }: {
     showLoadingIndicator: ShowLoadingIndicatorFunction;
     useGuiSse: GuiSseHook;
     useTasklistApi: TasklistApiHook;
@@ -19,6 +19,8 @@ declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, o
     defaultSortAscending?: boolean | undefined;
     name?: string | undefined;
     columns?: string[] | undefined;
+    minWidthOfColumns?: string | undefined;
+    minWidthOfAutoColumn?: string | undefined;
     children?: ListOfTasksHeaderFooterFunction | undefined;
     headerHeight?: string | undefined;
     footer?: ListOfTasksHeaderFooterFunction | undefined;
@@ -27,9 +29,10 @@ declare const ListOfTasks: ({ showLoadingIndicator, useGuiSse, useTasklistApi, o
     applyBackgroundColor?: boolean | undefined;
     showColumnHeaders?: boolean | undefined;
     excludeIdColumn?: boolean | undefined;
-    columnHeader?: FC<DefaultListHeaderAwareProps<any>> | undefined;
+    columnHeader?: React.FC<DefaultListHeaderAwareProps<any>> | undefined;
     columnHeaderBackground?: BackgroundType | undefined;
     columnHeaderSeparator?: ColorType | null;
+    defaultSearchQueries?: SearchQuery[] | undefined;
 }) => JSX.Element;
 
 export { ListOfTasks };