mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cms): Add CMS table with delete and edit functionality

Browse Source 
- Implement CMS table with row listing and pagination
- Add delete functionality for CMS entries with confirmation modal
- Introduce edit button to navigate to edit page for specific CMS entry
- Update page type form to include new 'key' field for CMS entries
- Modify CMS service and types to support new data structure
- Enhance table presenter with additional actions and state management
Resolves data management and user interaction improvements for CMS module
This commit is contained in:
AmirReza Jamali
2025-11-11 10:12:21 +03:30
parent 2b9eaa0495
commit b444f6a08f
7 changed files with 178 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/marketing/create/page.tsx
+21 -2
View File
@@ -24,6 +24,7 @@ interface IPageTypeFields {
language?: string;
company_name?: string;
country?: string;
key: string;
}
const Marketing = () => {
@@ -152,7 +153,8 @@ const Marketing = () => {
const finalData = {
...allData,
page_type: pageTypeData.type,
type: pageTypeData.type,
key: pageTypeData.key,
...(pageTypeData.type === "company" && {
language: pageTypeData.language,
company_name: pageTypeData.company_name,
@@ -229,7 +231,7 @@ const Marketing = () => {
{...registerPageType("type", {
required: { message: FormErrorMessages.required, value: true },
})}
name="page_type"
name="type"
label="Page Type"
required
items={[
@@ -310,6 +312,23 @@ const Marketing = () => {
{pageTypeErrors.country.message}
</p>
)}
<InputGroup
{...registerPageType("key", {
required: {
value: true,
message: FormErrorMessages.required,
},
})}
label="Page key"
name="key"
placeholder="Please enter page key"
type="text"
/>
{pageTypeErrors.key && (
<p className="mt-1 text-sm text-red-500">
{pageTypeErrors.key.message}
</p>
)}
</div>
</div>
src/components/Tables/cms/index.tsx
+89 -3
View File
@@ -1,13 +1,29 @@
"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import ListHeader from "@/components/ui/ListHeader";
import { Table, TableBody, TableHead } from "@/components/ui/table";
import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { unixToDate } from "@/utils/shared";
import { Tooltip } from "react-tooltip";
import { TableHeader, TableRow } from "../../ui/table";
import useCmsTablePresenter from "./useCmsTablePresenter";
const CmsTable = () => {
const { columns, data, isPending } = useCmsTablePresenter();
const {
columns,
data,
isPending,
isModalOpen,
setIsModalOpen,
currentCms,
setCurrentCms,
onConfirmDelete,
router,
pathname,
} = useCmsTablePresenter();
return (
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<ListHeader />
@@ -28,10 +44,80 @@ const CmsTable = () => {
columns={columns}
emptyMessage="No Cms were found"
>
Cms list will be added
{data?.data.cms.map((item, index) => (
<TableRow
key={item?.id || index}
className="odd:bg-gray-2 dark:odd:bg-gray-7"
>
<TableCell className="text-start" colSpan={100}>
{index + 1}
</TableCell>
<TableCell className="text-start" colSpan={100}>
{item.key}
</TableCell>
<TableCell className="text-start" colSpan={100}>
{unixToDate({ unix: item.created_at, hasTime: true })}
</TableCell>
<TableCell className="text-start xl:pr-7.5">
<div className="flex items-center justify-start gap-x-3.5">
<button
data-tooltip-id="delete"
data-tooltip-content="Delete"
data-tooltip-place="top"
className="hover:text-red-500"
onClick={() => {
setCurrentCms(item);
setIsModalOpen(true);
}}
>
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
<span className="sr-only">Delete Marketing </span>
<TrashIcon />
</button>
<button
data-tooltip-id="edit"
data-tooltip-content="Edit"
data-tooltip-place="top"
className="hover:text-primary"
onClick={() => router.push(`${pathname}/edit/${item.id}`)}
>
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
<span className="sr-only">Edit Marketing </span>
<PencilSquareIcon />
</button>
{/* <button
data-tooltip-id="details"
data-tooltip-content="Details"
data-tooltip-place="top"
onClick={() => {
router.push(`${pathname}/details/${item.id}`);
}}
>
<Tooltip {..._TooltipDefaultParams({ id: "details" })} />
<EyeIcon />
</button> */}
</div>
</TableCell>
</TableRow>
))}
</EmptyListWrapper>
</TableBody>
</Table>
{isModalOpen && (
<ConfirmationModal
isOpen={isModalOpen}
title={`Deleting ${currentCms?.key}`}
message={`Are you sure?`}
variant={"default"}
size={"md"}
confirmText={"Delete"}
cancelText={"Cancel"}
onConfirm={() => {
onConfirmDelete();
}}
onCancel={() => setIsModalOpen(false)}
/>
)}
</div>
);
};
src/components/Tables/cms/useCmsTablePresenter.ts
+24 -3
View File
@@ -1,14 +1,35 @@
"use client";
import { useGetCmsList } from "@/hooks/queries/useCmsQueries";
import { useDeleteCms, useGetCmsList } from "@/hooks/queries/useCmsQueries";
import { TCms } from "@/lib/api/types/TCms";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
const useCmsTablePresenter = () => {
const columns = ["row", "title", "created at"];
const [isModalOpen, setIsModalOpen] = useState(false);
const [currentCms, setCurrentCms] = useState<TCms | null>(null);
const columns = ["row", "key", "created at", "actions"];
const { isPending, data } = useGetCmsList();
const router = useRouter();
const pathname = usePathname();
const { mutate: deleteCms } = useDeleteCms(() => {
setIsModalOpen(false);
setCurrentCms(null);
});
const onConfirmDelete = () => {
if (!currentCms?.id) return;
deleteCms(currentCms.id);
};
return {
columns,
isPending,
data,
isModalOpen,
setIsModalOpen,
currentCms,
setCurrentCms,
onConfirmDelete,
router,
pathname,
};
};
src/components/Tables/contact-us/index.tsx
+4 -1
View File
@@ -3,6 +3,7 @@ import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
@@ -36,7 +37,9 @@ const ContactUsTable = () => {
columns={columns}
emptyMessage="No contact us is submitted"
>
Contact us table will be initialized here
<TableRow>
<TableCell><div>hjgfjhg</div></TableCell>
</TableRow>
</EmptyListWrapper>
</TableBody>
</Table>
src/hooks/queries/useCmsQueries.ts
+30 -1
View File
@@ -1,7 +1,9 @@
import { API_ENDPOINTS } from "@/lib/api";
import { cmsService } from "@/lib/api/services/cms-service";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { useMemo } from "react";
import { toast } from "react-toastify";
export const useGetCmsList = () => {
const queryKey = useMemo(() => [API_ENDPOINTS.CMS.BASE()], []);
@@ -18,6 +20,8 @@ export const useGetCmsDetails = (id: string) => {
});
};
export const useCreateCms = () => {
const router = useRouter();
const queryClient = useQueryClient();
const mutationKey = useMemo(
() => [API_ENDPOINTS.CMS.BASE(), "Create cms"],
[],
@@ -25,5 +29,30 @@ export const useCreateCms = () => {
return useMutation({
mutationKey,
mutationFn: cmsService.createCms,
onSuccess: ({ data }: { data: { message: string } }) => {
toast.success(data.message);
router.push("/marketing");
queryClient.invalidateQueries({
queryKey: [API_ENDPOINTS.CMS.BASE()],
});
},
});
};
export const useDeleteCms = (successCallback?: () => void) => {
const queryClient = useQueryClient();
const mutationKey = useMemo(
() => [API_ENDPOINTS.CMS.BASE(), "Delete CMS"],
[],
);
return useMutation({
mutationKey,
mutationFn: cmsService.deleteCms,
onSuccess: ({ data }: { data: { message: string } }) => {
toast.success(data.message);
successCallback?.();
queryClient.invalidateQueries({
queryKey: [API_ENDPOINTS.CMS.BASE()],
});
},
});
};
src/lib/api/services/cms-service.ts
+8
View File
@@ -28,4 +28,12 @@ export const cmsService = {
throw error;
}
},
deleteCms: async (id: string) => {
try {
return (await api.delete(API_ENDPOINTS.CMS.BASE(id))).data;
} catch (error) {
console.error("Error caught in CMS Service => delete CMS: ", error);
throw error;
}
},
};
src/lib/api/types/TCms.ts
+2 -1
View File
@@ -155,6 +155,7 @@ export const cmsListResponseSchema = z.object({
export const cmsDetailsResponse = z.object({
cms: CmsSchema,
});
export type TCms = z.infer<typeof CmsSchema>;
export type TCmsListResponse = z.infer<typeof cmsListResponseSchema>;
export type TCmsDetailsResponse = z.infer<typeof cmsDetailsResponse>
export type TCmsDetailsResponse = z.infer<typeof cmsDetailsResponse>;
export type TCmsCredentials = z.infer<typeof CmsCredentials>;