Skip to content

Commit

Permalink
table partial editable should show add and delete action if not false
Browse files Browse the repository at this point in the history
  • Loading branch information
Fred Lefévère-Laoide authored and Fred Lefévère-Laoide committed Sep 20, 2024
1 parent bd26501 commit acde16b
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 31 deletions.
27 changes: 16 additions & 11 deletions frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {
} from "../../context/taipyReducers";
import {
ColumnDesc,
getsortByIndex,
getSortByIndex,
Order,
TaipyTableProps,
baseBoxSx,
Expand Down Expand Up @@ -134,9 +134,9 @@ const Row = ({
selected={selection.indexOf(index) > -1}
onClick={onRowClick}
>
{colsOrder.map((col, cidx) => (
{colsOrder.map((col, cIdx) => (
<EditableCell
key={"val" + index + "-" + cidx}
key={"val" + index + "-" + cIdx}
className={getClassName(rows[index], columns[col].style, col)}
tableClassName={tableClassName}
colDesc={columns[col]}
Expand All @@ -147,7 +147,7 @@ const Row = ({
onDeletion={onDeletion}
onSelection={onRowSelection}
nanValue={columns[col].nanValue || nanValue}
tableCellProps={cellProps[cidx]}
tableCellProps={cellProps[cIdx]}
tooltip={getTooltip(rows[index], columns[col].tooltip, col)}
comp={compRows && compRows[index] && compRows[index][col]}
/>
Expand Down Expand Up @@ -277,32 +277,35 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
e.stopPropagation();
}, []);

const [colsOrder, columns, styles, tooltips, handleNan, filter] = useMemo(() => {
const [colsOrder, columns, styles, tooltips, handleNan, filter, partialEditable] = useMemo(() => {
let hNan = !!props.nanValue;
if (baseColumns) {
try {
let filter = false;
let partialEditable = editable;
const newCols: Record<string, ColumnDesc> = {};
Object.entries(baseColumns).forEach(([cId, cDesc]) => {
const nDesc = (newCols[cId] = { ...cDesc });
if (typeof nDesc.filter != "boolean") {
nDesc.filter = !!props.filter;
}
filter = filter || nDesc.filter;
if (typeof nDesc.notEditable != "boolean") {
if (typeof nDesc.notEditable == "boolean") {
nDesc.notEditable = !editable;
}else {
partialEditable = partialEditable || !nDesc.notEditable;
}
if (nDesc.tooltip === undefined) {
nDesc.tooltip = props.tooltip;
}
});
addDeleteColumn(
(active && editable && (onAdd || onDelete) ? 1 : 0) +
(active && partialEditable && (onAdd || onDelete) ? 1 : 0) +
(active && filter ? 1 : 0) +
(active && downloadable ? 1 : 0),
newCols
);
const colsOrder = Object.keys(newCols).sort(getsortByIndex(newCols));
const colsOrder = Object.keys(newCols).sort(getSortByIndex(newCols));
const styTt = colsOrder.reduce<Record<string, Record<string, string>>>((pv, col) => {
if (newCols[col].style) {
pv.styles = pv.styles || {};
Expand All @@ -319,7 +322,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
styTt.styles = styTt.styles || {};
styTt.styles[LINE_STYLE] = props.lineStyle;
}
return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter];
return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter, partialEditable];
} catch (e) {
console.info("ATable.columns: " + ((e as Error).message || e));
}
Expand All @@ -331,6 +334,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
{} as Record<string, string>,
hNan,
false,
false
];
}, [
active,
Expand Down Expand Up @@ -545,7 +549,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
selection: selected,
formatConfig: formatConfig,
onValidation: active && onEdit ? onCellValidation : undefined,
onDeletion: active && editable && onDelete ? onRowDeletion : undefined,
onDeletion: active && (editable || partialEditable) && onDelete ? onRowDeletion : undefined,
onRowSelection: active && onAction ? onRowSelection : undefined,
onRowClick: active && onAction ? onRowClick : undefined,
lineStyle: props.lineStyle,
Expand All @@ -563,6 +567,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
selected,
formatConfig,
editable,
partialEditable,
onEdit,
onCellValidation,
onDelete,
Expand Down Expand Up @@ -594,7 +599,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
>
{columns[col].dfid === EDIT_COL ? (
[
active && editable && onAdd ? (
active && (editable || partialEditable) && onAdd ? (
<Tooltip title="Add a row" key="addARow">
<IconButton
onClick={onAddRowClick}
Expand Down
34 changes: 19 additions & 15 deletions frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import {
EditableCell,
EDIT_COL,
getClassName,
getsortByIndex,
getSortByIndex,
headBoxSx,
LINE_STYLE,
OnCellValidation,
Expand Down Expand Up @@ -84,7 +84,7 @@ import { getSuffixedClassNames, getUpdateVar } from "./utils";
import { emptyArray } from "../../utils";

const loadingStyle: CSSProperties = { width: "100%", height: "3em", textAlign: "right", verticalAlign: "center" };
const skelSx = { width: "100%", height: "3em" };
const skeletonSx = { width: "100%", height: "3em" };

const rowsPerPageOptions: PageSizeOptionsType = [10, 50, 100, 500];

Expand Down Expand Up @@ -131,32 +131,35 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);

const [colsOrder, columns, styles, tooltips, handleNan, filter] = useMemo(() => {
const [colsOrder, columns, styles, tooltips, handleNan, filter, partialEditable] = useMemo(() => {
let hNan = !!props.nanValue;
if (baseColumns) {
try {
let filter = false;
let partialEditable = editable;
const newCols: Record<string, ColumnDesc> = {};
Object.entries(baseColumns).forEach(([cId, cDesc]) => {
const nDesc = (newCols[cId] = { ...cDesc });
if (typeof nDesc.filter != "boolean") {
nDesc.filter = !!props.filter;
}
filter = filter || nDesc.filter;
if (typeof nDesc.notEditable != "boolean") {
if (typeof nDesc.notEditable == "boolean") {
partialEditable = partialEditable || !nDesc.notEditable;
}else {
nDesc.notEditable = !editable;
}
if (nDesc.tooltip === undefined) {
nDesc.tooltip = props.tooltip;
}
});
addDeleteColumn(
(active && editable && (onAdd || onDelete) ? 1 : 0) +
(active && partialEditable && (onAdd || onDelete) ? 1 : 0) +
(active && filter ? 1 : 0) +
(active && downloadable ? 1 : 0),
newCols
);
const colsOrder = Object.keys(newCols).sort(getsortByIndex(newCols));
const colsOrder = Object.keys(newCols).sort(getSortByIndex(newCols));
const styTt = colsOrder.reduce<Record<string, Record<string, string>>>((pv, col) => {
if (newCols[col].style) {
pv.styles = pv.styles || {};
Expand All @@ -173,7 +176,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
styTt.styles = styTt.styles || {};
styTt.styles[LINE_STYLE] = props.lineStyle;
}
return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter];
return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter, partialEditable];
} catch (e) {
console.info("PaginatedTable.columns: ", (e as Error).message || e);
}
Expand All @@ -185,6 +188,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
{} as Record<string, string>,
hNan,
false,
false
];
}, [
active,
Expand Down Expand Up @@ -482,7 +486,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
>
{columns[col].dfid === EDIT_COL ? (
[
active && editable && onAdd ? (
active && (editable || partialEditable) && onAdd ? (
<Tooltip title="Add a row" key="addARow">
<IconButton
onClick={onAddRowClick}
Expand Down Expand Up @@ -580,9 +584,9 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
data-index={index}
onClick={active && onAction ? onRowClick : undefined}
>
{colsOrder.map((col, cidx) => (
{colsOrder.map((col, cIdx) => (
<EditableCell
key={"val" + index + "-" + cidx}
key={"val" + index + "-" + cIdx}
className={getClassName(row, columns[col].style, col)}
tableClassName={className}
colDesc={columns[col]}
Expand All @@ -595,7 +599,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
: undefined
}
onDeletion={
active && editable && onDelete ? onRowDeletion : undefined
active && (editable || partialEditable) && onDelete ? onRowDeletion : undefined
}
onSelection={active && onAction ? onRowSelection : undefined}
nanValue={columns[col].nanValue || props.nanValue}
Expand All @@ -609,10 +613,10 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
{rows.length == 0 &&
loading &&
Array.from(Array(30).keys(), (v, idx) => (
<TableRow hover key={"rowskel" + idx}>
{colsOrder.map((col, cidx) => (
<TableCell key={"skel" + cidx}>
<Skeleton sx={skelSx} />
<TableRow hover key={"rowSkel" + idx}>
{colsOrder.map((col, cIdx) => (
<TableCell key={"skel" + cIdx}>
<Skeleton sx={skeletonSx} />
</TableCell>
))}
</TableRow>
Expand Down
4 changes: 2 additions & 2 deletions frontend/taipy-gui/src/components/Taipy/TableFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import Tooltip from "@mui/material/Tooltip";
import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";

import { ColumnDesc, defaultDateFormat, getsortByIndex, iconInRowSx } from "./tableUtils";
import { ColumnDesc, defaultDateFormat, getSortByIndex, iconInRowSx } from "./tableUtils";
import { getDateTime, getTypeFromDf } from "../../utils";
import { getSuffixedClassNames } from "./utils";

Expand Down Expand Up @@ -323,7 +323,7 @@ const TableFilter = (props: TableFilterProps) => {
if (props.colsOrder) {
return props.colsOrder;
}
return Object.keys(columns).sort(getsortByIndex(columns));
return Object.keys(columns).sort(getSortByIndex(columns));
}, [props.colsOrder, columns]);

const onShowFilterClick = useCallback(() => setShowFilter((f) => !f), []);
Expand Down
4 changes: 2 additions & 2 deletions frontend/taipy-gui/src/components/Taipy/TableSort.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import Switch from "@mui/material/Switch";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";

import { ColumnDesc, getsortByIndex, iconInRowSx } from "./tableUtils";
import { ColumnDesc, getSortByIndex, iconInRowSx } from "./tableUtils";
import { getSuffixedClassNames } from "./utils";

export interface SortDesc {
Expand Down Expand Up @@ -181,7 +181,7 @@ const TableSort = (props: TableSortProps) => {
if (props.colsOrder) {
return props.colsOrder;
}
return Object.keys(columns).sort(getsortByIndex(columns));
return Object.keys(columns).sort(getSortByIndex(columns));
}, [props.colsOrder, columns]);

const onShowSortClick = useCallback(() => setShowSort((f) => !f), []);
Expand Down
2 changes: 1 addition & 1 deletion frontend/taipy-gui/src/components/Taipy/tableUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ interface EditableCellProps {

export const defaultColumns = {} as Record<string, ColumnDesc>;

export const getsortByIndex = (cols: Record<string, ColumnDesc>) => (key1: string, key2: string) =>
export const getSortByIndex = (cols: Record<string, ColumnDesc>) => (key1: string, key2: string) =>
cols[key1].index < cols[key2].index ? -1 : cols[key1].index > cols[key2].index ? 1 : 0;

const formatValue = (val: RowValue, col: ColumnDesc, formatConf: FormatConfig, nanValue?: string): string => {
Expand Down

0 comments on commit acde16b

Please sign in to comment.