@gisce/react-ooui 0.1.0

package/src/context/TabManagerContext.tsx

@@ -0,0 +1,117 @@
+import { ViewType } from "@/types";
+import { ShortcutApi } from "@/ui/FavouriteButton";
+import { View } from "@/views/ActionView";
+import React, { useState } from "react";
+
+export type TabManagerContextType = {
+  openAction: ({
+    domain,
+    context,
+    model,
+    views,
+    title,
+    target,
+    initialView,
+    action_id,
+    action_type,
+    res_id,
+    values,
+    forced_values,
+  }: {
+    domain: any;
+    context: any;
+    model: string;
+    views: Array<any>;
+    title: string;
+    target: string;
+    initialView: View;
+    action_id: number;
+    action_type: string;
+    res_id?: number | boolean;
+    values?: any;
+    forced_values?: any;
+  }) => void;
+  openRelate: ({
+    relateData,
+    fields,
+    values,
+    action_id,
+    action_type,
+  }: {
+    relateData: any;
+    fields: any;
+    values: any;
+    action_id: number;
+    action_type: string;
+  }) => void;
+  openDefaultActionForModel: ({
+    model,
+    values,
+    forced_values,
+    initialViewType,
+    res_id,
+  }: {
+    model: string;
+    values?: any;
+    forced_values?: any;
+    initialViewType?: ViewType;
+    res_id?: number;
+  }) => void;
+  activeKey: string;
+  onChangeTab: (key: string) => void;
+  onRemoveTab: (key: string) => void;
+  openShortcut: (shortcut: ShortcutApi) => void;
+  tabs: any[];
+  currentView?: View;
+  setCurrentView?: (view?: View) => void;
+  currentId?: number;
+  setCurrentId?: (id?: number) => void;
+};
+
+export const TabManagerContext = React.createContext<TabManagerContextType | null>(
+  null
+);
+
+type TabManagerProviderProps = TabManagerContextType & {
+  children: React.ReactNode;
+};
+
+const TabManagerProvider = (props: TabManagerProviderProps): any => {
+  const {
+    children,
+    openAction,
+    openRelate,
+    openDefaultActionForModel,
+    openShortcut,
+    activeKey,
+    onChangeTab,
+    onRemoveTab,
+    tabs,
+  } = props;
+
+  const [currentView, setCurrentView] = useState<View>();
+  const [currentId, setCurrentId] = useState<number>();
+
+  return (
+    <TabManagerContext.Provider
+      value={{
+        openAction,
+        openRelate,
+        openDefaultActionForModel,
+        activeKey,
+        openShortcut,
+        onChangeTab,
+        onRemoveTab,
+        tabs,
+        currentId,
+        currentView,
+        setCurrentId,
+        setCurrentView,
+      }}
+    >
+      {children}
+    </TabManagerContext.Provider>
+  );
+};
+
+export default TabManagerProvider;

package/src/helpers/containerHelper.ts

@@ -0,0 +1,145 @@
+import { Widget, Label, Field, Container } from "@gisce/ooui";
+
+const getSpanStyleForItem = ({
+  item,
+  responsiveBehaviour,
+}: {
+  item: Widget;
+  responsiveBehaviour: boolean;
+}) => {
+  return {
+    gridColumnStart: "span " + (responsiveBehaviour ? 1 : item.colspan),
+  };
+};
+
+const fillRowWithEmptiesToFit = ({
+  row,
+  mustFillWithEmpties,
+  numberOfColumns,
+}: {
+  row: any;
+  mustFillWithEmpties: boolean;
+  numberOfColumns: number;
+}) => {
+  const rowWithEmptiesToFit: any = [];
+  let totalColSpan = 0;
+
+  const isLastItemAndMustFit = (columnIndex: number) => {
+    return (
+      columnIndex + 1 === row.length &&
+      totalColSpan < numberOfColumns &&
+      !mustFillWithEmpties
+    );
+  };
+
+  row.map((item: Widget, columnIndex: number) => {
+    totalColSpan += item.colspan;
+
+    if (isLastItemAndMustFit(columnIndex)) {
+      const gapsToAdjust = numberOfColumns - totalColSpan;
+      item.colspan = item.colspan + gapsToAdjust;
+      totalColSpan += gapsToAdjust;
+    }
+
+    rowWithEmptiesToFit.push(item);
+
+    if (isLastItemAndMustFit(columnIndex)) {
+      const gapsToFill = numberOfColumns - totalColSpan;
+      for (let i = 0; i < gapsToFill; i += 1) {
+        rowWithEmptiesToFit.push(new Label({ string: "" }));
+      }
+    }
+  });
+
+  return rowWithEmptiesToFit;
+};
+
+const expandWidgetsIfNeeded = ({
+  row,
+  numberOfColumns,
+}: {
+  row: any;
+  numberOfColumns: number;
+}) => {
+  return row.map((item: Widget) => {
+    if ((item as any)._mustExpand) {
+      (item as any).colspan = numberOfColumns;
+      return item;
+    }
+    return item;
+  });
+};
+
+const getSingleRowTemplateColumns = (
+  row: Widget[],
+  numberOfColumns: number
+) => {
+  const gridOptions = row.map((item: Widget) => {
+    if (item instanceof Label && (item as Label).fieldForLabel) {
+      return "auto";
+    }
+    if (item instanceof Container) {
+      return "auto";
+    }
+    return "1fr";
+  });
+
+  if (gridOptions.length < numberOfColumns) {
+    const columnsToAdd = numberOfColumns - gridOptions.length;
+    for (let i = 0; i < columnsToAdd; i++) {
+      gridOptions.push("1fr");
+    }
+  }
+  return gridOptions.join(" ");
+};
+
+const getTemplateColumns = (columns: number, fieldInRows: boolean) => {
+  // We check if we have any label+field inside (fieldInRows) the container.
+  // In this scenario, we must format the grid accordingly
+  // Otherwise, the grid will divide uniformly (auto)
+  const odd = fieldInRows ? "1fr" : "auto";
+  const even = "auto";
+  let templateColumns = "";
+  for (let i = 0; i < columns; i++) {
+    templateColumns += i % 2 ? odd : even;
+    if (i + 1 < columns) {
+      templateColumns += " ";
+    }
+  }
+  return templateColumns;
+};
+
+const getMaxColspanForRows = (rows: Widget[][]) => {
+  const maxColspan = rows.map((row: Widget[]) => {
+    return row.reduce((prev, current) => {
+      return prev + current.colspan;
+    }, 0);
+  });
+  return maxColspan.reduce((a, b) => {
+    return Math.max(a, b);
+  });
+};
+
+const rowsHaveAnyField = (rows: Widget[][]) => {
+  let found = false;
+
+  rows.map((row: Widget[]) => {
+    row.map((item: Widget) => {
+      if (item instanceof Field) {
+        found = true;
+      }
+    });
+  });
+
+  return found;
+};
+
+export {
+  fillRowWithEmptiesToFit,
+  getSpanStyleForItem,
+  expandWidgetsIfNeeded,
+  getMaxColspanForRows,
+  rowsHaveAnyField,
+  getSingleRowTemplateColumns,
+  getTemplateColumns,
+};

package/src/helpers/dynamicColumnsHelper.ts

@@ -0,0 +1,73 @@
+/**
+ * This function calculate the width of a string based on its length
+ * @param {String} text
+ * @param {String} font
+ */
+const getTextWidth = (text: string, font = "14px -apple-system") => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context!.font = font;
+  const metrics = context!.measureText(text);
+  return Math.round((metrics.width + 80) * 1.5);
+};
+
+/**
+ * This function calculates the width of each column based in all CELL VALUES
+ * @param {Array} columns
+ * @param {Array} source
+ * @param {Number} maxWidthPerCell
+ */
+export const calculateColumnsWidth = (
+  columns: any,
+  source: any,
+  maxWidthPerCell = 500
+) => {
+  if (columns.length === 0) {
+    return columns;
+  }
+
+  // First we calculate the width for each column
+  // The column width is based on its string length
+
+  const columnsWithWidth = columns.map((column: any) =>
+    Object.assign(column, {
+      width: getTextWidth(column.title),
+    })
+  );
+
+  // Since we have a minimum width (column's width already calculated),
+  // now we are going to verify if the cell value is bigger
+  // than the column width which is already set
+
+  source.map((entry: any) => {
+    columnsWithWidth.map((column: any, indexColumn: number) => {
+      const columnWidth = column.width;
+      const cellValue = (entry[column.key] as string) || "";
+
+      // Get the string width based on chars length
+      let cellWidth = getTextWidth(cellValue);
+
+      // Verify if the cell value is smaller than column's width
+      if (cellWidth < columnWidth) cellWidth = columnWidth;
+
+      // Verify if the cell value width is bigger than our max width flag
+      if (cellWidth > maxWidthPerCell) cellWidth = maxWidthPerCell;
+
+      // Update the column width
+      columnsWithWidth[indexColumn].width = cellWidth;
+    });
+  });
+
+  // Sum of all columns width to determine the table max width
+  const tableWidth = columnsWithWidth
+    .map((column: any) => column.width)
+    .reduce((a: any, b: any) => {
+      return a + b;
+    });
+
+  return {
+    columns: columnsWithWidth,
+    source,
+    tableWidth,
+  };
+};

package/src/helpers/filesHelper.ts

@@ -0,0 +1,41 @@
+import FileType from "file-type/browser";
+
+export function getFilesize(base64string: string) {
+  const buffer = Buffer.from(base64string, "base64");
+  const inKbs = buffer.length / 1e3;
+  return `${Math.round((inKbs + Number.EPSILON) * 100) / 100} KB`;
+}
+
+export async function getMimeType(base64string: string) {
+  const mimeInfo = await FileType.fromBuffer(
+    Buffer.from(base64string, "base64")
+  );
+  if (!mimeInfo) {
+    return {
+      mime: "text/plain",
+      ext: "txt",
+    };
+  }
+
+  return mimeInfo;
+}
+
+export const toBase64 = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (e: any) => resolve(e.target.result.split(",")[1]);
+    reader.onerror = (error) => reject(error);
+  });
+
+export function openBase64InNewTab(data: string, mimeType: string) {
+  var byteCharacters = atob(data);
+  var byteNumbers = new Array(byteCharacters.length);
+  for (var i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  var byteArray = new Uint8Array(byteNumbers);
+  var file = new Blob([byteArray], { type: mimeType + ";base64" });
+  var fileURL = URL.createObjectURL(file);
+  window.open(fileURL);
+}

package/src/helpers/formHelper.ts

@@ -0,0 +1,225 @@
+import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
+
+const filteredValues = (values: any, fields: any) => {
+  if (!fields) {
+    return values;
+  }
+  const filteredValues: any = {};
+  Object.keys(values).forEach((key) => {
+    if (fields[key] === undefined) {
+      // console.log(`${key} is not in fields`);
+      filteredValues[key] = values[key];
+    } else if (values[key] === false && fields[key].type !== "boolean") {
+      // Do nothing - filter the field.
+    } else if (fields[key].type === "boolean") {
+      const boolValue = values[key];
+      if (boolValue === 0) {
+        filteredValues[key] = false;
+      } else if (boolValue === 1) {
+        filteredValues[key] = true;
+      } else {
+        filteredValues[key] = values[key];
+      }
+    } else {
+      filteredValues[key] = values[key];
+    }
+  });
+  return filteredValues;
+};
+
+export const processValues = (values: any, fields: any) => {
+  const filterBooleans = filteredValues(values, fields);
+  return filterBooleans;
+};
+
+export const getTouchedValues = ({
+  source,
+  target,
+  fields,
+}: {
+  source: any;
+  target: any;
+  fields: any;
+}) => {
+  const differences: any = {};
+  Object.keys(target).forEach((key) => {
+    const is2Many = fields[key]
+      ? fields[key].type === "one2many" || fields[key].type === "many2many"
+      : false;
+
+    if (is2Many) {
+      const sourceValue = JSON.stringify(source[key]);
+      const targetValue = JSON.stringify(target[key]);
+      if (sourceValue === targetValue) {
+        return;
+      }
+
+      const nonOriginalItems =
+        target[key]?.items?.filter(
+          (item: One2manyItem) => item.operation !== "original"
+        ) || [];
+
+      if (nonOriginalItems.length > 0) {
+        differences[key] = target[key];
+      }
+    } else if (Array.isArray(target[key])) {
+      if (source[key] === undefined) {
+        differences[key] = target[key];
+      } else if (fields[key].type === "many2one") {
+        if (!Array.isArray(source[key])) {
+          // This will mean the source many2one value is a numeric id
+          const numericId = source[key];
+          const [targetNumericId] = target[key];
+          if (numericId !== targetNumericId) {
+            differences[key] = target[key];
+          }
+        } else {
+          const sourceValue = JSON.stringify(source[key]);
+          const targetValue = JSON.stringify(target[key]);
+          if (sourceValue !== targetValue) {
+            differences[key] = target[key];
+          }
+        }
+      } else {
+        const sourceValue = JSON.stringify(source[key]);
+        const targetValue = JSON.stringify(target[key]);
+        if (sourceValue !== targetValue) {
+          differences[key] = target[key];
+        }
+      }
+    } else if (source[key] !== target[key]) {
+      if (target[key] === undefined) {
+        differences[key] = null;
+      } else {
+        differences[key] = target[key];
+      }
+    }
+  });
+  return differences;
+};
+
+export const checkFieldsType = ({
+  changedFields,
+  fields,
+  types,
+}: {
+  changedFields: string[];
+  fields: any;
+  types: string[];
+}) => {
+  const valuesChecked = changedFields.map((key) => {
+    return types.includes(fields[key]?.type);
+  });
+  return valuesChecked.some((i) => i === true);
+};
+
+export const mergeFieldsDomain = ({
+  fieldsDomain,
+  fields,
+}: {
+  fieldsDomain: any;
+  fields: any;
+}) => {
+  const output: any = {};
+
+  Object.keys(fields).forEach((key) => {
+    output[key] = fields[key];
+
+    if (fieldsDomain[key]) {
+      output[key].domain = fieldsDomain[key];
+    }
+  });
+
+  return output;
+};
+
+export const getValuesForDomain = (domain: any[]) => {
+  const values: any = {};
+
+  if (!domain || !Array.isArray(domain) || domain?.length === 0) {
+    return {};
+  }
+
+  domain.forEach((entry) => {
+    if (entry?.[1] === "=") {
+      values[entry[0]] = entry[2];
+    }
+  });
+
+  return values;
+};
+
+export const getOnChangePayload = ({
+  onChangeFieldActionArgs,
+  values,
+}: {
+  onChangeFieldActionArgs: any[];
+  values: any;
+}) => {
+  const payload: any = {};
+  onChangeFieldActionArgs.forEach((arg: string) => {
+    if (values[arg]) {
+      payload[arg] = values[arg];
+    } else if (arg[0] === "'") {
+      payload[arg] = arg.replace(/'/g, "");
+    } else {
+      payload[arg] = false;
+    }
+  });
+  return payload;
+};
+
+export const mergeSearchFields = (searchFields: any[]) => {
+  const mergedSearchFields = {
+    primary: [],
+    secondary: [],
+  };
+
+  searchFields.forEach((sf) => {
+    if (!sf) {
+      return;
+    }
+
+    mergedSearchFields.primary = mergedSearchFields.primary.concat(sf.primary);
+    mergedSearchFields.secondary = mergedSearchFields.secondary.concat(
+      sf.secondary
+    );
+  });
+
+  return {
+    primary: mergedSearchFields.primary.filter(onlyUnique),
+    secondary: mergedSearchFields.secondary.filter(onlyUnique),
+  };
+};
+
+function onlyUnique(value: any, index: number, self: any) {
+  return self.indexOf(value) === index;
+}
+
+export const transformPlainMany2Ones = ({
+  values,
+  fields,
+}: {
+  values: any;
+  fields: any;
+}) => {
+  let reformattedValues: { [key: string]: any } = {};
+
+  Object.keys(values).forEach((key) => {
+    const value = values[key];
+
+    if (
+      fields[key] &&
+      fields[key].type === "many2one" &&
+      value &&
+      Array.isArray(value) &&
+      value.length === 2
+    ) {
+      reformattedValues[key] = value[0];
+    } else {
+      reformattedValues[key] = value;
+    }
+  });
+
+  return reformattedValues;
+};

package/src/helpers/iconMapper.ts

@@ -0,0 +1,108 @@
+import * as Icons from "@ant-design/icons";
+
+const iconMapping: { [key: string]: React.ElementType } = {
+  STOCK_HELP: Icons.QuestionOutlined,
+  STOCK_GO_UP: Icons.ArrowUpOutlined,
+  STOCK_SORT_DESCENDING: Icons.SortDescendingOutlined,
+  STOCK_ADD: Icons.PlusOutlined,
+  STOCK_GOTO_LAST: Icons.FastForwardOutlined,
+  STOCK_FIND: Icons.SearchOutlined,
+  STOCK_PROPERTIES: Icons.ControlOutlined,
+  STOCK_DIALOG_INFO: Icons.InfoOutlined,
+  STOCK_FLOPPY: Icons.UsbOutlined,
+  STOCK_JUSTIFY_CENTER: Icons.AlignCenterOutlined,
+  STOCK_GO_BACK: Icons.ArrowLeftOutlined,
+  STOCK_UNDERLINE: Icons.UnderlineOutlined,
+  STOCK_BOLD: Icons.BoldOutlined,
+  STOCK_APPLY: Icons.CheckOutlined,
+  STOCK_ZOOM_OUT: Icons.ZoomOutOutlined,
+  "terp-graph": Icons.PieChartOutlined,
+  "terp-crm": Icons.ContactsOutlined,
+  STOCK_STRIKETHROUGH: Icons.StrikethroughOutlined,
+  STOCK_MEDIA_REWIND: Icons.BackwardOutlined,
+  "terp-partner": Icons.TeamOutlined,
+  STOCK_PRINT: Icons.PrinterOutlined,
+  STOCK_NO: Icons.CloseOutlined,
+  "terp-mrp": Icons.BuildOutlined,
+  "terp-product": Icons.ShoppingOutlined,
+  STOCK_GOTO_FIRST: Icons.FastBackwardOutlined,
+  STOCK_CLOSE: Icons.CloseOutlined,
+  STOCK_REMOVE: Icons.MinusOutlined,
+  STOCK_CUT: Icons.ScissorOutlined,
+  STOCK_DIALOG_AUTHENTICATION: Icons.SafetyOutlined,
+  STOCK_ZOOM_FIT: Icons.ExpandOutlined,
+  STOCK_JUMP_TO: Icons.SelectOutlined,
+  STOCK_HARDDISK: Icons.HddOutlined,
+  STOCK_SAVE_AS: Icons.SaveOutlined,
+  STOCK_UNDO: Icons.UndoOutlined,
+  STOCK_JUSTIFY_RIGHT: Icons.AlignRightOutlined,
+  STOCK_DIALOG_ERROR: Icons.CloseCircleOutlined,
+  STOCK_INDEX: Icons.ProfileOutlined,
+  STOCK_GOTO_BOTTOM: Icons.VerticalAlignBottomOutlined,
+  STOCK_MEDIA_NEXT: Icons.StepForwardOutlined,
+  STOCK_REDO: Icons.RedoOutlined,
+  STOCK_COPY: Icons.CopyOutlined,
+  STOCK_MEDIA_PAUSE: Icons.PauseOutlined,
+  STOCK_GO_FORWARD: Icons.CaretRightOutlined,
+  STOCK_UNDELETE: Icons.UndoOutlined,
+  STOCK_EXECUTE: Icons.SettingOutlined,
+  STOCK_SAVE: Icons.SaveOutlined,
+  STOCK_DIALOG_QUESTION: Icons.QuestionCircleOutlined,
+  STOCK_SORT_ASCENDING: Icons.SortAscendingOutlined,
+  STOCK_REFRESH: Icons.ReloadOutlined,
+  STOCK_MEDIA_FORWARD: Icons.ForwardOutlined,
+  STOCK_STOP: Icons.BorderOutlined,
+  STOCK_PRINT_PREVIEW: Icons.PrinterOutlined,
+  STOCK_HOME: Icons.HomeOutlined,
+  STOCK_PASTE: Icons.CarryOutOutlined,
+  STOCK_ZOOM_100: Icons.ZoomInOutlined,
+  STOCK_FIND_AND_REPLACE: Icons.FileSearchOutlined,
+  STOCK_DIALOG_WARNING: Icons.WarningOutlined,
+  STOCK_ZOOM_IN: Icons.ZoomInOutlined,
+  STOCK_CONVERT: Icons.ExportOutlined,
+  STOCK_ITALIC: Icons.ItalicOutlined,
+  STOCK_YES: Icons.CheckOutlined,
+  STOCK_MEDIA_PLAY: Icons.PlayCircleOutlined,
+  STOCK_MEDIA_RECORD: Icons.VideoCameraOutlined,
+  STOCK_MEDIA_PREVIOUS: Icons.StepBackwardOutlined,
+  STOCK_NEW: Icons.FileAddOutlined,
+  STOCK_CANCEL: Icons.CloseOutlined,
+  STOCK_DISCONNECT: Icons.ApiOutlined,
+  STOCK_JUSTIFY_LEFT: Icons.AlignLeftOutlined,
+  STOCK_FILE: Icons.FileOutlined,
+  STOCK_QUIT: Icons.LogoutOutlined,
+  STOCK_EDIT: Icons.EditOutlined,
+  STOCK_CONNECT: Icons.ApiOutlined,
+  STOCK_GO_DOWN: Icons.CaretDownOutlined,
+  STOCK_NETWORK: Icons.ApartmentOutlined,
+  STOCK_OK: Icons.CheckOutlined,
+  STOCK_GOTO_TOP: Icons.VerticalAlignTopOutlined,
+  STOCK_ABOUT: Icons.StarOutlined,
+  STOCK_COLOR_PICKER: Icons.AimOutlined,
+  STOCK_SELECT_FONT: Icons.FontSizeOutlined,
+  "terp-purchase": Icons.ShoppingCartOutlined,
+  STOCK_DELETE: Icons.DeleteOutlined,
+  STOCK_DND: Icons.FileTextOutlined,
+  STOCK_CLEAR: Icons.CloseSquareOutlined,
+  STOCK_UNINDENT: Icons.AlignLeftOutlined,
+  STOCK_PREFERENCES: Icons.SettingOutlined,
+};
+
+export default (key: string): React.ElementType => {
+  if (key.indexOf("gtk-") !== -1) {
+    const rootIcon = key.replace("gtk-", "").replace("-", "_");
+    const newKey = `STOCK_${rootIcon.toUpperCase()}`;
+    return iconMapping[newKey];
+  }
+  if (iconMapping.hasOwnProperty(key)) {
+    return iconMapping[key];
+  } else {
+    const antKey = `${key.split("-").map((word) => (
+      word.replace(/\w\S*/g, (w) => (w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())))
+    ).join("")}Outlined`
+    // @ts-ignore
+    return Icons[antKey];
+  }
+
+
+};