aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/Buttons/Button/MyButton.tsx

@@ -0,0 +1,90 @@
+import { TYPES_CRUD } from "@/types/types";
+import { Button, ButtonProps } from "@mantine/core";
+import { IconDeviceFloppy, IconEdit, IconFileExport, IconFileImport, IconPlus, IconPrinter, IconTrash, IconX } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+interface IMyButton extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
+    crudType?: TYPES_CRUD
+    children?: ReactNode;
+}
+
+export function MyButton({ children, crudType = "delete", ...rest }: IMyButton) {
+    if (crudType == "default") {
+        return (
+            <Button color="indigo" {...rest}>
+                {children}
+            </Button>
+        );
+    }
+    if (crudType == "create") {
+        return (
+            <Button color="indigo" type="submit" leftSection={<IconPlus />} {...rest}>
+                {children ? children : "Lưu"}
+            </Button>
+        );
+    }
+    if (crudType == "createMultiple") {
+        return (
+            <Button color="green" type="submit" leftSection={<IconPlus />} {...rest}>
+                {children ? children : "Thêm danh sách"}
+            </Button>
+        );
+    }
+    if (crudType == "delete") {
+        return (
+            <Button color="red" leftSection={<IconTrash />} {...rest}>
+                {children ? children : "Xác nhận xóa"}
+            </Button>
+        );
+    }
+    if (crudType == "update") {
+        return (
+            <Button color="yellow" type="submit" leftSection={<IconEdit />} {...rest}>
+                {children ? children : "Chỉnh sửa"}
+            </Button>
+        );
+    }
+    if (crudType == "save") {
+        return (
+            <Button color="blue" type="submit" leftSection={<IconDeviceFloppy />} {...rest}>
+                {children ? children : "Lưu"}
+            </Button>
+        );
+    }
+    if (crudType == "import") {
+        return (
+            <Button color="green.8" leftSection={<IconFileImport />} {...rest}>
+                {children ? children : "Import"}
+            </Button>
+        );
+    }
+    if (crudType == "print") {
+        return (
+            <Button color="orange.7" leftSection={<IconPrinter />} {...rest}>
+                {children ? children : "In"}
+            </Button>
+        );
+    }
+    if (crudType == "export") {
+        return (
+            <Button color="green.8" leftSection={<IconFileExport />} {...rest}>
+                {children ? children : "Export"}
+            </Button>
+        );
+    }
+    if (crudType == "cancel") {
+        return (
+            <Button color="gray" leftSection={<IconX />} {...rest}>
+                {children ? children : "Hủy thao tác"}
+            </Button>
+        );
+    }
+    if (crudType == "select") {
+        return (
+            <Button  {...rest}>
+                {children ? children : "Chọn"}
+            </Button>
+        );
+    }
+
+}

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

@@ -0,0 +1,81 @@
+import { MyButton } from "@/components/Buttons/Button/MyButton"
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn"
+import { utils_notification_show } from "@/utils/utils_notification"
+import { FileInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { useDisclosure } from "@mantine/hooks"
+import { IconFileTypeXls } from "@tabler/icons-react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { ComponentProps } from "react"
+import * as XLSX from 'xlsx'
+import { MyButtonModal } from "../ButtonModal/MyButtonModal"
+
+interface IMyButtonCreate extends Omit<ComponentProps<typeof MyButtonModal>, "disclosure" | "form"> {
+    onSubmit: () => void,
+    onSuccess?: () => void; // Custom callback for success handling
+    onError?: () => void; // Custom callback for error handling
+    form: ReturnType<typeof useForm>;
+    setImportedData?: (data: any) => void;
+}
+
+export function AQButtonCreateByImportFile({ form, onSubmit, onSuccess, onError,
+    // children,
+    setImportedData,
+    ...rest }: IMyButtonCreate) {
+
+    const disc = useDisclosure()
+    const queryClient = useQueryClient()
+    const mutation = useMutation({
+        mutationFn: async () => {
+            return await onSubmit()
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries()
+            utils_notification_show({ crudType: "create" });
+            disc[1].close();
+            form.reset()
+            if (onSuccess) onSuccess();
+        },
+        onError: () => {
+            if (onError) onError();
+        },
+    })
+
+
+    const handleFileChange = (file: File | null) => {
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const binaryStr = event.target?.result;
+            if (binaryStr) {
+                const workbook = XLSX.read(binaryStr, { type: 'binary' });
+                const sheetName = workbook.SheetNames[0]; // Get the first sheet name
+                const sheet = workbook.Sheets[sheetName]; // Get the first sheet
+                const data = XLSX.utils.sheet_to_json(sheet); // Convert sheet to JSON
+                setImportedData && setImportedData(data); // Save the parsed data to the form
+            }
+        };
+        reader.readAsArrayBuffer(file);
+    };
+
+    return (
+        <MyButtonModal disclosure={disc} crudType="createMultiple"  {...rest}>
+            <form onSubmit={form.onSubmit((values) => {
+
+            })}>
+                <MyFlexColumn>
+                    {/* {children} */}
+                    <FileInput
+                        leftSection={<IconFileTypeXls />}
+                        accept=".xlsx"
+                        description="Định dạng hợp lệ: .xlsx"
+                        label="Chọn file"
+                        onChange={handleFileChange}
+                        clearable={true}
+                        placeholder="Chọn file" />
+                    <MyButton type="submit" crudType="createMultiple" />
+                </MyFlexColumn>
+            </form>
+        </MyButtonModal>
+    )
+}

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

@@ -0,0 +1,75 @@
+import { Button } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+import * as XLSX from "xlsx";
+
+interface FieldConfig {
+    fieldName: string; // Field name in the data
+    header: string; // Header name for the export
+    formatFunction?: (value: any, row: any) => any; // Optional formatting function
+}
+
+interface ExportConfig {
+    fields: FieldConfig[]; // Array of field configurations
+}
+
+interface AQButtonExportDataProps {
+    isAllData: boolean
+    objectName: string;
+    data: any[];
+    exportConfig: ExportConfig;
+}
+
+export function AQButtonExportData({
+    isAllData,
+    objectName,
+    data,
+    exportConfig
+}: AQButtonExportDataProps) {
+    const handleExport = () => {
+        // Process data with formatting functions
+        const processedData = data.map((row) => {
+            const newRow: any = {};
+            exportConfig.fields.forEach(({ fieldName, formatFunction }) => {
+                newRow[fieldName] = formatFunction ? formatFunction(row[fieldName], row) : row[fieldName];
+            });
+            return newRow;
+        });
+
+        // Map headers to new labels
+        const headers: { [key: string]: string } = {};
+        exportConfig.fields.forEach(({ fieldName, header }) => {
+            headers[fieldName] = header;
+        });
+
+        // Create a worksheet
+        const worksheet = XLSX.utils.json_to_sheet(processedData);
+
+        // Rename headers in the worksheet
+        const headerRow = exportConfig.fields.map(({ fieldName }) => headers[fieldName]);
+        XLSX.utils.sheet_add_aoa(worksheet, [headerRow], { origin: "A1" });
+
+        // Export worksheet as an Excel file
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Exported Data");
+
+        // Trigger the download
+        XLSX.writeFile(workbook, `${objectName}.xlsx`);
+    };
+
+    return (
+        <Button
+            disabled={data.length === 0}
+            variant="filled"
+            color="teal"
+            onClick={(event) => {
+                event.preventDefault();
+                handleExport();
+            }}
+            leftSection={<IconDownload />}
+        >
+            {/* {isAllData ? "Xuất toàn bộ dữ liệu" : "Xuất dữ liệu được chọn"} */}
+            {"Export"}
+        </Button>
+    );
+}
+

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>
+    )
+}