@fctc/widget-logic 5.2.7 → 5.2.9

package/dist/widget.js

@@ -4042,6 +4042,7 @@ __export(widget_exports, {
   downLoadBinaryController: () => downLoadBinaryController,
   downloadFileController: () => downloadFileController,
   durationController: () => durationController,
+  many2manyBinaryController: () => many2manyBinaryController,
   many2manyFieldController: () => many2manyFieldController,
   many2manyTagsController: () => many2manyTagsController,
   many2oneButtonController: () => many2oneButtonController,
@@ -4147,6 +4148,7 @@ var languages = [
   { id: "vi_VN", name: "VIE" },
   { id: "en_US", name: "ENG" }
 ];
+var isBlobUrl = (url) => url.startsWith("blob:");
 
 // src/utils/function.ts
 var import_react3 = require("react");
@@ -4375,11 +4377,14 @@ var useGetSpecification = ({
   viewData,
   fields
 }) => {
-  const baseModel = {
-    name: String(model),
-    view: viewData,
-    fields
-  };
+  const baseModel = (0, import_react11.useMemo)(
+    () => ({
+      name: String(model),
+      view: viewData,
+      fields
+    }),
+    [model, viewData, fields]
+  );
   const initModel = (0, import_hooks3.useModel)();
   const modelInstance = (0, import_react11.useMemo)(() => {
     if (viewData) {
@@ -5577,8 +5582,82 @@ var binaryFieldController = (props) => {
   };
 };
 
-// src/widget/advance/table/table-head/controller.ts
+// src/widget/basic/many2many-binary-field/controller.tsx
 var import_react23 = require("react");
+var many2manyBinaryController = (props) => {
+  const {
+    name,
+    methods,
+    value,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path
+  } = props;
+  const inputId = (0, import_react23.useId)();
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const binaryRef = (0, import_react23.useRef)(null);
+  const [initialFiles, setInitialFiles] = (0, import_react23.useState)(
+    Array.isArray(value) ? value : value ? [value] : []
+  );
+  const checkIsImageLink = (url) => {
+    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
+    return imageExtensions.test(url) || (0, utils_exports.isBase64Image)(url) || isBlobUrl(url);
+  };
+  const sanitizeForBE = (list) => list.filter((x) => x?.datas && !isBlobUrl(x.datas)).map((x) => ({ name: x.name, datas: x.datas, mimetype: x.mimetype }));
+  const handleFileChange = async (files, e, oldValues) => {
+    try {
+      const uploadedUrls = await Promise.all(
+        files.map(async (f) => {
+          const formData = new FormData();
+          formData.append("file", f);
+          const res = await mutateAsync({ formData, service, xNode, path });
+          return res?.url;
+        })
+      );
+      const uploadedItems = files.map((f, i) => ({
+        name: f.name,
+        datas: uploadedUrls[i] ?? "",
+        mimetype: f.type
+      }));
+      const finalList = [...oldValues, ...uploadedItems];
+      methods?.setValue(name, finalList, { shouldDirty: true });
+      const payloadForBE = sanitizeForBE(finalList);
+      handleOnchange && handleOnchange(name ?? "", payloadForBE);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      e.target.value = "";
+    }
+  };
+  const handleRemoveAt = (idx) => {
+    const current = methods?.getValues(name) || [];
+    const next = current.filter((_, i) => i !== idx);
+    setInitialFiles((p) => p.filter((_, i) => i !== idx));
+    methods?.setValue(name, next.length ? next : null, { shouldDirty: true });
+    const payloadForBE = next.length ? sanitizeForBE(next) : null;
+    handleOnchange && handleOnchange(name ?? "", payloadForBE);
+  };
+  const handleRemoveAll = () => {
+    setInitialFiles([]);
+    methods?.setValue(name, null, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", null);
+  };
+  return {
+    inputId,
+    initialFiles,
+    binaryRef,
+    handleFileChange,
+    handleRemoveAt,
+    handleRemoveAll,
+    checkIsImageLink,
+    setInitialFiles
+  };
+};
+
+// src/widget/advance/table/table-head/controller.ts
+var import_react24 = require("react");
 var tableHeadController = (props) => {
   const {
     typeTable,
@@ -5589,21 +5668,21 @@ var tableHeadController = (props) => {
     setSelectedRowKeys
   } = props;
   const { rowIds: recordIds } = useGetRowIds(tableRef);
-  const selectedRowKeysRef = (0, import_react23.useRef)(recordIds);
+  const selectedRowKeysRef = (0, import_react24.useRef)(recordIds);
   const isGroupTable = typeTable === "group";
-  const recordsCheckedGroup = (0, import_react23.useMemo)(() => {
+  const recordsCheckedGroup = (0, import_react24.useMemo)(() => {
     if (!rows || !groupByList) return 0;
     const groupBy = typeof groupByList === "object" ? groupByList?.contexts?.[0]?.group_by : void 0;
     return countSum(rows, groupBy);
   }, [rows, groupByList]);
-  const isAllGroupChecked = (0, import_react23.useMemo)(() => {
+  const isAllGroupChecked = (0, import_react24.useMemo)(() => {
     if (!isGroupTable || !selectedRowKeys?.length) return false;
     const selectedLength = selectedRowKeys.filter((id) => id !== -1).length;
     const allRecordsSelected = recordIds.length === selectedRowKeys.length ? recordIds.length === selectedLength : false;
     const allGroupsSelected = recordsCheckedGroup === selectedRowKeys.length;
     return allGroupsSelected || allRecordsSelected;
   }, [isGroupTable, selectedRowKeys, recordIds, recordsCheckedGroup]);
-  const isAllNormalChecked = (0, import_react23.useMemo)(() => {
+  const isAllNormalChecked = (0, import_react24.useMemo)(() => {
     if (isGroupTable || !selectedRowKeys?.length || !rows?.length) return false;
     return selectedRowKeys.length === rows.length && selectedRowKeys.every(
       (id) => rows.some((record) => record.id === id)
@@ -5644,23 +5723,23 @@ var tableHeadController = (props) => {
 };
 
 // src/widget/advance/table/table-view/controller.ts
-var import_react24 = require("react");
-var import_utils17 = require("@fctc/interface-logic/utils");
+var import_react25 = require("react");
+var import_utils18 = require("@fctc/interface-logic/utils");
 var tableController = ({ data }) => {
-  const [rows, setRows] = (0, import_react24.useState)([]);
-  const [columnVisibility, setColumnVisibility] = (0, import_react24.useState)({});
-  const dataModelFields = (0, import_react24.useMemo)(() => {
+  const [rows, setRows] = (0, import_react25.useState)([]);
+  const [columnVisibility, setColumnVisibility] = (0, import_react25.useState)({});
+  const dataModelFields = (0, import_react25.useMemo)(() => {
     return data?.fields?.map((field) => ({
       ...data.dataModel?.[field?.name],
       ...field,
       string: field?.string || data.dataModel?.[field?.name]?.string
     })) ?? [];
   }, [data?.fields, data?.dataModel]);
-  const mergeFields = (0, import_react24.useMemo)(
+  const mergeFields = (0, import_react25.useMemo)(
     () => mergeButtons(dataModelFields),
     [dataModelFields]
   );
-  const transformData = (0, import_react24.useCallback)(
+  const transformData = (0, import_react25.useCallback)(
     (dataList) => {
       if (!dataList) return [];
       return dataList.map((item) => {
@@ -5682,16 +5761,16 @@ var tableController = ({ data }) => {
     },
     [data?.typeTable]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setRows(transformData(data?.records));
   }, [data?.records, transformData]);
-  const columns = (0, import_react24.useMemo)(() => {
+  const columns = (0, import_react25.useMemo)(() => {
     try {
       return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils18.domainHelper.matchDomains(
           data.context,
           item?.column_invisible
-        ) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
+        ) : item?.invisible ? import_utils18.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         const overridden = columnVisibility[field?.name];
         return {
@@ -5706,7 +5785,7 @@ var tableController = ({ data }) => {
       return [];
     }
   }, [mergeFields, data?.context, columnVisibility]);
-  const onToggleColumnOptional = (0, import_react24.useCallback)((item) => {
+  const onToggleColumnOptional = (0, import_react25.useCallback)((item) => {
     setColumnVisibility((prev) => ({
       ...prev,
       [item?.name]: item?.optional === "show" ? "hide" : "show"
@@ -5721,7 +5800,7 @@ var tableController = ({ data }) => {
 };
 
 // src/widget/advance/table/table-group/controller.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_store = require("@fctc/interface-logic/store");
 var tableGroupController = (props) => {
   const { env } = (0, provider_exports.useEnv)();
@@ -5738,15 +5817,15 @@ var tableGroupController = (props) => {
     groupByList,
     setSelectedRowKeys
   } = props;
-  const [pageGroup, setPageGroup] = (0, import_react25.useState)(0);
+  const [pageGroup, setPageGroup] = (0, import_react26.useState)(0);
   const { selectedRowKeys } = (0, import_store.useAppSelector)(import_store.selectList);
-  const [isShowGroup, setIsShowGroup] = (0, import_react25.useState)(false);
-  const [colEmptyGroup, setColEmptyGroup] = (0, import_react25.useState)({
+  const [isShowGroup, setIsShowGroup] = (0, import_react26.useState)(false);
+  const [colEmptyGroup, setColEmptyGroup] = (0, import_react26.useState)({
     fromStart: 1,
     fromEnd: 1
   });
   const domain = row?.__domain;
-  const processedData = (0, import_react25.useMemo)(() => {
+  const processedData = (0, import_react26.useMemo)(() => {
     const calculateColSpanEmpty = () => {
       const startIndex = columns.findIndex(
         (col) => col.field.type === "monetary" && typeof row[col.key] === "number" || col.field.aggregator === "sum"
@@ -5761,7 +5840,7 @@ var tableGroupController = (props) => {
     };
     return calculateColSpanEmpty();
   }, [columns, row]);
-  const shouldFetchData = (0, import_react25.useMemo)(() => {
+  const shouldFetchData = (0, import_react26.useMemo)(() => {
     return !!isShowGroup;
   }, [isShowGroup]);
   const enabled = shouldFetchData && !!processedData;
@@ -5830,7 +5909,7 @@ var tableGroupController = (props) => {
     }
     toggleShowGroup();
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!isDataGroupFetched || !rowsGroup || !checkedAll || allIdsNull || typeTableGroup === "group") {
       return;
     }
@@ -5856,7 +5935,7 @@ var tableGroupController = (props) => {
 
 // src/widget/advance/search/controller.ts
 var import_moment2 = __toESM(require_moment());
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/constants.ts
 var constants_exports = {};
@@ -5871,14 +5950,14 @@ var searchController = ({
   fieldsList
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const [filterBy, setFilterBy] = (0, import_react26.useState)(null);
-  const [searchBy, setSearchBy] = (0, import_react26.useState)(null);
-  const [groupBy, setGroupBy] = (0, import_react26.useState)(null);
-  const [selectedTags, setSelectedTags] = (0, import_react26.useState)(null);
-  const [searchString, setSearchString] = (0, import_react26.useState)("");
-  const [searchMap, setSearchMap] = (0, import_react26.useState)({});
-  const [hoveredIndex, setHoveredIndex] = (0, import_react26.useState)(0);
-  const [hoveredIndexSearchList, setHoveredIndexSearchList] = (0, import_react26.useState)(0);
+  const [filterBy, setFilterBy] = (0, import_react27.useState)(null);
+  const [searchBy, setSearchBy] = (0, import_react27.useState)(null);
+  const [groupBy, setGroupBy] = (0, import_react27.useState)(null);
+  const [selectedTags, setSelectedTags] = (0, import_react27.useState)(null);
+  const [searchString, setSearchString] = (0, import_react27.useState)("");
+  const [searchMap, setSearchMap] = (0, import_react27.useState)({});
+  const [hoveredIndex, setHoveredIndex] = (0, import_react27.useState)(0);
+  const [hoveredIndexSearchList, setHoveredIndexSearchList] = (0, import_react27.useState)(0);
   const actionContext = typeof context === "string" ? (0, utils_exports.evalJSONContext)(context) : context;
   const contextSearch = { ...env.context, ...actionContext };
   const domainAction = domain ? Array.isArray(domain) ? [...domain] : (0, utils_exports.evalJSONDomain)(domain, contextSearch) : [];
@@ -5925,7 +6004,7 @@ var searchController = ({
       }
     }
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     fetchData();
   }, [model, viewData]);
   const onChangeSearchInput = (search_string) => {
@@ -6007,7 +6086,7 @@ var searchController = ({
       return [...domain2];
     }
   };
-  const setTagSearch = (0, import_react26.useCallback)(
+  const setTagSearch = (0, import_react27.useCallback)(
     (updatedMap) => {
       if (!updatedMap) return;
       const tagsSearch = Object.entries(updatedMap).map(
@@ -6070,7 +6149,7 @@ var searchController = ({
     },
     [searchMap]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setTagSearch(searchMap);
   }, [searchMap]);
   const handleAddTagSearch = (tag) => {
@@ -6189,6 +6268,7 @@ var searchController = ({
   downLoadBinaryController,
   downloadFileController,
   durationController,
+  many2manyBinaryController,
   many2manyFieldController,
   many2manyTagsController,
   many2oneButtonController,

package/dist/widget.mjs

@@ -4214,6 +4214,7 @@ var languages = [
   { id: "vi_VN", name: "VIE" },
   { id: "en_US", name: "ENG" }
 ];
+var isBlobUrl = (url) => url.startsWith("blob:");
 
 // src/utils/function.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useReducer } from "react";
@@ -4443,11 +4444,14 @@ var useGetSpecification = ({
   viewData,
   fields
 }) => {
-  const baseModel = {
-    name: String(model),
-    view: viewData,
-    fields
-  };
+  const baseModel = useMemo5(
+    () => ({
+      name: String(model),
+      view: viewData,
+      fields
+    }),
+    [model, viewData, fields]
+  );
   const initModel = useModel();
   const modelInstance = useMemo5(() => {
     if (viewData) {
@@ -5649,8 +5653,82 @@ var binaryFieldController = (props) => {
   };
 };
 
+// src/widget/basic/many2many-binary-field/controller.tsx
+import { useId as useId2, useRef as useRef4, useState as useState13 } from "react";
+var many2manyBinaryController = (props) => {
+  const {
+    name,
+    methods,
+    value,
+    onChange: handleOnchange,
+    service,
+    xNode,
+    path
+  } = props;
+  const inputId = useId2();
+  const { useUploadFile: useUploadFile2 } = (0, provider_exports.useService)();
+  const { mutateAsync } = useUploadFile2();
+  const binaryRef = useRef4(null);
+  const [initialFiles, setInitialFiles] = useState13(
+    Array.isArray(value) ? value : value ? [value] : []
+  );
+  const checkIsImageLink = (url) => {
+    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
+    return imageExtensions.test(url) || (0, utils_exports.isBase64Image)(url) || isBlobUrl(url);
+  };
+  const sanitizeForBE = (list) => list.filter((x) => x?.datas && !isBlobUrl(x.datas)).map((x) => ({ name: x.name, datas: x.datas, mimetype: x.mimetype }));
+  const handleFileChange = async (files, e, oldValues) => {
+    try {
+      const uploadedUrls = await Promise.all(
+        files.map(async (f) => {
+          const formData = new FormData();
+          formData.append("file", f);
+          const res = await mutateAsync({ formData, service, xNode, path });
+          return res?.url;
+        })
+      );
+      const uploadedItems = files.map((f, i) => ({
+        name: f.name,
+        datas: uploadedUrls[i] ?? "",
+        mimetype: f.type
+      }));
+      const finalList = [...oldValues, ...uploadedItems];
+      methods?.setValue(name, finalList, { shouldDirty: true });
+      const payloadForBE = sanitizeForBE(finalList);
+      handleOnchange && handleOnchange(name ?? "", payloadForBE);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      e.target.value = "";
+    }
+  };
+  const handleRemoveAt = (idx) => {
+    const current = methods?.getValues(name) || [];
+    const next = current.filter((_, i) => i !== idx);
+    setInitialFiles((p) => p.filter((_, i) => i !== idx));
+    methods?.setValue(name, next.length ? next : null, { shouldDirty: true });
+    const payloadForBE = next.length ? sanitizeForBE(next) : null;
+    handleOnchange && handleOnchange(name ?? "", payloadForBE);
+  };
+  const handleRemoveAll = () => {
+    setInitialFiles([]);
+    methods?.setValue(name, null, { shouldDirty: true });
+    handleOnchange && handleOnchange(name ?? "", null);
+  };
+  return {
+    inputId,
+    initialFiles,
+    binaryRef,
+    handleFileChange,
+    handleRemoveAt,
+    handleRemoveAll,
+    checkIsImageLink,
+    setInitialFiles
+  };
+};
+
 // src/widget/advance/table/table-head/controller.ts
-import { useMemo as useMemo10, useRef as useRef4 } from "react";
+import { useMemo as useMemo10, useRef as useRef5 } from "react";
 var tableHeadController = (props) => {
   const {
     typeTable,
@@ -5661,7 +5739,7 @@ var tableHeadController = (props) => {
     setSelectedRowKeys
   } = props;
   const { rowIds: recordIds } = useGetRowIds(tableRef);
-  const selectedRowKeysRef = useRef4(recordIds);
+  const selectedRowKeysRef = useRef5(recordIds);
   const isGroupTable = typeTable === "group";
   const recordsCheckedGroup = useMemo10(() => {
     if (!rows || !groupByList) return 0;
@@ -5716,11 +5794,11 @@ var tableHeadController = (props) => {
 };
 
 // src/widget/advance/table/table-view/controller.ts
-import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo11, useState as useState14 } from "react";
 import { domainHelper } from "@fctc/interface-logic/utils";
 var tableController = ({ data }) => {
-  const [rows, setRows] = useState13([]);
-  const [columnVisibility, setColumnVisibility] = useState13({});
+  const [rows, setRows] = useState14([]);
+  const [columnVisibility, setColumnVisibility] = useState14({});
   const dataModelFields = useMemo11(() => {
     return data?.fields?.map((field) => ({
       ...data.dataModel?.[field?.name],
@@ -5793,7 +5871,7 @@ var tableController = ({ data }) => {
 };
 
 // src/widget/advance/table/table-group/controller.ts
-import { useEffect as useEffect15, useMemo as useMemo12, useState as useState14 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo12, useState as useState15 } from "react";
 import { useAppSelector, selectList } from "@fctc/interface-logic/store";
 var tableGroupController = (props) => {
   const { env } = (0, provider_exports.useEnv)();
@@ -5810,10 +5888,10 @@ var tableGroupController = (props) => {
     groupByList,
     setSelectedRowKeys
   } = props;
-  const [pageGroup, setPageGroup] = useState14(0);
+  const [pageGroup, setPageGroup] = useState15(0);
   const { selectedRowKeys } = useAppSelector(selectList);
-  const [isShowGroup, setIsShowGroup] = useState14(false);
-  const [colEmptyGroup, setColEmptyGroup] = useState14({
+  const [isShowGroup, setIsShowGroup] = useState15(false);
+  const [colEmptyGroup, setColEmptyGroup] = useState15({
     fromStart: 1,
     fromEnd: 1
   });
@@ -5928,7 +6006,7 @@ var tableGroupController = (props) => {
 
 // src/widget/advance/search/controller.ts
 var import_moment2 = __toESM(require_moment());
-import { useCallback as useCallback7, useEffect as useEffect16, useState as useState15 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useState as useState16 } from "react";
 
 // src/constants.ts
 var constants_exports = {};
@@ -5944,14 +6022,14 @@ var searchController = ({
   fieldsList
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const [filterBy, setFilterBy] = useState15(null);
-  const [searchBy, setSearchBy] = useState15(null);
-  const [groupBy, setGroupBy] = useState15(null);
-  const [selectedTags, setSelectedTags] = useState15(null);
-  const [searchString, setSearchString] = useState15("");
-  const [searchMap, setSearchMap] = useState15({});
-  const [hoveredIndex, setHoveredIndex] = useState15(0);
-  const [hoveredIndexSearchList, setHoveredIndexSearchList] = useState15(0);
+  const [filterBy, setFilterBy] = useState16(null);
+  const [searchBy, setSearchBy] = useState16(null);
+  const [groupBy, setGroupBy] = useState16(null);
+  const [selectedTags, setSelectedTags] = useState16(null);
+  const [searchString, setSearchString] = useState16("");
+  const [searchMap, setSearchMap] = useState16({});
+  const [hoveredIndex, setHoveredIndex] = useState16(0);
+  const [hoveredIndexSearchList, setHoveredIndexSearchList] = useState16(0);
   const actionContext = typeof context === "string" ? (0, utils_exports.evalJSONContext)(context) : context;
   const contextSearch = { ...env.context, ...actionContext };
   const domainAction = domain ? Array.isArray(domain) ? [...domain] : (0, utils_exports.evalJSONDomain)(domain, contextSearch) : [];
@@ -6261,6 +6339,7 @@ export {
   downLoadBinaryController,
   downloadFileController,
   durationController,
+  many2manyBinaryController,
   many2manyFieldController,
   many2manyTagsController,
   many2oneButtonController,