aq-fe-framework 0.1.156 → 0.1.157

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

@@ -1,100 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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>
-            </>
-        );
-    }
-}

package/dist/components/Buttons/ButtonPrintPDF/MyButtonPrintPDF.tsx

@@ -1,37 +0,0 @@
-"use client";
-import { ReactNode, useRef } from "react";
-import { Button, ButtonProps } from "@mantine/core";
-import { IconPrinter } from "@tabler/icons-react";
-import { useReactToPrint } from "react-to-print";
-
-interface I extends ButtonProps {
-    contentToPrint?: ReactNode; // nội dung HTML để in
-    children?: ReactNode;
-}
-
-export function MyButtonPrintPDF({ contentToPrint, children, ...rest }: I) {
-    const printRef = useRef<HTMLDivElement>(null);
-
-    const handlePrint = useReactToPrint({
-        // Sử dụng documentTitle thay vì content
-        documentTitle: "In nội dung",
-        // Sử dụng contentRef thay vì content
-        contentRef: printRef,
-    });
-
-    function handleClick() {
-        if (!contentToPrint) return;
-        handlePrint();
-    }
-
-    return (
-        <>
-            <div style={{ display: "none" }}>
-                <div ref={printRef}>{contentToPrint}</div>
-            </div>
-            <Button color="orange" onClick={handleClick} leftSection={<IconPrinter />} {...rest}>
-                {children}
-            </Button>
-        </>
-    );
-}