@gisce/react-ooui 2.0.0-alpha.61 → 2.0.0-alpha.63

package/src/widgets/custom/Tags.tsx

@@ -1,164 +0,0 @@
-import React, { useContext, useState } from "react";
-import { Tags as TagsOoui } from "@gisce/ooui";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { Alert, Select } from "antd";
-import { colorFromString, transformPlainMany2Ones } from "@/helpers/formHelper";
-import ConnectionProvider from "@/ConnectionProvider";
-import { CustomTag } from "@/widgets/custom/Tag";
-
-type TagsProps = WidgetProps & {
-  ooui: TagsOoui;
-};
-
-type TagsInputProps = TagsProps & {
-  value?: One2manyValue;
-  onChange?: (value: One2manyValue) => void;
-};
-
-export const Tags = (props: TagsProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field type={"array"} {...props}>
-      <TagsInput ooui={ooui} />
-    </Field>
-  );
-};
-
-export const TagsInput = (props: TagsInputProps) => {
-  const { value, ooui, onChange } = props;
-  const { items = [] } = value || {};
-  const itemsToShow = items
-    .filter((item) => item.operation !== "pendingRemove")
-    .map((item) => item.id) as number[];
-
-  const [options, setOptions] = useState<any[]>([]);
-  const [error, setError] = useState<string>();
-  const [isLoadingOptions, setIsLoadingOptions] = useState<boolean>(false);
-  const { relation, context, readOnly, field } = ooui;
-
-  const formContext = useContext(FormContext) as FormContextType;
-  const { getContext } = formContext || {};
-
-  useDeepCompareEffect(() => {
-    fetchOptions();
-  }, [items]);
-
-  const triggerChange = (changedValue: One2manyItem[]) => {
-    onChange?.({
-      items: changedValue,
-    });
-  };
-
-  async function fetchOptions() {
-    setIsLoadingOptions(true);
-    let params: any[] = [];
-    try {
-      if (readOnly) {
-        params = [["id", "in", itemsToShow]];
-      }
-      if (ooui.domain) {
-        const evaluatedDomain =
-          await ConnectionProvider.getHandler().evalDomain({
-            domain: ooui.domain,
-            values: transformPlainMany2Ones({
-              fields: formContext?.getFields(),
-              values: formContext.getPlainValues(),
-            }),
-            fields: formContext?.getFields(),
-            context: formContext.getContext(),
-          });
-        params = [...params, ...evaluatedDomain];
-      }
-
-      const optionsRead = await ConnectionProvider.getHandler().search({
-        model: relation,
-        params,
-        fieldsToRetrieve: [field],
-        context: { ...getContext?.(), ...context },
-      });
-      const options = optionsRead.map((item: any) => {
-        const value = item[field];
-        let formattedValue = value;
-        if (Array.isArray(value)) {
-          formattedValue = value[1];
-        }
-        return { label: formattedValue, value: item.id };
-      });
-      setOptions(options);
-    } catch (err) {
-      setError(err as any);
-    } finally {
-      setIsLoadingOptions(false);
-    }
-  }
-
-  const onChangeSelected = (ids: number[]) => {
-    const newItems: One2manyItem[] = items.map((item) => {
-      if (ids.includes(item.id as number)) {
-        if (item.operation == "pendingRemove") {
-          return {
-            ...item,
-            operation: "pendingLink",
-          };
-        } else {
-          return item;
-        }
-      } else {
-        return { id: item.id, operation: "pendingRemove" };
-      }
-    });
-    const currentIds = newItems.map((item) => item.id);
-    ids
-      .filter((id) => !currentIds.includes(id))
-      .map((id) => {
-        newItems.push({ id, operation: "pendingLink" });
-      });
-    triggerChange(newItems);
-  };
-
-  const tagRender = (props: any) => {
-    const { label, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    const color = colorFromString(label);
-    return (
-      <CustomTag
-        color={color}
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        closeIcon={<span style={{ color }}>X</span>}
-      >
-        {label}
-      </CustomTag>
-    );
-  };
-
-  if (error) {
-    return <Alert className="mt-10" message={error} type="error" banner />;
-  }
-
-  return (
-    <>
-      <div className="flex flex-row">
-        <Select
-          mode="multiple"
-          value={options.length ? itemsToShow : []}
-          tagRender={tagRender}
-          bordered={!readOnly}
-          disabled={readOnly}
-          options={options}
-          onChange={onChangeSelected}
-          loading={isLoadingOptions}
-        ></Select>
-      </div>
-    </>
-  );
-};

package/src/widgets/custom/Timeline.tsx

@@ -1,196 +0,0 @@
-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: One2manyItem[]) => {
-    onChange?.({
-      items: changedValue,
-    });
-  };
-
-  async function fetchData() {
-    setIsLoading(true);
-    setError(undefined);
-
-    try {
-      const [itemsWithValues] = await readObjectValues({
-        treeView: {
-          fields: views.get("tree").fields,
-          arch: views.get("tree").arch,
-        },
-        formView: {
-          fields: views.get("form").fields,
-        },
-        model: relation,
-        items,
-        context: { ...getContext?.(), ...context },
-        currentView: "form",
-      });
-
-      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}
-      />
-    </>
-  );
-};

package/src/widgets/modals/ExportModal.tsx

@@ -1,75 +0,0 @@
-import ConnectionProvider from "@/ConnectionProvider";
-import {
-  ExportModal as ExportModalFmg,
-  Locale,
-} from "@gisce/react-formiga-components";
-import React from "react";
-import { useExport } from "@/hooks/useExport";
-
-export type ExportModalProps = {
-  visible: boolean;
-  locale: string;
-  onClose: () => void;
-  selectedRegistersToExport?: any[];
-  totalRegisters: number;
-  model: string;
-  domain: any[];
-  limit?: number;
-  context?: any;
-  visibleRegisters: number;
-};
-
-export const ExportModal = (props: ExportModalProps) => {
-  const {
-    visible,
-    locale,
-    onClose,
-    model,
-    context,
-    selectedRegistersToExport,
-    totalRegisters,
-    domain,
-    limit,
-    visibleRegisters,
-  } = props;
-
-  const {
-    onExport,
-    onGetFieldChilds,
-    onGetFields,
-    onGetPredefinedExports,
-    onSavePredefinedExport,
-    onRemovePredefinedExport,
-  } = useExport({
-    model,
-    context,
-    domain,
-    limit,
-    selectedRegistersToExport,
-    onClose,
-    locale,
-  });
-
-  return (
-    <ExportModalFmg
-      visible={visible}
-      locale={locale as Locale}
-      onSucceed={onExport}
-      onCancel={onClose}
-      selectedRegistersToExport={
-        selectedRegistersToExport &&
-        selectedRegistersToExport.length &&
-        selectedRegistersToExport.length > 0
-          ? selectedRegistersToExport.length
-          : undefined
-      }
-      totalRegisters={totalRegisters}
-      onGetFieldChilds={onGetFieldChilds}
-      onGetFields={onGetFields}
-      visibleRegisters={visibleRegisters}
-      onGetPredefinedExports={onGetPredefinedExports}
-      onSavePredefinedExport={onSavePredefinedExport}
-      onRemovePredefinedExport={onRemovePredefinedExport}
-    />
-  );
-};

package/src/widgets/modals/FormModal.tsx

@@ -1,125 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, Col, Modal, Row, Tooltip } from "antd";
-import Form, { FormProps } from "@/widgets/views/Form";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import FormModalProvider from "@/context/FormModalContext";
-import { StarOutlined, StarFilled } from "@ant-design/icons";
-import ConnectionProvider from "@/ConnectionProvider";
-
-type FormModalProps = FormProps & {
-  visible: boolean;
-  title?: string;
-  buttonModal?: boolean;
-  isMenuAction?: boolean;
-  actionData?: any;
-};
-
-export const FormModal = (props: FormModalProps) => {
-  const {
-    visible,
-    id,
-    title,
-    buttonModal = false,
-    onCancel,
-    isMenuAction = false,
-    actionData,
-    ...rest
-  } = props;
-
-  const { model } = rest;
-
-  const { modalWidth } = useWindowDimensions();
-  const [formTitle, setFormTitle] = useState<string>(title!);
-  const [isFavourite, setIsFavourite] = useState(false);
-  const [currentShortcutId, setCurrentShortcutId] = useState<number>();
-  const { action_id, res_id, action_type, view_id } = actionData || {};
-
-  useEffect(() => {
-    if (isMenuAction) {
-      checkFavourite();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actionData, isMenuAction]);
-
-  async function checkFavourite() {
-    const result = await ConnectionProvider.getHandler().isShortcutFavorite({
-      action_id,
-      action_type,
-      view_id,
-      res_id: res_id || false,
-    });
-
-    setIsFavourite(result !== false);
-
-    if (result !== false) {
-      setCurrentShortcutId(result as number);
-    }
-  }
-
-  async function toggleFavourite() {
-    if (isFavourite && currentShortcutId) {
-      await ConnectionProvider.getHandler().removeFavourite({
-        shortcut_id: currentShortcutId,
-      });
-    } else {
-      const { action_id, res_id, action_type, view_id } = actionData;
-
-      await ConnectionProvider.getHandler().addFavourite({
-        action_id,
-        action_type,
-        view_id,
-        res_id: res_id || false,
-      });
-    }
-
-    setIsFavourite(!isFavourite);
-  }
-
-  function header() {
-    return (
-      <Row align="middle">
-        <Col>
-          <Button
-            type={isFavourite ? "primary" : "default"}
-            icon={
-              isFavourite ? (
-                <StarFilled style={{ color: "white" }} />
-              ) : (
-                <StarOutlined />
-              )
-            }
-            style={{ width: 30 }}
-            onClick={toggleFavourite}
-          ></Button>
-        </Col>
-        <Col style={{ paddingLeft: 10 }}>{formTitle}</Col>
-      </Row>
-    );
-  }
-
-  const contentWidth = modalWidth * 0.95;
-  return (
-    <FormModalProvider setTitle={setFormTitle}>
-      <Modal
-        title={isMenuAction ? header() : formTitle}
-        centered
-        width={modalWidth}
-        open={visible}
-        footer={null}
-        destroyOnClose
-        onCancel={onCancel}
-        maskClosable={false}
-      >
-        <Form
-          key={`${model}-${id}-${action_id}-${res_id}-${action_type}-${view_id}-${title}`}
-          id={id}
-          showFooter={true}
-          insideButtonModal={buttonModal}
-          onCancel={onCancel}
-          parentWidth={contentWidth}
-          {...rest}
-        />
-      </Modal>
-    </FormModalProvider>
-  );
-};

package/src/widgets/modals/SearchModal.tsx

@@ -1,130 +0,0 @@
-import { useState, useContext } from "react";
-import { Modal, Button, Divider, Row, Space } from "antd";
-import { FormModal } from "./FormModal";
-import SearchTree from "@/widgets/views/SearchTree";
-import {
-  FileAddOutlined,
-  CloseOutlined,
-  CheckOutlined,
-} from "@ant-design/icons";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-type SearchSelectionProps = {
-  visible: boolean;
-  model: string;
-  nameSearch?: string;
-  onSelectValues: (values: number[]) => void;
-  onCloseModal: () => void;
-  domain?: any;
-  context?: any;
-};
-
-export const SearchModal = (props: SearchSelectionProps) => {
-  const {
-    visible,
-    onCloseModal: onCloseModalProps,
-    onSelectValues,
-    model,
-    nameSearch,
-    domain,
-    context = {},
-  } = props;
-  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
-
-  const { modalWidth, modalHeight } = useWindowDimensions();
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
-
-  const onCloseModal = async () => {
-    await new Promise((resolve) => setTimeout(resolve, 5));
-    onCloseModalProps();
-  };
-
-  const onRowClicked = async (event: any) => {
-    const { id } = event;
-    onSelectValues([id]);
-  };
-
-  function submit() {
-    if (selectedRowKeys.length === 0) {
-      onCloseModal();
-      return;
-    }
-
-    onSelectValues(selectedRowKeys);
-  }
-
-  const content = () => {
-    return (
-      <>
-        <SearchTree
-          model={model}
-          nameSearch={nameSearch}
-          onRowClicked={onRowClicked}
-          treeScrollY={modalHeight * 0.3}
-          domain={domain}
-          parentContext={context}
-          onChangeSelectedRowKeys={setSelectedRowKeys}
-        />
-        <Divider />
-        <Row justify="end">
-          <Space>
-            <Button
-              icon={<FileAddOutlined />}
-              onClick={() => {
-                setShowCreateModal(true);
-              }}
-            >
-              {t("new")}
-            </Button>
-            <Button
-              icon={<CheckOutlined />}
-              onClick={() => {
-                submit();
-              }}
-              type="primary"
-            >
-              {t("ok")}
-            </Button>
-            <Button icon={<CloseOutlined />} onClick={onCloseModal}>
-              {t("cancel")}
-            </Button>
-          </Space>
-        </Row>
-      </>
-    );
-  };
-
-  return (
-    <>
-      <Modal
-        title={t("search")}
-        centered
-        width={modalWidth}
-        open={visible && !showCreateModal}
-        closable={true}
-        onCancel={onCloseModal}
-        footer={null}
-        destroyOnClose
-        maskClosable={false}
-      >
-        {content()}
-      </Modal>
-      <FormModal
-        model={model}
-        visible={showCreateModal}
-        parentContext={context}
-        onSubmitSucceed={(id?: number) => {
-          setShowCreateModal(false);
-          onCloseModal();
-          onSelectValues([id!]);
-        }}
-        onCancel={() => {
-          setShowCreateModal(false);
-          onCloseModal();
-        }}
-      />
-    </>
-  );
-};