@gisce/react-ooui 0.1.0

package/src/widgets/views/Dashboard/dashboardHelper.ts

@@ -0,0 +1,71 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { DashboardItem as DashboardItemOoui, parseContext } from "@gisce/ooui";
+import { v4 as uuidv4 } from "uuid";
+
+export async function fetchAction({
+  actionId,
+  rootContext = {},
+  globalValues = {},
+}: {
+  actionId: number;
+  rootContext?: any;
+  globalValues?: any;
+}): Promise<any> {
+  const actionType = "ir.actions.act_window";
+  const action = `${actionType},${actionId}`;
+
+  const dataForAction = await ConnectionProvider.getHandler().getActionData({
+    action,
+    context: rootContext,
+  });
+
+  const parsedContext = parseContext({
+    context: dataForAction.context,
+    values: globalValues,
+    fields: {},
+  });
+
+  const parsedDomain = dataForAction.domain
+    ? await ConnectionProvider.getHandler().evalDomain({
+        domain: dataForAction.domain,
+        values: globalValues,
+        context: { ...rootContext, ...parsedContext },
+      })
+    : [];
+
+  const { res_model: model, views, name: title, limit } = dataForAction;
+
+  const finalViews = [];
+
+  for (const viewArray of views) {
+    const [id, viewType] = viewArray;
+
+    if (!id) {
+      const { view_id } = await ConnectionProvider.getHandler().getView({
+        model,
+        type: viewType,
+        id,
+        context: { ...rootContext, ...parsedContext },
+      });
+      finalViews.push([view_id, viewType]);
+    } else {
+      finalViews.push(viewArray);
+    }
+  }
+
+  const [id, type] = finalViews[0];
+  const initialView = { id, type };
+
+  return {
+    title,
+    actionId,
+    actionType,
+    key: uuidv4(),
+    views,
+    model,
+    context: { ...rootContext, ...parsedContext },
+    domain: parsedDomain,
+    initialView,
+    limit,
+  };
+}

package/src/widgets/views/DashboardGrid/DashboardGrid.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { DashboardGridProps } from "./DashboardGrid.types";
+import { WidthProvider, Responsive } from "react-grid-layout";
+import "react-resizable/css/styles.css";
+import "react-grid-layout/css/styles.css";
+
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+
+export const DashboardGrid = (props: DashboardGridProps) => {
+  const { children = [], onPositionItemsChanged } = props;
+
+  const items = React.Children.map(
+    children,
+    (
+      child:
+        | boolean
+        | React.ReactChild
+        | React.ReactFragment
+        | React.ReactPortal
+    ) => {
+      const { parms, id } = (child as any).props;
+      return (
+        <div key={id} data-grid={parms}>
+          {child}
+        </div>
+      );
+    }
+  );
+
+  return (
+    <ResponsiveReactGridLayout
+      className="layout"
+      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      draggableHandle={".draggable-head"}
+      rowHeight={30}
+      onLayoutChange={(layout) => {
+        onPositionItemsChanged?.(
+          layout.map((item) => {
+            return {
+              id: parseInt(item.i.replace(".$", ""), 10),
+              x: item.x,
+              y: item.y,
+              w: item.w,
+              h: item.h,
+            };
+          })
+        );
+      }}
+    >
+      {items}
+    </ResponsiveReactGridLayout>
+  );
+};

package/src/widgets/views/DashboardGrid/DashboardGrid.types.ts

@@ -0,0 +1,4 @@
+export type DashboardGridProps = {
+  children?: React.ReactElement<any>[] | any;
+  onPositionItemsChanged?: (items: any[]) => void;
+};

package/src/widgets/views/DashboardGrid/DashboardGridItem.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { DashboardGridItemProps } from "./DashboardGridItem.types";
+import { ExportOutlined } from "@ant-design/icons";
+import { Row, Col } from "antd";
+import { Typography } from "antd";
+
+const { Text } = Typography;
+
+export const DashboardGridItem = (props: DashboardGridItemProps) => {
+  const { id, title, children, action, openAction } = props;
+
+  return (
+    <div
+      className={"shadow-md rounded"}
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        border: "1px solid #eee",
+        backgroundColor: "white",
+      }}
+    >
+      <Row
+        className="bg-blueGray-100"
+        align="middle"
+        style={{ borderBottom: "1px solid #ddd" }}
+        wrap={false}
+      >
+        <Col
+          flex="auto"
+          className="draggable-head"
+          style={{
+            fontWeight: "bold",
+            padding: "0.5rem",
+            cursor: "grab",
+            overflow: "hidden",
+          }}
+        >
+          <Text ellipsis={true}>{title}</Text>
+        </Col>
+        {action && (
+          <Col flex="25px" style={{ padding: "0.5rem" }}>
+            <Row justify="end" align="middle">
+              <ExportOutlined
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  openAction?.(action);
+                }}
+              />
+            </Row>
+          </Col>
+        )}
+      </Row>
+      {children}
+    </div>
+  );
+};

package/src/widgets/views/DashboardGrid/DashboardGridItem.types.ts

@@ -0,0 +1,10 @@
+import { ShortcutApi } from "@/ui/FavouriteButton";
+
+export type DashboardGridItemProps = {
+  title: string;
+  id: string;
+  children?: React.ReactNode;
+  parms: any;
+  action?: ShortcutApi;
+  openAction?: (shortcutApi?: ShortcutApi) => void;
+};

package/src/widgets/views/DashboardGrid/index.ts

@@ -0,0 +1,4 @@
+export * from "./DashboardGrid";
+export * from "./DashboardGridItem";
+export * from "./DashboardGrid.types";
+export * from "./DashboardGridItem.types";