@gisce/react-ooui 0.1.0

package/src/actionbar/TreeActionBar.tsx

@@ -0,0 +1,265 @@
+import React, { useContext } from "react";
+import { Space } from "antd";
+import ChangeViewButton from "./ChangeViewButton";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import NewButton from "./NewButton";
+import ActionButton from "./ActionButton";
+import {
+  DeleteOutlined,
+  PrinterOutlined,
+  ThunderboltOutlined,
+  CopyOutlined,
+  ReloadOutlined,
+  InfoCircleOutlined,
+  FilterOutlined,
+} from "@ant-design/icons";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import showConfirmDialog from "@/ui/ConfirmDialog";
+import ConnectionProvider from "@/ConnectionProvider";
+import showErrorDialog from "@/ui/ActionErrorDialog";
+import DropdownButton from "./DropdownButton";
+import {
+  ContentRootContext,
+  ContentRootContextType,
+} from "@/context/ContentRootContext";
+import ButtonWithBadge from "./ButtonWithBadge";
+import { showLogInfo } from "@/helpers/logInfoHelper";
+import SearchBar from "./SearchBar";
+import { View } from "@/views/ActionView";
+
+type Props = {
+  parentContext?: any;
+};
+
+function TreeActionBar(props: Props) {
+  const {
+    availableViews,
+    currentView,
+    setCurrentView,
+    selectedRowItems,
+    setRemovingItem,
+    removingItem,
+    duplicatingItem,
+    setDuplicatingItem,
+    currentModel,
+    searchTreeRef,
+    setCurrentId,
+    setCurrentItemIndex,
+    toolbar,
+    searchParams,
+    searchVisible,
+    setSearchVisible,
+    setSearchTreeNameSearch,
+    searchTreeNameSearch,
+    treeIsLoading,
+  } = useContext(ActionViewContext) as ActionViewContextType;
+
+  const { parentContext = {} } = props;
+
+  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
+  const contentRootContext = useContext(
+    ContentRootContext
+  ) as ContentRootContextType;
+  const { processAction } = contentRootContext || {};
+
+  function tryDelete() {
+    showConfirmDialog({
+      confirmMessage: t("confirmRemove"),
+      lang,
+      onOk: () => {
+        remove();
+      },
+    });
+  }
+
+  async function remove() {
+    try {
+      setRemovingItem?.(true);
+
+      await ConnectionProvider.getHandler().delete({
+        model: currentModel!,
+        ids: selectedRowItems!.map((item) => item.id),
+      });
+
+      setCurrentId?.(undefined);
+      setCurrentItemIndex?.(undefined);
+
+      searchTreeRef?.current?.refreshResults();
+    } catch (e) {
+      showErrorDialog(e);
+    } finally {
+      setRemovingItem?.(false);
+    }
+  }
+
+  async function duplicate() {
+    try {
+      setDuplicatingItem?.(true);
+
+      const currentId = selectedRowItems![0].id;
+
+      const newId = await ConnectionProvider.getHandler().duplicate({
+        id: currentId,
+        model: currentModel!,
+        context: { ...parentContext },
+      });
+
+      if (newId) {
+        searchTreeRef?.current?.refreshResults();
+      }
+    } catch (e) {
+      showErrorDialog(e);
+    } finally {
+      setDuplicatingItem?.(false);
+    }
+  }
+
+  function runAction(actionData: any) {
+    processAction?.({
+      actionData,
+      values: {
+        active_id: selectedRowItems?.map((item) => item.id)[0],
+        active_ids: selectedRowItems?.map((item) => item.id),
+      },
+      fields: {},
+      context: {
+        ...parentContext,
+        active_id: selectedRowItems?.map((item) => item.id)[0],
+        active_ids: selectedRowItems?.map((item) => item.id),
+      },
+      onRefreshParentValues: () => {
+        searchTreeRef?.current?.refreshResults();
+      },
+    });
+  }
+
+  if (!currentView) {
+    return null;
+  }
+
+  return (
+    <Space wrap={true}>
+      <SearchBar
+        disabled={duplicatingItem || removingItem || treeIsLoading}
+        searchText={searchTreeNameSearch}
+        onSearch={(searchString?: string) => {
+          if (searchString && searchString.trim().length > 0) {
+            setSearchTreeNameSearch?.(searchString);
+          } else {
+            setSearchTreeNameSearch?.(undefined);
+          }
+        }}
+      />
+      {separator()}
+      <NewButton disabled={treeIsLoading} />
+      {separator()}
+      <ActionButton
+        icon={<CopyOutlined />}
+        tooltip={t("duplicate")}
+        disabled={
+          !selectedRowItems ||
+          selectedRowItems?.length !== 1 ||
+          duplicatingItem ||
+          treeIsLoading
+        }
+        loading={duplicatingItem}
+        onClick={duplicate}
+      />
+      <ActionButton
+        icon={<DeleteOutlined />}
+        tooltip={t("delete")}
+        disabled={
+          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
+        }
+        loading={removingItem}
+        onClick={tryDelete}
+      />
+      {separator()}
+      <ButtonWithBadge
+        icon={<FilterOutlined style={{ color: searchVisible ? "white" : undefined }}/>}
+        tooltip={t("advanced_search")}
+        type={searchVisible ? "primary" : "default"}
+        onClick={() => {
+          setSearchVisible?.(!searchVisible);
+        }}
+        disabled={duplicatingItem || removingItem || treeIsLoading}
+        badgeNumber={searchParams?.length}
+      />
+      <ActionButton
+        icon={<InfoCircleOutlined />}
+        tooltip={t("showLogs")}
+        disabled={
+          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
+        }
+        loading={false}
+        onClick={() => {
+          showLogInfo(currentModel!, selectedRowItems![0].id, t);
+        }}
+      />
+      <ActionButton
+        icon={<ReloadOutlined />}
+        tooltip={t("refresh")}
+        disabled={duplicatingItem || removingItem || treeIsLoading}
+        loading={false}
+        onClick={() => {
+          searchTreeRef?.current?.refreshResults();
+        }}
+      />
+      {separator()}
+      <ChangeViewButton
+        currentView={currentView}
+        availableViews={availableViews.filter(
+          (view: View) => view.type === "tree" || view.type === "form"
+        )}
+        onChangeView={setCurrentView}
+        disabled={treeIsLoading}
+      />
+      {separator()}
+      <DropdownButton
+        icon={<ThunderboltOutlined />}
+        disabled={
+          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
+        }
+        tooltip={t("actions")}
+        items={toolbar?.action}
+        onItemClick={(action: any) => {
+          if (!action) {
+            return;
+          }
+
+          runAction(action);
+        }}
+      />
+      <DropdownButton
+        icon={<PrinterOutlined />}
+        disabled={
+          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
+        }
+        tooltip={t("reports")}
+        items={toolbar?.print}
+        onItemClick={(report: any) => {
+          if (!report) {
+            return;
+          }
+
+          runAction({
+            ...report,
+            datas: {
+              ...(report.datas || {}),
+              ids: selectedRowItems!.map((item) => item.id),
+            },
+          });
+        }}
+      />
+    </Space>
+  );
+}
+
+function separator() {
+  return <div className="inline-block w-2" />;
+}
+
+export default TreeActionBar;

package/src/common/ButtonWithTooltip.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button, Tooltip, ButtonProps } from "antd";
+
+export type Props = ButtonProps & {
+  tooltip: string;
+};
+
+function ButtonWithTooltip(props: Props) {
+  const { tooltip, ...restProps } = props;
+
+  return (
+    <Tooltip title={tooltip}>
+      <Button {...restProps} />
+    </Tooltip>
+  );
+}
+
+export default ButtonWithTooltip;

package/src/common/DatePicker.tsx

@@ -0,0 +1,93 @@
+import { DatePicker as AntDatePicker } from "antd";
+
+import React from "react";
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import Config from "@/Config";
+import { Date as DateOoui } from "@gisce/ooui";
+import moment from "moment";
+
+type DatePickerProps = WidgetProps & {
+  showTime?: boolean;
+};
+
+const DatePickerConfig = {
+  date: {
+    placeholder: "__/__/____",
+    dateDisplayFormat: "YYYY-MM-DD",
+    dateInternalFormat: "YYYY-MM-DD",
+  },
+  time: {
+    placeholder: "__/__/____ __:__:__",
+    dateDisplayFormat: "YYYY-MM-DD HH:mm:ss",
+    dateInternalFormat: "YYYY-MM-DD HH:mm:ss",
+  },
+};
+const DatePicker = (props: DatePickerProps) => {
+  const { ooui, showTime = false } = props;
+  const { required } = ooui;
+
+  return (
+    <Field required={required} {...props}>
+      <DatePickerInput ooui={ooui} showTime={showTime} />
+    </Field>
+  );
+};
+
+interface DatePickerInputProps {
+  ooui: DateOoui;
+  value?: undefined | string;
+  onChange?: (value: undefined | string) => void;
+  showTime?: boolean;
+}
+
+const DatePickerInput: React.FC<DatePickerInputProps> = (
+  props: DatePickerInputProps
+) => {
+  const { value, onChange, ooui, showTime } = props;
+  const { id, readOnly, required } = ooui as DateOoui;
+  const requiredClass =
+    required && !readOnly ? Config.requiredClass : undefined;
+
+  const mode = showTime ? "time" : "date";
+
+  const triggerChange = (changedValue: undefined | string) => {
+    onChange?.(changedValue);
+  };
+
+  const onValueStringChange = (momentDate: any) => {
+    if (momentDate === null) {
+      triggerChange(undefined);
+      return;
+    }
+
+    triggerChange(momentDate.format(DatePickerConfig[mode].dateInternalFormat));
+  };
+
+  const showTimeParms = showTime
+    ? { defaultValue: moment("00:00:00", "HH:mm:ss") }
+    : undefined;
+  const dateValue = value
+    ? moment(value, DatePickerConfig[mode].dateInternalFormat)
+    : undefined;
+
+  return (
+    <AntDatePicker
+      style={{ width: "100%" }}
+      placeholder={
+        showTime
+          ? DatePickerConfig.time.placeholder
+          : DatePickerConfig.date.placeholder
+      }
+      disabled={readOnly}
+      id={id}
+      showTime={showTimeParms}
+      className={requiredClass}
+      format={DatePickerConfig[mode].dateDisplayFormat}
+      value={dateValue}
+      onChange={onValueStringChange}
+    ></AntDatePicker>
+  );
+};
+
+export default DatePicker;

package/src/common/Field.tsx

@@ -0,0 +1,92 @@
+import React, { useContext } from "react";
+import { Form, Row, Col } from "antd";
+import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
+import Label from "@/widgets/base/Label";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+export default function Field({
+  ooui,
+  children,
+  layout = "horizontal",
+  valuePropName,
+  showLabel = false,
+  alignLabel = "left",
+  required = false,
+  type,
+  validator,
+}: {
+  ooui: FieldOoui;
+  children?: React.ReactNode;
+  layout?: "horizontal" | "vertical";
+  valuePropName?: string;
+  showLabel?: boolean;
+  alignLabel?: "left" | "center" | "right";
+  required?: boolean;
+  type?: any;
+  validator?: any;
+}) {
+  const { id, label, tooltip } = ooui;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const rules = required
+    ? [
+        {
+          required: true,
+          message: t("fillRequiredField"),
+          type,
+          validator,
+        },
+      ]
+    : undefined;
+
+  const formItem = () => (
+    <Form.Item
+      className="mb-0"
+      name={id}
+      valuePropName={valuePropName}
+      rules={rules}
+    >
+      {children}
+    </Form.Item>
+  );
+
+  if (!showLabel) {
+    return formItem();
+  }
+
+  const labelWidget = (
+    <Label
+      ooui={
+        new LabelOoui({
+          name: id + "_label",
+          string: label,
+          help: tooltip,
+          fieldForLabel: id,
+        })
+      }
+      align={alignLabel}
+    />
+  );
+
+  const horizontalMode = () => {
+    return (
+      <Row align="middle" className="pb-1 pt-1">
+        <Col className="ml-2" flex="7rem">
+          <div className="flex flex-col items-end">{labelWidget}</div>
+        </Col>
+        <Col flex="auto">{formItem()}</Col>
+      </Row>
+    );
+  };
+
+  const verticalMode = () => {
+    return (
+      <>
+        {labelWidget}
+        {formItem()}
+      </>
+    );
+  };
+
+  return layout === "horizontal" ? horizontalMode() : verticalMode();
+}

package/src/context/ActionViewContext.tsx

@@ -0,0 +1,161 @@
+import { View } from "@/views/ActionView";
+import React, { useEffect, useState } from "react";
+
+export type ActionViewContextType = {
+  title: string;
+  availableViews: View[];
+  currentView: View;
+  setCurrentView: (view: View) => void;
+  formIsSaving?: boolean;
+  setFormIsSaving?: (value: boolean) => void;
+  formHasChanges?: boolean;
+  setFormHasChanges?: (value: boolean) => void;
+  onFormSave?: () => void;
+  formRef?: any;
+  searchTreeRef?: any;
+  onNewClicked: () => void;
+  currentId?: number;
+  setCurrentId?: (id?: number) => void;
+  currentItemIndex?: number;
+  setCurrentItemIndex?: (value?: number) => void;
+  results?: any[];
+  setResults?: (value: any[]) => void;
+  currentModel?: string;
+  removingItem?: boolean;
+  setRemovingItem?: (value: boolean) => void;
+  formIsLoading?: boolean;
+  setFormIsLoading?: (value: boolean) => void;
+  treeIsLoading?: boolean;
+  setTreeIsLoading?: (value: boolean) => void;
+  toolbar?: any;
+  setToolbar?: (value: any) => void;
+  attachments?: any;
+  setAttachments?: (value: any) => void;
+  selectedRowItems?: any[];
+  setSelectedRowItems?: (value: any[]) => void;
+  duplicatingItem?: boolean;
+  setDuplicatingItem?: (value: boolean) => void;
+  searchParams?: any[];
+  setSearchParams?: (value: any[]) => void;
+  searchVisible?: boolean;
+  setSearchVisible?: (value: boolean) => void;
+  sorter: any;
+  setSorter: (sorter: any) => void;
+  totalItems: number;
+  setTotalItems: (totalItems: number) => void;
+  searchTreeNameSearch?: string;
+  setSearchTreeNameSearch?: (searchString?: string) => void;
+};
+
+export const ActionViewContext = React.createContext<ActionViewContextType | null>(
+  null
+);
+
+type ActionViewProviderProps = ActionViewContextType & {
+  children: React.ReactNode;
+};
+
+const ActionViewProvider = (props: ActionViewProviderProps): any => {
+  const [formIsSaving, setFormIsSaving] = useState<boolean>(false);
+  const [formHasChanges, setFormHasChanges] = useState<boolean>(false);
+  const [removingItem, setRemovingItem] = useState<boolean>(false);
+  const [formIsLoading, setFormIsLoading] = useState<boolean>(false);
+  const [treeIsLoading, setTreeIsLoading] = useState<boolean>(true);
+  const [attachments, setAttachments] = useState<any>([]);
+  const [duplicatingItem, setDuplicatingItem] = useState<boolean>(false);
+  const [searchParams, setSearchParams] = useState<any[]>([]);
+  const [searchVisible, setSearchVisible] = useState<boolean>(false);
+
+  const {
+    children,
+    currentView,
+    title,
+    setCurrentView,
+    availableViews,
+    formRef,
+    searchTreeRef,
+    onNewClicked,
+    currentId,
+    setCurrentId,
+    setResults,
+    results,
+    currentItemIndex,
+    setCurrentItemIndex,
+    currentModel,
+    toolbar,
+    setToolbar,
+    sorter,
+    setSorter,
+    totalItems,
+    setTotalItems,
+    setSelectedRowItems,
+    selectedRowItems,
+    searchTreeNameSearch,
+    setSearchTreeNameSearch,
+  } = props;
+
+  useEffect(() => {
+    if (results && results.length > 0 && !currentItemIndex) {
+      setCurrentItemIndex?.(0);
+      setCurrentId?.(results[0].id);
+    }
+  }, [results]);
+
+  const callOnFormSave = () => {
+    (formRef.current as any)?.submitForm();
+  };
+
+  return (
+    <ActionViewContext.Provider
+      value={{
+        title,
+        currentView,
+        setCurrentView,
+        availableViews,
+        formIsSaving,
+        setFormIsSaving,
+        formHasChanges,
+        setFormHasChanges,
+        formRef,
+        searchTreeRef,
+        onFormSave: callOnFormSave,
+        onNewClicked,
+        currentId,
+        setCurrentId,
+        currentItemIndex,
+        setCurrentItemIndex,
+        results,
+        setResults,
+        currentModel,
+        removingItem,
+        setRemovingItem,
+        formIsLoading,
+        setFormIsLoading,
+        treeIsLoading,
+        setTreeIsLoading,
+        toolbar,
+        setToolbar,
+        attachments,
+        setAttachments,
+        selectedRowItems,
+        setSelectedRowItems,
+        duplicatingItem,
+        setDuplicatingItem,
+        setSearchParams,
+        searchParams,
+        searchVisible,
+        setSearchVisible,
+        sorter,
+        setSorter,
+        totalItems,
+        setTotalItems,
+        searchTreeNameSearch,
+        setSearchTreeNameSearch,
+      }}
+    >
+      {children}
+    </ActionViewContext.Provider>
+  );
+};
+
+export default ActionViewProvider;