Skip to content

Option to Show/Hide save/cancel button in table toolbar + Expose functions with table to cancel changes #1129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -642,6 +642,26 @@ TableTmpComp = withMethodExposing(TableTmpComp, [
comp.children.selection.children.selectedRowKeys.dispatchChangeValueAction([]);
},
},
{
method: {
name: "cancelChanges",
description: "",
params: [],
},
execute: (comp, values) => {
comp.children.columns.dispatchClearChangeSet();
},
},
{
method: {
name: "cancelInsertChanges",
description: "",
params: [],
},
execute: (comp, values) => {
comp.children.columns.dispatchClearInsertSet();
},
},
]);

// exposing data
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -489,21 +489,40 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
<>
<Section name={sectionNames.interaction}>
{comp.children.onEvent.getPropertyView()}
{comp.children.selection.getPropertyView()}
{hiddenPropertyView(comp.children)}
{loadingPropertyView(comp.children)}
{comp.children.showDataLoadSpinner.propertyView({
label: trans("table.showDataLoadSpinner"),
})}
{comp.children.selection.getPropertyView()}
{comp.children.editModeClicks.propertyView({
label: trans("table.editMode"),
radioButton: true,
})}
{comp.children.searchText.propertyView({
label: trans("table.searchText"),
tooltip: trans("table.searchTextTooltip"),
placeholder: "{{input1.value}}",
})}
</Section>

<Section name={"Summary"}>
{comp.children.showSummary.propertyView({
label: trans("table.showSummary")
})}
{comp.children.summaryRows.propertyView({
{comp.children.showSummary.getView() &&
comp.children.summaryRows.propertyView({
label: trans("table.totalSummaryRows"),
radioButton: true,
})}
</Section>

<Section name={"Insert Rows"}>
{comp.children.inlineAddNewRow.propertyView({
label: trans("table.inlineAddNewRow")
})}
</Section>

<Section name={trans("prop.toolbar")}>
{comp.children.toolbar.getPropertyView()}
</Section>
Expand Down Expand Up @@ -550,27 +569,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
<>
<Section name={sectionNames.advanced}>
{comp.children.expansion.getPropertyView()}
{comp.children.inlineAddNewRow.propertyView({
label: trans("table.inlineAddNewRow")
})}
{comp.children.showDataLoadSpinner.propertyView({
label: trans("table.showDataLoadSpinner"),
})}
{comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") })}
{comp.children.dynamicColumn.getView() &&
comp.children.dynamicColumnConfig.propertyView({
label: trans("table.dynamicColumnConfig"),
tooltip: trans("table.dynamicColumnConfigDesc"),
})}
{comp.children.editModeClicks.propertyView({
label: trans("table.editMode"),
radioButton: true,
})}
{comp.children.searchText.propertyView({
label: trans("table.searchText"),
tooltip: trans("table.searchTextTooltip"),
placeholder: "{{input1.value}}",
})}
</Section>
</>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,7 @@ export const TableToolbarComp = (function () {
filter: stateComp<TableFilter>({ stackType: "and", filters: [] }),
position: dropdownControl(positionOptions, "below"),
columnSeparator: withDefault(StringControl, ','),
showUpdateButtons: withDefault(BoolControl, true),
};

return new ControlNodeCompBuilder(childrenMap, (props, dispatch) => {
Expand All @@ -587,6 +588,7 @@ export const TableToolbarComp = (function () {
label: trans("table.fixedToolbar"),
tooltip: trans("table.fixedToolbarTooltip")
}),
children.showUpdateButtons.propertyView({ label: trans("table.showUpdateButtons")}),
children.showFilter.propertyView({ label: trans("table.showFilter") }),
children.showRefresh.propertyView({ label: trans("table.showRefresh") }),
children.showDownload.propertyView({ label: trans("table.showDownload") }),
Expand Down Expand Up @@ -816,7 +818,7 @@ export function TableToolbar(props: {
}
}}
/>
{hasChange && (
{hasChange && toolbar.showUpdateButtons && (
<SaveChangeButtons>
<Button onClick={onCancelChanges}>{trans("cancel")}</Button>
<Button type="primary" onClick={onSaveChanges}>
Expand Down
13 changes: 11 additions & 2 deletions client/packages/lowcoder/src/i18n/locales/de.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1516,7 +1516,14 @@ export const de: typeof en = {
"falseValues": "Text Wenn Falsch",
"allColumn": "Alle",
"visibleColumn": "Sichtbar",
"emptyColumns": "Derzeit sind keine Spalten sichtbar"
"emptyColumns": "Derzeit sind keine Spalten sichtbar",
"showSummary": "Zusammenfassungszeile(n) anzeigen",
"totalSummaryRows": "Gesamtzahl der Zeilen",
"inlineAddNewRow": "Inline neue Zeile(n) hinzufügen",
"editMode": "Bearbeitungsmodus",
"singleClick": "Einzelklick",
"doubleClick": "Doppelklick",
"showUpdateButtons": "Schaltflächen zum Speichern/Abbrechen anzeigen"
},
"image": {
...en.image,
Expand Down Expand Up @@ -2350,7 +2357,9 @@ export const de: typeof en = {
"clone": "Klonen",
"editorMode_layout": "Layout",
"editorMode_logic": "Logik",
"editorMode_both": "Beide"
"editorMode_both": "Beide",
"editorMode_layout_tooltip": "Passen Sie im rechten Fenster das Erscheinungsbild und Layout der Komponente an. Passen Sie Aussehen, Stil und Animationen an.",
"editorMode_logic_tooltip": "Richten Sie im rechten Fenster ein, wie Ihre Komponente funktioniert und interagiert. Verwalten Sie den Inhalt und das interaktive Verhalten."
},
"userAuth": {
...en.userAuth,
Expand Down
13 changes: 8 additions & 5 deletions client/packages/lowcoder/src/i18n/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1854,7 +1854,7 @@ export const en = {
"columnSeparatorTooltip": "Column Separator (\"delimiter\") in downloaded CSV file. \n\nRecommendations:\n- Comma (,)\n- Semicolon (;)\n- Pipe (|)\n- Tab (\\t)",
"columnSetting": "Show Columns Visibility Button",
"searchText": "Search Text",
"searchTextTooltip": "Search and Filter the Data Presented in the Table",
"searchTextTooltip": "Search and Filter the Data, which is currently Presented in the Table. This is a frontend-only Search and Does Not Affect the Data Source Query.)",
"showQuickJumper": "Show Quick Jumper",
"hideOnSinglePage": "Hide on Single Page",
"showSizeChanger": "Show Size Changer Button",
Expand Down Expand Up @@ -1999,12 +1999,13 @@ export const en = {
"allColumn": "All",
"visibleColumn": "Visible",
"emptyColumns": "No Columns Are Currently Visible",
"showSummary": "Show Summary Row",
"showSummary": "Show Summary Row(s)",
"totalSummaryRows": "Total Rows",
"inlineAddNewRow": "Inline Add New Row",
"inlineAddNewRow": "Inline Add New Row(s)",
"editMode": "Edit Mode",
"singleClick": "Single Click",
"doubleClick": "Double Click",
"showUpdateButtons": "Show Save/Cancel Buttons",
},


Expand Down Expand Up @@ -2142,7 +2143,7 @@ export const en = {
"single": "Single",
"multiple": "Multiple",
"close": "Close",
"mode": "Select Mode"
"mode": "Row Select Mode"
},
"container": {
"title": "Displayed Container Title",
Expand Down Expand Up @@ -2905,7 +2906,9 @@ export const en = {
"clone": "Clone",
"editorMode_layout": "Layout",
"editorMode_logic": "Logic",
"editorMode_both": "Both"
"editorMode_both": "Both",
"editorMode_layout_tooltip": "Customise the component's appearance and layout, in the right window. Adjust how it looks, styles, and animates.",
"editorMode_logic_tooltip": "Set up how your component works and interacts, in the right window. Manage its content and interactive behaviours."
},
"userAuth": {
"registerByEmail": "Sign Up",
Expand Down
13 changes: 11 additions & 2 deletions client/packages/lowcoder/src/i18n/locales/pt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2051,7 +2051,14 @@ export const pt: typeof en = {
"iconNull": "Ícone Quando Nulo",
"allColumn": "Todas",
"visibleColumn": "Visível",
"emptyColumns": "Nenhuma coluna está atualmente visível"
"emptyColumns": "Nenhuma coluna está atualmente visível",
"showSummary": "Mostrar linha(s) de resumo",
"totalSummaryRows": "Total de linhas",
"inlineAddNewRow": "Adicionar nova(s) linha(s) em linha",
"editMode": "Modo de edição",
"singleClick": "Clique Único",
"doubleClick": "Clique duplo",
"showUpdateButtons": "Mostrar botões Salvar/Cancelar",
},


Expand Down Expand Up @@ -2959,7 +2966,9 @@ export const pt: typeof en = {
"clone": "Clonar",
"editorMode_layout": "Layout",
"editorMode_logic": "Lógica",
"editorMode_both": "Ambos"
"editorMode_both": "Ambos",
"editorMode_layout_tooltip": "Personalize a aparência e o layout do componente, na janela direita. Ajuste sua aparência, estilo e animação.",
"editorMode_logic_tooltip": "Configure como seu componente funciona e interage, na janela direita. Gerencie seu conteúdo e comportamentos interativos."
},
"userAuth": {
...en.userAuth,
Expand Down
9 changes: 9 additions & 0 deletions client/packages/lowcoder/src/i18n/locales/zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,13 @@ export const zh: typeof en = {
allColumn: "全部",
visibleColumn: "可见",
emptyColumns: "当前没有可见列",
showSummary: "显示摘要行",
totalSummaryRows: "总行数",
inlineAddNewRow: "内联添加新行",
editMode: "编辑模式",
singleClick: "单击",
doubleClick: "双击",
showUpdateButtons: "显示保存/取消按钮",
},
image: {
...en.image,
Expand Down Expand Up @@ -2344,6 +2351,8 @@ export const zh: typeof en = {
editorMode_layout: "应用程序布局",
editorMode_logic: "应用程序逻辑",
editorMode_both: "两者",
editorMode_layout_tooltip: "在右侧窗口中自定义组件的外观和布局。调整它的外观、样式和动画。",
editorMode_logic_tooltip: "在右侧窗口中设置组件的工作和交互方式。管理其内容和交互行为。"
},
userAuth: {
...en.userAuth,
Expand Down
11 changes: 8 additions & 3 deletions client/packages/lowcoder/src/pages/common/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermis
import { getBrandingConfig } from "../../redux/selectors/configSelectors";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
import { EditorContext } from "../../comps/editorState";
import Tooltip from "antd/es/tooltip";

const StyledLink = styled.a`
display: flex;
Expand Down Expand Up @@ -320,11 +321,13 @@ export default function Header(props: HeaderProps) {
const editorModeOptions = [
{
label: trans("header.editorMode_layout"),
tooltip: trans("header.editorMode_layout_tooltip"),
key: "editorModeSelector_layout",
value: "layout",
},
{
label: trans("header.editorMode_logic"),
tooltip: trans("header.editorMode_logic_tooltip"),
key: "editorModeSelector_logic",
value: "logic",
},
Expand Down Expand Up @@ -398,9 +401,11 @@ export default function Header(props: HeaderProps) {
size="small"
>
{editorModeOptions.map((option) => (
<Radio.Button key={option.key} value={option.value}>
{option.label}
</Radio.Button>
<Tooltip title={option.tooltip}>
<Radio.Button key={option.key} value={option.value}>
{option.label}
</Radio.Button>
</Tooltip>
))}
</Radio.Group>
<IconRadius>
Expand Down
Loading