@gisce/react-ooui 1.4.17-rc.1 → 1.4.17

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAmHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAiO9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAyB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAmHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA2O9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.4.17-rc.1",
+  "version": "1.4.17",
   "files": [
     "dist",
     "src",
@@ -35,7 +35,7 @@
     "@gisce/fiber-diagram": "^1.1.0-rc.3",
     "@gisce/ooui": "^0.22.3",
     "@gisce/react-formiga-components": "^1.0.9-rc.21",
-    "@gisce/react-formiga-table": "^0.8.7-rc.1",
+    "@gisce/react-formiga-table": "^0.8.6",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
     "antd": "^5.5.2",

package/src/common/SelectAllRecordsRow.tsx

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+import { useContext, useState } from "react";
+import React from "react";
+import { Spin } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import Link from "antd/es/typography/Link";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const SelectAllRecordsRow = ({
+  numberOfVisibleSelectedRows,
+  totalRecords,
+  numberOfTotalRows,
+  onSelectAllRecords,
+  numberOfRealSelectedRows,
+}: {
+  numberOfVisibleSelectedRows: number;
+  totalRecords: number;
+  numberOfTotalRows: number;
+  numberOfRealSelectedRows: number;
+  onSelectAllRecords: () => Promise<void>;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const translations = {
+    recordsSelected: t("recordsSelected"),
+    selectAllRecords: t("selectAllRecords"),
+    allRecordsSelected: t("allRecordsSelected"),
+  };
+
+  if (numberOfTotalRows === 0) {
+    return null;
+  }
+
+  if (
+    numberOfVisibleSelectedRows < numberOfTotalRows &&
+    numberOfRealSelectedRows <= numberOfTotalRows
+  ) {
+    return null;
+  }
+
+  const handleClick = async (event: any) => {
+    event.preventDefault(); // prevent the default action (navigation) from happening
+    event.stopPropagation();
+    setLoading(true);
+    await onSelectAllRecords();
+    setLoading(false);
+  };
+
+  const selectRowsComponent = (
+    <span>
+      {translations.recordsSelected.replace(
+        "{numberOfSelectedRows}",
+        numberOfVisibleSelectedRows.toString()
+      ) + " "}
+
+      {loading ? (
+        <Spin />
+      ) : (
+        <Link onClick={handleClick} style={{ fontWeight: 600 }}>
+          {translations.selectAllRecords.replace(
+            "{totalRecords}",
+            totalRecords.toString()
+          )}
+        </Link>
+      )}
+    </span>
+  );
+
+  const allRowsAreSelected = (
+    <span style={{ fontWeight: 600 }}>
+      {translations.allRecordsSelected.replace(
+        "{totalRecords}",
+        numberOfRealSelectedRows.toString()
+      ) + " "}
+    </span>
+  );
+
+  return (
+    <Container>
+      {numberOfRealSelectedRows > numberOfTotalRows
+        ? allRowsAreSelected
+        : selectRowsComponent}
+    </Container>
+  );
+};

package/src/widgets/views/Tree.tsx

@@ -31,6 +31,7 @@ import dayjs from "dayjs";
 import Avatar from "../custom/Avatar";
 import { TagInput } from "../custom/Tag";
 import { DatePickerConfig } from "@/common/DatePicker";
+import { SelectAllRecordsRow } from "@/common/SelectAllRecordsRow";
 
 type Props = {
   total?: number;
@@ -271,7 +272,7 @@ function Tree(props: Props): React.ReactElement {
       <Spin className="pb-4" />
     ) : (
       <Row align="bottom" className="pb-4">
-        <Col span={12}>
+        <Col span={8}>
           <Pagination
             total={total}
             pageSize={
@@ -282,7 +283,18 @@ function Tree(props: Props): React.ReactElement {
             onChange={onRequestPageChange}
           />
         </Col>
-        <Col span={12} className="text-right">
+        <Col span={8} className="text-center">
+          {onSelectAllRecords && (
+            <SelectAllRecordsRow
+              numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
+              numberOfRealSelectedRows={rowSelection?.selectedRowKeys.length}
+              numberOfTotalRows={items.length}
+              totalRecords={total || 0}
+              onSelectAllRecords={onSelectAllRecords}
+            />
+          )}
+        </Col>
+        <Col span={8} className="text-right">
           {summary}
         </Col>
       </Row>
@@ -338,7 +350,13 @@ function Tree(props: Props): React.ReactElement {
     }
   }
 
-  return treeOoui.current === null ? (
+  const numberOfVisibleSelectedRows = items.filter((entry) =>
+    rowSelection?.selectedRowKeys.includes(entry.id)
+  ).length;
+
+  return treeOoui.current === null ||
+    !dataTable ||
+    dataTable.columns?.length === 0 ? (
     <Spin style={{ padding: "2rem" }} />
   ) : (
     <div>
@@ -383,13 +401,6 @@ function Tree(props: Props): React.ReactElement {
               }
             : undefined
         }
-        onSelectAllRecords={onSelectAllRecords}
-        totalItems={total || 0}
-        translations={{
-          recordsSelected: t("recordsSelected"),
-          selectAllRecords: t("selectAllRecords"),
-          allRecordsSelected: t("allRecordsSelected"),
-        }}
       />
       {getSums()}
     </div>