@gisce/react-ooui 1.0.18 → 1.1.0

package/src/hooks/useSearch.ts

@@ -0,0 +1,404 @@
+import { mergeParams } from "@/helpers/searchHelper";
+import {
+  getColorMap,
+  getTableItems,
+  getTree,
+  sortResults,
+} from "@/helpers/treeHelper";
+import { useState, useCallback, useRef } from "react";
+import { ConnectionProvider, FormView, TreeView } from "..";
+
+type UseSearchOpts = {
+  model: string;
+  setSearchTreeNameSearch?: (searchString?: string) => void;
+  setSelectedRowItems?: (value: any[]) => void;
+  searchParams?: any[];
+  setSearchParams?: (value: any[]) => void;
+  setSearchVisible?: (value: boolean) => void;
+  setTreeIsLoading?: (value: boolean) => void;
+  nameSearch?: string;
+  searchNameGetDoneRef?: any;
+  context?: any;
+  setActionViewTotalItems?: (totalItems: number) => void;
+  formView: FormView;
+  treeView: TreeView;
+  sorter: any;
+  setSorter?: (sorter: any) => void;
+  setCurrentItemIndex?: (value?: number) => void;
+  setResultsActionView?: (value: any[]) => void;
+  resultsActionView?: any[];
+  domain: any;
+  currentId?: number;
+  limitFromAction?: number;
+  limit?: number;
+  setLimit?: (value: number) => void;
+  setSearchValues?: (value: any) => void;
+};
+
+export const DEFAULT_SEARCH_LIMIT = 80;
+
+export const useSearch = (opts: UseSearchOpts) => {
+  const {
+    model,
+    setSearchTreeNameSearch,
+    setSelectedRowItems,
+    setSearchParams,
+    setSearchVisible,
+    setTreeIsLoading,
+    nameSearch,
+    searchNameGetDoneRef,
+    context,
+    setActionViewTotalItems,
+    treeView,
+    formView,
+    sorter,
+    setSorter,
+    setCurrentItemIndex,
+    setResultsActionView,
+    resultsActionView,
+    domain,
+    currentId,
+    limitFromAction,
+    limit,
+    setLimit,
+    searchParams = [],
+    setSearchValues,
+  } = opts;
+
+  const [tableRefreshing, setTableRefreshing] = useState<boolean>(false);
+  const [searchFilterLoading, setSearchFilterLoading] =
+    useState<boolean>(false);
+  const [searchError, setSearchError] = useState<string>();
+  const [page, setPage] = useState<number>(1);
+  const [offset, setOffset] = useState<number>(0);
+  const [totalItems, setTotalItems] = useState<number>();
+  const [resultsInternal, setResultsInternal] = useState<any>([]);
+  const [colorsForResults, setColorsForResults] = useState<any>(undefined);
+
+  const originalResults = useRef<any[]>([]);
+  const internalLimit = useRef(80);
+  const actionDomain = useRef<any>([]);
+
+  const setResults = useCallback((results: any) => {
+    setResultsActionView?.([...results]);
+    setResultsInternal([...results]);
+  }, []);
+
+  const getResults = useCallback(() => {
+    if (!resultsActionView) {
+      return resultsInternal;
+    }
+    return resultsActionView;
+  }, [resultsActionView, resultsInternal]);
+
+  const searchByNameSearch = useCallback(async () => {
+    const searchResults = await ConnectionProvider.getHandler().nameSearch({
+      model,
+      payload: nameSearch,
+      limit: internalLimit.current,
+      attrs: actionDomain.current.length > 0 ? actionDomain.current : domain,
+      context,
+    });
+
+    setTotalItems(searchResults.length);
+    setActionViewTotalItems?.(searchResults.length);
+
+    if (searchResults.length > 0) {
+      const resultsIds = searchResults.map((item: any) => {
+        return item?.[0];
+      });
+
+      const { colors } = getTree(treeView!);
+
+      const resultsWithData =
+        await ConnectionProvider.getHandler().readEvalUiObjects({
+          model,
+          ids: resultsIds,
+          arch: treeView?.arch!,
+          fields: treeView!.field_parent
+            ? { ...treeView!.fields, [treeView!.field_parent]: {} }
+            : treeView!.fields,
+          context,
+          attrs: colors && {
+            colors,
+          },
+        });
+      const resultsData = resultsWithData[0];
+
+      originalResults.current = [...resultsData];
+
+      setColorsForResults(getColorMap(resultsWithData[1]));
+
+      const newResultIds = resultsData.map((item: any) => item.id);
+
+      const resultsSorted =
+        sorter !== undefined
+          ? sortResults({
+              resultsToSort: resultsData,
+              sorter,
+              fields: { ...treeView!.fields, ...formView!.fields },
+            })
+          : [...originalResults.current];
+
+      setResults(resultsSorted);
+
+      if (newResultIds.length > 0) {
+        setCurrentItemIndex?.(0);
+      } else {
+        setCurrentItemIndex?.(undefined);
+      }
+    } else {
+      setResults([]);
+      setCurrentItemIndex?.(undefined);
+    }
+
+    searchNameGetDoneRef.current = true;
+  }, [
+    setResults,
+    searchNameGetDoneRef,
+    nameSearch,
+    model,
+    context,
+    domain,
+    treeView,
+    formView,
+    sorter,
+    setCurrentItemIndex,
+    setActionViewTotalItems,
+    internalLimit,
+    actionDomain,
+  ]);
+
+  const searchResults = useCallback(async () => {
+    const domainParams =
+      actionDomain.current.length > 0 ? actionDomain.current : domain;
+
+    const mergedParams = mergeParams(searchParams, domainParams);
+    const { colors } = getTree(treeView!);
+
+    const { totalItems, results, attrsEvaluated } =
+      await ConnectionProvider.getHandler().searchForTree({
+        params: mergedParams,
+        limit,
+        offset,
+        model,
+        fields: treeView!.field_parent
+          ? { ...treeView!.fields, [treeView!.field_parent]: {} }
+          : treeView!.fields,
+        context,
+        attrs: colors && { colors },
+      });
+    setColorsForResults(getColorMap(attrsEvaluated));
+
+    originalResults.current = [...results];
+
+    const resultsSorted =
+      sorter !== undefined
+        ? sortResults({
+            resultsToSort: results,
+            sorter: sorter,
+            fields: { ...treeView!.fields, ...formView!.fields },
+          })
+        : [...originalResults.current];
+
+    setResults(resultsSorted);
+
+    if (resultsActionView && resultsSorted.length > 0) {
+      const newCurrentItemIndex = resultsSorted.findIndex(
+        (item) => currentId === item.id
+      );
+
+      if (newCurrentItemIndex === -1) {
+        setCurrentItemIndex?.(0);
+      } else {
+        setCurrentItemIndex?.(newCurrentItemIndex);
+      }
+    } else {
+      setCurrentItemIndex?.(undefined);
+    }
+
+    const totalItemsValue = await totalItems;
+
+    setTotalItems(totalItemsValue);
+    setActionViewTotalItems?.(totalItemsValue);
+  }, [
+    setCurrentItemIndex,
+    resultsActionView,
+    setResults,
+    currentId,
+    model,
+    context,
+    domain,
+    treeView,
+    formView,
+    sorter,
+    setActionViewTotalItems,
+    limit,
+    offset,
+    actionDomain,
+    searchParams,
+  ]);
+
+  const fetchResults = useCallback(async () => {
+    try {
+      setTableRefreshing(true);
+      setTreeIsLoading?.(true);
+      if (nameSearch && !searchNameGetDoneRef.current) {
+        await searchByNameSearch();
+      } else {
+        await searchResults();
+      }
+    } catch (error) {
+      setSearchError(error.message);
+    } finally {
+      setTableRefreshing(false);
+      setSearchFilterLoading(false);
+      setTreeIsLoading?.(false);
+    }
+  }, [
+    actionDomain,
+    context,
+    currentId,
+    domain,
+    formView,
+    internalLimit,
+    limit,
+    model,
+    nameSearch,
+    offset,
+    resultsActionView,
+    searchNameGetDoneRef,
+    setActionViewTotalItems,
+    setCurrentItemIndex,
+    setResults,
+    setSearchError,
+    setSearchFilterLoading,
+    setTableRefreshing,
+    setTreeIsLoading,
+    sorter,
+    treeView,
+  ]);
+
+  const changeSort = useCallback(
+    (newSorter: any) => {
+      setSorter?.(newSorter);
+      const sortedResults =
+        newSorter !== undefined
+          ? sortResults({
+              resultsToSort: getResults(),
+              sorter: newSorter,
+              fields: { ...treeView.fields, ...formView.fields },
+            })
+          : [...originalResults.current];
+      setResults(sortedResults);
+    },
+    [setSorter, getResults, treeView, formView, setResults]
+  );
+
+  const submit = useCallback(
+    ({
+      params: newParams,
+      limit: newLimit,
+      offset: newOffset,
+      searchValues,
+    }: {
+      params: any;
+      limit: number;
+      offset: number;
+      searchValues: any;
+    }) => {
+      if (tableRefreshing) return;
+      setSearchTreeNameSearch?.(undefined);
+      setSelectedRowItems?.([]);
+      setSearchValues?.(searchValues);
+      setSearchParams?.(newParams);
+      setSearchVisible?.(false);
+      setSearchFilterLoading(true);
+      setSearchError(undefined);
+      setPage(1);
+      if (newLimit) setLimit?.(newLimit);
+      if (newOffset) setOffset(newOffset);
+      fetchResults();
+    },
+    [
+      tableRefreshing,
+      setSearchTreeNameSearch,
+      setSelectedRowItems,
+      setSearchParams,
+      setSearchVisible,
+      setSearchFilterLoading,
+      setSearchError,
+      setPage,
+      setLimit,
+      setOffset,
+      fetchResults,
+    ]
+  );
+
+  const requestPageChange = useCallback(
+    (page: number) => {
+      setTableRefreshing(true);
+      setPage(page);
+      setOffset((page - 1) * limit!);
+    },
+    [setTableRefreshing, limit, setOffset, setPage]
+  );
+
+  const clear = useCallback(() => {
+    if (tableRefreshing) return;
+    setSearchTreeNameSearch?.(undefined);
+    setSearchParams?.([]);
+    setSearchValues?.({});
+    setSearchError(undefined);
+    setOffset(0);
+    setPage(1);
+    setLimit?.(limitFromAction || DEFAULT_SEARCH_LIMIT);
+  }, [
+    tableRefreshing,
+    setSearchTreeNameSearch,
+    setSearchParams,
+    setSearchError,
+    setOffset,
+    setPage,
+    setLimit,
+    limitFromAction,
+  ]);
+
+  const fetchChildrenForRecord = useCallback(
+    async (record: any) => {
+      const child_id = record[treeView?.field_parent || "child_id"];
+
+      const children = await ConnectionProvider.getHandler().readObjects({
+        model,
+        ids: child_id,
+        fields: treeView!.field_parent
+          ? { ...treeView!.fields, [treeView!.field_parent]: {} }
+          : treeView!.fields,
+        context,
+      });
+
+      setResults([...getResults(), ...children]);
+
+      return getTableItems(getTree(treeView!), children);
+    },
+    [treeView, model, context, getResults, setResults]
+  );
+
+  return {
+    submit,
+    clear,
+    fetchResults,
+    tableRefreshing,
+    searchFilterLoading,
+    searchError,
+    page,
+    offset,
+    limit,
+    getResults,
+    requestPageChange,
+    changeSort,
+    fetchChildrenForRecord,
+    colorsForResults,
+    totalItems,
+  };
+};

package/src/locales/ca_ES.tsx

@@ -83,4 +83,5 @@ export default {
   openAttachment: "Veure detall de l'adjunt",
   openAttachmentLink: "Obrir enllaç de l'adjunt",
   uninformed: "Sense informar",
+  totalRegisters: "Registres totals:",
 };

package/src/locales/en_US.tsx

@@ -80,4 +80,5 @@ export default {
   openAttachment: "Open attachment detail",
   openAttachmentLink: "Open attachment link",
   uninformed: "Uninformed",
+  totalRegisters: "Total registers:",
 };

package/src/locales/es_ES.tsx

@@ -84,4 +84,5 @@ export default {
   openAttachment: "Ver detalle del adjunto",
   openAttachmentLink: "Abrir enlace del adjunto",
   uninformed: "Sin informar",
+  totalRegisters: "Registros totales:",
 };

package/src/stories/forms/ActivacioContracteForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/ActivacioContracte",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        id={6}
+        model={"giscedata.polissa.crear.contracte"}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/mocks/index.ts

@@ -14,6 +14,7 @@ import attachment from "./models/attachment";
 import crm_case from "./models/crm_case";
 import form_with_gridfiber from "./models/form_with_gridfiber";
 import partner_category from "./models/res_partner_category";
+import activacioContracte from "./models/activacioContracte";
 
 const allModels = [
   cups,
@@ -32,6 +33,7 @@ const allModels = [
   crm_case,
   form_with_gridfiber,
   partner_category,
+  activacioContracte,
 ];
 
 const getMock = (model: string) => {

package/src/stories/mocks/models/activacioContracte.ts

@@ -0,0 +1,112 @@
+export default {
+  model: "giscedata.polissa.crear.contracte",
+  exampleValues: {
+    id: 6,
+    accio: "nou",
+    data_final: undefined,
+    duracio: undefined,
+    data_firma_contracte: "2017-06-01 00:00:00",
+    data_inici: "2022-10-05",
+    first_onchange: true,
+    observacions:
+      "Cambios realizados detectados autom\u00e1ticamente:\n\u2022 C\u00f3digo DH: E2 \u2192 G0\n\u2022 C\u00f3digo Tarifa: 2A \u2192 2T\n",
+    state: "ok",
+    parent_id: undefined,
+  },
+  form: {
+    arch: '<form string="Activación del contrato">\n          <field name="state" invisible="1"/>\n                <field name="first_onchange" invisible="1"/>\n          <group colspan="4" col="4" attrs="{\'invisible\': [(\'state\', \'=\', \'fail\')]}">\n            <field name="accio"/>\n            <group colspan="4" col="4" attrs="{\'invisible\': [(\'accio\', \'=\', \'modificar\')]}">\n              <label string="Solo cambiar para fechas inferiores a la fecha mostrada, si no se escogerá ésta, ya que es la fecha final del contrato vigente" colspan="4"/>\n              <field name="data_inici" attrs="{\'required\': [(\'accio\', \'=\', \'nou\')]}" on_change="onchange_duracio_first(data_inici, duracio, first_onchange, context)"/>\n              <field name="duracio" attrs="{\'required\': [(\'accio\', \'=\', \'nou\')]}" on_change="onchange_duracio_first(data_inici, duracio, first_onchange, context)"/>\n              <field name="data_final" attrs="{\'required\': [(\'accio\', \'=\', \'nou\')]}"/>\n              <field name="data_firma_contracte"/>\n            </group>\n            <separator colspan="4" string="Observaciones"/>\n            <field name="observacions" colspan="4" required="1" nolabel="1" width="600" height="120"/>\n            <group col="2" colspan="4">\n              <button icon="gtk-cancel" special="cancel" string="Cancelar" name="action_cancel" type="object"/>\n              <button icon="gtk-ok" name="action_crear_contracte" string="Crear contrato" type="object"/>\n            </group>\n          </group>\n          <group colspan="4" col="4" attrs="{\'invisible\': [(\'state\', \'=\', \'ok\')]}">\n            <group col="1" colspan="1" rowspan="2">\n              <image name="gtk-dialog-warning"/>\n            </group>\n            <group colspan="3" col="3">\n              <label colspan="3" string="&lt;b&gt;Atención!&lt;/b&gt;"/>\n              <label colspan="3" string="Este contrato tiene modificaciones contractuales en estado &lt;b&gt;pendiente&lt;/b&gt;. No se puede crear otra sin cancelarlas"/>\n              <button icon="gtk-close" special="cancel" string="Cerrar" name="action_cancel" type="object"/>\n            </group>\n          </group>\n        </form>',
+    field_parent: false,
+    fields: {
+      accio: {
+        required: true,
+        selection: [
+          ["modificar", "Modificar el contrato existente"],
+          ["nou", "Crear una modificaci\u00f3n contractual nueva"],
+        ],
+        string: "Acci\u00f3n",
+        type: "selection",
+        views: {},
+      },
+      data_final: { string: "Fecha final", type: "date", views: {} },
+      data_firma_contracte: {
+        string: "Fecha firma",
+        type: "datetime",
+        views: {},
+      },
+      data_inici: {
+        string: "Fecha de activaci\u00f3n",
+        type: "date",
+        views: {},
+      },
+      duracio: {
+        selection: [
+          ["actual", "Final del contrato actual"],
+          ["nou", "Nuevo periodo completo de contrato"],
+        ],
+        string: "Duraci\u00f3n",
+        type: "selection",
+        views: {},
+      },
+      first_onchange: { string: "First onchange", type: "boolean", views: {} },
+      observacions: {
+        required: true,
+        string: "Observaciones",
+        type: "text",
+        views: {},
+      },
+      state: {
+        selection: [
+          ["ok", "OK"],
+          ["fail", "Error"],
+        ],
+        string: "Estado",
+        type: "selection",
+        views: {},
+      },
+    },
+    model: "giscedata.polissa.crear.contracte",
+    name: "giscedata.polissa.crear.contracte.form",
+    search_fields: { primary: [], secondary: [] },
+    toolbar: {
+      action: [],
+      print: [
+        {
+          datas: { model: "giscedata.polissa.crear.contracte" },
+          id: -1,
+          model: "giscedata.polissa.crear.contracte",
+          name: "Export to XLSX",
+          report_name: "printscreen.list",
+          string: "Export to XLSX",
+          type: "ir.actions.report.xml",
+        },
+      ],
+      relate: [
+        {
+          auto_refresh: 0,
+          context: "{'active_test': False}",
+          domain: "[('id', '=', active_id)]",
+          groups_id: [],
+          id: -1,
+          limit: 0,
+          name: "giscedata.polissa.crear.contracte",
+          res_model: "giscedata.polissa.crear.contracte",
+          src_model: "giscedata.polissa.crear.contracte",
+          string: "giscedata.polissa.crear.contracte",
+          target: "current",
+          type: "ir.actions.act_window",
+          usage: "",
+          view_id: false,
+          view_ids: [],
+          view_mode: "tree,form",
+          view_type: "form",
+          views: [
+            [false, "tree"],
+            [false, "form"],
+          ],
+        },
+      ],
+    },
+    type: "form",
+    view_id: 476,
+  },
+};

package/src/types/index.ts

@@ -1,3 +1,4 @@
+import { ShortcutApi } from "@/ui/FavouriteButton";
 import { Field as FieldOoui } from "@gisce/ooui";
 
 type Strings = {
@@ -22,7 +23,18 @@ type SearchFields = {
   secondary: string[];
 };
 
-type TreeView = {
+export type InitialViewData = {
+  id: number;
+  type: ViewType;
+};
+
+export type BaseView = {
+  type: ViewType;
+  view_id: number;
+  name: string;
+};
+
+type TreeView = BaseView & {
   view_id: number;
   arch: string;
   fields: any;
@@ -36,6 +48,26 @@ type FormView = TreeView & {
   toolbar?: any;
 };
 
+export type DashboardView = {
+  view_id?: number;
+  type: ViewType;
+  model: string;
+  id: number;
+  context?: any;
+  configAction?: ShortcutApi;
+};
+
+export type DashboardProps = Omit<DashboardView, "type">;
+
+export type GraphView = {
+  arch: string;
+  type: ViewType;
+  view_id: number;
+  name: string;
+};
+
+export type View = TreeView | FormView | DashboardView | GraphView;
+
 type SearchResponse = {
   totalItems: Promise<number>;
   results: any[];
@@ -216,7 +248,9 @@ type ConnectionProviderType = {
     action: string;
     context?: any;
   }) => Promise<ViewData>;
-  getView: (options: GetViewRequest) => Promise<FormView | TreeView>;
+  getView: (
+    options: GetViewRequest
+  ) => Promise<FormView | TreeView | GraphView>;
   getFields: (options: GetFieldsRequest) => Promise<any>;
   searchAllIds: (options: SearchAllIdsRequest) => Promise<number[]>;
   searchCount: (options: SearchCountRequest) => Promise<number>;
@@ -253,7 +287,7 @@ type ConnectionProviderType = {
   treeButOpen: (options: TreeButOpenOptions) => Promise<any>;
 };
 
-type ViewType = "tree" | "form" | "dashboard" | "graph";
+type ViewType = "tree" | "form" | "dashboard" | "graph" | "calendar";
 
 export type {
   Strings,

package/src/ui/FavouriteButton.tsx

@@ -121,7 +121,7 @@ const FavouriteButton = (props: Props) => {
       return;
     }
 
-    const view_id = currentView.id;
+    const view_id = currentView.view_id!;
     let res_id: boolean | number = false;
 
     if (currentView.type === "form") {
@@ -205,7 +205,7 @@ const FavouriteButton = (props: Props) => {
 
       const currentTab = tabs.find((t) => t.key === activeKey);
       const { id: action_id, type: action_type } = currentTab?.action || {};
-      const view_id = currentView.id;
+      const view_id = currentView.view_id!;
       let res_id: boolean | number = false;
 
       if (!action_id || !action_type) {

package/src/ui/TitleHeader.tsx

@@ -9,11 +9,12 @@ import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 const { Title, Text } = Typography;
 
 type Props = {
+  title?: string;
   children?: any;
 };
 
 function TitleHeader(props: Props) {
-  const { children } = props;
+  const { title: titleProps, children } = props;
   const {
     title,
     currentView,
@@ -73,13 +74,13 @@ function TitleHeader(props: Props) {
   return (
     <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
       <Row
-        className="bg-blueGray-100 shadow-md rounded"
+        className="rounded shadow-md bg-blueGray-100"
         style={{ padding: "1em" }}
         align="middle"
       >
         <Col flex={2}>
           <Title level={3} style={{ marginBottom: 0 }}>
-            {title}
+            {titleProps || title}
           </Title>
           {getSummary()}
         </Col>