aq-fe-framework 0.1.155 → 0.1.156

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

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

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

package/dist/components/Buttons/ButtonPrintPDFTable/MyButtonPrintTablePDF.tsx

@@ -0,0 +1,174 @@
+import { MyHtmlWrapper } from "@/components/Layouts/HtmlWrapper/MyHtmlWrapper";
+import { Box, Table } from "@mantine/core";
+import { MRT_RowData } from "mantine-react-table";
+import { MyButtonPrintPDF } from "../ButtonPrintPDF/MyButtonPrintPDF";
+interface FieldConfig {
+  fieldName: string; // Field name in the data
+  header: string; // Header name for the print
+  isCenter?: boolean; // Optional flag to center align content, default is true
+  formatFunction?: (value: any, row: any) => any; // Optional formatting function
+}
+
+interface PrintConfig {
+  fields: FieldConfig[]; // Array of field configurations
+  title?: string; // Optional title for the printed table
+  showRowNumbers?: boolean; // Optional flag to show row numbers
+}
+
+interface AQButtonPrintTableProps<TData extends MRT_RowData = any> extends React.ComponentPropsWithoutRef<typeof MyButtonPrintPDF> {
+  printConfig?: PrintConfig; // Optional print configuration
+  objectName?: string; // Name of the file to print
+  data?: TData[]; // Data to print
+}
+
+export function MyButtonPrintTablePDF<TData extends MRT_RowData = any>({
+  printConfig,
+  data,
+  ...rest
+}: AQButtonPrintTableProps<TData>) {
+  const formatDate = (date: Date): string => {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  };
+
+  // Hàm format giá trị theo kiểu dữ liệu
+  const formatValue = (value: any): string => {
+    if (value === undefined || value === null) {
+      return '';
+    }
+
+    // Xử lý định dạng ngày tháng
+    if (value instanceof Date) {
+      return formatDate(value);
+    }
+
+    // Xử lý các kiểu dữ liệu khác
+    return String(value);
+  };
+
+  const rows = data?.map((item, index) => {
+    if (!printConfig?.fields) return null;
+
+    return (
+      <Table.Tr key={index}>
+        {printConfig.showRowNumbers && (
+          <Table.Td ta="center" px="xs" style={{ border: "1px solid lightgray" }}>
+            {index + 1}
+          </Table.Td>
+        )}
+        {printConfig.fields.map((field) => {
+          let value = item[field.fieldName];
+
+          if (field.formatFunction) {
+            value = field.formatFunction(value, item);
+          } else {
+            value = formatValue(value);
+          }
+
+          const alignment = field.isCenter === false ? "left" : "center";
+
+          // Xử lý giá trị HTML
+          if (typeof value === 'string' && (value.includes('<') || value.includes('&lt;'))) {
+            return (
+              <Table.Td
+                key={field.fieldName}
+                px="xs"
+                ta={alignment}
+                style={{ border: "1px solid lightgray" }}
+              >
+                <MyHtmlWrapper html={value} />
+              </Table.Td>
+            );
+          }
+
+          // Xử lý giá trị boolean
+          if (value === 'true' || value === 'false') {
+            return (
+              <Table.Td
+                key={field.fieldName}
+                ta={alignment}
+                px="xs"
+                style={{ border: "1px solid lightgray" }}
+              >
+                <input type="checkbox" checked={value === 'true'} readOnly />
+              </Table.Td>
+            );
+          }
+
+          return (
+            <Table.Td
+              key={field.fieldName}
+              ta={alignment}
+              px="xs"
+              style={{ border: "1px solid lightgray" }}
+            >
+              {value}
+            </Table.Td>
+          );
+        })}
+      </Table.Tr>
+    );
+  });
+
+  const renderContent = () => {
+    if (!data || !printConfig?.fields) return null;
+
+    const today = new Date();
+    const formattedDate = today.toLocaleDateString('vi-VN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    const tableTitle = printConfig?.title || "Bảng dữ liệu";
+
+    return (
+      <Box p="lg" >
+        <div style={{ textAlign: 'center', marginTop: '10px', fontStyle: 'italic', color: '#666' }}>
+          Ngày in: {formattedDate}
+        </div>
+        <h2 style={{ textAlign: 'center', fontSize: '24px', fontWeight: 'bold', marginBottom: '20px' }}>
+          {tableTitle}
+        </h2>
+        <Table withColumnBorders highlightOnHover style={{ border: "1px solid lightgray" }}>
+          <Table.Thead>
+            <Table.Tr>
+              {printConfig.showRowNumbers && (
+                <Table.Th style={{ border: "1px solid lightgray" }} w="10%" ta="center" px="xs">
+                  STT
+                </Table.Th>
+              )}
+              {printConfig.fields.map((field) => {
+                const alignment = field.isCenter === false ? "left" : "center";
+                return (
+                  <Table.Th
+                    key={field.fieldName}
+                    style={{ border: "1px solid lightgray" }}
+                    ta={alignment}
+                    px="xs"
+                  >
+                    {field.header}
+                  </Table.Th>
+                );
+              })}
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows}
+          </Table.Tbody>
+        </Table>
+      </Box>
+    );
+  };
+  return (
+    <MyButtonPrintPDF
+      contentToPrint={renderContent()}
+      {...rest}
+    />
+  );
+}
+

package/dist/components/Buttons/ButtonRouterBack/MyButtonRouterBack.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { Button, ButtonProps } from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+interface IMyButtonRouterBack extends ButtonProps {
+    url?: string;
+    label?: string;
+}
+
+export function MyButtonRouterBack({ url, label, ...rest }: IMyButtonRouterBack) {
+    const router = useRouter();
+    return (
+        <Button
+            variant="light"
+            leftSection={<IconArrowBack stroke={2} />}
+            onClick={() => {
+                if (url) {
+                    router.replace(url);
+                    return;
+                }
+                router.back();
+            }}
+            {...rest}
+        >
+            {label ? label : "Trở về"}
+        </Button>
+    );
+}