Skip to content

S
sweepstake
Commit 4d2d7d0f by Arjun Jhukal
Options

updated the page edit feature

parent 5079ece0
Showing with 220 additions and 89 deletions
src/app/(dashboard)/(admin)/pages/edit-page/[id]/page.tsx 0 → 100644
import AddPageForm from '@/components/pages/dashboard/adminDashboard/pages/add-page'
import React from 'react'
export default async function EditGeneralPages(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params;
return (
<section className="edit__page__root">
<AddPageForm id={id} />
</section>
)
}
src/components/pages/dashboard/adminDashboard/pages/add-page/index.tsx
...@@ -13,18 +13,28 @@ import { ...@@ -13,18 +13,28 @@ import {
import ReactQuillEditor from "@/components/molecules/ReactQuill"; import ReactQuillEditor from "@/components/molecules/ReactQuill";
import { pageInitialData } from "@/types/page"; // should match your type import { pageInitialData } from "@/types/page"; // should match your type
import { CloseCircle } from "@wandersonalwes/iconsax-react"; import { CloseCircle } from "@wandersonalwes/iconsax-react";
import { useCreatePageMutation } from "@/services/pageApi"; import { useCreatePageMutation, useGetSinlgePageByIdQuery, useUpdatePageByIdMutation } from "@/services/pageApi";
import { showToast, ToastVariant } from "@/slice/toastSlice"; import { showToast, ToastVariant } from "@/slice/toastSlice";
import { useAppDispatch } from "@/hooks/hook"; import { useAppDispatch } from "@/hooks/hook";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
export default function AddPageForm() { export default function AddPageForm({ id }: { id?: string }) {
const [createPage, { isLoading: creatingPage } const [createPage, { isLoading: creatingPage }
] = useCreatePageMutation(); ] = useCreatePageMutation();
const { data, isLoading } = useGetSinlgePageByIdQuery({ id }, {
skip: !id
})
const [updatedPage, { isLoading: updating }] = useUpdatePageByIdMutation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const router = useRouter(); const router = useRouter();
const formik = useFormik({ const formik = useFormik({
initialValues: pageInitialData, initialValues: id ? {
name: data?.data?.name || "",
slug: data?.data?.slug || "",
description: data?.data?.description || "",
content: data?.data?.content || []
} : pageInitialData,
enableReinitialize: true, enableReinitialize: true,
validationSchema: Yup.object({ validationSchema: Yup.object({
name: Yup.string().required("Page title is required"), name: Yup.string().required("Page title is required"),
...@@ -54,7 +64,7 @@ export default function AddPageForm() { ...@@ -54,7 +64,7 @@ export default function AddPageForm() {
formData.append(`content[${index}][description]`, item.description); formData.append(`content[${index}][description]`, item.description);
}); });
try { try {
const response = await createPage(formData).unwrap(); const response = await createPage(formData).unwrap();
......
src/components/pages/dashboard/adminDashboard/settings/BannerSlider.tsx
import InputFile from '@/components/atom/InputFile' "use client";
import { Button, InputLabel, OutlinedInput } from '@mui/material'
import { useFormik } from 'formik'; import React from "react";
import React from 'react' import { useFormik } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import { Button, InputLabel, OutlinedInput, IconButton } from "@mui/material";
import InputFile from "@/components/atom/InputFile";
import { CloseCircle } from "@wandersonalwes/iconsax-react";
import { useAppDispatch } from "@/hooks/hook";
import { showToast, ToastVariant } from "@/slice/toastSlice";
export default function BannerSlider() { export default function BannerSlider() {
const dispatch = useAppDispatch();
const formik = useFormik({ const formik = useFormik({
initialValues: { initialValues: {
favicon: null as File | null, banners: [
logo: null as File | null, {
websiteTitle: "", title: "",
banner: "", description: "",
subBanner: "", cta_link: "",
gameProvider: "", image: null as File | null,
},
],
}, },
validationSchema: Yup.object({ validationSchema: Yup.object({
favicon: Yup.mixed().required("Favicon is required"), banners: Yup.array().of(
logo: Yup.mixed().required("Logo is required"), Yup.object({
websiteTitle: Yup.string().required("Website title is required"), title: Yup.string().required("Banner title is required"),
banner: Yup.string().required("Banner is required"), description: Yup.string().required("Banner description is required"),
gameProvider: Yup.string().required("Game provider is required"), cta_link: Yup.string().required("CTA link is required"),
image: Yup.mixed().required("Banner image is required"),
})
),
}), }),
onSubmit: (values) => { onSubmit: (values) => {
try {
dispatch(
showToast({
message: "Banner created successfully",
variant: ToastVariant.ERROR
})
)
}
catch (e: any) {
console.log(e);
dispatch(
showToast({
message: e.message || "Something went wrong",
variant: ToastVariant.ERROR
})
)
}
}, },
}); });
const handleAddBanner = () => {
formik.setFieldValue("banners", [
...formik.values.banners,
{
title: "",
description: "",
cta_link: "",
image: null,
},
]);
};
const handleRemoveBanner = (index: number) => {
const updated = [...formik.values.banners];
updated.splice(index, 1);
formik.setFieldValue("banners", updated);
};
return ( return (
<div className="form__field__wrapper border-solid border-[1px] border-gray rounded-[16px] mb-6"> <form
onSubmit={formik.handleSubmit}
className="form__field__wrapper border-solid border-[1px] border-gray rounded-[16px] mb-6"
>
<div className="form__title py-6 px-10 border-b-solid border-b-[1px] border-gray"> <div className="form__title py-6 px-10 border-b-solid border-b-[1px] border-gray">
<h2 className="text-[20px] leading-[140%] font-bold">Banner Slider</h2> <h2 className="text-[20px] leading-[140%] font-bold">Banner Slider</h2>
</div> </div>
<div className="form__fields p-6 lg:p-10 grid gap-4 lg:gap-6 md:grid-cols-2"> <div className="form__fields p-6 lg:p-10 space-y-6">
{/* Name */} {formik.values.banners.map((banner, index) => (
<div className="input__field col-span-1 md:col-span-2"> <div
<InputLabel htmlFor="name">Banner Title<span className="text-red-500">*</span></InputLabel> key={index}
<OutlinedInput className="grid gap-4 lg:gap-6 md:grid-cols-2 lg:grid-cols-3 items-start relative border border-gray rounded-lg p-4"
fullWidth >
id="name" {formik.values.banners.length > 1 && (
name="name" <IconButton
placeholder="Enter the name of the game" onClick={() => handleRemoveBanner(index)}
value={formik.values.websiteTitle} className="!absolute !top-2 !right-2 !text-red-500 !justify-end !z-[9] max-w-fit"
onChange={formik.handleChange} >
onBlur={formik.handleBlur} <CloseCircle size={18} />
/> </IconButton>
<span className="error"> )}
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""}
</span> {/* Banner Title */}
</div> <div className="input__field">
{/* Name */} <InputLabel>
<div className="input__field col-span-1 md:col-span-2"> Banner Title<span className="text-red-500">*</span>
<InputLabel htmlFor="name">Banner Description<span className="text-red-500">*</span></InputLabel> </InputLabel>
<OutlinedInput <OutlinedInput
fullWidth fullWidth
id="name" name={`banners[${index}].title`}
name="name" placeholder="Enter Banner Title"
placeholder="Enter the name of the game" value={banner.title}
value={formik.values.websiteTitle} onChange={formik.handleChange}
onChange={formik.handleChange} onBlur={formik.handleBlur}
onBlur={formik.handleBlur} />
/> <span className="error">
<span className="error"> {formik.touched.banners?.[index]?.title &&
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""} (formik.errors.banners?.[index] as any)?.title
</span> ? (formik.errors.banners?.[index] as any).title
</div> : ""}
{/* Name */} </span>
<div className="input__field col-span-1 md:col-span-2"> </div>
<InputLabel htmlFor="name">Banner CTA Link<span className="text-red-500">*</span></InputLabel>
<OutlinedInput {/* Banner Description */}
fullWidth <div className="input__field">
id="name" <InputLabel>
name="name" Banner Description<span className="text-red-500">*</span>
placeholder="Enter the name of the game" </InputLabel>
value={formik.values.websiteTitle} <OutlinedInput
onChange={formik.handleChange} fullWidth
onBlur={formik.handleBlur} name={`banners[${index}].description`}
/> placeholder="Enter Banner Description"
<span className="error"> value={banner.description}
{formik.touched.websiteTitle && formik.errors.websiteTitle ? formik.errors.websiteTitle : ""} onChange={formik.handleChange}
</span> onBlur={formik.handleBlur}
</div> />
<span className="error">
{formik.touched.banners?.[index]?.description &&
(formik.errors.banners?.[index] as any)?.description
? (formik.errors.banners?.[index] as any).description
: ""}
</span>
</div>
{/* Banner CTA Link */}
<div className="input__field">
<InputLabel>
Banner CTA Link<span className="text-red-500">*</span>
</InputLabel>
<OutlinedInput
fullWidth
name={`banners[${index}].cta_link`}
placeholder="Enter CTA Link"
value={banner.cta_link}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.banners?.[index]?.cta_link &&
(formik.errors.banners?.[index] as any)?.cta_link
? (formik.errors.banners?.[index] as any).cta_link
: ""}
</span>
</div>
{/* Favicon */} {/* Banner Image */}
<div className="input__field col-span-1 md:col-span-2"> <div className="input__field col-span-1 md:col-span-2 lg:col-span-3">
<InputFile <InputFile
name="favicon" name={`banners[${index}].image`}
label="Website Image" label="Banner Image"
value={formik.values.favicon || null} value={banner.image || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("favicon", file)} onChange={(file: File | File[] | null) =>
onBlur={() => formik.setFieldTouched("favicon", true)} formik.setFieldValue(`banners[${index}].image`, file)
// serverFile={serverFiles.favicon} }
// onRemoveServerFile={() => handleServerFileRemoval("favicon")} onBlur={() =>
/> formik.setFieldTouched(`banners[${index}].image`, true)
<span className="error"> }
{formik.touched.favicon && formik.errors.favicon ? formik.errors.favicon : ""} />
</span> <span className="error">
</div> {formik.touched.banners?.[index]?.image &&
(formik.errors.banners?.[index] as any)?.image
? (formik.errors.banners?.[index] as any).image
: ""}
</span>
</div>
</div>
))}
<Button
variant="text"
color="primary"
onClick={handleAddBanner}
className="!p-0"
>
+ Add More Banner
</Button>
</div> </div>
<div className="text-right px-10 mb-6 lg:mb-10 flex gap-2 justify-end"> <div className="text-right px-10 mb-6 lg:mb-10 flex gap-2 justify-end">
<Button variant="contained" color="secondary">Add More Banner</Button> <Button
<Button variant="contained" color="primary">Save Banner Setting</Button> type="submit"
variant="contained"
color="primary"
disabled={formik.isSubmitting}
>
Save Banner Setting
</Button>
</div> </div>
</div > </form>
) );
} }
src/services/pageApi.ts
...@@ -23,6 +23,13 @@ export const pageApi = createApi({ ...@@ -23,6 +23,13 @@ export const pageApi = createApi({
}), }),
providesTags: ['pages'] providesTags: ['pages']
}), }),
getSinlgePageById: builder.query<PageResponseProps, { id: string | undefined }>({
query: ({ id }) => ({
url: `/api/admin/page/${id}`,
method: "GET",
}),
providesTags: ['pages']
}),
updatePageById: builder.mutation<GlobalResponse, { id: string, body: FormData }>({ updatePageById: builder.mutation<GlobalResponse, { id: string, body: FormData }>({
query: ({ id, body }) => ({ query: ({ id, body }) => ({
url: `/api/admin/page/update/${id}`, url: `/api/admin/page/update/${id}`,
...@@ -45,5 +52,6 @@ export const { ...@@ -45,5 +52,6 @@ export const {
useCreatePageMutation, useCreatePageMutation,
useGetAllPageQuery, useGetAllPageQuery,
useUpdatePageByIdMutation, useUpdatePageByIdMutation,
useDeletePageByIdMutation useDeletePageByIdMutation,
useGetSinlgePageByIdQuery
} = pageApi; } = pageApi;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment