@fctc/widget-logic 5.2.8 → 5.2.9

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { useAddEntity, useButton, useChangeOrderPreparationState, useChangeStatu
 export { ActionResultType, AppProvider, CompanyTuple, ContextProfile, CurrentCompany, RecordMenu, UseMenuReturn, ViewResponse, useAppProvider, useCallAction, useCallActionType, useClickOutside, useCompany, useCompanyType, useConfig, useConfigType, useDebounce, useDetail, useGetAction, useGetRowIds, useGetSpecification, useListData, useListDataType, useMenu, useMenuType, useProfile, useUser, useUserType, useViewV2, useViewV2Type } from './hooks.mjs';
 export * from '@fctc/interface-logic/configs';
 export { CheckIcon, ChevronBottomIcon, CloseIcon, EyeIcon, FilterIcon, GroupByIcon, LoadingIcon, SearchIcon } from './icons.mjs';
-export { ISelctionStateProps, ITableHeadProps, ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController } from './widget.mjs';
+export { ISelctionStateProps, ITableHeadProps, ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyBinaryController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController } from './widget.mjs';
 export * from '@fctc/interface-logic/types';
 export { IInputFieldProps, ValuePropsType } from './types.mjs';
 export { STORAGES, combineContexts, convertFieldsToArray, countSum, getDateRange, languages, mergeButtons, setStorageItemAsync, useStorageState } from './utils.mjs';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { useAddEntity, useButton, useChangeOrderPreparationState, useChangeStatu
 export { ActionResultType, AppProvider, CompanyTuple, ContextProfile, CurrentCompany, RecordMenu, UseMenuReturn, ViewResponse, useAppProvider, useCallAction, useCallActionType, useClickOutside, useCompany, useCompanyType, useConfig, useConfigType, useDebounce, useDetail, useGetAction, useGetRowIds, useGetSpecification, useListData, useListDataType, useMenu, useMenuType, useProfile, useUser, useUserType, useViewV2, useViewV2Type } from './hooks.js';
 export * from '@fctc/interface-logic/configs';
 export { CheckIcon, ChevronBottomIcon, CloseIcon, EyeIcon, FilterIcon, GroupByIcon, LoadingIcon, SearchIcon } from './icons.js';
-export { ISelctionStateProps, ITableHeadProps, ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController } from './widget.js';
+export { ISelctionStateProps, ITableHeadProps, ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyBinaryController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController } from './widget.js';
 export * from '@fctc/interface-logic/types';
 export { IInputFieldProps, ValuePropsType } from './types.js';
 export { STORAGES, combineContexts, convertFieldsToArray, countSum, getDateRange, languages, mergeButtons, setStorageItemAsync, useStorageState } from './utils.js';

package/dist/index.js

@@ -4057,6 +4057,7 @@ __export(index_exports, {
   durationController: () => durationController,
   getDateRange: () => getDateRange,
   languages: () => languages,
+  many2manyBinaryController: () => many2manyBinaryController,
   many2manyFieldController: () => many2manyFieldController,
   many2manyTagsController: () => many2manyTagsController,
   many2oneButtonController: () => many2oneButtonController,
@@ -4257,6 +4258,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_react2 = require("react");
@@ -6344,6 +6346,77 @@ var binaryFieldController = (props) => {
 
 // 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");
@@ -7005,6 +7078,7 @@ __reExport(index_exports, types_exports, module.exports);
   durationController,
   getDateRange,
   languages,
+  many2manyBinaryController,
   many2manyFieldController,
   many2manyTagsController,
   many2oneButtonController,

package/dist/index.mjs

@@ -4061,6 +4061,7 @@ __export(index_exports, {
   durationController: () => durationController,
   getDateRange: () => getDateRange,
   languages: () => languages,
+  many2manyBinaryController: () => many2manyBinaryController,
   many2manyFieldController: () => many2manyFieldController,
   many2manyTagsController: () => many2manyTagsController,
   many2oneButtonController: () => many2oneButtonController,
@@ -4346,6 +4347,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, useReducer } from "react";
@@ -6439,6 +6441,77 @@ 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 useRef5 } from "react";
@@ -7104,6 +7177,7 @@ export {
   durationController,
   getDateRange,
   languages,
+  many2manyBinaryController,
   many2manyFieldController,
   many2manyTagsController,
   many2oneButtonController,

package/dist/widget.d.mts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ChangeEvent } from 'react';
 import { IInputFieldProps } from './types.mjs';
 import moment from 'moment';
 import '@fctc/interface-logic/types';
@@ -232,6 +233,26 @@ declare const binaryFieldController: (props: IBinaryFieldProps) => {
     url: any;
 };
 
+type UploadDeps = {
+    service?: any;
+    xNode?: any;
+    path?: any;
+};
+
+declare const many2manyBinaryController: (props: IInputFieldProps & UploadDeps & {
+    rootField?: any;
+    index?: number;
+}) => {
+    inputId: string;
+    initialFiles: any[];
+    binaryRef: react.RefObject<HTMLDivElement>;
+    handleFileChange: (files: any, e: ChangeEvent<HTMLInputElement>, oldValues: any) => Promise<void>;
+    handleRemoveAt: (idx: number) => void;
+    handleRemoveAll: () => void;
+    checkIsImageLink: (url: string) => boolean;
+    setInitialFiles: react.Dispatch<react.SetStateAction<any[]>>;
+};
+
 declare const tableHeadController: (props: any) => {
     handleCheckBoxAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
     checkedAll: any;
@@ -319,4 +340,4 @@ declare const searchController: ({ viewData, model, domain, context, fieldsList,
     hoveredIndexSearchList: number | null;
 };
 
-export { type ISelctionStateProps, type ITableHeadProps, type ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController };
+export { type ISelctionStateProps, type ITableHeadProps, type ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyBinaryController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController };

package/dist/widget.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ChangeEvent } from 'react';
 import { IInputFieldProps } from './types.js';
 import moment from 'moment';
 import '@fctc/interface-logic/types';
@@ -232,6 +233,26 @@ declare const binaryFieldController: (props: IBinaryFieldProps) => {
     url: any;
 };
 
+type UploadDeps = {
+    service?: any;
+    xNode?: any;
+    path?: any;
+};
+
+declare const many2manyBinaryController: (props: IInputFieldProps & UploadDeps & {
+    rootField?: any;
+    index?: number;
+}) => {
+    inputId: string;
+    initialFiles: any[];
+    binaryRef: react.RefObject<HTMLDivElement>;
+    handleFileChange: (files: any, e: ChangeEvent<HTMLInputElement>, oldValues: any) => Promise<void>;
+    handleRemoveAt: (idx: number) => void;
+    handleRemoveAll: () => void;
+    checkIsImageLink: (url: string) => boolean;
+    setInitialFiles: react.Dispatch<react.SetStateAction<any[]>>;
+};
+
 declare const tableHeadController: (props: any) => {
     handleCheckBoxAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
     checkedAll: any;
@@ -319,4 +340,4 @@ declare const searchController: ({ viewData, model, domain, context, fieldsList,
     hoveredIndexSearchList: number | null;
 };
 
-export { type ISelctionStateProps, type ITableHeadProps, type ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController };
+export { type ISelctionStateProps, type ITableHeadProps, type ITableProps, binaryFieldController, colorFieldController, copyLinkButtonController, dateFieldController, downLoadBinaryController, downloadFileController, durationController, many2manyBinaryController, many2manyFieldController, many2manyTagsController, many2oneButtonController, many2oneFieldController, priorityFieldController, searchController, statusDropdownController, tableController, tableGroupController, tableHeadController };

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");
@@ -5582,6 +5584,77 @@ var binaryFieldController = (props) => {
 
 // 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");
@@ -6195,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";
@@ -5654,6 +5655,77 @@ 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 useRef5 } from "react";
@@ -6267,6 +6339,7 @@ export {
   downLoadBinaryController,
   downloadFileController,
   durationController,
+  many2manyBinaryController,
   many2manyFieldController,
   many2manyTagsController,
   many2oneButtonController,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/widget-logic",
-  "version": "5.2.8",
+  "version": "5.2.9",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",