ebta-workflow-prod 1.1.3 → 4.0.1

package/src/elements/LineChartMui.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { LineChart } from "@mui/x-charts";
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface LineChartMuiProps extends FormElementProps<string> {
+    series: any;
+    xAxis: any;
+    yAxis: any;
+    width: any;
+    height: any;
+    chartSetting: any
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName LineChartMui
+ * @description Line Chart V1
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function LineChartMui(props: LineChartMuiProps): React.ReactElement {
+    const { series, xAxis, yAxis, width, height ,chartSetting} = props;
+    return (
+        <div style={{ width, height }}>
+            <LineChart
+                series={series}
+                xAxis={xAxis}
+                yAxis={yAxis}
+                {...chartSetting}
+            />
+        </div>
+    );
+}
+
+const LineChartMuiElementRegistration: FormElementRegistration<LineChartMuiProps> = {
+    component: LineChartMui,
+    getInitialProperties: () => ({ value: "Hello World" }),
+    id: "LineChartMui",
+};
+
+export default LineChartMuiElementRegistration;

package/src/elements/MenueBar.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Button from '@vertigis/web/ui/Button';
+import Menu from '@vertigis/web/ui/Menu';
+import MenuItem from '@vertigis/web/ui/MenuItem';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+
+interface MenuItem {
+  title: string;
+  items: string[];
+  showIcon?: boolean;  // Changed from startIcon to showIcon for clarity
+}
+
+interface MenueBarProps extends FormElementProps<string> {
+    structure: MenuItem[];
+    selectedItem?: string;
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName MenueBar
+ * @description Menue Bar
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function MenueBar(props: MenueBarProps): React.ReactElement {
+    const { structure, raiseEvent, setProperty } = props;
+    
+    // State to track which category menu is open
+    const [anchorElMap, setAnchorElMap] = React.useState<{[key: string]: HTMLElement | null}>({});
+    
+    const handleClick = (event: React.MouseEvent<HTMLElement>, category: string) => {
+      // Update anchor element for the specific category
+      setAnchorElMap(prev => ({
+        ...prev,
+        [category]: event.currentTarget
+      }));
+    };
+    
+    const handleClose = (category: string) => {
+      // Close the specific category menu
+      setAnchorElMap(prev => ({
+        ...prev,
+        [category]: null
+      }));
+    };
+    
+    const handleMenuItemClick = (category: string, item: string) => {
+      // Handle menu item click - set the selected value
+      handleClose(category);
+      setProperty("selectedItem" as any, {category, item}); 
+      raiseEvent("clicked" as any, {category, item});
+    };
+  
+    return (
+      <div style={{ display: 'flex', gap: '8px' }}>
+        {structure.map((group) => (
+          <div key={group.title}>
+            <Button
+              aria-controls={anchorElMap[group.title] ? `menu-${group.title}` : undefined}
+              aria-haspopup="true"
+              aria-expanded={anchorElMap[group.title] ? 'true' : undefined}
+              variant="contained"
+              disableElevation
+              onClick={(e) => handleClick(e, group.title)}
+              endIcon={group.showIcon ? <KeyboardArrowDownIcon /> : null}
+            >
+              {group.title}
+            </Button>
+            <Menu
+              id={`menu-${group.title}`}
+              anchorEl={anchorElMap[group.title]}
+              open={Boolean(anchorElMap[group.title])}
+              onClose={() => handleClose(group.title)}
+              MenuListProps={{
+                'aria-labelledby': group.title,
+              }}
+            >
+              {group.items.map((item) => (
+                <MenuItem 
+                  key={item}
+                  onClick={() => handleMenuItemClick(group.title, item)} 
+                  disableRipple
+                >
+                  {item}
+                </MenuItem>
+              ))}
+            </Menu>
+          </div>
+        ))}
+      </div>
+    );
+}
+
+const MenueBarElementRegistration: FormElementRegistration<MenueBarProps> = {
+    component: MenueBar,
+    getInitialProperties: () => ({ 
+        structure: [
+            {title: "Option 1", items: ['Button A', 'Button B']}, 
+            {title: "Item B", items: ['Button C'], showIcon: true}, 
+            {title: "Option 2", items: ['Button D', 'Button E']}, 
+        ],
+        selectedItem: undefined 
+    }),
+    id: "MenueBar",
+};
+
+export default MenueBarElementRegistration;

package/src/elements/MultipleAutoCompleteCS.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { createTheme, ThemeProvider} from "@mui/material/styles";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+
+interface Option {
+  label: string;
+  value?: any;
+}
+
+interface MultipleAutoCompleteCSProps extends FormElementProps<any> {
+  options: Option[];
+  variant: "standard" | "outlined" | "filled";
+  defaultLabel: string,
+  elementSize: "small" | "medium" ;
+}
+
+const theme = createTheme({
+  components: {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)', // Label text color
+          fontSize: '1.2rem', // Label font size
+
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'var(--primaryBackground)', // Root background color
+        },
+        listbox: {
+          fontSize: '1.2rem', // Listbox text size
+          color: 'var(--secondaryForeground)', // Listbox text color
+          backgroundColor: 'var(--primaryBackground)', // Listbox background color
+          border: '1px solid var(--primaryForeground)', // Listbox border color
+        },
+        endAdornment: {
+          color: 'var(--primaryForeground)', // Default end adornment color
+        },
+        
+        popupIndicator:{
+          color: 'var(--primaryForeground)', // Default arrow icon color
+          backgroundColor: 'var(--primaryBackground)', // Listbox background color
+        },
+        clearIndicator: {
+          color: 'var(--primaryForeground)', // Default clear icon color
+          '&:hover': {
+            color: 'var(--secondaryForeground)', // Clear icon color on hover
+          },
+        },
+        paper: {
+          backgroundColor: 'var(--primaryBackground)', // Paper background color
+          color: 'var(--primaryForeground)', // Paper text color
+          },
+        inputRoot: {
+          color: 'var(--primaryForeground)', // Input text color
+
+          // Styles for the input area
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+            '&:hover fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+          },
+          '& .MuiChip-root': {
+            fontSize: '1.2rem', // Chip text size
+            backgroundColor: 'var(--buttonBackground)', // Chip background color
+            color: 'var(--buttonForeground)', // Chip text color
+            border: '1px solid var(--buttonBorder)', // Border for the chip
+            '& .MuiChip-deleteIcon': {
+              color: 'var(--buttonForeground)', // Delete icon color
+              '&:hover': {
+                color: 'var(--buttonForeground)', // Delete icon hover color
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+/**
+ * A Workflow element built using React.
+ * @displayName Multiple AutoComplete CS
+ * @description Multiple AutoComplete V11
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+
+function MultipleAutoCompleteCS(
+  props: MultipleAutoCompleteCSProps
+): React.ReactElement {
+  const { value,defaultLabel, variant, options, setValue , elementSize} = props;
+
+
+  return (
+    <ThemeProvider theme={theme}>
+    <Autocomplete
+      value={value || []}
+      options={options || []}
+      size={elementSize}
+      getOptionLabel={(option: Option) => option.label || ""}
+      onChange={(event, newValue) => {
+        if (setValue) {
+          setValue(newValue);
+        }
+      }}
+      multiple={true}
+      renderInput={(params) => (
+        <TextField {...params} placeholder={defaultLabel} variant={variant} />
+      )}
+    />
+    </ThemeProvider>
+  );
+}
+
+const MultipleAutoCompleteCSElementRegistration: FormElementRegistration<MultipleAutoCompleteCSProps> =
+  {
+    component: MultipleAutoCompleteCS,
+    getInitialProperties: () => ({
+      defaultLabel: "Default Label", // Provide a default label here
+      variant: "outlined", // Provide a default variant here
+      autocompleteType: "autoComplete", // Provide a default autocomplete type here
+      elementSize: "small", // Provide a default element size here
+      options: [
+        { label: "Option 1", value: 1 },
+        { label: "Option 2", value: 2 },
+        { label: "Option 3", value: 3 },
+        { label: "Option 4", value: 4 },
+      ], // Sample options
+      initiatorValue: [{ label: "Option 1", value: 1 }]
+    }),
+    id: "MultipleAutoCompleteCS",
+  };
+
+export default MultipleAutoCompleteCSElementRegistration;

package/src/elements/SingleAutoCompleteCS.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Autocomplete from "@vertigis/web/ui/Autocomplete"
+import { createTheme, ThemeProvider} from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+
+interface Option {
+  label: string;
+  value?: any;
+}
+
+interface SingleAutoCompleteCSProps extends FormElementProps<any> {
+  options: Option[];
+  variant: "standard" | "outlined" | "filled";
+  defaultLabel: string;
+  elementSize: "small" | "medium";
+}
+
+const theme = createTheme({
+  components: {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: 'var(--primaryForeground)', // Label text color
+          fontSize: '1.2rem', // Label font size
+
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'var(--primaryBackground)', // Root background color
+        },
+        listbox: {
+          fontSize: '1.2rem', // Listbox text size
+          color: 'var(--secondaryForeground)', // Listbox text color
+          backgroundColor: 'var(--primaryBackground)', // Listbox background color
+          border: '1px solid var(--primaryForeground)', // Listbox border color
+        },
+        endAdornment: {
+          color: 'var(--primaryForeground)', // Default end adornment color
+        },
+        
+        popupIndicator:{
+          color: 'var(--primaryForeground)', // Default arrow icon color
+          backgroundColor: 'var(--primaryBackground)', // Listbox background color
+        },
+        clearIndicator: {
+          color: 'var(--primaryForeground)', // Default clear icon color
+          '&:hover': {
+            color: 'var(--secondaryForeground)', // Clear icon color on hover
+          },
+        },
+        paper: {
+          backgroundColor: 'var(--primaryBackground)', // Paper background color
+          color: 'var(--primaryForeground)', // Paper text color
+          },
+        inputRoot: {
+          color: 'var(--primaryForeground)', // Input text color
+          // Styles for the input area
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+            '&:hover fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: 'var(--primaryForeground)',
+            },
+          },
+          '& .MuiChip-root': {
+            fontSize: '1.2rem', // Chip text size
+            backgroundColor: 'var(--buttonBackground)', // Chip background color
+            color: 'var(--buttonForeground)', // Chip text color
+            border: '1px solid var(--buttonBorder)', // Border for the chip
+            '& .MuiChip-deleteIcon': {
+              color: 'var(--buttonForeground)', // Delete icon color
+              '&:hover': {
+                color: 'var(--buttonForeground)', // Delete icon hover color
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+/**
+ * A Workflow element built using React.
+ * @displayName Single AutoComplete
+ * @description Single AutoComplete V8
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+
+function SingleAutoCompleteCS(
+  props: SingleAutoCompleteCSProps
+): React.ReactElement {
+  const { defaultLabel, variant, options, setValue , value, elementSize} = props;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Autocomplete
+        value={value || null}
+        size={elementSize}
+        options={options || []}
+        getOptionLabel={(option: Option) => option.label || ""}
+        onChange={(event: any, newValue: Option | null) => {
+          setValue(newValue);
+        }}
+        multiple={false}
+        renderInput={(params) => (
+          <TextField {...params} placeholder={defaultLabel} variant={variant} />
+        )}
+      />
+    </ThemeProvider>
+  );
+}
+
+const SingleAutoCompleteCSElementRegistration: FormElementRegistration<SingleAutoCompleteCSProps> =
+  {
+    component: SingleAutoCompleteCS,
+    getInitialProperties: () => ({
+      defaultLabel: "Default Label", // Provide a default label here
+      variant: "outlined", // Provide a default variant here
+      elementSize: "small", // Provide a default element size here
+    }),
+    id: "SingleAutoCompleteCS",
+  };
+
+export default SingleAutoCompleteCSElementRegistration;

package/src/elements/TableRadioGoup.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import type { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Box, { BoxProps } from "@vertigis/web/ui/Box";
+import Table, { TableProps } from "@vertigis/web/ui/Table";
+import TableBody from "@vertigis/web/ui/TableBody";
+import TableCell, { TableCellProps } from "@vertigis/web/ui/TableCell";
+import TableHead from "@vertigis/web/ui/TableHead";
+import TableRow from "@vertigis/web/ui/TableRow";
+import Radio from "@vertigis/web/ui/Radio";
+import RadioGroup from "@vertigis/web/ui/RadioGroup";
+import FormControlLabel from "@vertigis/web/ui/FormControlLabel";
+import Tooltip from "@mui/material/Tooltip";
+
+/** Interface for table columns */
+interface Column {
+    name: string; // Used for value
+    alias?: string; // Used for display
+    align?: TableCellProps["align"];
+    weight?: number;
+    tooltip?: string;
+}
+
+/** Interface for row headers */
+interface Row {
+    name: string; // Used for value
+    alias?: string; // Used for display
+    tooltip?: string;
+    align?: TableCellProps["align"];
+}
+
+type SettableBoxProps = Pick<BoxProps, "maxHeight" | "maxWidth">;
+type SettableTableProps = Pick<TableProps, "stickyHeader">;
+type OverrideProps = Pick<TableProps, "size">;
+
+interface TableRadioGroupProps
+    extends FormElementProps<Record<string, string>>,
+    SettableBoxProps,
+    SettableTableProps {
+    rows?: Row[];
+    columns?: Column[];
+}
+/**
+ * A Workflow element built using React.
+ * @displayName Table Radio Group
+ * @description Table Radio Group
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function TableRadioGroup(props: TableRadioGroupProps): React.ReactElement {
+    const {
+        setValue,
+        maxHeight,
+        maxWidth,
+        value = {},
+        rows = [
+            { name: "asset_ownership", alias: "Asset Ownership", tooltip: "Defines who legally owns the asset." },
+            { name: "asset_management", alias: "Asset Management", tooltip: "Covers the maintenance and lifecycle planning of the asset." },
+            { name: "asset_maintenance", alias: "Asset Operation and Maintenance", tooltip: "Ensures daily operation and upkeep of the asset." },
+        ],
+        columns = [
+            { name: "category", alias: "Category", weight: 2, tooltip: "This is the category column" },
+            { name: "accept", alias: "Accept", weight: 1, tooltip: "Accept the asset responsibility" },
+            { name: "refuse", alias: "Refuse", weight: 1, tooltip: "Refuse asset responsibility" },
+            { name: "amendment", alias: "Amendment or Clarification Required", weight: 2, tooltip: "Additional information is needed" },
+        ],
+    } = props;
+
+    const { size } = props as OverrideProps;
+
+    // Calculate total weight dynamically (including first column)
+    const totalWeight = columns.reduce((sum, col) => sum + (col.weight || 1), 0);
+
+    return (
+        <Box maxHeight={maxHeight} maxWidth={maxWidth} sx={{ overflow: "auto" }}>
+            <Table
+                size={size}
+                sx={{
+                    "& span": {
+                        display: "inline-flex !important",
+                    },
+                }}
+            >
+                <TableHead>
+                    <TableRow>
+                        {columns.map((col, index) => (
+                            <TableCell
+                                key={index}
+                                align={col.align || "center"}
+                                sx={{ width: `${((col.weight || 1) / totalWeight) * 100}%`, fontWeight: "bold" }}
+                            >
+                                <Tooltip title={col.tooltip || "No description available"} arrow>
+                                    <span>{col.alias || col.name}</span>
+                                </Tooltip>
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {columns.map((col, colIndex) => (
+                                <TableCell key={colIndex} align={row.align || "left"} sx={{ width: `${((col.weight || 1) / totalWeight) * 100}%` }}>
+                                    {colIndex === 0 ? ( // ✅ First column (Category)
+                                        <Tooltip title={row.tooltip || "No description available"} arrow>
+                                            <span style={{ fontWeight: "bold", cursor: "help" }}>{row.alias || row.name}</span>
+                                        </Tooltip>
+                                    ) : (
+                                        <RadioGroup
+                                            row
+                                            name={`group-${rowIndex}`}
+                                            value={value[row.name] || ""}
+                                            onChange={(event) => setValue({ ...value, [row.name]: event.target.value })}
+                                            sx={{ display: "flex", justifyContent: "center" }}
+                                        >
+                                            <FormControlLabel
+                                                value={col.name} // ✅ Name used for value
+                                                control={<Radio />}
+                                                label=""
+                                                sx={{
+                                                    margin: 0,
+                                                    padding: 0,
+                                                    display: "flex",
+                                                    justifyContent: "center",
+                                                    alignItems: "center",
+                                                }}
+                                            />
+                                        </RadioGroup>
+                                    )}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </Box>
+    );
+}
+
+const TableRadioGroupElementRegistration: FormElementRegistration<TableRadioGroupProps> = {
+    component: TableRadioGroup,
+    getInitialProperties: () => ({
+        value: {
+            asset_ownership: "accept", // ✅ Default selection: "Accept" for Asset Ownership
+            asset_management: "refuse", // ✅ Default selection: "Refuse" for Asset Management
+            asset_maintenance: "amendment", // ✅ Default selection: "Amendment" for Asset Operation and Maintenance
+        },
+        rows: [
+            { name: "asset_ownership", alias: "Asset Ownership", tooltip: "Defines who legally owns the asset." },
+            { name: "asset_management", alias: "Asset Management", tooltip: "Covers the maintenance and lifecycle planning of the asset." },
+            { name: "asset_maintenance", alias: "Asset Operation and Maintenance", tooltip: "Ensures daily operation and upkeep of the asset." },
+        ],
+        size: "medium",
+        columns: [
+            { name: "category", alias: "Category", weight: 2, tooltip: "This is the category column" },
+            { name: "accept", alias: "Accept", weight: 1, tooltip: "Accept the asset responsibility" },
+            { name: "refuse", alias: "Refuse", weight: 1, tooltip: "Refuse asset responsibility" },
+            { name: "amendment", alias: "Amendment or Clarification Required", weight: 1.1, tooltip: "Additional information is needed" },
+        ],
+    }),
+    id: "TableRadioGroup",
+};
+
+
+export default TableRadioGroupElementRegistration;