@gisce/react-ooui 0.1.0

package/src/widgets/modals/FormModal.tsx

@@ -0,0 +1,127 @@
+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 { modalWidth } = useWindowDimensions();
+  const [formTitle, setFormTitle] = useState<string>(title!);
+  const [isFavourite, setIsFavourite] = useState(false);
+  const [currentShortcutId, setCurrentShortcutId] = useState<number>();
+
+  useEffect(() => {
+    if (isMenuAction) {
+      checkFavourite();
+    }
+  }, [actionData, isMenuAction]);
+
+  async function checkFavourite() {
+    const { action_id, res_id, action_type, view_id } = actionData;
+
+    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 onTitleChange(newTitle: string) {
+    if (formTitle) {
+      return;
+    }
+
+    setFormTitle(newTitle);
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <FormModalProvider setTitle={onTitleChange}>
+      <Modal
+        title={isMenuAction ? header() : formTitle}
+        centered
+        width={modalWidth}
+        visible={visible}
+        footer={null}
+        destroyOnClose
+        onCancel={onCancel}
+      >
+        <Form
+          id={id}
+          showFooter={true}
+          insideButtonModal={buttonModal}
+          onCancel={onCancel}
+          {...rest}
+        />
+      </Modal>
+    </FormModalProvider>
+  );
+};

package/src/widgets/modals/SearchModal.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useContext, useRef, useEffect } 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={(selectedRowKeys: any) => {
+            setSelectedRowKeys(selectedRowKeys);
+          }}
+        />
+        <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}
+        visible={visible && !showCreateModal}
+        closable={true}
+        onCancel={onCloseModal}
+        footer={null}
+        destroyOnClose
+      >
+        {content()}
+      </Modal>
+      <FormModal
+        model={model}
+        visible={showCreateModal}
+        parentContext={context}
+        onSubmitSucceed={(id?: number) => {
+          setShowCreateModal(false);
+          onCloseModal();
+          onSelectValues([id!]);
+        }}
+        onCancel={() => {
+          setShowCreateModal(false);
+          onCloseModal();
+        }}
+      />
+    </>
+  );
+};

package/src/widgets/modals/TranslationModal.tsx

@@ -0,0 +1,201 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Modal, Button, Divider, Row, Space, Spin, Col } from "antd";
+import {
+  CheckOutlined,
+  CloseOutlined,
+  LoadingOutlined,
+} from "@ant-design/icons";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import ConnectionProvider from "@/ConnectionProvider";
+import TextArea from "antd/lib/input/TextArea";
+import showErrorDialog from "@/ui/ActionErrorDialog";
+
+type TranslationModalProps = {
+  visible: boolean;
+  model: string;
+  id: number;
+  field: string;
+  onCloseModal: () => void;
+  onSubmitSucceed: () => void;
+};
+
+type Lang = {
+  code: string;
+  name: string;
+};
+
+type ValuesForLangs = {
+  [key: string]: string;
+};
+
+export const TranslationModal = (props: TranslationModalProps) => {
+  const { visible, onCloseModal, model, id, field, onSubmitSucceed } = props;
+
+  const { modalWidth } = useWindowDimensions();
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const [langs, setLangs] = useState<Lang[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [valuesForLangs, setValuesForLangs] = useState<ValuesForLangs>({});
+
+  const originalValuesForLangs = useRef<ValuesForLangs>();
+
+  useEffect(() => {
+    if (visible) {
+      fetchData();
+    } else {
+      setValuesForLangs({});
+    }
+  }, [visible]);
+
+  async function fetchData() {
+    setIsLoading(true);
+
+    try {
+      const langs = await getLangs();
+      await getValuesForLangs(langs);
+    } catch (err) {
+      showErrorDialog(err as any);
+    }
+
+    setIsLoading(false);
+  }
+
+  async function getLangs() {
+    const results: any[] = (await ConnectionProvider.getHandler().search({
+      params: [["translatable", "=", "1"]],
+      fields: ["code", "name"],
+      model: "res.lang",
+    })) as any;
+
+    const langs = results.map((item: any) => {
+      return {
+        code: item.code,
+        name: item.name,
+      };
+    });
+
+    setLangs?.(langs);
+    return langs;
+  }
+
+  async function getValuesForLangs(langs: Lang[]) {
+    const retrievedValuesForLang: ValuesForLangs = {};
+
+    for (const lang of langs) {
+      const retrievedValue = (
+        await ConnectionProvider.getHandler().readObjects({
+          model,
+          ids: [id],
+          fieldsToRetrieve: [field],
+          context: { lang: lang.code },
+        })
+      )[0];
+      retrievedValuesForLang[lang.code] = retrievedValue[field] || "";
+    }
+
+    originalValuesForLangs.current = retrievedValuesForLang;
+    setValuesForLangs(retrievedValuesForLang);
+  }
+
+  function getInputsForLangs() {
+    return langs.map((lang: Lang, i: number) => {
+      return (
+        <Row key={i} style={{ paddingBottom: 20 }}>
+          <Col flex="8rem" style={{ paddingRight: 10 }}>
+            {lang.name}
+          </Col>
+          <Col flex="auto">
+            <TextArea
+              rows={4}
+              value={valuesForLangs[lang.code] || ""}
+              onChange={(event: any) => {
+                setValuesForLangs({
+                  ...valuesForLangs,
+                  [lang.code]: event.target.value,
+                });
+              }}
+              disabled={submitLoading}
+            />
+          </Col>
+        </Row>
+      );
+    });
+  }
+
+  async function onSubmit() {
+    setSubmitLoading(true);
+
+    try {
+      for (const langCode of Object.keys(valuesForLangs)) {
+        if (
+          valuesForLangs[langCode] !== originalValuesForLangs.current![langCode]
+        ) {
+          await ConnectionProvider.getHandler().update({
+            model,
+            id,
+            values: { [field]: valuesForLangs[langCode] },
+            context: {
+              lang: langCode,
+            },
+            fields: {},
+          });
+        }
+      }
+    } catch (err) {
+      showErrorDialog(err as any);
+    }
+
+    setSubmitLoading(false);
+    onSubmitSucceed();
+  }
+
+  function content() {
+    if (isLoading) {
+      return <Spin />;
+    }
+
+    return (
+      <>
+        {getInputsForLangs()}
+        <Divider />
+        <Row justify="end">
+          <Space>
+            <Button
+              icon={<CloseOutlined />}
+              onClick={onCloseModal}
+              disabled={submitLoading}
+            >
+              {t("cancel")}
+            </Button>
+            <Button
+              icon={submitLoading ? <LoadingOutlined /> : <CheckOutlined />}
+              disabled={submitLoading}
+              onClick={onSubmit}
+              style={{ marginLeft: 15 }}
+              type="primary"
+            >
+              {t("ok")}
+            </Button>
+          </Space>
+        </Row>
+      </>
+    );
+  }
+
+  return (
+    <Modal
+      title={t("translate")}
+      centered
+      width={modalWidth}
+      visible={visible}
+      closable={true}
+      onCancel={onCloseModal}
+      footer={null}
+      destroyOnClose
+    >
+      {content()}
+    </Modal>
+  );
+};