@gisce/react-ooui 0.1.0

package/src/widgets/base/one2many/One2manyTopBar.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import ButtonWithTooltip from "@/common/ButtonWithTooltip";
+import { ViewModes } from "@/widgets/base/one2many/One2many";
+
+import {
+  FileAddOutlined,
+  DeleteOutlined,
+  LeftOutlined,
+  RightOutlined,
+  AlignLeftOutlined,
+  SearchOutlined,
+  ApiOutlined,
+} from "@ant-design/icons";
+
+type One2manyTopBarProps = {
+  title: string;
+  mode: ViewModes;
+  isMany2Many: boolean;
+  readOnly: boolean;
+  formHasChanges: boolean;
+  onToggleViewMode: () => void;
+  onCreateItem: () => void;
+  onDelete: () => void;
+  totalItems: number;
+  currentItemIndex: number;
+  onPreviousItem: () => void;
+  onNextItem: () => void;
+  onSearchItem: () => void;
+  selectedRowKeys: string[];
+};
+
+export const One2manyTopBar = (props: One2manyTopBarProps) => {
+  const {
+    title: titleString,
+    readOnly,
+    onCreateItem,
+    onToggleViewMode,
+    mode,
+    onDelete,
+    totalItems,
+    currentItemIndex,
+    onPreviousItem,
+    onNextItem,
+    isMany2Many,
+    onSearchItem,
+    selectedRowKeys,
+  } = props;
+
+  function separator() {
+    return <div className="inline-block w-3" />;
+  }
+
+  function title() {
+    return (
+      <div className="h-8 flex flex-grow bg-gray-700 text-gray-200">
+        <div className="h-full flex flex-col justify-center items-center">
+          <span className="pl-2 font-bold">{titleString}</span>
+        </div>
+      </div>
+    );
+  }
+
+  function deleteButton() {
+    return (
+      <ButtonWithTooltip
+        tooltip={isMany2Many ? "Unlink" : "Delete"}
+        icon={isMany2Many ? <ApiOutlined /> : <DeleteOutlined />}
+        onClick={onDelete}
+        disabled={
+          totalItems === 0 ||
+          readOnly ||
+          (mode !== "form" && selectedRowKeys.length === 0)
+        }
+      />
+    );
+  }
+
+  function index() {
+    let itemToShow = "_";
+    if (totalItems === 0) {
+      itemToShow = "_";
+    } else {
+      itemToShow = (currentItemIndex + 1).toString();
+    }
+    return (
+      <span className="pl-1 pr-1">
+        ({itemToShow}/{totalItems})
+      </span>
+    );
+  }
+
+  function itemBrowser() {
+    return (
+      <>
+        {separator()}
+        <ButtonWithTooltip
+          tooltip={"Previous item"}
+          icon={<LeftOutlined />}
+          onClick={onPreviousItem}
+        />
+        {index()}
+        <ButtonWithTooltip
+          tooltip={"Next item"}
+          icon={<RightOutlined />}
+          onClick={onNextItem}
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="flex mb-2">
+      {title()}
+      <div className="h-8 flex-none pl-2">
+        {mode !== "graph" && (
+          <ButtonWithTooltip
+            tooltip={"Create new item"}
+            icon={<FileAddOutlined />}
+            disabled={readOnly}
+            onClick={onCreateItem}
+          />
+        )}
+        {isMany2Many && (
+          <ButtonWithTooltip
+            tooltip={"Search existing item"}
+            icon={<SearchOutlined />}
+            disabled={readOnly}
+            onClick={onSearchItem}
+          />
+        )}
+        {mode !== "graph" && separator()}
+        {mode !== "graph" && deleteButton()}
+        {mode === "form" && itemBrowser()}
+        {separator()}
+        <ButtonWithTooltip
+          tooltip={"Toggle view mode"}
+          icon={<AlignLeftOutlined />}
+          onClick={onToggleViewMode}
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/containers/Container.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Container as ContainerOoui, Widget, Label } from "@gisce/ooui";
+import { createReactWidget } from "@/widgets/WidgetFactory";
+
+import {
+  getTemplateColumns,
+  fillRowWithEmptiesToFit,
+  getSpanStyleForItem,
+  expandWidgetsIfNeeded,
+  getMaxColspanForRows,
+  getSingleRowTemplateColumns,
+} from "@/helpers/containerHelper";
+
+type Props = {
+  container: ContainerOoui;
+  responsiveBehaviour: boolean;
+};
+
+const Container = (props: Props): React.ReactElement => {
+  const { container, responsiveBehaviour } = props;
+  const { rows } = container;
+  let { columns } = container;
+
+  // We check for the largest colspan for each row
+  // And if the value is smaller than the columns value
+  // We adjust the columns value
+  const maxColspanForRows = getMaxColspanForRows(rows);
+  if (maxColspanForRows < columns) {
+    columns = maxColspanForRows;
+  }
+
+  let fieldInRows = false;
+  let firstRow: Widget[] = [];
+
+  const content = rows.map((row: Widget[], i) => {
+    const rowWithoutInvisibleFields = row.filter((widget) => {
+      return !widget.invisible;
+    });
+
+    const rowWithExpandedItems = expandWidgetsIfNeeded({
+      row: rowWithoutInvisibleFields,
+      numberOfColumns: columns,
+    });
+
+    const rowWithEmptiesToFit = fillRowWithEmptiesToFit({
+      row: rowWithExpandedItems,
+      numberOfColumns: columns,
+      mustFillWithEmpties: responsiveBehaviour,
+    });
+
+    if (i === 0) {
+      firstRow = firstRow.concat(rowWithEmptiesToFit);
+    }
+
+    return rowWithEmptiesToFit.map((item: Widget, j: number) => {
+      // We check if we have any label+field inside the container.
+      // In this scenario, we must format the grid accordingly
+      // Otherwise, the grid will divide uniformly
+      if (item instanceof Label && (item as Label).fieldForLabel) {
+        fieldInRows = true;
+      }
+
+      const itemRowIndex = row.indexOf(item);
+
+      return (
+        <div
+          key={`${i.toString()}-${itemRowIndex.toString()}`}
+          style={{
+            ...getSpanStyleForItem({ item, responsiveBehaviour }),
+            minWidth: 0,
+          }}
+        >
+          {createReactWidget({
+            ooui: item,
+            responsiveBehaviour,
+          })}
+        </div>
+      );
+    });
+  });
+
+  const templateColumns =
+    rows.length === 1
+      ? getSingleRowTemplateColumns(firstRow, columns)
+      : getTemplateColumns(columns, fieldInRows);
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: responsiveBehaviour ? "auto" : templateColumns,
+    gap: "1rem",
+    minHeight: 0,
+    minWidth: 0,
+  };
+
+  return <div style={gridStyle}>{content}</div>;
+};
+
+export default Container;

package/src/widgets/containers/Group.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Group as GroupOoui } from "@gisce/ooui";
+import Container from "./Container";
+import Fieldset from "@/ui/Fieldset";
+
+type Props = {
+  ooui: GroupOoui;
+  showLabel?: boolean;
+  responsiveBehaviour: boolean;
+};
+
+function Group(props: Props): React.ReactElement {
+  const { ooui, showLabel = true, responsiveBehaviour } = props;
+
+  return (
+    <>
+      {ooui.label && showLabel ? (
+        <Fieldset label={ooui.label}>
+          <Container
+            container={ooui!.container}
+            responsiveBehaviour={responsiveBehaviour}
+          />
+        </Fieldset>
+      ) : (
+        <Container
+          container={ooui!.container}
+          responsiveBehaviour={responsiveBehaviour}
+        />
+      )}
+    </>
+  );
+}
+
+export default Group;

package/src/widgets/containers/Notebook.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Tabs } from "antd";
+const { TabPane } = Tabs;
+
+import { Notebook as NotebookOoui, Group as GroupOoui } from "@gisce/ooui";
+import { Group } from "@/index";
+
+type Props = {
+  ooui: NotebookOoui;
+  responsiveBehaviour: boolean;
+};
+
+function Notebook(props: Props): React.ReactElement {
+  const { ooui, responsiveBehaviour } = props;
+  const tabs = [].concat.apply([], ooui!.container.rows);
+  return (
+    <Tabs defaultActiveKey="1">
+      {tabs
+        .filter((page: any) => !page.invisible)
+        .map((page: any) => {
+          return (
+            <TabPane tab={page.label} key={page.label}>
+              <Group
+                ooui={page as GroupOoui}
+                showLabel={false}
+                responsiveBehaviour={responsiveBehaviour}
+              />
+            </TabPane>
+          );
+        })}
+    </Tabs>
+  );
+}
+
+export default Notebook;

package/src/widgets/custom/FiberGrid.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Field from "@/common/Field";
+import { Char as CharOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+import { GridUi } from "fiber-diagram";
+
+export const FiberGrid = (props: WidgetProps) => {
+  const { ooui } = props;
+  const { id, readOnly, required } = ooui as CharOoui;
+  // const requiredClass =
+  //   required && !readOnly ? Config.requiredClass : undefined;
+
+  return (
+    <Field required={required} {...props}>
+      <FiberGridInput />
+    </Field>
+  );
+};
+
+interface FiberGridInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const FiberGridInput = (props: FiberGridInputProps) => {
+  const { value, onChange } = props;
+
+  if (!value) {
+    return null;
+  }
+
+  // Validate string json
+  try {
+    JSON.parse(value);
+  } catch (e) {
+    console.log(e);
+    return null;
+  }
+
+  return (
+    <GridUi
+      inputJson={value}
+      onChange={(newValue) => {
+        if (onChange) {
+          onChange(newValue);
+        }
+      }}
+    />
+  );
+};

package/src/widgets/custom/Indicator.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Tooltip } from "antd";
+import { Statistic, Card } from "antd";
+import { Indicator as IndicatorOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import Field from "@/common/Field";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import iconMapper from "@/helpers/iconMapper";
+
+type IndicatorProps = WidgetProps & {
+  ooui: IndicatorOoui
+  value?: number;
+};
+
+export const Indicator = (props: IndicatorProps) => {
+  const { ooui } = props;
+
+  return (
+    <Field ooui={ooui}>
+      <IndicatorInput ooui={ooui} />
+    </Field>
+  );
+};
+
+type IndicatorInputProps = {
+  ooui: IndicatorOoui;
+  value?: any;
+}
+
+const IndicatorInput = (props: IndicatorInputProps) => {
+  const { ooui, value } = props;
+  const title = (
+    <>
+      <span>{ooui.label} </span>
+      {ooui.tooltip &&
+        <Tooltip title={ooui.tooltip}>
+          <QuestionCircleOutlined className="text-xs text-blue-400 pr-1"/>
+        </Tooltip>
+      }
+    </>
+  );
+  const Icon: React.ElementType = iconMapper(ooui.icon);
+  let formattedValue = value;
+  if (ooui.selectionValues.size) {
+    formattedValue = ooui.selectionValues.get(value);
+  } else if (Array.isArray(value)) {
+    formattedValue = value[1];
+  }
+  const field = (
+    <Statistic
+      title={title}
+      prefix={Icon && <Icon/>}
+      suffix={ooui.suffix}
+      value={formattedValue}
+    />
+  )
+  if (ooui.card) {
+    return (
+      <Card>
+        {field}
+      </Card>
+    );
+  } else {
+    return field;
+  }
+}

package/src/widgets/custom/Timeline.tsx

@@ -0,0 +1,190 @@
+import React, { useContext, useState } from "react";
+import { Timeline as TimelineOoui } from "@gisce/ooui";
+import Field from "@/common/Field";
+import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { Views, ViewType } from "@/types";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import ConnectionProvider from "@/ConnectionProvider";
+import { Spin, Alert, Timeline as AntTimeline } from "antd";
+import { readObjectValues } from "@/helpers/one2manyHelper";
+import { FormModal } from "../modals/FormModal";
+
+type TimelineProps = {
+  ooui: TimelineOoui;
+};
+
+type TimelineInputProps = TimelineProps & {
+  value?: One2manyValue;
+  onChange?: (value: One2manyValue) => void;
+  views: Views;
+};
+
+export const Timeline = (props: TimelineProps) => {
+  const { ooui } = props;
+  const { relation, context, views: oouiViews } = ooui;
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string>();
+  const [views, setViews] = useState<Views>(new Map<string, any>());
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [ooui]);
+
+  const getViewData = async (type: ViewType) => {
+    if (oouiViews && oouiViews[type]) {
+      return oouiViews[type];
+    }
+    return await ConnectionProvider.getHandler().getView({
+      model: relation,
+      type,
+      context: { ...getContext?.(), ...context },
+    });
+  };
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const formView = await getViewData("form");
+      const treeView = await getViewData("tree");
+      views.set("form", formView);
+      views.set("tree", treeView);
+      setViews(views);
+    } catch (err) {
+      setError(err as any);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  return (
+    <Field type={"array"} {...props}>
+      <TimelineInput ooui={ooui} views={views} />
+    </Field>
+  );
+};
+
+export const TimelineInput = (props: TimelineInputProps) => {
+  const { value, views, ooui, onChange } = props;
+  const { items = [] } = value || {};
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const [showFormModal, setShowFormModal] = useState<boolean>(false);
+  const [modalItem, setModalItem] = useState<One2manyItem>();
+  const { relation, context, readOnly, summaryField, titleField } = ooui;
+  const itemsToShow = items.filter((item) => item.values);
+
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [items]);
+
+  const triggerChange = (changedValue: Array<One2manyItem>) => {
+    onChange?.({
+      items: changedValue,
+    });
+  };
+
+  async function fetchData() {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const itemsWithValues = await readObjectValues({
+        treeFields: views.get("tree").fields,
+        formFields: views.get("form").fields,
+        model: relation,
+        items,
+        context: { ...getContext?.(), ...context },
+      });
+
+      triggerChange(itemsWithValues);
+    } catch (err) {
+      setError(err as any);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  return (
+    <>
+      <AntTimeline style={{ padding: "1rem" }}>
+        {itemsToShow.map((item, index) => {
+          return (
+            <div key={index}>
+              <AntTimeline.Item key={index}>
+                <div
+                  style={{ display: "inline-block", cursor: "pointer" }}
+                  onClick={() => {
+                    setModalItem(
+                      itemsToShow.find(
+                        (searchItem) => item.id === searchItem.id
+                      )
+                    );
+                    setShowFormModal(true);
+                  }}
+                >
+                  <strong>{item.values?.[titleField]}</strong>
+                </div>
+                <br />
+                <div
+                  style={{ display: "inline-block", cursor: "pointer" }}
+                  onClick={() => {
+                    setModalItem(
+                      itemsToShow.find(
+                        (searchItem) => item.id === searchItem.id
+                      )
+                    );
+                    setShowFormModal(true);
+                  }}
+                >
+                  {item.values?.[summaryField]}
+                </div>
+              </AntTimeline.Item>
+            </div>
+          );
+        })}
+      </AntTimeline>
+      <FormModal
+        formView={views.get("form")}
+        model={relation}
+        id={modalItem?.id}
+        values={modalItem?.values}
+        defaultValues={modalItem?.defaultValues}
+        visible={showFormModal}
+        onSubmitSucceed={() => {
+          setShowFormModal(false);
+        }}
+        parentContext={{ ...getContext?.(), ...context }}
+        onCancel={() => {
+          setShowFormModal(false);
+        }}
+        readOnly={readOnly}
+        postSaveAction={fetchData}
+      />
+    </>
+  );
+};