aq-fe-framework 0.1.156 → 0.1.157

package/dist/components/ActionIcons/ActionIconViewPdf/MyActionIconViewPDF.tsx

@@ -1,63 +0,0 @@
-"use client";
-import { ActionIcon, ActionIconProps, Group, Modal, Paper, Text, Tooltip } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { IconLivePhoto, IconMaximize, IconMinimize } from "@tabler/icons-react";
-import { useState } from "react";
-
-interface IActionIconViewPDF extends ActionIconProps {
-    modalSize?: string;
-    pdfLink: string;
-}
-
-export function MyActionIconViewPDF({
-    modalSize = "80%",
-    pdfLink = "https://datafiles.chinhphu.vn/cpp/files/vbpq/2021/07/17-bgd.signed.pdf",
-    ...rest
-}: IActionIconViewPDF) {
-    const disc = useDisclosure(false);
-    const fullScreen = useState(false);
-    const hSize = useState("80vh");
-    return (
-        <>
-            <Tooltip label="Xem tài liệu trực tiếp">
-                <ActionIcon color="cyan" onClick={disc[1].open} {...rest}>
-                    <IconLivePhoto />
-                </ActionIcon>
-            </Tooltip>
-            <Modal
-                fullScreen={fullScreen[0]}
-                opened={disc[0]}
-                onClose={disc[1].close}
-                size={modalSize}
-                title={
-                    <Group>
-                        <Text>Xem tài liệu trực tiếp</Text>
-                        {fullScreen[0] ? (
-                            <ActionIcon
-                                onClick={() => {
-                                    fullScreen[1](false);
-                                    hSize[1]("80vh");
-                                }}
-                            >
-                                <IconMinimize />
-                            </ActionIcon>
-                        ) : (
-                            <ActionIcon
-                                onClick={() => {
-                                    fullScreen[1](true);
-                                    hSize[1]("90vh");
-                                }}
-                            >
-                                <IconMaximize />
-                            </ActionIcon>
-                        )}
-                    </Group>
-                }
-            >
-                <Paper h={hSize[0]} p={"lg"}>
-                    <iframe src={pdfLink} width={"100%"} height={"100%"} />
-                </Paper>
-            </Modal>
-        </>
-    );
-}

package/dist/components/ActionIcons/SwitchTheme/MySwitchTheme.tsx

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ActionIcon, useComputedColorScheme, useMantineColorScheme } from '@mantine/core';
-import { IconMoon, IconSun } from '@tabler/icons-react';
-
-export function MySwitchTheme() {
-    const { setColorScheme } = useMantineColorScheme();
-    const computedColorScheme = useComputedColorScheme('light', {
-        getInitialValueInEffect: true,
-    });
-
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null; // hoặc <Skeleton /> nếu bạn muốn placeholder
-
-    return (
-        <ActionIcon
-            onClick={() =>
-                setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
-            }
-            variant="default"
-            size="lg"
-            radius="md"
-            aria-label="Toggle color scheme"
-        >
-            {computedColorScheme === 'dark' ? (
-                <IconSun width="22px" height="22px" stroke={1.5} />
-            ) : (
-                <IconMoon width="22px" height="22px" stroke={1.5} />
-            )}
-        </ActionIcon>
-    );
-}

package/dist/components/AppSpotlight/MyAppSpotlight.tsx

@@ -1,112 +0,0 @@
-"use client";
-
-import { Spotlight, spotlight } from "@mantine/spotlight";
-import { IconSearch } from "@tabler/icons-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import { I_BasicAppShell_LinkItem } from "../Layouts/BasicAppShell/BasicAppShell";
-import { useS_BasicAppShell } from "../Layouts/BasicAppShell/useS_BasicAppShell";
-
-// Hàm đệ quy để chuyển đổi menu thành các action cho Spotlight
-function convertMenuToSpotlightActions(
-    items: I_BasicAppShell_LinkItem[],
-    router: any,
-    parentPath: string = "",
-    sideBarStore: any,
-    pathName: string
-): any[] {
-    let actions: any[] = [];
-
-    items.forEach((item) => {
-        // Nếu có link, thêm action cho item này
-        if (item.link) {
-            actions.push({
-                id: item.label.toLowerCase().replace(/\s+/g, "-"),
-                label: item.label,
-                description: `Chuyển đến ${item.label} (Code: ${item.link})`,
-                onClick: () => {
-                    sideBarStore.setProperty("title", item.label);
-                    sideBarStore.setProperty("menuCode", item.link);
-                    router.push(
-                        pathName.split("/")[0] + "/" + pathName.split("/")[1] + "/" + item.link
-                    );
-                    spotlight.close();
-                },
-                rightSection: item.status
-                    ? item.status === "Prototype"
-                        ? "P"
-                        : item.status === "New"
-                            ? "N"
-                            : item.status === "Menu"
-                                ? "M"
-                                : null
-                    : null,
-            });
-        }
-
-        // Nếu có submenu, gọi đệ quy để thêm các action con
-        if (item.links) {
-            actions = actions.concat(
-                convertMenuToSpotlightActions(
-                    item.links,
-                    router,
-                    item.link || "",
-                    sideBarStore,
-                    pathName
-                )
-            );
-        }
-    });
-
-    return actions;
-}
-
-export function MyAppSpotlight({ menu }: { menu: I_BasicAppShell_LinkItem[] }) {
-    const [query, setQuery] = useState("");
-    const router = useRouter();
-    const pathName = usePathname();
-    const basicAppShellStore = useS_BasicAppShell(); // Get the sidebar store here
-
-    // Chuyển đổi menu thành các action một lần để tối ưu hiệu suất
-    const spotlightActions = useMemo(
-        () => convertMenuToSpotlightActions(menu, router, "", basicAppShellStore, pathName),
-        [menu, router, basicAppShellStore] // Add sideBarStore to the dependency array
-    );
-
-    return (
-        <Spotlight
-            actions={spotlightActions}
-            query={query}
-            scrollable
-            maxHeight={800}
-            onQueryChange={setQuery}
-            shortcut={["mod + K", "/"]} // Hỗ trợ Ctrl/Cmd + K và phím /
-            nothingFound="Không tìm thấy trang"
-            highlightQuery
-            searchProps={{
-                leftSection: <IconSearch stroke={1.5} />,
-                placeholder: "Tìm kiếm trang...",
-            }}
-        />
-    );
-}
-
-// Nếu muốn thêm nút mở Spotlight
-export function SpotlightTrigger() {
-    return (
-        <button
-            onClick={spotlight.open}
-            style={{
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-            }}
-        >
-            <IconSearch stroke={1.5} />
-            Tìm kiếm (Ctrl + K)
-        </button>
-    );
-}

package/dist/components/Buttons/Anchor/MyAnchorViewPDF.tsx

@@ -1,46 +0,0 @@
-import { ActionIcon, Anchor, Group, Modal, Paper, Text } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { IconMaximize, IconMinimize } from "@tabler/icons-react";
-import { useState } from "react";
-
-export function MyAnchorViewPDF({ label, pdfLink }: { label: string; pdfLink: string }) {
-    const disc = useDisclosure(false);
-    const fullScreen = useState(false);
-    const hSize = useState("80vh");
-    return (
-        <>
-            <Anchor onClick={disc[1].open}>{label}</Anchor>
-            <Modal
-                fullScreen={fullScreen[0]}
-                opened={disc[0]}
-                onClose={disc[1].close}
-                size={"80%"}
-                title={
-                    <Group>
-                        <Text>Xem tài liệu trực tiếp</Text>
-                        {fullScreen[0] ? (
-                            <ActionIcon
-                                onClick={() => {
-                                    fullScreen[1](false);
-                                    hSize[1]("80vh");
-                                }}>
-                                <IconMinimize />
-                            </ActionIcon>
-                        ) : (
-                            <ActionIcon
-                                onClick={() => {
-                                    fullScreen[1](true);
-                                    hSize[1]("90vh");
-                                }}>
-                                <IconMaximize />
-                            </ActionIcon>
-                        )}
-                    </Group>
-                }>
-                <Paper h={hSize[0]}>
-                    <iframe src={pdfLink} width={"100%"} height={"100%"} />
-                </Paper>
-            </Modal>
-        </>
-    );
-}

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

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

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

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

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

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