table: lov for column (#859)

* table: lov for column
resolves #556

* Support for None as an indicator that the user can enter any value

* format

* format

---------

Co-authored-by: Fred Lefévère-Laoide <[email protected]>

frontend/taipy-gui/package.json

@@ -105,7 +105,7 @@
     "eslint-webpack-plugin": "^4.0.0",
     "generate-json-webpack-plugin": "^2.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.1",
+    "husky": "^9.0.11",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
     "jest-websocket-mock": "^2.2.1",

frontend/taipy-gui/src/components/Taipy/tableUtils.tsx

@@ -11,16 +11,26 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useState, useCallback, useEffect, useMemo, CSSProperties, MouseEvent } from "react";
-import TableCell, { TableCellProps } from "@mui/material/TableCell";
+import React, {
+    useState,
+    useCallback,
+    useEffect,
+    useMemo,
+    CSSProperties,
+    MouseEvent,
+    ChangeEvent,
+    SyntheticEvent,
+} from "react";
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Input from "@mui/material/Input";
+import TableCell, { TableCellProps } from "@mui/material/TableCell";
+import Switch from "@mui/material/Switch";
 import IconButton from "@mui/material/IconButton";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
-import Switch from "@mui/material/Switch";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { BaseDateTimePickerSlotsComponentsProps } from "@mui/x-date-pickers/DateTimePicker/shared";
@@ -29,6 +39,7 @@ import { isValid } from "date-fns";
 import { FormatConfig } from "../../context/taipyReducers";
 import { dateToString, getDateTime, getDateTimeString, getNumberString, getTimeZonedDate } from "../../utils/index";
 import { TaipyActiveProps, TaipyMultiSelectProps, getSuffixedClassNames } from "./utils";
+import { FilterOptionsState, TextField } from "@mui/material";
 
 /**
  * A column description as received by the backend.
@@ -65,6 +76,10 @@ export interface ColumnDesc {
     /** The flag that allows the user to aggregate the column. */
     groupBy?: boolean;
     widthHint?: number;
+    /** The list of values that can be used on edit. */
+    lov?: string[];
+    /** If true the user can enter any value besides the lov values. */
+    freeLov?: boolean;
 }
 
 export const DEFAULT_SIZE = "small";
@@ -250,6 +265,10 @@ const setInputFocus = (input: HTMLInputElement) => input && input.focus();
 
 const textFieldProps = { textField: { margin: "dense" } } as BaseDateTimePickerSlotsComponentsProps<Date>;
 
+const filter = createFilterOptions<string>();
+const getOptionKey = (option: string) => (Array.isArray(option) ? option[0] : option);
+const getOptionLabel = (option: string) => (Array.isArray(option) ? option[1] : option);
+
 export const EditableCell = (props: EditableCellProps) => {
     const {
         onValidation,
@@ -268,8 +287,9 @@ export const EditableCell = (props: EditableCellProps) => {
     const [edit, setEdit] = useState(false);
     const [deletion, setDeletion] = useState(false);
 
-    const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => setVal(e.target.value), []);
-    const onBoolChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => setVal(e.target.checked), []);
+    const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => setVal(e.target.value), []);
+    const onCompleteChange = useCallback((e: SyntheticEvent, value: string | null) => setVal(value), []);
+    const onBoolChange = useCallback((e: ChangeEvent<HTMLInputElement>) => setVal(e.target.checked), []);
     const onDateChange = useCallback((date: Date | null) => setVal(date), []);
 
     const withTime = useMemo(() => !!colDesc.format && colDesc.format.toLowerCase().includes("h"), [colDesc.format]);
@@ -327,7 +347,7 @@ export const EditableCell = (props: EditableCellProps) => {
     );
 
     const onKeyDown = useCallback(
-        (e: React.KeyboardEvent<HTMLInputElement>) => {
+        (e: React.KeyboardEvent<HTMLElement>) => {
             switch (e.key) {
                 case "Enter":
                     onCheckClick();
@@ -375,6 +395,23 @@ export const EditableCell = (props: EditableCellProps) => {
         [onSelection, rowIndex, colDesc.dfid]
     );
 
+    const filterOptions = useCallback(
+        (options: string[], params: FilterOptionsState<string>) => {
+            const filtered = filter(options, params);
+            if (colDesc.freeLov) {
+                const { inputValue } = params;
+                if (
+                    inputValue &&
+                    !options.some((option) => inputValue == (Array.isArray(option) ? option[1] : option))
+                ) {
+                    filtered.push(inputValue);
+                }
+            }
+            return filtered;
+        },
+        [colDesc.freeLov]
+    );
+
     useEffect(() => {
         !onValidation && setEdit(false);
     }, [onValidation]);
@@ -435,6 +472,42 @@ export const EditableCell = (props: EditableCellProps) => {
                             </IconButton>
                         </Box>
                     </Box>
+                ) : colDesc.lov ? (
+                    <Box sx={cellBoxSx}>
+                        <Autocomplete
+                            autoComplete={true}
+                            fullWidth
+                            selectOnFocus={!!colDesc.freeLov}
+                            clearOnBlur={!!colDesc.freeLov}
+                            handleHomeEndKeys={!!colDesc.freeLov}
+                            options={colDesc.lov}
+                            getOptionKey={getOptionKey}
+                            getOptionLabel={getOptionLabel}
+                            filterOptions={filterOptions}
+                            freeSolo={!!colDesc.freeLov}
+                            value={val as string}
+                            onChange={onCompleteChange}
+                            renderInput={(params) => (
+                                <TextField
+                                    {...params}
+                                    fullWidth
+                                    inputRef={setInputFocus}
+                                    onChange={colDesc.freeLov ? onChange : undefined}
+                                    margin="dense"
+                                    variant="standard"
+                                    sx={tableFontSx}
+                                />
+                            )}
+                        />
+                        <Box sx={iconsWrapperSx}>
+                            <IconButton onClick={onCheckClick} size="small" sx={iconInRowSx}>
+                                <CheckIcon fontSize="inherit" />
+                            </IconButton>
+                            <IconButton onClick={onEditClick} size="small" sx={iconInRowSx}>
+                                <ClearIcon fontSize="inherit" />
+                            </IconButton>
+                        </Box>
+                    </Box>
                 ) : (
                     <Input
                         value={val}

taipy/gui/_renderers/builder.py

@@ -69,6 +69,7 @@ class _Builder:
         "apply",
         "style",
         "tooltip",
+        "lov"
     ]
 
     def __init__(

taipy/gui/_renderers/utils.py

@@ -57,7 +57,7 @@ def _get_columns_dict(  # noqa: C901
     if isinstance(columns, str):
         col_dict = _get_columns_dict_from_list([s.strip() for s in columns.split(";")], col_types_keys, value)
     elif isinstance(columns, (list, tuple)):
-        col_dict = _get_columns_dict_from_list(columns, col_types_keys, value)
+        col_dict = _get_columns_dict_from_list(columns, col_types_keys, value) # type: ignore[arg-type]
     elif isinstance(columns, _MapDict):
         col_dict = columns._dict.copy()
     elif isinstance(columns, dict):

taipy/gui/gui.py

@@ -2017,7 +2017,7 @@ def _get_page(self, page_name: str):
 
     def _bind_custom_page_variables(self, page: CustomPage, client_id: t.Optional[str]):
         """Handle the bindings of custom page variables"""
-        with self.get_flask_app().app_context() if has_app_context() else contextlib.nullcontext():
+        with self.get_flask_app().app_context() if has_app_context() else contextlib.nullcontext(): # type: ignore[attr-defined]
             self.__set_client_id_in_context(client_id)
             with self._set_locals_context(page._get_module_name()):
                 for k in self._get_locals_bind().keys():

taipy/gui/utils/table_col_builder.py

@@ -112,4 +112,20 @@ def _enhance_columns(  # noqa: C901
                 col_desc["tooltip"] = value
         else:
             _warn(f"{elt_name}: tooltip[{k}] is not in the list of displayed columns.")
+    if attributes.get("on_edit"):
+        lovs = _get_name_indexed_property(attributes, "lov")
+        for k, v in lovs.items():  # pragma: no cover
+            if col_desc := _get_column_desc(columns, k):
+                value = v.strip().split(";") if isinstance(v, str) else v  # type: ignore[assignment]
+                if value is not None and not isinstance(value, (list, tuple)):
+                    _warn(f"{elt_name}: lov[{k}] should be a list.")
+                    value = None
+                if value is not None:
+                    new_value = list(filter(lambda i: i is not None, value))
+                    if len(new_value) < len(value):
+                        col_desc["freeLov"] = True
+                        value = new_value
+                    col_desc["lov"] = value
+            else:
+                _warn(f"{elt_name}: lov[{k}] is not in the list of displayed columns.")
     return columns

taipy/gui/viselements.json

@@ -1113,6 +1113,11 @@
             "type": "dynamic(bool)",
             "default_value": "False",
             "doc": "If set to True, this allows to dynamically refresh the  columns."
+          },
+          {
+            "name": "lov[<i>column_name</i>]",
+            "type": "list[str]|str",
+            "doc": "The list of values of the indicated column."
           }
         ]
       }