Merge pull request #1129 from lowcoder-org/table-summary-row

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

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx

@@ -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

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -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>
@@ -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>
         </>
       )}

client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx

@@ -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) => {
@@ -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") }),
@@ -816,7 +818,7 @@ export function TableToolbar(props: {
             }
           }}
         />
-        {hasChange && (
+        {hasChange && toolbar.showUpdateButtons && (
           <SaveChangeButtons>
             <Button onClick={onCancelChanges}>{trans("cancel")}</Button>
             <Button type="primary" onClick={onSaveChanges}>

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -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,
@@ -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,

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -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",
@@ -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",
   },
 
 
@@ -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",
@@ -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",

client/packages/lowcoder/src/i18n/locales/pt.ts

@@ -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",
     },
 
 
@@ -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,

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1546,6 +1546,13 @@ export const zh: typeof en = {
         allColumn: "全部",
         visibleColumn: "可见",
         emptyColumns: "当前没有可见列",
+        showSummary: "显示摘要行",
+        totalSummaryRows: "总行数",
+        inlineAddNewRow: "内联添加新行",
+        editMode: "编辑模式",
+        singleClick: "单击",
+        doubleClick: "双击",
+        showUpdateButtons: "显示保存/取消按钮",
     },
     image: {
         ...en.image,
@@ -2344,6 +2351,8 @@ export const zh: typeof en = {
         editorMode_layout: "应用程序布局",
         editorMode_logic: "应用程序逻辑",
         editorMode_both: "两者",
+        editorMode_layout_tooltip: "在右侧窗口中自定义组件的外观和布局。调整它的外观、样式和动画。",
+        editorMode_logic_tooltip: "在右侧窗口中设置组件的工作和交互方式。管理其内容和交互行为。"
     },
     userAuth: {
         ...en.userAuth,

client/packages/lowcoder/src/pages/common/header.tsx

@@ -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;
@@ -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",
     },
@@ -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>