aq-fe-framework 0.1.154 → 0.1.156

package/dist/components/Buttons/ButtonCRUD/MyButtonCreate.tsx

@@ -0,0 +1,68 @@
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn"
+import { utils_notification_show } from "@/utils/utils_notification"
+import { UseFormReturnType } from "@mantine/form"
+import { useDisclosure } from "@mantine/hooks"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { ComponentProps } from "react"
+import { MyButton } from "../Button/MyButton"
+import { MyButtonModal } from "../ButtonModal/MyButtonModal"
+
+interface IMyButtonCreate<T> extends Omit<ComponentProps<typeof MyButtonModal>, "disclosure" | "form" | "onSubmit"> {
+    onSubmit: (values: T) => void
+    onSuccess?: () => void;
+    onError?: () => void;
+    form: UseFormReturnType<T>;
+    notCloseModalWhenSubmit?: boolean
+    notResetFormWhenSubmit?: boolean
+
+    disclosure?: ReturnType<typeof useDisclosure>;
+}
+
+export function MyButtonCreate<T>({
+    form,
+    onSubmit,
+    onSuccess,
+    onError,
+    notCloseModalWhenSubmit = false,
+    notResetFormWhenSubmit = false,
+    children,
+    disclosure: externalDisclosure,
+    ...rest
+}: IMyButtonCreate<T>) {
+    const defaultDisclosure = useDisclosure();
+    const disclosure = externalDisclosure ?? defaultDisclosure;
+    const queryClient = useQueryClient();
+    const mutation = useMutation({
+        mutationFn: async (values: T) => await onSubmit!(values),
+        onSuccess: () => {
+            if (onSuccess) {
+                onSuccess()
+            }
+            queryClient.invalidateQueries();
+            utils_notification_show({ crudType: "create" });
+
+            if (notCloseModalWhenSubmit == false) {
+                disclosure[1].close();
+            }
+            if (notResetFormWhenSubmit == false) {
+                form.reset();
+            }
+        },
+        onError: () => {
+            if (onError) onError();
+        },
+    });
+
+    return (
+        <MyButtonModal disclosure={disclosure} crudType="create" {...rest}>
+            <form onSubmit={form.onSubmit((values) => {
+                mutation.mutate(values);
+            })}>
+                <MyFlexColumn>
+                    {children}
+                    <MyButton type="submit" crudType="save" />
+                </MyFlexColumn>
+            </form>
+        </MyButtonModal>
+    );
+}

package/dist/components/Buttons/ButtonImport/MyButtonImport.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { Button, Modal, useModalsStack } from "@mantine/core";
+import { IconFileImport } from "@tabler/icons-react";
+import { SelectFieldModal } from "./SelectFieldModal";
+import { SelectFileModal, SelectFileModalProps } from "./SelectFileModal";
+import { useS_ButtonImport } from "./useS_ButtonImport";
+
+interface MyButtonImportProps extends Omit<SelectFileModalProps, "stack"> {
+    onImport: (data: any) => void
+}
+
+export function MyButtonImport({
+    onExportStructure,
+    onImport
+}:
+    MyButtonImportProps
+) {
+    const stack = useModalsStack(['select-file-page', 'select-field-page', 'implement-page']);
+    const store = useS_ButtonImport()
+    return (
+        <>
+            <Button color="teal.8" onClick={() => stack.open('select-file-page')} leftSection={<IconFileImport />} title="Import" >Import</Button>
+            <Modal.Stack>
+                <SelectFileModal stack={stack} onExportStructure={onExportStructure} />
+                <SelectFieldModal stack={stack} onImport={() => onImport(store.getDataFinal())} />
+            </Modal.Stack>
+        </>
+    )
+}

package/dist/components/Buttons/ButtonImport/SelectFieldModal.tsx

@@ -0,0 +1,100 @@
+import { MySelect } from "@/components/Combobox/Select/MySelect";
+import { MyFlexEnd } from "@/components/Layouts/FlexEnd/MyFlexEnd";
+import { Button, Divider, Fieldset, Group, Modal, SimpleGrid, Space, Table, useModalsStack } from "@mantine/core";
+import { IconArrowBackUp, IconArrowBigLeft, IconArrowBigRight, IconSquareRoundedX } from "@tabler/icons-react";
+import { useS_ButtonImport } from "./useS_ButtonImport";
+
+interface SelectFieldModalProps {
+    stack: ReturnType<typeof useModalsStack<"select-file-page" | "select-field-page" | "implement-page">>
+    onImport: () => void
+}
+export function SelectFieldModal({ stack, onImport }: SelectFieldModalProps) {
+    const store = useS_ButtonImport()
+
+    return (
+        <Modal fullScreen {...stack.register('select-field-page')} title="Import">
+            <SimpleGrid cols={{ base: 1, lg: 2 }}>
+                <Fieldset legend="Danh sách trường thông tin">
+                    <Table stickyHeader stickyHeaderOffset={60}>
+                        <Table.Thead bg={'cyan'}>
+                            <Table.Tr>
+                                <Table.Th>Mã field</Table.Th>
+                                <Table.Th>Tên field</Table.Th>
+                            </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>
+                            {store.state.fieldConfig?.filter(item => item.isSelected == false || item.isSelected == undefined).map((item, idx) => (
+                                <Table.Tr
+                                    key={idx}
+                                    style={{ cursor: "pointer" }}
+                                >
+                                    <Table.Td onClick={() => store.changeSelected(item.fieldKey.toString(), true)}>{item.fieldKey.toString()}</Table.Td>
+                                    <Table.Td onClick={() => store.changeSelected(item.fieldKey.toString(), true)}>{item.fieldName}</Table.Td>
+                                </Table.Tr>
+                            ))}
+
+                        </Table.Tbody>
+                    </Table>
+                    <Space />
+
+                    <Group>
+                        <Button
+                            onClick={() => { store.changeAllSelected(true) }}
+                            leftSection={<IconArrowBigRight />}
+                        >Chuyển tất cả</Button>
+                    </Group>
+                </Fieldset>
+
+                <Fieldset legend="Danh sách trường thông tin được chọn">
+                    <Table stickyHeader stickyHeaderOffset={60}>
+                        <Table.Thead>
+                            <Table.Tr>
+                                <Table.Th>Mã field</Table.Th>
+                                <Table.Th>Tên field</Table.Th>
+                                <Table.Th>Cột map</Table.Th>
+                            </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>
+                            {store.state.fieldConfig?.filter(item => item.isSelected == true).map((item, idx) => (
+                                <Table.Tr
+                                    key={idx}
+                                    style={{ cursor: "pointer" }}
+                                >
+                                    <Table.Td onClick={() => store.changeSelected(item.fieldKey.toString(), false)}>{item.fieldKey.toString()}</Table.Td>
+                                    <Table.Td onClick={() => store.changeSelected(item.fieldKey.toString(), false)}>{item.fieldName}</Table.Td>
+                                    <Table.Td><MySelect data={store.state.title!} value={item.fieldToMap} onChange={(e) => store.setFieldToMap(item.fieldKey.toString(), e!)} /></Table.Td>
+                                </Table.Tr>
+                            ))}
+                        </Table.Tbody>
+                    </Table>
+                    <Space />
+                    <Button
+                        onClick={() => { store.changeAllSelected(false) }}
+                        leftSection={<IconArrowBigLeft />}
+                    >Chuyển tất cả về</Button>
+                </Fieldset>
+            </SimpleGrid>
+            <Divider></Divider>
+            <MyFlexEnd>
+                <Button
+                    leftSection={<IconArrowBackUp />}
+                    onClick={() => stack.close("select-field-page")}
+                    color="gray.7">
+                    Quay lại
+                </Button>
+                <Button
+                    color="blue.8"
+                    leftSection={<IconArrowBigRight />}
+                    onClick={onImport}>
+                    Tiếp tục / Import
+                </Button>
+                <Button
+                    leftSection={<IconSquareRoundedX />}
+                    onClick={() => stack.closeAll()}
+                    color="red.6">
+                    Đóng
+                </Button>
+            </MyFlexEnd>
+        </Modal >
+    )
+}

package/dist/components/Buttons/ButtonImport/SelectFileModal.tsx

@@ -0,0 +1,81 @@
+import { MyDataTable } from "@/components/DataDisplay/DataTable/MyDataTable";
+import { MyFlexEnd } from "@/components/Layouts/FlexEnd/MyFlexEnd";
+import { Button, Fieldset, FileInput, Modal, NumberInput, Select, SimpleGrid, useModalsStack } from "@mantine/core";
+import { IconArrowBigRight, IconSquareRoundedX } from "@tabler/icons-react";
+import { useS_ButtonImport } from "./useS_ButtonImport";
+
+export interface SelectFileModalProps {
+    onExportStructure?: () => void
+    stack: ReturnType<typeof useModalsStack<"select-file-page" | "select-field-page" | "implement-page">>
+}
+
+export function SelectFileModal({ onExportStructure, stack }: SelectFileModalProps) {
+    const store = useS_ButtonImport()
+    return (
+        <Modal
+            title="Import"
+            fullScreen
+            {...stack.register('select-file-page')}
+        >
+            <FileInput
+                value={store.state.file}
+                onChange={e => store.setProperty("file", e)}
+                label="File dữ liệu"
+                placeholder="Chọn file dữ liệu"
+                clearable
+            />
+            <SimpleGrid cols={{ base: 1, md: 2, lg: 2, xl: 4 }}>
+                <NumberInput
+                    label="Dòng tiêu đề bắt đầu từ"
+                    value={(store.state.startTitleIndex)}
+                    onChange={e => store.setProperty("startTitleIndex", e)}
+                />
+                <NumberInput
+                    label="Dòng dữ liệu bắt đầu từ"
+                    value={(store.state.startDataIndex)}
+                    onChange={e => store.setProperty("startDataIndex", e)}
+                />
+                <Select
+                    readOnly
+                    label="Định dạng số"
+                    data={["100.000"]}
+                    defaultValue={"100.000"}
+                />
+                <Select
+                    readOnly
+                    label="Định dạng ngày"
+                    data={["dd/MM/yyyy"]}
+                    defaultValue={"dd/MM/yyyy"}
+                />
+            </SimpleGrid>
+            <Fieldset legend="Danh sách trường thông tin trong file dữ liệu">
+                {store.state.data &&
+                    <MyDataTable
+                        columns={store.columns}
+                        data={store.state.data as any}
+                    />
+                }
+            </Fieldset>
+            <MyFlexEnd>
+                <Button
+                    color="teal.8"
+                    onClick={onExportStructure}>
+                    Xuất file cấu trúc
+                </Button>
+                <Button
+                    disabled={store.state.data?.length == 0}
+                    color="blue.8"
+                    leftSection={<IconArrowBigRight />}
+                    onClick={() => stack.open('select-field-page')}>
+                    Tiếp tục
+                </Button>
+                <Button
+                    color="red.6"
+                    leftSection={<IconSquareRoundedX />}
+                    onClick={stack.closeAll}>
+                    Đóng
+                </Button>
+            </MyFlexEnd>
+        </Modal>
+    )
+}

package/dist/components/Buttons/ButtonImport/useS_ButtonImport.ts

@@ -0,0 +1,196 @@
+import { createGenericStore } from "@/stores/CreateGenericStore";
+import { IUtils_Excel_ColumnConfig } from "@/utils/utils_excel";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useEffect, useMemo } from "react";
+import * as XLSX from 'xlsx';
+
+interface IFieldConfig extends IUtils_Excel_ColumnConfig<any> {
+    isSelected?: boolean
+    fieldToMap?: string
+}
+
+interface I {
+    file?: File | null
+    title?: string[]
+    data?: any[]
+    startTitleIndex?: string | number
+    startDataIndex?: string | number
+    fieldConfig?: IFieldConfig[]
+}
+const useStore = createGenericStore<I>({
+    initialState: {
+        data: [],
+        title: [],
+        startTitleIndex: 2,
+        startDataIndex: 3,
+    },
+})
+
+export function useS_ButtonImport() {
+    const store = useStore()
+
+    function autoMap() {
+        if (!store.state.data || !store.state.data.length || !store.state.fieldConfig) return;
+
+        const sampleRow = store.state.data[0];
+
+        const updatedFieldConfig = store.state.fieldConfig.map((config) => {
+            const matchingKey = Object.keys(sampleRow).find((key) =>
+                key.toLowerCase().trim() === config.fieldKey.toString().toLowerCase().trim()
+            );
+
+            if (matchingKey) {
+                return {
+                    ...config,
+                    fieldToMap: matchingKey,
+                    isSelected: true,
+                };
+            }
+
+            return config;
+        });
+
+        store.setProperty("fieldConfig", updatedFieldConfig);
+    }
+
+    function getDataFinal<T>(): T[] {
+        const finalData: T[] = [];
+
+        store.state.data!.forEach((row) => {
+            const rowData: Record<string, any> = {};
+
+            store.state.fieldConfig!.forEach((colConfig) => {
+                if (colConfig.isSelected) {
+                    const key = colConfig.fieldKey;
+                    const sourceKey = colConfig.fieldToMap || key;
+
+                    rowData[key as string] = row[sourceKey as string];
+                }
+            });
+
+            finalData.push(rowData as T);
+        });
+
+        return finalData;
+    }
+
+    function changeAllSelected(isSelected: boolean) {
+        store.setProperty("fieldConfig", store.state.fieldConfig?.map(item => ({
+            ...item,
+            isSelected
+        })))
+    }
+
+    function changeSelected(fieldKey: string, isSelected: boolean) {
+        if (!store.state.fieldConfig) {
+            store.setProperty("fieldConfig", []);
+        }
+
+        const existingFieldConfigIndex = store.state.fieldConfig!.findIndex(
+            config => config.fieldKey === fieldKey
+        );
+
+        if (existingFieldConfigIndex !== -1) {
+            // Update existing field config
+            const updatedFieldConfig = [...store.state.fieldConfig!];
+            updatedFieldConfig[existingFieldConfigIndex] = {
+                ...updatedFieldConfig[existingFieldConfigIndex],
+                isSelected
+            };
+            store.setProperty("fieldConfig", updatedFieldConfig);
+        } else {
+            // Field config doesn't exist yet, find the field name from titles
+            const fieldName = store.state.title?.find(title => title === fieldKey) || fieldKey;
+
+            // Create new field config
+            const updatedFieldConfig = [
+                ...store.state.fieldConfig!,
+                {
+                    fieldKey: fieldKey as any,
+                    fieldName,
+                    isSelected
+                }
+            ];
+            store.setProperty("fieldConfig", updatedFieldConfig);
+        }
+    }
+    function setFieldToMap(fieldKey: string, fieldToMap: string) {
+        if (!store.state.fieldConfig) {
+            store.setProperty("fieldConfig", []);
+        }
+
+        const existingFieldConfigIndex = store.state.fieldConfig!.findIndex(
+            config => config.fieldKey === fieldKey
+        );
+
+        if (existingFieldConfigIndex !== -1) {
+            // Update existing field config
+            const updatedFieldConfig = [...store.state.fieldConfig!];
+            updatedFieldConfig[existingFieldConfigIndex] = {
+                ...updatedFieldConfig[existingFieldConfigIndex],
+                fieldToMap
+            };
+            store.setProperty("fieldConfig", updatedFieldConfig);
+        } else {
+            // Field config doesn't exist yet, find the field name from titles
+            const fieldName = store.state.title?.find(title => title === fieldKey) || fieldKey;
+
+            // Create new field config
+            const updatedFieldConfig = [
+                ...store.state.fieldConfig!,
+                {
+                    fieldKey: fieldKey as any,
+                    fieldName,
+                    fieldToMap
+                }
+            ];
+            store.setProperty("fieldConfig", updatedFieldConfig);
+        }
+    }
+
+    const columns = useMemo<MRT_ColumnDef<any>[]>(() => [
+        ...(store.state.title?.map(item => ({
+            header: item!,
+            accessorKey: item!
+        }) as MRT_ColumnDef<any>) || [])
+    ], [store.state.title])
+    useEffect(() => {
+        if (store.state.file == null) {
+            store.resetState()
+        }
+        // Handle file change
+        if (!store.state.file) return
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const binaryStr = event.target?.result;
+            if (!binaryStr) return
+
+            const workbook = XLSX.read(binaryStr, { type: 'binary' });
+            const sheetName = workbook.SheetNames[0]; // Lấy tên sheet đầu tiên
+            const sheet = workbook.Sheets[sheetName]; // Lấy sheet đầu tiên
+
+            const dataBook = XLSX.utils.sheet_to_json(sheet, { header: 1 }) as any[][]
+            const data = XLSX.utils.sheet_to_json(sheet, { range: 1 }) as any// Đọc dữ liệu dạng mảng 2D\
+
+            if (data.lenght == 0) return
+            store.setProperty("title", dataBook[1])
+            store.setProperty("data", data)
+        };
+        reader.readAsArrayBuffer(store.state.file!);
+    }, [store.state.file])
+
+    useEffect(() => {
+        if (store.state.data?.length == 0) return
+        autoMap()
+    }, [store.state.data])
+    return {
+        ...store,
+        columns,
+        changeSelected,
+        setFieldToMap,
+        getDataFinal,
+        changeAllSelected,
+        autoMap
+    }
+}

package/dist/components/Buttons/ButtonModal/AQSelectTableByOpenModal.tsx

@@ -0,0 +1,71 @@
+import { MyDataTable } from "@/components/DataDisplay/DataTable/MyDataTable";
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { TYPES_MANTINE_SIZE } from "@/types/types";
+import { Button, ButtonProps, Fieldset, Modal } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { MRT_ColumnDef, MRT_RowData, MRT_TableOptions } from "mantine-react-table";
+
+interface IAQSelectTableByOpenModal<TData extends MRT_RowData> extends Omit<MRT_TableOptions<TData>, "data">, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
+    label?: string;
+    listLabel?: string;
+    title?: string;
+    modalSize?: TYPES_MANTINE_SIZE;
+    objectName?: string
+    fullScreen?: boolean;
+    setSelectedData: (data: any) => void;
+    data?: any;
+    columns: MRT_ColumnDef<TData>[];
+    API?: string;
+    closeAfterSelect?: boolean;
+}
+
+export function AQSelectTableByOpenModal<TData extends MRT_RowData>({
+    setSelectedData,
+    data,
+    columns,
+    API,
+    modalSize,
+    title,
+    label,
+    listLabel,
+    objectName,
+    fullScreen = false,
+    closeAfterSelect = true,
+    ...rest
+}: IAQSelectTableByOpenModal<TData>) {
+    const disclosure = useDisclosure(false)
+    return (
+        <>
+            <Button
+                onClick={disclosure[1].open}
+                {...rest}
+            >
+                {label ? label : `Chọn từ danh sách`}
+            </Button>
+            <Modal
+                fullScreen={fullScreen}
+                size={modalSize}
+                title={title}
+                opened={disclosure?.[0]}
+                onClose={disclosure[1].close}
+            >
+                <MyFlexColumn>
+                    <Fieldset legend={listLabel ? listLabel : "Danh sách"}>
+                        <MyDataTable
+                            renderTopToolbarCustomActions={({ table }) => {
+                                return <Button onClick={() => {
+                                    setSelectedData(table.getSelectedRowModel().rows.map((row) => row.original))
+                                    closeAfterSelect && disclosure[1].close()
+                                }}>Chọn</Button>
+                            }}
+                            enableRowSelection
+                            data={data!}
+                            columns={columns}
+                            {...rest}
+                        />
+                    </Fieldset>
+                </MyFlexColumn>
+            </Modal>
+        </>
+    )
+}

package/dist/components/Buttons/ButtonModal/MyButtonModal.tsx

@@ -0,0 +1,117 @@
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { TYPES_CRUD, TYPES_MANTINE_SIZE } from "@/types/types";
+
+import { Button, ButtonProps, Modal } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+interface IMyButtonModal extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
+    label?: string;
+    title?: string;
+    children?: ReactNode;
+    crudType?: TYPES_CRUD;
+    modalSize?: TYPES_MANTINE_SIZE;
+    objectName?: string
+    disclosure: ReturnType<typeof useDisclosure>;
+    fullScreen?: boolean;
+}
+
+export function MyButtonModal({
+    fullScreen = false,
+    crudType = "default",
+    disclosure,
+    modalSize,
+    title,
+    label,
+    children,
+    objectName = "",
+    ...rest
+}: IMyButtonModal) {
+    const objectNameLower = objectName?.toLowerCase()
+    if (crudType == "default") {
+        return (
+            <>
+                <Button onClick={disclosure?.[1].open} color="indigo" {...rest}>
+                    {label}
+                </Button>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "create") {
+        return (
+            <>
+                <Button onClick={disclosure?.[1].open} leftSection={<IconPlus />} {...rest}>
+                    {label ? label : `Thêm`}
+                </Button>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : `Tạo ${objectNameLower} mới`}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "createMultiple") {
+        return (
+            <>
+                <Button onClick={disclosure?.[1].open} color="green" leftSection={<IconPlus />} {...rest}>
+                    {label ? label : `Import ${objectNameLower}`}
+                </Button>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : `Thêm danh sách ${objectNameLower}`}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "update") {
+        return (
+            <>
+                <Button onClick={disclosure?.[1].open} color="yellow" leftSection={<IconEdit />} {...rest}>
+                    {label ? label : `Chỉnh sửa ${objectNameLower}`}
+                </Button>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : `Chỉnh sửa ${objectNameLower}`}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "delete") {
+        return (
+            <>
+                <Button onClick={disclosure?.[1].open} color="red" leftSection={<IconTrash />} {...rest}>
+                    {label ? label : `Xóa ${objectNameLower}`}
+                </Button>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : `Xóa ${objectNameLower}`}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+}