forked from baron/baron-sso
연동 앱 목록 및 편집 페이지 변경
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import {
|
||||
BookOpenText,
|
||||
@@ -22,10 +22,8 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
import { CopyButton } from "../../components/ui/copy-button";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import { Separator } from "../../components/ui/separator";
|
||||
import { Switch } from "../../components/ui/switch";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -34,56 +32,16 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../../components/ui/table";
|
||||
import { toast } from "../../components/ui/use-toast";
|
||||
import {
|
||||
deleteClient,
|
||||
fetchClients,
|
||||
updateClientStatus,
|
||||
} from "../../lib/devApi";
|
||||
import { fetchClients } from "../../lib/devApi";
|
||||
import { t } from "../../lib/i18n";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
function ClientsPage() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["clients"],
|
||||
queryFn: fetchClients,
|
||||
});
|
||||
const updateStatusMutation = useMutation({
|
||||
mutationFn: (payload: { id: string; status: "active" | "inactive" }) =>
|
||||
updateClientStatus(payload.id, payload.status),
|
||||
onSuccess: (_, variables) => {
|
||||
const statusText =
|
||||
variables.status === "active"
|
||||
? t("ui.common.status.active", "활성화")
|
||||
: t("ui.common.status.inactive", "비활성화");
|
||||
toast(
|
||||
t(
|
||||
"msg.dev.clients.status_updated",
|
||||
"클라이언트가 {{status}}되었습니다.",
|
||||
{
|
||||
status: statusText,
|
||||
},
|
||||
),
|
||||
);
|
||||
queryClient.invalidateQueries({ queryKey: ["clients"] });
|
||||
},
|
||||
onError: (error: AxiosError<{ error?: string }>) => {
|
||||
const errMsg =
|
||||
error.response?.data?.error ??
|
||||
error.message ??
|
||||
t(
|
||||
"msg.dev.clients.status_update_error",
|
||||
"Failed to update client status",
|
||||
);
|
||||
toast(errMsg, "error");
|
||||
},
|
||||
});
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (clientId: string) => deleteClient(clientId),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["clients"] }),
|
||||
});
|
||||
|
||||
const clients = data?.items || [];
|
||||
const totalClients = clients.length;
|
||||
@@ -267,7 +225,10 @@ function ClientsPage() {
|
||||
{clients.map((client) => (
|
||||
<TableRow key={client.id} className="bg-card/40">
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to={`/clients/${client.id}`}
|
||||
className="flex items-center gap-3 transition-colors hover:text-primary"
|
||||
>
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
{client.type === "private" ? (
|
||||
<ServerCog className="h-4 w-4" />
|
||||
@@ -284,30 +245,13 @@ function ClientsPage() {
|
||||
{t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
|
||||
{client.id}
|
||||
</code>
|
||||
<CopyButton
|
||||
value={client.id}
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-primary"
|
||||
aria-label={t(
|
||||
"ui.dev.clients.copy_client_id",
|
||||
"Copy client id",
|
||||
)}
|
||||
onCopy={() =>
|
||||
toast(
|
||||
t(
|
||||
"msg.dev.clients.copy_client_id",
|
||||
"클라이언트 ID가 복사되었습니다.",
|
||||
),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
@@ -320,33 +264,14 @@ function ClientsPage() {
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
disabled={
|
||||
updateStatusMutation.isPending &&
|
||||
updateStatusMutation.variables?.id === client.id
|
||||
}
|
||||
checked={client.status === "active"}
|
||||
onCheckedChange={(checked) =>
|
||||
updateStatusMutation.mutate({
|
||||
id: client.id,
|
||||
status: checked ? "active" : "inactive",
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-medium",
|
||||
client.status === "active"
|
||||
? "text-emerald-400"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{client.status === "active"
|
||||
? t("ui.common.status.active", "활성")
|
||||
: t("ui.common.status.inactive", "비활성")}
|
||||
</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant={client.status === "active" ? "success" : "muted"}
|
||||
className="px-3 py-1 text-xs uppercase"
|
||||
>
|
||||
{client.status === "active"
|
||||
? t("ui.common.status.active", "Active")
|
||||
: t("ui.common.status.inactive", "Inactive")}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{client.createdAt
|
||||
@@ -357,17 +282,9 @@ function ClientsPage() {
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link to={`/clients/${client.id}`}>
|
||||
{t("ui.common.edit", "Edit")}
|
||||
{t("ui.common.view", "View")}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
onClick={() => deleteMutation.mutate(client.id)}
|
||||
>
|
||||
{t("ui.common.delete", "Delete")}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
Reference in New Issue
Block a user