feat(form): add loading state and replace custom switch component
This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability. - Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution. - Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations. - Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state. - Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components. - Moves the `BreadcrumbItem` type to a shared types file for better code organization.
This commit is contained in:
AmirReza Jamali
@@ -1,10 +1,6 @@
|
||||
import { BreadcrumbItem } from "@/types/shared";
|
||||
import Link from "next/link";
|
||||
|
||||
interface BreadcrumbItem {
|
||||
name: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface BreadcrumbProps {
|
||||
items: BreadcrumbItem[];
|
||||
}
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import { CheckIcon, XIcon } from "@/assets/icons";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useId } from "react";
|
||||
import { ChangeEvent, ToggleEvent, useId } from "react";
|
||||
|
||||
type PropsType = {
|
||||
withIcon?: boolean;
|
||||
background?: "dark" | "light";
|
||||
backgroundSize?: "sm" | "default";
|
||||
name?: string;
|
||||
checked?: boolean;
|
||||
onToggle: (e: ToggleEvent<HTMLInputElement>) => void;
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
export function Switch({
|
||||
@@ -14,6 +17,9 @@ export function Switch({
|
||||
withIcon,
|
||||
backgroundSize,
|
||||
name,
|
||||
checked = false,
|
||||
onToggle,
|
||||
onChange,
|
||||
}: PropsType) {
|
||||
const id = useId();
|
||||
|
||||
@@ -23,7 +29,15 @@ export function Switch({
|
||||
className="flex max-w-fit cursor-pointer select-none items-center"
|
||||
>
|
||||
<div className="relative">
|
||||
<input type="checkbox" name={name} id={id} className="peer sr-only" />
|
||||
<input
|
||||
type="checkbox"
|
||||
name={name}
|
||||
onToggle={onToggle}
|
||||
onChange={onChange}
|
||||
id={id}
|
||||
className="peer sr-only"
|
||||
checked={checked}
|
||||
/>
|
||||
<div
|
||||
className={cn("h-8 w-14 rounded-full bg-gray-3 dark:bg-[#5A616B]", {
|
||||
"h-5": backgroundSize === "sm",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { title } from "process";
|
||||
import * as Icons from "../icons";
|
||||
import { z } from "zod";
|
||||
import * as Icons from "../icons";
|
||||
const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
|
||||
z.object({
|
||||
title: z.string(),
|
||||
@@ -36,10 +35,16 @@ export const NAV_DATA: NavData = [
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Companies",
|
||||
url: "/companies",
|
||||
title: "Manage Companies",
|
||||
icon: Icons.Building,
|
||||
items: [],
|
||||
items: [
|
||||
{ Icons: Icons.Building, url: "/companies", title: "Companies" },
|
||||
{
|
||||
Icons: Icons.Building,
|
||||
url: "/companies/categories",
|
||||
title: "Company Categories",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Customers",
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
|
||||
import { Switch } from "@/components/FormElements/switch";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Skeleton } from "../../../ui/skeleton";
|
||||
import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
|
||||
|
||||
const CompanyCategoriesTable = () => {
|
||||
const {
|
||||
categories,
|
||||
isLoading,
|
||||
pathName,
|
||||
router,
|
||||
currentCategory,
|
||||
isToggling,
|
||||
togglePublished,
|
||||
onConfirmDelete,
|
||||
setCurrentCategory,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
} = useCompanyCategoriesPresenter();
|
||||
|
||||
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">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create category</Link>
|
||||
</button>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
<TableHead colSpan={100}>Row</TableHead>
|
||||
<TableHead colSpan={100}>Title</TableHead>
|
||||
<TableHead colSpan={100}>Description</TableHead>
|
||||
<TableHead colSpan={100}>Created at</TableHead>
|
||||
<TableHead colSpan={100}>Published</TableHead>
|
||||
<TableHead colSpan={100}>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading && <TableSkeleton column={5} />}
|
||||
<TableBody>
|
||||
<IsVisible condition={!categories}>
|
||||
<TableRow>
|
||||
<TableCell colSpan={400} className="text-center">
|
||||
<h6>No category found</h6>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!!categories}>
|
||||
{categories?.map((category, index) => {
|
||||
return (
|
||||
<TableRow key={category.id}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{category.name}</TableCell>
|
||||
<TableCell colSpan={100}>{category.description}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate(category.created_at)}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<IsVisible condition={isToggling}>
|
||||
<Skeleton></Skeleton>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!isToggling}>
|
||||
<Switch
|
||||
withIcon
|
||||
onChange={(e) => {
|
||||
togglePublished(category.id);
|
||||
}}
|
||||
checked={category.published}
|
||||
onToggle={(e) => {
|
||||
console.log(e);
|
||||
}}
|
||||
/>
|
||||
</IsVisible>
|
||||
</TableCell>
|
||||
<TableCell className="text-start xl:pr-7.5">
|
||||
<div className="flex items-center justify-start gap-x-3.5">
|
||||
<button
|
||||
className="hover:text-red-500"
|
||||
onClick={() => {
|
||||
setCurrentCategory(category);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Delete Admin </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${category.id}`)
|
||||
}
|
||||
>
|
||||
<span className="sr-only">Edit Category</span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</IsVisible>
|
||||
</TableBody>
|
||||
</Table>
|
||||
{isModalOpen && (
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
title={`Deleting ${currentCategory?.name}`}
|
||||
message={`Are you sure?`}
|
||||
variant={"default"}
|
||||
size={"md"}
|
||||
confirmText={"Delete"}
|
||||
cancelText={"Cancel"}
|
||||
onConfirm={() => {
|
||||
onConfirmDelete();
|
||||
}}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyCategoriesTable;
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import {
|
||||
useCompanyCategoriesQuery,
|
||||
useDeleteCompanyCategoryQuery,
|
||||
useToggleCompanyCategoryPublished,
|
||||
} from "@/hooks/queries";
|
||||
import { TCompanyCategory } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const useCompanyCategoriesPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
|
||||
const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
);
|
||||
const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
|
||||
const onConfirmDelete = () => {
|
||||
if (!currentCategory) return;
|
||||
deleteCategory(currentCategory?.id);
|
||||
};
|
||||
return {
|
||||
categories: data?.data.categories,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
isLoading,
|
||||
isError,
|
||||
pathName,
|
||||
router,
|
||||
params,
|
||||
setParams,
|
||||
currentCategory,
|
||||
togglePublished,
|
||||
isToggling,
|
||||
setCurrentCategory,
|
||||
onConfirmDelete,
|
||||
};
|
||||
};
|
||||
|
||||
export default useCompanyCategoriesPresenter;
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
@@ -10,13 +9,12 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
import { TendersSkeleton } from "./Skeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getStatusColor } from "@/utils/shared";
|
||||
import { ExclamationIcon } from "@/assets/icons";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import Page from "../../../app/forms/form-layout/page";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
const TendersTable = () => {
|
||||
const { allTenders, isPending, router, pathName, setParams } =
|
||||
@@ -27,9 +25,9 @@ const TendersTable = () => {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{/* <TableHead colSpan={100} className="text-start font-extrabold">
|
||||
<TableHead colSpan={100} className="text-start font-extrabold">
|
||||
Row
|
||||
</TableHead> */}
|
||||
</TableHead>
|
||||
<TableHead colSpan={100} className="text-start font-extrabold">
|
||||
Title
|
||||
</TableHead>
|
||||
@@ -49,7 +47,7 @@ const TendersTable = () => {
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
{isPending && <TendersSkeleton />}
|
||||
{isPending && <TableSkeleton column={6} />}
|
||||
<TableBody>
|
||||
{allTenders?.data.tenders?.map((item, index) =>
|
||||
!item ? (
|
||||
@@ -59,9 +57,9 @@ const TendersTable = () => {
|
||||
key={item.id}
|
||||
className="odd:bg-gray-2 dark:odd:bg-gray-7"
|
||||
>
|
||||
{/* <TableCell className="text-start" colSpan={100}>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{index + 1}
|
||||
</TableCell> */}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.title}
|
||||
</TableCell>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useTendersQuery } from "@/hooks/queries";
|
||||
import useDebounce from "@/hooks/useDebounce";
|
||||
import { TCustomer } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { useEffect, useState } from "react";
|
||||
import { z } from "zod";
|
||||
const useTenderListPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
@@ -15,15 +15,13 @@ const useTenderListPresenter = () => {
|
||||
Partial<ConfirmationModalProps>
|
||||
>({});
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
sort: "created_at",
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const router = useRouter();
|
||||
const debouncedSearch = useDebounce(search, 1000);
|
||||
const pathName = usePathname();
|
||||
const { data, error, isPending } = useTendersQuery(params);
|
||||
|
||||
const { ref, inView } = useInView({ threshold: 0.5 });
|
||||
|
||||
useEffect(() => {
|
||||
const result = z.string().safeParse(debouncedSearch);
|
||||
if (result.success) {
|
||||
@@ -36,14 +34,8 @@ const useTenderListPresenter = () => {
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
};
|
||||
// const onConfirmDelete = () => {
|
||||
// if (currentTender) {
|
||||
// deleteTender(currentTender.id);
|
||||
// }
|
||||
// };
|
||||
|
||||
return {
|
||||
ref,
|
||||
currentTender,
|
||||
setCurrentTender,
|
||||
search,
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
"use client";
|
||||
import { GlobeIcon, MoneyIcon } from "@/assets/icons";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import FormFooter from "@/components/ui/FormFooter";
|
||||
import { PHONE_REGEX } from "@/constants/regex";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { ICreateCompanyCredentials } from "@/lib/api/types/Company";
|
||||
import useCreateCompanyPresenter from "./useCreateCompanyPresenter";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import { title } from "process";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { Select } from "@/components/FormElements/select";
|
||||
import { CurrencyIcon, GlobeIcon, MoneyIcon } from "@/assets/icons";
|
||||
import MultiSelect from "@/components/FormElements/MultiSelect";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { PHONE_REGEX } from "@/constants/regex";
|
||||
|
||||
interface IProps {
|
||||
editMode?: boolean;
|
||||
@@ -18,21 +17,12 @@ interface IProps {
|
||||
}
|
||||
|
||||
const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
|
||||
const {
|
||||
errors,
|
||||
handleCancel,
|
||||
handleSubmit,
|
||||
isCreating,
|
||||
isMutating,
|
||||
isUpdating,
|
||||
onSubmit,
|
||||
router,
|
||||
register,
|
||||
} = useCreateCompanyPresenter({
|
||||
editMode,
|
||||
defaultValues,
|
||||
id,
|
||||
});
|
||||
const { errors, handleSubmit, onSubmit, register } =
|
||||
useCreateCompanyPresenter({
|
||||
editMode,
|
||||
defaultValues,
|
||||
id,
|
||||
});
|
||||
return (
|
||||
<form
|
||||
className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
|
||||
@@ -507,12 +497,17 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
|
||||
</ShowcaseSection>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 flex gap-6">
|
||||
<FormFooter />
|
||||
{/* <div className="col-span-2 flex gap-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
>
|
||||
Submit
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -521,7 +516,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
|
||||
>
|
||||
Opt out
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import FormFooter from "@/components/ui/FormFooter";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { TCreateCompanyCategoryCredentials } from "@/lib/api";
|
||||
import useCreateCompanyCategoryPresenter from "./useCreateCompanyCategoryPresenter";
|
||||
|
||||
interface IProps {
|
||||
editMode?: boolean;
|
||||
defaultValues?: TCreateCompanyCategoryCredentials;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
|
||||
const { errors, handleSubmit, onSubmit, register } =
|
||||
useCreateCompanyCategoryPresenter({ defaultValues, editMode, id });
|
||||
return (
|
||||
<form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ShowcaseSection
|
||||
title="Create Company Category"
|
||||
className="grid grid-cols-2 gap-5"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<InputGroup
|
||||
label="Name"
|
||||
{...register("name", {
|
||||
required: {
|
||||
value: true,
|
||||
message: FormErrorMessages.required,
|
||||
},
|
||||
minLength: {
|
||||
value: 2,
|
||||
message: FormErrorMessages.minLength(2),
|
||||
},
|
||||
maxLength: {
|
||||
value: 100,
|
||||
message: FormErrorMessages.maxLength(100),
|
||||
},
|
||||
})}
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Enter Category Name"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<TextAreaGroup
|
||||
label="Description"
|
||||
{...register("description", {
|
||||
minLength: {
|
||||
value: 10,
|
||||
message: FormErrorMessages.minLength(10),
|
||||
},
|
||||
maxLength: {
|
||||
value: 1000,
|
||||
message: FormErrorMessages.maxLength(1000),
|
||||
},
|
||||
})}
|
||||
name="description"
|
||||
placeholder="Enter Description"
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<FormFooter />
|
||||
</ShowcaseSection>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateCompanyCategoryForm;
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
import {
|
||||
useCreateCompanyCategory,
|
||||
useUpdateCompanyCategories,
|
||||
} from "@/hooks/queries";
|
||||
import { TCreateCompanyCategoryCredentials } from "@/lib/api";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
|
||||
interface IProps {
|
||||
editMode?: boolean;
|
||||
defaultValues?: TCreateCompanyCategoryCredentials;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const useCreateCompanyCategoryPresenter = ({
|
||||
defaultValues,
|
||||
editMode,
|
||||
id,
|
||||
}: IProps) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<TCreateCompanyCategoryCredentials>({
|
||||
mode: "onChange",
|
||||
defaultValues,
|
||||
});
|
||||
const router = useRouter();
|
||||
const { mutate } = useCreateCompanyCategory();
|
||||
const { mutate: editCategory } = useUpdateCompanyCategories(id as string);
|
||||
const onSubmit: SubmitHandler<TCreateCompanyCategoryCredentials> = (data) => {
|
||||
if (editMode) {
|
||||
editCategory({ id: id as string, credentials: data });
|
||||
} else {
|
||||
mutate(data);
|
||||
}
|
||||
};
|
||||
return {
|
||||
register,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
errors,
|
||||
router,
|
||||
};
|
||||
};
|
||||
|
||||
export default useCreateCompanyCategoryPresenter;
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { z } from "zod";
|
||||
@@ -23,6 +24,7 @@ export type ConfirmationModalProps = z.infer<
|
||||
>;
|
||||
|
||||
const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
|
||||
const isMutating = useIsMutating();
|
||||
const validatedProps = ConfirmationModalPropsSchema.parse(props);
|
||||
const {
|
||||
isOpen,
|
||||
@@ -107,7 +109,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
|
||||
<div
|
||||
className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${currentSize} dark:bg-dark-2`}
|
||||
>
|
||||
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 dark:bg-dark-2">
|
||||
<div className="bg-white px-4 pb-4 pt-5 dark:bg-dark-2 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div
|
||||
className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${currentVariant.iconBg} sm:mx-0 sm:h-10 sm:w-10`}
|
||||
@@ -131,17 +133,22 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-dark-2 dark:border-t dark:border-stroke-dark">
|
||||
<div className="bg-gray px-4 py-3 dark:border-t dark:border-stroke-dark dark:bg-dark-2 sm:flex sm:flex-row-reverse sm:px-6">
|
||||
<button
|
||||
type="button"
|
||||
className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto ${currentVariant.confirmBtn} dark:ring-offset-dark-2`}
|
||||
disabled={isMutating > 0}
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{confirmText}
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
confirmText
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-dark shadow-sm ring-1 ring-inset ring-stroke hover:bg-gray focus:outline-none focus:ring-2 focus:ring-dark-5 focus:ring-offset-2 sm:mt-0 sm:w-auto dark:bg-dark-3 dark:text-white dark:ring-stroke-dark dark:hover:bg-dark-4 dark:focus:ring-offset-dark-2"
|
||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-dark shadow-sm ring-1 ring-inset ring-stroke hover:bg-gray focus:outline-none focus:ring-2 focus:ring-dark-5 focus:ring-offset-2 dark:bg-dark-3 dark:text-white dark:ring-stroke-dark dark:hover:bg-dark-4 dark:focus:ring-offset-dark-2 sm:mt-0 sm:w-auto"
|
||||
onClick={onCancel}
|
||||
>
|
||||
{cancelText}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface IProps {}
|
||||
|
||||
const FormFooter = ({}: IProps) => {
|
||||
const isMutating = useIsMutating();
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div className="col-span-2 flex gap-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
>
|
||||
{isMutating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={router.back}
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
>
|
||||
Opt out
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormFooter;
|
||||
@@ -30,18 +30,21 @@ const Status = ({ status, children }: IProps) => {
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn("rounded-2xl px-3 py-1.5 text-sm font-medium capitalize", {
|
||||
"bg-green text-white": greens.includes(status),
|
||||
"bg-orange-light text-white": oranges.includes(status),
|
||||
"bg-error text-white": reds.includes(status),
|
||||
"bg-blue text-white": blues.includes(status),
|
||||
"bg-gray-3 text-gray-7": grays.includes(status),
|
||||
"bg-yellow-light text-yellow-dark-2": yellows.includes(status),
|
||||
"bg-green-light-6 text-green-dark": status === "new",
|
||||
"bg-blue-light-5 text-blue-dark": status === "info",
|
||||
"bg-error-light-6 text-error-dark": status === "urgent",
|
||||
"bg-primary text-white": status === "featured",
|
||||
})}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-2xl px-3 py-1.5 text-center text-sm font-medium capitalize",
|
||||
{
|
||||
"bg-green text-white": greens.includes(status),
|
||||
"bg-orange-light text-white": oranges.includes(status),
|
||||
"bg-error text-white": reds.includes(status),
|
||||
"bg-blue text-white": blues.includes(status),
|
||||
"bg-gray-3 text-gray-7": grays.includes(status),
|
||||
"bg-yellow-light text-yellow-dark-2": yellows.includes(status),
|
||||
"bg-green-light-6 text-green-dark": status === "new",
|
||||
"bg-blue-light-5 text-blue-dark": status === "info",
|
||||
"bg-error-light-6 text-error-dark": status === "urgent",
|
||||
"bg-primary text-white": status === "featured",
|
||||
},
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Skeleton } from "./skeleton";
|
||||
import { TableBody, TableCell, TableRow } from "./table";
|
||||
|
||||
interface IProps {
|
||||
length?: number;
|
||||
column: number;
|
||||
}
|
||||
|
||||
const TableSkeleton = ({ column, length = 20 }: IProps) => {
|
||||
return (
|
||||
<TableBody>
|
||||
{Array.from({ length }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
{Array.from({ length: column }).map((_, j) => (
|
||||
<TableCell key={j} colSpan={100}>
|
||||
<Skeleton className="h-8" />
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableSkeleton;
|
||||
Reference in New Issue
Block a user