xenial-black•4mo ago

handclick button

How to perform a confirmation or validate an action before handleSave operation, in this code: const handleClick = async () => { mutateUpdate({ resource: "rqp-requisicaos", id: params.id!, values: { createnota: 1, notaNumber: 1 - - ${totalId?.total}, //notaNumberYear: notaNumero , nota_datecreated: currentDate, notaCreatedBy: identity?.id, }, mutationMode: "optimistic", invalidates: [/*"list", "many", */"detail"], successNotification: false, errorNotification: false, }); } const { id, status, userId, cod, createdAt, createnota } = data?.data {};
const itens = tableQueryResult?.data?.data ?? []; const loading = isLoading isFetching; const pdfOpenHandler = async () => { await refetch(); show(); };
if ( createnota === true ) { return ( <> <Button loading={loading} onClick={handleClick} type="primary" icon={<FilePdfOutlined />} > Create </Button> </> ); }

5 Replies

kapa.ai•4mo ago

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To perform a confirmation or validation before the handleSave operation, you can use a confirmation dialog. This can be done using Ant Design's Modal.confirm() method. Here's an example of how you can modify your handleClick function to include a confirmation dialog:

import { Modal } from 'antd';

const handleClick = () => {
    Modal.confirm({
        title: 'Do you want to save this item?',
        content: 'Confirm to save this item',
        onOk: async () => {
            mutateUpdate({
                resource: "rqp-requisicaos",
                id: params.id!,
                values: {
                    createnota: 1,
                    notaNumber: 1 - - `${totalId?.total}`,
                    nota_datecreated: currentDate,
                    notaCreatedBy: identity?.id,
                },
                mutationMode: "optimistic",
                invalidates: [/*"list", "many", */"detail"],
                successNotification: false,
                errorNotification: false,
            });
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

import { Modal } from 'antd';

const handleClick = () => {
    Modal.confirm({
        title: 'Do you want to save this item?',
        content: 'Confirm to save this item',
        onOk: async () => {
            mutateUpdate({
                resource: "rqp-requisicaos",
                id: params.id!,
                values: {
                    createnota: 1,
                    notaNumber: 1 - - `${totalId?.total}`,
                    nota_datecreated: currentDate,
                    notaCreatedBy: identity?.id,
                },
                mutationMode: "optimistic",
                invalidates: [/*"list", "many", */"detail"],
                successNotification: false,
                errorNotification: false,
            });
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

In this example, the onOk function is where the mutateUpdate function is called. This function will only be executed if the user clicks the OK button in the confirmation dialog. Please note that this code is not directly from the knowledge sources provided, but it's a common way to handle confirmations in Ant Design, which is used in Refine. For more information on how to use Ant Design's Modal component, you can check the Ant Design documentation (https://ant.design/components/modal/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

xenial-black•4mo ago

@kapa.ai how to show a custom successNotification after click OK

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To show a custom success notification after clicking OK, you can use the successNotification prop in your mutateUpdate function. This prop allows you to customize the success notification that shows up when the data is fetched successfully. Here's an example of how you can modify your handleClick function to include a custom success notification:

import { Modal } from 'antd';
import { useNotification } from "@pankod/refine";

const { notify } = useNotification();

const handleClick = () => {
    Modal.confirm({
        title: 'Do you want to save this item?',
        content: 'Confirm to save this item',
        onOk: async () => {
            mutateUpdate({
                resource: "rqp-requisicaos",
                id: params.id!,
                values: {
                    createnota: 1,
                    notaNumber: 1 - - `${totalId?.total}`,
                    nota_datecreated: currentDate,
                    notaCreatedBy: identity?.id,
                },
                mutationMode: "optimistic",
                invalidates: [/*"list", "many", */"detail"],
                successNotification: (data, values, resource) => {
                    notify({
                        message: `${data.title} Successfully fetched.`,
                        description: "Success with no errors",
                        type: "success",
                    });
                },
                errorNotification: false,
            });
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

import { Modal } from 'antd';
import { useNotification } from "@pankod/refine";

const { notify } = useNotification();

const handleClick = () => {
    Modal.confirm({
        title: 'Do you want to save this item?',
        content: 'Confirm to save this item',
        onOk: async () => {
            mutateUpdate({
                resource: "rqp-requisicaos",
                id: params.id!,
                values: {
                    createnota: 1,
                    notaNumber: 1 - - `${totalId?.total}`,
                    nota_datecreated: currentDate,
                    notaCreatedBy: identity?.id,
                },
                mutationMode: "optimistic",
                invalidates: [/*"list", "many", */"detail"],
                successNotification: (data, values, resource) => {
                    notify({
                        message: `${data.title} Successfully fetched.`,
                        description: "Success with no errors",
                        type: "success",
                    });
                },
                errorNotification: false,
            });
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

In this example, the successNotification function is where the custom success notification is defined. This function will only be executed if the data is fetched successfully. Please note that this code is not directly from the knowledge sources provided, but it's a common way to handle notifications in Refine. For more information on how to use Refine's useNotification hook, you can check the Refine documentation (https://refine.dev/docs/api-references/hooks/notification/useNotification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below