vale
/
panel
forked from administration/panel
1
0
Fork 0
Code Pull Requests Activity

feat: checkbox element, reset profile dialog

dufisgsd
Lea 2023-08-09 22:18:52 +02:00
parent bf77f3798e
commit 9ec4fe1b3a
Signed by: lea
GPG Key ID: 1BAFFE8347019C42
4 changed files with 143 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/pages/inspector/UserActions.tsx
View File

@ -35,6 +35,7 @@ import { Bot, User } from "revolt-api";
import { Card, CardHeader } from "../../ui/card"; import { Card, CardHeader } from "../../ui/card";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Checkbox } from "@/components/ui/checkbox";
const badges = [1, 2, 4, 8, 16, 32, 128, 0, 256, 512, 1024]; const badges = [1, 2, 4, 8, 16, 32, 128, 0, 256, 512, 1024];
@ -44,6 +45,13 @@ export function UserActions({ user, bot }: { user: User; bot?: Bot }) {
const [userDraft, setUserDraft] = useState(user); const [userDraft, setUserDraft] = useState(user);
const [botDraft, setBotDraft] = useState(bot); const [botDraft, setBotDraft] = useState(bot);
const [wipeDraft, setWipeDraft] = useState({
banner: false,
avatar: false,
bio: false,
displayName: false,
status: false,
});
const userInaccessible = userDraft.flags === 4 || userDraft.flags === 2; const userInaccessible = userDraft.flags === 4 || userDraft.flags === 2;
@ -324,6 +332,45 @@ export function UserActions({ user, bot }: { user: User; bot?: Bot }) {
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="ghost">Reset profile</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Reset user profile
</AlertDialogTitle>
<AlertDialogDescription>
<Checkbox checked={wipeDraft.bio} onChange={(e) => setWipeDraft({ ...wipeDraft, bio: e == true })}>
Bio
</Checkbox>
<Checkbox checked={wipeDraft.status} onChange={(e) => setWipeDraft({ ...wipeDraft, status: e == true })}>
Status
</Checkbox>
<Checkbox checked={wipeDraft.displayName} onChange={(e) => setWipeDraft({ ...wipeDraft, displayName: e == true })}>
Display Name
</Checkbox>
<Checkbox checked={wipeDraft.avatar} onChange={(e) => setWipeDraft({ ...wipeDraft, avatar: e == true })}>
Avatar
</Checkbox>
<Checkbox checked={wipeDraft.banner} onChange={(e) => setWipeDraft({ ...wipeDraft, banner: e == true })}>
Profile Banner
</Checkbox>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
disabled={!Object.values(wipeDraft).filter(i => i).length}
onClick={() => {
toast({ title: "todo" })
}}
>Reset</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button variant="ghost">Close Open Reports</Button> <Button variant="ghost">Close Open Reports</Button>

46
components/ui/checkbox.tsx Normal file
View File

@ -0,0 +1,46 @@
"use client"
import { cn } from '@/lib/utils';
import * as CheckBox from '@radix-ui/react-checkbox';
import { CheckIcon } from 'lucide-react';
const Checkbox = (props: {
children: React.ReactNode,
checked?: boolean,
onChange?: (checked: CheckBox.CheckedState) => void,
}) => {
// good enough i guess
const checkId = `${Date.now()}${Math.random()}`;
return (
<div className={cn('flex', 'items-center', 'm-1')}>
<CheckBox.Root
checked={props.checked}
onCheckedChange={props.onChange}
id={checkId}
className={cn(
'flex',
'rounded-md',
'border-gray-300',
'border',
'w-6',
'h-6',
'mr-2',
'items-center',
'justify-center',
'bg-slate-100',
'shadow-lg',
)}
>
<CheckBox.Indicator
className={cn('text-gray-500')}
>
<CheckIcon />
</CheckBox.Indicator>
</CheckBox.Root>
<label htmlFor={checkId}>{props.children}</label>
</div>
);
}
export { Checkbox }

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@radix-ui/react-alert-dialog": "^1.0.4", "@radix-ui/react-alert-dialog": "^1.0.4",
"@radix-ui/react-avatar": "^1.0.3", "@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",

49
pnpm-lock.yaml
View File

@ -1,5 +1,9 @@
lockfileVersion: '6.0' lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies: dependencies:
'@radix-ui/react-alert-dialog': '@radix-ui/react-alert-dialog':
specifier: ^1.0.4 specifier: ^1.0.4
@ -7,6 +11,9 @@ dependencies:
'@radix-ui/react-avatar': '@radix-ui/react-avatar':
specifier: ^1.0.3 specifier: ^1.0.3
version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-checkbox':
specifier: ^1.0.4
version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-dialog': '@radix-ui/react-dialog':
specifier: ^1.0.4 specifier: ^1.0.4
version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
@ -477,6 +484,34 @@ packages:
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
dev: false dev: false
/@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.22.6
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
'@radix-ui/react-context': 1.0.1(@types/react@18.2.15)(react@18.2.0)
'@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.15)(react@18.2.0)
'@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.15)(react@18.2.0)
'@radix-ui/react-use-size': 1.0.1(@types/react@18.2.15)(react@18.2.0)
'@types/react': 18.2.15
'@types/react-dom': 18.2.7
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0): /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
peerDependencies: peerDependencies:
@ -1203,6 +1238,20 @@ packages:
react: 18.2.0 react: 18.2.0
dev: false dev: false
/@radix-ui/react-use-previous@1.0.1(@types/react@18.2.15)(react@18.2.0):
resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': 7.22.6
'@types/react': 18.2.15
react: 18.2.0
dev: false
/@radix-ui/react-use-rect@1.0.1(@types/react@18.2.15)(react@18.2.0): /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.15)(react@18.2.0):
resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==} resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
peerDependencies: peerDependencies: