Fixed message of button inside button at Admin page
This commit is contained in:
parent
c34810b161
commit
f0f5887452
4 changed files with 35 additions and 22 deletions
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -270,7 +270,6 @@ export type TriggerProps = {
|
|||
children: ReactNode;
|
||||
tooltipContent?: ReactNode;
|
||||
side?: "top" | "right" | "bottom" | "left";
|
||||
asChild?: boolean;
|
||||
};
|
||||
|
||||
export interface languageMap {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue