@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/extension/solid-core/modelMetadata/list/DeleteModelRowAction.tsx

@@ -0,0 +1,114 @@
+'use client';
+import { useGenerateCodeForModelMutation } from "../../../../../../redux/api/modelApi";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { SolidListRowdataDynamicFunctionProps } from "../../../../../../types/solid-core";
+import { Button } from "primereact/button";
+import { useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Toast } from 'primereact/toast';
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { Checkbox } from "primereact/checkbox";
+import { kebabCase } from "lodash";
+import { createSolidEntityApi } from "../../../../../../redux/api/solidEntityApi";
+import { ERROR_MESSAGES } from "../../../../../../constants/error-messages";
+
+
+const DeleteModelRowAction = (event: SolidListRowdataDynamicFunctionProps) => {
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    const dispatch = useDispatch();
+    const entityApi = createSolidEntityApi(event.params.modelName);
+    const {useDeleteSolidEntityMutation} = entityApi;
+    const [deleteSolidSingleEntiry, { 
+        isError:isSolidEntitiesDeleteError , 
+    }] = useDeleteSolidEntityMutation()
+
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const deleteModelHandler = async () => {
+        try {
+            const res: any = await deleteSolidSingleEntiry(event.rowData.id);
+            
+            // console.log('delete model res', res);
+            if (res.error) {
+                // handle backend or RTK error object
+                const message =
+                    res.error?.data?.message ||
+                    res.error?.error ||
+                    ERROR_MESSAGES.ERROR_OCCURED;
+                showToast('error', ERROR_MESSAGES.DELETE_FAIELD, message);
+            } else {
+                showToast('success', ERROR_MESSAGES.MODEL_DELETE, ERROR_MESSAGES.MODEL_DELETE_SUCCESSFULLY(event.rowData.singularName));
+                dispatch(closePopup());
+            }
+        } catch (err: any) {
+            console.error("catch error", err);
+            showToast('error', ERROR_MESSAGES.ERROR, ERROR_MESSAGES.NETWORK_OR_SERVER_ERROR);
+        }
+    }
+
+    const rows = [
+        { file: `${kebabCase(event.rowData.singularName)}.entity.ts`, description: 'The TypeORM entity definition for this model. Deleting it removes the model’s schema mapping.', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.create.dto.ts`, description: 'DTO defining the payload for creating a new record of this model', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.update.dto.ts`, description: 'DTO defining the payload for updating an existing record of this model.', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.repository.ts`, description: 'Custom repository encapsulating database operations for this model.', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.service.ts`, description: 'Service layer containing business logic and interactions for this model.', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.controller.ts`, description: 'Controller exposing API endpoints related to this model.', intervention: 'Automatic' },
+        { file: `${kebabCase(event.rowData.singularName)}.module.ts`, description: 'Module declaration that wires together the controller, service, and repository. All references to the deleted model must be removed here', intervention: 'Manual (X)', manual: true },
+        { file: `${kebabCase(event.rowData.singularName)}-metadata.json`, description: 'Remove references to this model in the model metadata, menu, action & view sections.', intervention: 'Automatic' },
+        { file: '-', description: 'Drop database table. Removes the database table from the DB, this is a very risky step. Best to review all relations to other models etc and then do this manually.', intervention: 'Manual (X)', manual: true },
+    ];
+
+
+
+    return (
+        <div className="">
+            <Toast ref={toast} />
+            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                <span className="p-dialog-title">
+                    Delete Model
+                </span>
+            </div>
+            <div className="px-4 pb-4 pt-3">
+                <div>
+                    <p className="form-field-label font-medium">
+                        Deleting a model should be done carefully. The below files will be impacted as part of deleting a model:
+                    </p>
+                    <DataTable value={rows} size="small">
+                        <Column field="file" header="File Name" />
+                        <Column field="description" header="Description" />
+                        <Column field="intervention" header="Intervention" />
+                    </DataTable>
+                    <div className="my-4">
+                        <div className="flex align-items-center">
+                            <Checkbox
+                                inputId="confirmation"
+                                name="confirm"
+                                checked={isConfirmed}
+                                onChange={() => setIsConfirmed(!isConfirmed)} />
+                            <label htmlFor="confirmation" className="ml-2 form-field-label">
+                                I confirm that #7 &amp; #9 will be done by me manually after the automatic steps above are applied.
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex gap-3 justify-content-start">
+                    <Button size="small" label="Apply" disabled={!isConfirmed} autoFocus onClick={deleteModelHandler} />
+                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DeleteModelRowAction;

package/dist/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction.tsx

@@ -0,0 +1,213 @@
+'use client';
+import { useGenerateCodeForModelMutation } from "../../../../../../redux/api/modelApi";
+import { useSeederMutation } from "../../../../../../redux/api/solidServiceApi";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { SolidListRowdataDynamicFunctionProps } from "../../../../../../types/solid-core";
+import { Button } from "primereact/button";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Toast } from 'primereact/toast';
+import { SolidCircularLoader } from '../../../../../../components/core/common/SolidLoaders/SolidCircularLoader';
+import { ERROR_MESSAGES } from "../../../../../../constants/error-messages";
+
+
+const GenerateModelCodeRowAction = (event: SolidListRowdataDynamicFunctionProps) => {
+    const dispatch = useDispatch();
+    const [generateCode, {
+        isLoading: isGenerateCodeUpdating,
+        isSuccess: isGenerateCodeSuceess,
+        isError: isGenerateCodeError,
+        error: generateCodeError,
+        data: generateCodeData
+    }] = useGenerateCodeForModelMutation();
+
+    // const mqMessageApi = createSolidEntityApi("mqMessage");
+    // const {
+    //     useGetSolidEntitiesQuery: useGetMqMessageQuery,
+    //     useLazyGetSolidEntitiesQuery: useLazyGetMqMessageQuery,
+    // } = mqMessageApi;
+    // const [getMqMessageStatus, {
+    //     data: solidListViewMetaData,
+    //     error: solidListViewMetaDataError,
+    //     isLoading: solidListViewMetaDataIsLoading,
+    //     isError: solidListViewMetaDataIsError
+    // }] = useLazyGetMqMessageQuery();
+    // const fetchMqMessageStatus = async (retries = 30, delay = 500, generateCodeData: any): Promise<boolean> => {
+    //     for (let i = 0; i < retries; i++) {
+    //         try {
+    //             const query = {
+    //                 filters: {
+    //                     messageId: {
+    //                         $eq: generateCodeData?.data?.messageId
+    //                     }
+    //                 }
+    //             };
+    //             const queryString = qs.stringify(query, {
+    //                 encodeValuesOnly: true,
+    //             });
+    //             const res = await getMqMessageStatus(queryString)
+    //             if (res.isSuccess === true) {
+    //                 if (res.data.records.length > 0) {
+    //                     const messageStage = res.data.records[0].stage;
+    //                     console.log("messageStatus", messageStage);
+    //                     if (messageStage === "succeeded") {
+    //                         return true
+    //                     }
+    //                     if (messageStage === "failed") {
+    //                         return false
+    //                     }
+    //                 }
+    //             }
+    //         } catch (e) {
+    //             // ignore and retry
+    //         }
+    //         await new Promise((resolve) => setTimeout(resolve, delay));
+    //     }
+    //     return false;
+    // };
+
+    const generateCodeHandler = async () => {
+        const response: any = await generateCode({ id: event?.rowData?.id });
+        console.log("response generate code handler", response);
+        setIsGenerating(true);
+    }
+
+    // TODO: START REFACTORING - reusable code alert
+    const [triggerSeeder, {
+        data,
+        isLoading,
+        isSuccess: isSeederSuccess,
+        isError: isSeederError
+    }] = useSeederMutation();
+
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    // Utitlity to track if solid-api is up
+    const [isPinging, setIsPinging] = useState(false);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const pingBackendWithRetry = async (retries = 30, delay = 500): Promise<boolean> => {
+        for (let i = 0; i < retries; i++) {
+            try {
+                const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/ping`);
+                console.log("ping response", res);
+
+                if (res.ok)
+                    return true;
+            } catch (e) {
+                // ignore and retry
+            }
+            await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        return false;
+    };
+
+    useEffect(() => {
+        const runSeederIfQueueStatusIsSuccess = async () => {
+            if (isGenerateCodeSuceess) {
+                // console.log("isGenerateCodeSuceess", isGenerateCodeSuceess);
+                // setIsPinging(true);
+                // const hasMqMessageCompleted = await fetchMqMessageStatus(30, 500, generateCodeData);
+                const isAlive = await pingBackendWithRetry();
+                setIsPinging(false);
+
+                // const hasMqMessageCompleted = true;
+                // const isAlive = true;
+                // if (hasMqMessageCompleted && isAlive) {
+                if (isAlive) {
+                    await triggerSeeder("ModuleMetadataSeederService");
+                } else {
+                    dispatch(closePopup());
+                    console.log("Backend is not alive, cannot run seeder");
+                    showToast("error", ERROR_MESSAGES.BACKEND_UNAVAILABLE , ERROR_MESSAGES.SEEDER_NOT_TRIGGERED);
+                }
+            }
+        };
+        setTimeout(() => {
+            runSeederIfQueueStatusIsSuccess();
+        }, 5000);
+    }, [isGenerateCodeSuceess]);
+
+    useEffect(() => {
+        if (isSeederSuccess) {
+            console.log(ERROR_MESSAGES.IS_SEEDER_SUCCESS, data);
+            showToast("success", ERROR_MESSAGES.CODE_GENERTAE_SUCCESSFULLY, ERROR_MESSAGES.CODE_GENERTAE_SUCCESSFULLY);
+            setIsGenerating(false);
+            dispatch(closePopup());
+            window.location.reload();
+        }
+        if (isSeederError) {
+            console.log(ERROR_MESSAGES.IS_SEEDER_ERROR, isSeederError);
+            showToast("error", ERROR_MESSAGES.SEEDER_ERROR, ERROR_MESSAGES.SEEDER_NOT_RUN);
+            setIsGenerating(false);
+        }
+    }, [isSeederSuccess])
+    // TODO: END REFACTORING - reusable code alert
+
+    return (
+        <>
+            {isGenerating ?
+                <>
+                    <Toast ref={toast} />
+                    <div className="flex flex-column align-items-center justify-content-center" style={{ padding: '2rem', height: 200 }}>
+                        <SolidCircularLoader />
+                        <p className="mt-4 font-medium">Waiting for backend...</p>
+                    </div>
+                </>
+                :
+                <>
+                    <Toast ref={toast} />
+                    {event?.rowData?.module?.name != "solid-core" ?
+                        <div className="">
+                            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                                <span className="p-dialog-title">
+                                    Generate Model
+                                </span>
+                            </div>
+                            <div className="px-4 pb-4 pt-3">
+                                <p className="">Proceed with model code generation? Existing files will be overwritten.</p>
+                                <p>Below is the list of files that will be created </p>
+                                <ul>
+                                    <li>Model Entity File</li>
+                                    <li>Model Repository</li>
+                                    <li>Model Controller File</li>
+                                    <li>Model Service File</li>
+                                    <li>Model Create and Update Dto files</li>
+                                </ul>
+                                <div className="flex gap-3 justify-content-start">
+                                    <Button size="small" label="Ok" autoFocus onClick={generateCodeHandler} />
+                                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                                </div>
+                            </div>
+                        </div > :
+                        <div className="">
+                            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                                <span className="p-dialog-title">
+                                    Generate Model
+                                </span>
+                            </div>
+                            <div className="px-4 pb-4 pt-3">
+                                <p className="text-center">You cannot generate code for Solid Core models</p>
+                                <div className="flex gap-3 justify-content-center">
+                                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </>
+            }
+
+        </>
+    )
+}
+
+export default GenerateModelCodeRowAction;

package/dist/components/core/extension/solid-core/moduleMetadata/list/DeleteModuleRowAction.tsx

@@ -0,0 +1,138 @@
+'use client';
+import { SolidCircularLoader } from "../../../../../../components/core/common/SolidLoaders/SolidCircularLoader";
+import { ERROR_MESSAGES } from "../../../../../../constants/error-messages";
+import { useGetModelsQuery, useLazyGetModelsQuery } from "../../../../../../redux/api/modelApi";
+import { useGenerateCodeFormoduleMutation } from "../../../../../../redux/api/moduleApi";
+import { createSolidEntityApi } from "../../../../../../redux/api/solidEntityApi";
+import { useSeederMutation } from "../../../../../../redux/api/solidServiceApi";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { SolidListRowdataDynamicFunctionProps } from "../../../../../../types/solid-core";
+import { kebabCase } from "lodash";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+
+const DeleteModuleRowAction = (event: SolidListRowdataDynamicFunctionProps) => {
+
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    const [errorState, setErrorState] = useState<string | null>(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const dispatch = useDispatch();
+    const entityApi = createSolidEntityApi("moduleMetadata");
+    const { useDeleteSolidEntityMutation } = entityApi;
+
+    const [allowDelete, setAllowDelete] = useState(false);
+
+    const [deleteSolidSingleEntiry, {
+        isError: isSolidEntitiesDeleteError,
+    }] = useDeleteSolidEntityMutation()
+
+    const queryString = `filters[$and][0][$or][0][module][$in][0]=${event?.rowData?.id}`;
+    const { data: models, isLoading: getModelsLoading, error } = useGetModelsQuery(queryString);
+
+    useEffect(() => {
+        if (models && models.meta.totalRecords == 0) {
+            setAllowDelete(true);
+        } else {
+            setAllowDelete(false);
+        }
+    }, [models]);
+
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const deleteModuleHandler = async () => {
+        setIsDeleting(true);
+        setErrorState(null);
+        try {
+            const res: any = await deleteSolidSingleEntiry(event.rowData.id)
+            // console.log('delete model res', res);
+            setErrorState(res.error || null);
+            if (res.error) {
+                // handle backend or RTK error object
+                const message =
+                    res.error?.data?.message ||
+                    res.error?.error ||
+                    ERROR_MESSAGES.ERROR_OCCURED;
+                setErrorState(message);
+                showToast('error', ERROR_MESSAGES.DELETE_FAIELD, message);
+            } else {
+                showToast('success', ERROR_MESSAGES.MODEL_DELETE, ERROR_MESSAGES.MODEL_DELETE_SUCCESSFULLY(event.rowData.singularName));
+                dispatch(closePopup());
+            }
+        } catch (err: any) {
+            console.error(ERROR_MESSAGES.DELETE_ERROR, err);
+            setErrorState(err.message || ERROR_MESSAGES.NETWORK_ERROR);
+            showToast('error', ERROR_MESSAGES.ERROR, ERROR_MESSAGES.NETWORK_OR_SERVER_ERROR);
+        } finally {
+            setIsDeleting(false);
+        }
+    }
+
+    const rows = [
+        { file: `${kebabCase(event.rowData.name)}.module.ts`, description: 'Delete the module file.', intervention: 'Automatic'},
+        { file: `${kebabCase(event.rowData.name)}-metadata.json`, description: 'Remove the module metadata json file.', intervention: 'Automatic' },
+    ];
+
+    return (
+        <div className="">
+            <div className="p-dialog-header secondary-border-bottom py-3" style={{ background: 'var(--solid-light-grey)' }}>
+                <span className="p-dialog-title">
+                    Delete Module
+                </span>
+            </div>
+            <div className="px-4 pb-4 pt-3">
+                <div>
+                    <p className="form-field-label font-medium">
+                        {allowDelete === true ?
+                            "Deleting a module should be done carefully. The below files will be impacted as part of deleting a model:"
+                            :
+                            "This module still has models associated with it. Please delete those models before deleting the module."
+                        }
+                    </p>
+                    {/* {allowDelete === true && */}
+                        <DataTable value={rows} size="small">
+                            <Column field="file" header="File Name" />
+                            <Column field="description" header="Description" />
+                            <Column field="intervention" header="Intervention" />
+                        </DataTable>
+                    {/* } */}
+                    {/* {allowDelete === true &&
+
+                        <div className="my-4">
+                            <div className="flex align-items-center">
+                                <Checkbox
+                                    inputId="confirmation"
+                                    name="confirm"
+                                    checked={isConfirmed}
+                                    onChange={() => setIsConfirmed(!isConfirmed)} />
+                                <label htmlFor="confirmation" className="ml-2 form-field-label">
+                                    I confirm that #7 &amp; #9 will be done by me manually after the automatic steps above are applied.
+                                </label>
+                            </div>
+                        </div>
+                    } */}
+                </div>
+                <div className="flex gap-3 justify-content-start">
+                    {allowDelete === true &&
+                        <Button size="small" label="Apply" autoFocus onClick={deleteModuleHandler} />
+                    }
+                    <Button size="small" label="Cancel" outlined onClick={() => dispatch(closePopup())} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DeleteModuleRowAction;