Fixed message of button inside button at Admin page

This commit is contained in:
Lucas Oliveira 2024-01-06 14:31:28 -03:00
commit f0f5887452
4 changed files with 35 additions and 22 deletions

View file

@ -26,4 +26,20 @@ const Checkbox = React.forwardRef<
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox };
const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?: boolean}) => (
<div
className={cn(
className,
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
checked ? "bg-primary text-primary-foreground" : ""
)}
>
{checked && (
<div className="flex items-center justify-center text-current">
<IconComponent name="Check" className="h-4 w-4" />
</div>
)}
</div>
));
export { CheckBoxDiv, Checkbox };

View file

@ -1,7 +1,11 @@
import React, { useEffect, useState } from "react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { Button } from "../../components/ui/button";
import { ConfirmationModalType, ContentProps, TriggerProps } from "../../types/components";
import {
ConfirmationModalType,
ContentProps,
TriggerProps,
} from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal";
@ -12,15 +16,14 @@ const Trigger: React.FC<TriggerProps> = ({
children,
tooltipContent,
side,
asChild,
}) => {
return asChild ? children : (tooltipContent ? (
}: TriggerProps) => {
return tooltipContent ? (
<ShadTooltip side={side} content={tooltipContent}>
<div className="h-full w-full">{children}</div>
</ShadTooltip>
) : (
<div className="h-full w-full">{children}</div>
));
);
};
function ConfirmationModal({
title,
@ -59,13 +62,7 @@ function ConfirmationModal({
return (
<BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
<>
{triggerChild && (
<BaseModal.Trigger>
{triggerChild}
</BaseModal.Trigger>
)}
</>
<BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
<BaseModal.Header description={titleHeader ?? null}>
<span className="pr-2">{title}</span>
<Icon

View file

@ -6,7 +6,7 @@ import IconComponent from "../../components/genericIconComponent";
import Header from "../../components/headerComponent";
import LoadingComponent from "../../components/loadingComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { CheckBoxDiv } from "../../components/ui/checkbox";
import { Input } from "../../components/ui/input";
import {
Table,
@ -308,6 +308,7 @@ export default function AdminPage() {
</TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left">
<ConfirmationModal
size="x-small"
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
@ -330,10 +331,9 @@ export default function AdminPage() {
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger asChild>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_active"
<CheckBoxDiv
checked={user.is_active}
/>
</div>
@ -342,6 +342,7 @@ export default function AdminPage() {
</TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left">
<ConfirmationModal
size="x-small"
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
@ -364,10 +365,9 @@ export default function AdminPage() {
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger asChild>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_superuser"
<CheckBoxDiv
checked={user.is_superuser}
/>
</div>
@ -411,6 +411,7 @@ export default function AdminPage() {
</UserManagementModal>
<ConfirmationModal
size="x-small"
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
@ -429,7 +430,7 @@ export default function AdminPage() {
This action cannot be undone.
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger tooltipContent="Delete">
<ConfirmationModal.Trigger>
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"

View file

@ -270,7 +270,6 @@ export type TriggerProps = {
children: ReactNode;
tooltipContent?: ReactNode;
side?: "top" | "right" | "bottom" | "left";
asChild?: boolean;
};
export interface languageMap {