@gisce/react-ooui 0.1.0

package/src/helpers/logInfoHelper.tsx

@@ -0,0 +1,28 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import React from "react";
+import showInfo from "@/ui/InfoDialog";
+
+async function showLogInfo(
+  model: string,
+  currentId: number,
+  translateFn: Function
+) {
+  const logInfo = ((await ConnectionProvider.getHandler().getLogInfo({
+    model,
+    ids: [currentId],
+  })) as any)[0];
+
+  const { create_date, create_uid, id, write_date, write_uid } = logInfo;
+
+  showInfo(
+    <div>
+      {"ID: " + id} <br />
+      {translateFn("createdBy") + ": " + create_uid[1]} <br />
+      {translateFn("creationDate") + ": " + create_date} <br />
+      {translateFn("lastUpdatedBy") + ": " + write_uid[1]} <br />
+      {translateFn("lastUpdatedDate") + ": " + write_date}
+    </div>
+  );
+}
+
+export { showLogInfo };

package/src/helpers/one2manyHelper.ts

@@ -0,0 +1,139 @@
+import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
+import ConnectionProvider from "@/ConnectionProvider";
+
+type ReadObjectValuesOptions = {
+  items: One2manyItem[];
+  model: string;
+  treeFields: any;
+  formFields: any;
+  context?: any;
+};
+
+const readObjectValues = async (
+  options: ReadObjectValuesOptions
+): Promise<One2manyItem[]> => {
+  const { items, model, formFields, treeFields, context = {} } = options;
+
+  const temporalItems: One2manyItem = items.filter(
+    (item) => item.operation !== "original"
+  );
+
+  // We get a number array of id's
+  const idsToFetch = items
+    .filter((item) => item.operation === "original")
+    .map((item) => item.id) as number[];
+
+  const values = await ConnectionProvider.getHandler().readObjects({
+    model,
+    ids: idsToFetch,
+    fields: { ...formFields, ...treeFields },
+    context,
+  });
+
+  const formValues = values.map((result: any) => {
+    const resultFormValues: any = {};
+    Object.keys(result).forEach((key) => {
+      if (formFields.hasOwnProperty(key) || key === "id") {
+        resultFormValues[key] = result[key];
+      }
+    });
+    return resultFormValues;
+  });
+
+  const treeValues = values.map((result: any) => {
+    const resultTreeValues: any = {};
+    Object.keys(result).forEach((key) => {
+      if (treeFields.hasOwnProperty(key) || key === "id") {
+        resultTreeValues[key] = result[key];
+      }
+    });
+    return resultTreeValues;
+  });
+
+  // We fill the values property of the One2manyItem with the retrieved values from the API
+  const originalItemsWithFetchedValues: One2manyItem[] = items.map((item) => {
+    const fetchedFormItemValues = formValues.find(
+      (itemValues: any) => itemValues.id === item.id
+    );
+    const fetchedTreeItemValues = treeValues.find(
+      (itemValues: any) => itemValues.id === item.id
+    );
+
+    return {
+      ...item,
+      values: fetchedFormItemValues,
+      treeValues: fetchedTreeItemValues,
+    };
+  });
+
+  return originalItemsWithFetchedValues.concat(temporalItems);
+};
+
+type RemoveItemOptions = {
+  model: string;
+  activeId: number;
+  fieldName: string;
+  idsToRemove: number[];
+  fields: any;
+  isMany2many: boolean;
+};
+
+const removeItems = async (options: RemoveItemOptions) => {
+  const {
+    model,
+    activeId,
+    fieldName,
+    idsToRemove,
+    fields,
+    isMany2many,
+  } = options;
+
+  const values: any = {};
+  values[fieldName] = [];
+
+  for (const idToRemove of idsToRemove) {
+    values[fieldName].push([isMany2many ? 3 : 2, idToRemove]);
+  }
+
+  await ConnectionProvider.getHandler().update({
+    model,
+    id: activeId,
+    values,
+    fields,
+  });
+};
+
+type LinkItemOptions = {
+  model: string;
+  activeId: number;
+  fieldName: string;
+  id: number;
+  fields: any;
+};
+
+const linkItem = async (options: LinkItemOptions) => {
+  const { model, activeId, fieldName, id, fields } = options;
+
+  const values: any = {};
+  values[fieldName] = [[4, id]];
+
+  await ConnectionProvider.getHandler().update({
+    model,
+    id: activeId,
+    values,
+    fields,
+  });
+};
+
+const getNextPendingId = (items: One2manyItem[]) => {
+  const negativeIds: number[] = items
+    .filter((item) => item.id && item.id < 0)
+    .map((item) => item.id!);
+  if (negativeIds.length === 0) {
+    return -1;
+  } else {
+    return Math.min(...negativeIds) - 1;
+  }
+};
+
+export { readObjectValues, removeItems, linkItem, getNextPendingId };

package/src/helpers/searchFilterHelper.ts

@@ -0,0 +1,167 @@
+const convertBooleanParamIfNeeded = (value: any) => {
+  if ((typeof value === "string" && value === "true") || value === "false") {
+    return value === "true";
+  }
+  return value;
+};
+
+const getParamsForFields = (values: any, fields: any) => {
+  const filteredValues = removeUndefinedFields(values);
+  const groupedDateTime = groupDateTimeValuesIfNeeded(filteredValues);
+  const groupedValues = ungroupDateValuesIfNeeded(groupedDateTime, fields);
+
+  const params = [
+    ...Object.keys(groupedValues).map((key) => {
+      return getParamForField(key, groupedValues[key], fields);
+    }),
+  ];
+
+  // This is needed because in case of datetime we receive an array of arrays
+  const paramsForFields = params.reduce((acc, curVal) => {
+    if (Array.isArray(curVal[0])) {
+      return acc.concat(curVal);
+    }
+    return [...acc, curVal];
+  }, []);
+
+  return paramsForFields;
+};
+
+const getParamForField = (key: string, value: any, fields: any) => {
+  const filteredKey = key.split("#")[0];
+  const type = fields[filteredKey].type;
+
+  if (
+    type === "char" ||
+    type === "text" ||
+    type === "many2one" ||
+    type === "many2many" ||
+    type === "one2many"
+  ) {
+    return [key, "ilike", value];
+  } else if (
+    type === "float" ||
+    type === "integer" ||
+    type === "float_time" ||
+    type === "progressbar"
+  ) {
+    const operator = key.indexOf("#from") !== -1 ? ">=" : "<=";
+    return [filteredKey, operator, value];
+  } else if (type === "date") {
+    const operator = key.indexOf("#from") !== -1 ? ">=" : "<=";
+    return [filteredKey, operator, value.format("YYYY-MM-DD")];
+  } else if (type === "datetime") {
+    const filteredValues = [];
+    if (value[0]) {
+      filteredValues.push([filteredKey, ">=", value[0]]);
+    }
+    if (value[1]) {
+      filteredValues.push([filteredKey, "<=", value[1]]);
+    }
+    return filteredValues;
+  } else if (type === "selection") {
+    return [
+      key,
+      "in",
+      value.map((valueEntry: string) =>
+        convertBooleanParamIfNeeded(valueEntry)
+      ),
+    ];
+  } else {
+    return [key, "=", convertBooleanParamIfNeeded(value)];
+  }
+};
+
+const getDatetimeDateFields = (values: any) => {
+  return Object.keys(values).filter((key) => {
+    return key.indexOf("#date") !== -1;
+  });
+};
+
+const removeDateTimeSingleFields = (values: any) => {
+  const newValues = { ...values };
+  Object.keys(newValues).forEach(
+    (key) =>
+      (key.indexOf("#time") !== -1 || key.indexOf("#date") !== -1) &&
+      delete newValues[key]
+  );
+  return newValues;
+};
+
+const groupDateTimeValuesIfNeeded = (values: any) => {
+  const newValues: any = { ...removeDateTimeSingleFields(values) };
+
+  const datetimeDateFields = getDatetimeDateFields(values);
+
+  datetimeDateFields.forEach((field) => {
+    const datePair = values[field];
+    const baseKey = field.split("#")[0];
+    const timeKey = baseKey + "#time";
+    const timePair = values[timeKey];
+
+    let from, to;
+
+    if (datePair[0] !== null) {
+      const dateValueFrom = datePair[0].format("YYYY-MM-DD");
+      from = dateValueFrom;
+
+      if (timePair && timePair[0] !== null) {
+        const timeValueFrom = timePair[0].format("HH:mm:ss");
+        from = from + " " + timeValueFrom;
+      }
+    }
+
+    if (datePair[1] !== null) {
+      const dateValueTo = datePair[1].format("YYYY-MM-DD");
+      to = dateValueTo;
+
+      if (timePair && timePair[1] !== null) {
+        const timeValueTo = timePair[1].format("HH:mm:ss");
+        to = to + " " + timeValueTo;
+      }
+    }
+
+    newValues[baseKey + "#datetime"] = [from, to];
+  });
+
+  return newValues;
+};
+
+const ungroupDateValuesIfNeeded = (values: any, fields: any) => {
+  const dateFields = Object.keys(values).filter((key) => {
+    return fields[key] && fields[key].type === "date";
+  });
+
+  let newValues: any = { ...values };
+
+  dateFields.forEach((key) => {
+    delete newValues[key];
+    if (values[key][0] !== null) {
+      newValues[key + "#from"] = values[key][0];
+    }
+
+    if (values[key][1] !== null) {
+      newValues[key + "#to"] = values[key][1];
+    }
+  });
+
+  return newValues;
+};
+
+const removeUndefinedFields = (values: any) => {
+  const newValues = { ...values };
+  Object.keys(newValues).forEach(
+    (key) =>
+      (newValues[key] === undefined ||
+        newValues[key] === null ||
+        newValues[key] === "") &&
+      delete newValues[key]
+  );
+  return newValues;
+};
+
+export {
+  removeUndefinedFields,
+  groupDateTimeValuesIfNeeded,
+  getParamsForFields,
+};

package/src/helpers/timeHelper.ts

@@ -0,0 +1,58 @@
+function parseStringToFloat(text?: string) {
+  if (!text) {
+    return undefined;
+  }
+
+  try {
+    if (text.includes(":")) {
+      const splitted = text.trim().split(":");
+      return (
+        Math.round(
+          (parseInt(splitted[0]) + parseInt(splitted[1]) / 60.0) * 10000
+        ) / 10000
+      );
+    } else {
+      return parseFloat(text.trim());
+    }
+  } catch (err) {
+    return 0;
+  }
+}
+
+function parseFloatToString(num?: number) {
+  if (num === undefined) {
+    return undefined;
+  }
+
+  let finalString;
+  let hours = Math.floor(Math.abs(num));
+  let mins = Math.round((Math.abs(num) % 1) * 100) / 100;
+
+  if (mins >= 1) {
+    hours = hours + 1;
+    mins = 0.0;
+  } else {
+    mins = mins * 60;
+  }
+
+  const hoursString = hours.toLocaleString("en-US", {
+    minimumIntegerDigits: 2,
+    maximumFractionDigits: 0,
+    useGrouping: false,
+  });
+  const minsStrings = mins.toLocaleString("en-US", {
+    minimumIntegerDigits: 2,
+    maximumFractionDigits: 0,
+    useGrouping: false,
+  });
+
+  finalString = `${hoursString}:${minsStrings}`;
+
+  if (num < 0) {
+    finalString = "-" + finalString;
+  }
+
+  return finalString;
+}
+
+export { parseStringToFloat, parseFloatToString };

package/src/helpers/treeHelper.ts

@@ -0,0 +1,127 @@
+import { Tree as TreeOoui, Selection, Many2one, Boolean } from "@gisce/ooui";
+import { TreeView, Column } from "@/types";
+
+const getTree = (treeView: TreeView): TreeOoui => {
+  const xml = treeView.arch;
+  const fields = treeView.fields;
+  const tree = new TreeOoui(fields);
+  tree.parse(xml);
+  return tree;
+};
+
+const getTableColumns = (tree: TreeOoui, components: any): Array<Column> => {
+  const tableColumns = tree.columns.map((column) => {
+    const type = column.type;
+    const key = column.id;
+    const component = components?.[type];
+    let render;
+
+    if (component) {
+      render = (item: any) => {
+        return component(item);
+      };
+    }
+
+    return {
+      key,
+      dataIndex: key,
+      title: column.label,
+      render,
+      sorter: (a: any, b: any) => {
+        let aItem = a[key] || "",
+          bItem = b[key] || "";
+
+        if (type === "many2one") {
+          aItem = a[key]?.value || "";
+          bItem = b[key]?.value || "";
+        }
+
+        if (aItem < bItem) return -1;
+        if (aItem > bItem) return 1;
+        return 0;
+      },
+    };
+  });
+  return tableColumns;
+};
+
+const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
+  const tableItems = results.map((item: any) => {
+    const parsedItem: any = {};
+    Object.keys(item).map((key) => {
+      if (key === "id") {
+        parsedItem[key] = item[key];
+      } else {
+        const widget = treeOoui.findById(key);
+
+        if (widget instanceof Selection) {
+          const selection = widget;
+          parsedItem[key] = selection.selectionValues.get(item[key]);
+        } else if (widget instanceof Many2one) {
+          parsedItem[key] = item[key] &&
+            Array.isArray(item[key]) &&
+            item[key].length === 2 && {
+              model: widget.relation,
+              id: item[key][0],
+              value: item[key][1],
+            };
+        } else if (widget instanceof Boolean) {
+          parsedItem[key] = item[key];
+        } else if (widget) {
+          parsedItem[key] = item[key] === false ? "" : item[key];
+        }
+      }
+    });
+    return parsedItem;
+  });
+
+  return tableItems;
+};
+
+function itemHasBooleans({ values, fields }: { values: any; fields: any }) {
+  if (!fields) {
+    return false;
+  }
+  return Object.keys(values).some((key) => {
+    return fields[key] !== undefined && fields[key].type === "boolean";
+  });
+}
+
+function convertBooleansToNumeric({
+  values,
+  fields,
+}: {
+  values: any;
+  fields: any;
+}) {
+  if (!fields) {
+    return values;
+  }
+  const filteredValues: any = {};
+  Object.keys(values).forEach((key) => {
+    if (fields[key] !== undefined && fields[key].type === "boolean") {
+      filteredValues[key] = values[key] === true ? 1 : 0;
+    }
+  });
+  return { ...values, ...filteredValues };
+}
+
+function getColorMap(colorsValue: any) {
+  if (!colorsValue) {
+    return undefined;
+  }
+  const map: any = {};
+  colorsValue.forEach((colorEntry: any) => {
+    map[colorEntry.id] = colorEntry.colors;
+  });
+  return map;
+}
+
+export {
+  getTableColumns,
+  getTableItems,
+  getTree,
+  convertBooleansToNumeric,
+  itemHasBooleans,
+  getColorMap,
+};

package/src/hooks/useEffectDebugger.ts

@@ -0,0 +1,43 @@
+import { useRef, useEffect } from "react";
+
+const usePrevious = (value: any, initialValue: any) => {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+const useEffectDebugger = (
+  effectHook: any,
+  dependencies: any,
+  dependencyNames = []
+) => {
+  const previousDeps = usePrevious(dependencies, []);
+
+  const changedDeps = dependencies.reduce(
+    (accum: any, dependency: any, index: any) => {
+      if (dependency !== previousDeps[index]) {
+        const keyName = dependencyNames[index] || index;
+        return {
+          ...accum,
+          [keyName]: {
+            before: previousDeps[index],
+            after: dependency,
+          },
+        };
+      }
+
+      return accum;
+    },
+    {}
+  );
+
+  if (Object.keys(changedDeps).length) {
+    console.log("[use-effect-debugger] ", changedDeps);
+  }
+
+  useEffect(effectHook, dependencies);
+};
+
+export { useEffectDebugger };

package/src/hooks/useWindowDimensions.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+const MODAL_WIDTH_CONSTANT = 0.7;
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return {
+    modalWidth: windowDimensions.width * MODAL_WIDTH_CONSTANT,
+    modalHeight: windowDimensions.height,
+    width: windowDimensions.width,
+    height: windowDimensions.height,
+  };
+}