fix: fix table horizontal scroll and collapsed sidebar
This commit is contained in:
parent
ac7d1efb8d
commit
5645645c5f
@ -10,6 +10,9 @@ const config: CodegenConfig = {
|
||||
presetConfig: {
|
||||
gqlTagName: 'gql',
|
||||
},
|
||||
config: {
|
||||
enumsAsConst: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
32
apps/webui/src/components/detail-card-skeleton.tsx
Normal file
32
apps/webui/src/components/detail-card-skeleton.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { Card, CardContent, CardHeader } from './ui/card';
|
||||
import { Skeleton } from './ui/skeleton';
|
||||
|
||||
export function DetailCardSkeleton() {
|
||||
return (
|
||||
<div className="container mx-auto max-w-4xl py-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -7,6 +7,14 @@ import {
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { ProLink, type ProLinkProps } from '@/components/ui/pro-link';
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
@ -16,9 +24,9 @@ import {
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { useMatches } from '@tanstack/react-router';
|
||||
import { ProLink, type ProLinkProps } from '../ui/pro-link';
|
||||
|
||||
export interface NavMainItem {
|
||||
link?: ProLinkProps;
|
||||
@ -38,6 +46,7 @@ export function NavMain({
|
||||
groups: NavMainGroup[];
|
||||
}) {
|
||||
const matches = useMatches();
|
||||
const { state } = useSidebar();
|
||||
|
||||
const isMenuMatch = (link: ProLinkProps | undefined) => {
|
||||
const linkTo = link?.to;
|
||||
@ -50,13 +59,84 @@ export function NavMain({
|
||||
const renderSidebarMenuItemButton = (item: NavMainItem) => {
|
||||
return (
|
||||
<>
|
||||
{item.icon && <item.icon />}
|
||||
<span>{item.title}</span>
|
||||
{item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
|
||||
<span className="truncate">{item.title}</span>
|
||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]:rotate-90" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCollapsedSubMenu = (item: NavMainItem) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
tooltip={item.title}
|
||||
isActive={isMenuMatch(item.link)}
|
||||
aria-label={`${item.title} (expandable)`}
|
||||
>
|
||||
{item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" align="start" className="min-w-48">
|
||||
<DropdownMenuItem asChild>
|
||||
<span className="font-medium">{item.title}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
{item.children?.map((subItem, index) => (
|
||||
<DropdownMenuItem key={index} asChild>
|
||||
<ProLink {...subItem.link}>{subItem.title}</ProLink>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
const renderExpandedSubMenu = (item: NavMainItem, itemIndex: number) => {
|
||||
return (
|
||||
<Collapsible
|
||||
key={itemIndex}
|
||||
asChild
|
||||
className="group/collapsible"
|
||||
defaultOpen={isMenuMatch(item.link)}
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
tooltip={item.title}
|
||||
aria-label={`${item.title} (expandable)`}
|
||||
>
|
||||
{renderSidebarMenuItemButton(item)}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{(item.children || []).map((subItem, subItemIndex) => {
|
||||
return (
|
||||
<SidebarMenuSubItem key={subItemIndex}>
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
isActive={isMenuMatch(subItem.link)}
|
||||
>
|
||||
<ProLink
|
||||
{...subItem.link}
|
||||
activeProps={{ className: '' }}
|
||||
aria-label={`${subItem.title}`}
|
||||
>
|
||||
<span>{subItem.title}</span>
|
||||
</ProLink>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
);
|
||||
};
|
||||
|
||||
return groups.map((group, groupIndex) => {
|
||||
return (
|
||||
<SidebarGroup key={groupIndex}>
|
||||
@ -66,51 +146,21 @@ export function NavMain({
|
||||
if (!item.children?.length) {
|
||||
return (
|
||||
<SidebarMenuItem key={itemIndex}>
|
||||
<SidebarMenuButton asChild tooltip={item.title}>
|
||||
<ProLink {...item.link}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
tooltip={item.title}
|
||||
isActive={isMenuMatch(item.link)}
|
||||
>
|
||||
<ProLink {...item.link} tabIndex={0}>
|
||||
{renderSidebarMenuItemButton(item)}
|
||||
</ProLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Collapsible
|
||||
key={itemIndex}
|
||||
asChild
|
||||
className="group/collapsible"
|
||||
defaultOpen={isMenuMatch(item.link)}
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton tooltip={item.title}>
|
||||
{renderSidebarMenuItemButton(item)}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{(item.children || []).map((subItem, subItemIndex) => {
|
||||
return (
|
||||
<SidebarMenuSubItem key={subItemIndex}>
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
isActive={isMenuMatch(subItem.link)}
|
||||
>
|
||||
<ProLink
|
||||
{...subItem.link}
|
||||
activeProps={{ className: '' }}
|
||||
>
|
||||
<span>{subItem.title}</span>
|
||||
</ProLink>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
);
|
||||
return state === 'collapsed'
|
||||
? renderCollapsedSubMenu(item)
|
||||
: renderExpandedSubMenu(item, itemIndex);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
18
apps/webui/src/components/ui/detail-empty-view.tsx
Normal file
18
apps/webui/src/components/ui/detail-empty-view.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { memo } from "react";
|
||||
import { Card, CardContent } from "./card";
|
||||
|
||||
export interface DetailEmptyViewProps {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const DetailEmptyView = memo(({ message }: DetailEmptyViewProps) => {
|
||||
return (
|
||||
<div className="container mx-auto py-6 max-w-4xl">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center h-32">
|
||||
<p className="text-muted-foreground">{message ?? "No data"}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -25,8 +25,6 @@ import {
|
||||
import { useIsMobile } from "@/presentation/hooks/use-mobile";
|
||||
import { cn } from "@/presentation/utils";
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||
const SIDEBAR_WIDTH = "16rem";
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
||||
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||
@ -81,10 +79,6 @@ function SidebarProvider({
|
||||
} else {
|
||||
_setOpen(openState);
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
// TODO: FIX THIS
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
||||
},
|
||||
[setOpenProp, open]
|
||||
);
|
||||
@ -310,7 +304,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-background relative flex w-full flex-1 flex-col",
|
||||
"bg-background relative flex w-full flex-1 min-w-0 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import {
|
||||
Credential3rdTypeEnum,
|
||||
type GetCredential3rdDetailQuery,
|
||||
type GetCredential3rdQuery,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import { gql } from '@apollo/client';
|
||||
@ -62,6 +63,23 @@ export const DELETE_CREDENTIAL_3RD = gql`
|
||||
}
|
||||
`;
|
||||
|
||||
export const GET_CREDENTIAL_3RD_DETAIL = gql`
|
||||
query GetCredential3rdDetail($id: Int!) {
|
||||
credential3rd(filters: { id: { eq: $id } }) {
|
||||
nodes {
|
||||
id
|
||||
cookies
|
||||
username
|
||||
password
|
||||
userAgent
|
||||
createdAt
|
||||
updatedAt
|
||||
credentialType
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const Credential3rdTypedMikanSchema = type({
|
||||
credentialType: `'${Credential3rdTypeEnum.Mikan}'`,
|
||||
username: 'string > 0',
|
||||
@ -81,3 +99,10 @@ export type Credential3rdInsertDto = typeof Credential3rdInsertSchema.infer;
|
||||
|
||||
export type Credential3rdQueryDto =
|
||||
GetCredential3rdQuery['credential3rd']['nodes'][number];
|
||||
|
||||
export const Credential3rdUpdateSchema = Credential3rdInsertSchema.partial();
|
||||
|
||||
export type Credential3rdUpdateDto = typeof Credential3rdUpdateSchema.infer;
|
||||
|
||||
export type Credential3rdDetailDto =
|
||||
GetCredential3rdDetailQuery['credential3rd']['nodes'][number];
|
||||
|
||||
@ -18,6 +18,7 @@ type Documents = {
|
||||
"\n mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n credential3rdCreateOne(data: $data) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": typeof types.InsertCredential3rdDocument,
|
||||
"\n mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n credential3rdUpdate(data: $data, filter: $filters) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": typeof types.UpdateCredential3rdDocument,
|
||||
"\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n": typeof types.DeleteCredential3rdDocument,
|
||||
"\n query GetCredential3rdDetail($id: Int!) {\n credential3rd(filters: { id: { eq: $id } }) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n": typeof types.GetCredential3rdDetailDocument,
|
||||
"\n query GetSubscriptions($filters: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n subscriptions(\n pagination: $pagination\n filters: $filters\n orderBy: $orderBy\n ) {\n nodes {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": typeof types.GetSubscriptionsDocument,
|
||||
"\n mutation UpdateSubscriptions(\n $data: SubscriptionsUpdateInput!,\n $filters: SubscriptionsFilterInput!,\n ) {\n subscriptionsUpdate (\n data: $data\n filter: $filters\n ) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n}\n": typeof types.UpdateSubscriptionsDocument,
|
||||
"\n mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n subscriptionsDelete(filter: $filters)\n }\n": typeof types.DeleteSubscriptionsDocument,
|
||||
@ -29,6 +30,7 @@ const documents: Documents = {
|
||||
"\n mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n credential3rdCreateOne(data: $data) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": types.InsertCredential3rdDocument,
|
||||
"\n mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n credential3rdUpdate(data: $data, filter: $filters) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": types.UpdateCredential3rdDocument,
|
||||
"\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n": types.DeleteCredential3rdDocument,
|
||||
"\n query GetCredential3rdDetail($id: Int!) {\n credential3rd(filters: { id: { eq: $id } }) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n": types.GetCredential3rdDetailDocument,
|
||||
"\n query GetSubscriptions($filters: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n subscriptions(\n pagination: $pagination\n filters: $filters\n orderBy: $orderBy\n ) {\n nodes {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": types.GetSubscriptionsDocument,
|
||||
"\n mutation UpdateSubscriptions(\n $data: SubscriptionsUpdateInput!,\n $filters: SubscriptionsFilterInput!,\n ) {\n subscriptionsUpdate (\n data: $data\n filter: $filters\n ) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n}\n": types.UpdateSubscriptionsDocument,
|
||||
"\n mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n subscriptionsDelete(filter: $filters)\n }\n": types.DeleteSubscriptionsDocument,
|
||||
@ -66,6 +68,10 @@ export function gql(source: "\n mutation UpdateCredential3rd($data: Credential3
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function gql(source: "\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n"): (typeof documents)["\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n"];
|
||||
/**
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function gql(source: "\n query GetCredential3rdDetail($id: Int!) {\n credential3rd(filters: { id: { eq: $id } }) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n"): (typeof documents)["\n query GetCredential3rdDetail($id: Int!) {\n credential3rd(filters: { id: { eq: $id } }) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n"];
|
||||
/**
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
|
||||
@ -267,10 +267,11 @@ export type Credential3rdOrderInput = {
|
||||
username?: InputMaybe<OrderByEnum>;
|
||||
};
|
||||
|
||||
export enum Credential3rdTypeEnum {
|
||||
Mikan = 'mikan'
|
||||
}
|
||||
export const Credential3rdTypeEnum = {
|
||||
Mikan: 'mikan'
|
||||
} as const;
|
||||
|
||||
export type Credential3rdTypeEnum = typeof Credential3rdTypeEnum[keyof typeof Credential3rdTypeEnum];
|
||||
export type Credential3rdTypeEnumFilterInput = {
|
||||
eq?: InputMaybe<Credential3rdTypeEnum>;
|
||||
gt?: InputMaybe<Credential3rdTypeEnum>;
|
||||
@ -300,11 +301,12 @@ export type CursorInput = {
|
||||
limit: Scalars['Int']['input'];
|
||||
};
|
||||
|
||||
export enum DownloadMimeEnum {
|
||||
Applicationoctetstream = 'applicationoctetstream',
|
||||
Applicationxbittorrent = 'applicationxbittorrent'
|
||||
}
|
||||
export const DownloadMimeEnum = {
|
||||
Applicationoctetstream: 'applicationoctetstream',
|
||||
Applicationxbittorrent: 'applicationxbittorrent'
|
||||
} as const;
|
||||
|
||||
export type DownloadMimeEnum = typeof DownloadMimeEnum[keyof typeof DownloadMimeEnum];
|
||||
export type DownloadMimeEnumFilterInput = {
|
||||
eq?: InputMaybe<DownloadMimeEnum>;
|
||||
gt?: InputMaybe<DownloadMimeEnum>;
|
||||
@ -318,15 +320,16 @@ export type DownloadMimeEnumFilterInput = {
|
||||
ne?: InputMaybe<DownloadMimeEnum>;
|
||||
};
|
||||
|
||||
export enum DownloadStatusEnum {
|
||||
Completed = 'completed',
|
||||
Deleted = 'deleted',
|
||||
Downloading = 'downloading',
|
||||
Failed = 'failed',
|
||||
Paused = 'paused',
|
||||
Pending = 'pending'
|
||||
}
|
||||
export const DownloadStatusEnum = {
|
||||
Completed: 'completed',
|
||||
Deleted: 'deleted',
|
||||
Downloading: 'downloading',
|
||||
Failed: 'failed',
|
||||
Paused: 'paused',
|
||||
Pending: 'pending'
|
||||
} as const;
|
||||
|
||||
export type DownloadStatusEnum = typeof DownloadStatusEnum[keyof typeof DownloadStatusEnum];
|
||||
export type DownloadStatusEnumFilterInput = {
|
||||
eq?: InputMaybe<DownloadStatusEnum>;
|
||||
gt?: InputMaybe<DownloadStatusEnum>;
|
||||
@ -340,11 +343,12 @@ export type DownloadStatusEnumFilterInput = {
|
||||
ne?: InputMaybe<DownloadStatusEnum>;
|
||||
};
|
||||
|
||||
export enum DownloaderCategoryEnum {
|
||||
Dandanplay = 'dandanplay',
|
||||
Qbittorrent = 'qbittorrent'
|
||||
}
|
||||
export const DownloaderCategoryEnum = {
|
||||
Dandanplay: 'dandanplay',
|
||||
Qbittorrent: 'qbittorrent'
|
||||
} as const;
|
||||
|
||||
export type DownloaderCategoryEnum = typeof DownloaderCategoryEnum[keyof typeof DownloaderCategoryEnum];
|
||||
export type DownloaderCategoryEnumFilterInput = {
|
||||
eq?: InputMaybe<DownloaderCategoryEnum>;
|
||||
gt?: InputMaybe<DownloaderCategoryEnum>;
|
||||
@ -1007,11 +1011,12 @@ export type OffsetInput = {
|
||||
offset: Scalars['Int']['input'];
|
||||
};
|
||||
|
||||
export enum OrderByEnum {
|
||||
Asc = 'ASC',
|
||||
Desc = 'DESC'
|
||||
}
|
||||
export const OrderByEnum = {
|
||||
Asc: 'ASC',
|
||||
Desc: 'DESC'
|
||||
} as const;
|
||||
|
||||
export type OrderByEnum = typeof OrderByEnum[keyof typeof OrderByEnum];
|
||||
export type PageInfo = {
|
||||
__typename?: 'PageInfo';
|
||||
endCursor?: Maybe<Scalars['String']['output']>;
|
||||
@ -1405,13 +1410,14 @@ export type SubscriptionBangumiUpdateInput = {
|
||||
subscriptionId?: InputMaybe<Scalars['Int']['input']>;
|
||||
};
|
||||
|
||||
export enum SubscriptionCategoryEnum {
|
||||
Manual = 'manual',
|
||||
MikanBangumi = 'mikan_bangumi',
|
||||
MikanSeason = 'mikan_season',
|
||||
MikanSubscriber = 'mikan_subscriber'
|
||||
}
|
||||
export const SubscriptionCategoryEnum = {
|
||||
Manual: 'manual',
|
||||
MikanBangumi: 'mikan_bangumi',
|
||||
MikanSeason: 'mikan_season',
|
||||
MikanSubscriber: 'mikan_subscriber'
|
||||
} as const;
|
||||
|
||||
export type SubscriptionCategoryEnum = typeof SubscriptionCategoryEnum[keyof typeof SubscriptionCategoryEnum];
|
||||
export type SubscriptionCategoryEnumFilterInput = {
|
||||
eq?: InputMaybe<SubscriptionCategoryEnum>;
|
||||
gt?: InputMaybe<SubscriptionCategoryEnum>;
|
||||
@ -1665,6 +1671,13 @@ export type DeleteCredential3rdMutationVariables = Exact<{
|
||||
|
||||
export type DeleteCredential3rdMutation = { __typename?: 'Mutation', credential3rdDelete: number };
|
||||
|
||||
export type GetCredential3rdDetailQueryVariables = Exact<{
|
||||
id: Scalars['Int']['input'];
|
||||
}>;
|
||||
|
||||
|
||||
export type GetCredential3rdDetailQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }> } };
|
||||
|
||||
export type GetSubscriptionsQueryVariables = Exact<{
|
||||
filters: SubscriptionsFilterInput;
|
||||
orderBy: SubscriptionsOrderInput;
|
||||
@ -1708,6 +1721,7 @@ export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind
|
||||
export const InsertCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<InsertCredential3rdMutation, InsertCredential3rdMutationVariables>;
|
||||
export const UpdateCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<UpdateCredential3rdMutation, UpdateCredential3rdMutationVariables>;
|
||||
export const DeleteCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteCredential3rdMutation, DeleteCredential3rdMutationVariables>;
|
||||
export const GetCredential3rdDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rdDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdDetailQuery, GetCredential3rdDetailQueryVariables>;
|
||||
export const GetSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsOrderInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionsQuery, GetSubscriptionsQueryVariables>;
|
||||
export const UpdateSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<UpdateSubscriptionsMutation, UpdateSubscriptionsMutationVariables>;
|
||||
export const DeleteSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteSubscriptionsMutation, DeleteSubscriptionsMutationVariables>;
|
||||
|
||||
@ -32,7 +32,7 @@ export const AppNavMainData = [
|
||||
{
|
||||
title: 'Subscriptions',
|
||||
link: {
|
||||
to: '/subscriptions',
|
||||
to: '/subscriptions/manage',
|
||||
},
|
||||
icon: Folders,
|
||||
children: [
|
||||
@ -53,7 +53,7 @@ export const AppNavMainData = [
|
||||
{
|
||||
title: 'Credential',
|
||||
link: {
|
||||
to: '/credential3rd',
|
||||
to: '/credential3rd/manage',
|
||||
},
|
||||
icon: KeyRound,
|
||||
children: [
|
||||
|
||||
@ -37,8 +37,11 @@ export function useTheme() {
|
||||
}, [injector]);
|
||||
|
||||
const colorTheme = useMemo(
|
||||
() => atomWithObservable(() => themeService.colorSchema$),
|
||||
[themeService]
|
||||
() =>
|
||||
atomWithObservable(() => themeService.colorSchema$, {
|
||||
initialValue: themeService.colorSchema$.value,
|
||||
}),
|
||||
[themeService.colorSchema$]
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@ -3,18 +3,17 @@ import { LocalStorageService } from '@/infra/storage/web-storage.service';
|
||||
import { Injectable, inject } from '@outposts/injection-js';
|
||||
import {
|
||||
BehaviorSubject,
|
||||
ReplaySubject,
|
||||
combineLatest,
|
||||
distinctUntilChanged,
|
||||
filter,
|
||||
fromEvent,
|
||||
map,
|
||||
shareReplay,
|
||||
startWith,
|
||||
} from 'rxjs';
|
||||
export type PreferColorSchemaType = 'dark' | 'light' | 'system';
|
||||
export type PreferColorSchemaClass = 'dark' | 'light';
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
@Injectable()
|
||||
export class ThemeService {
|
||||
document = inject(DOCUMENT);
|
||||
@ -29,17 +28,34 @@ export class ThemeService {
|
||||
this.systemColorSchema$.value
|
||||
)
|
||||
);
|
||||
isMobile$ = new BehaviorSubject(
|
||||
this.getIsMobileByInnerWidth(this.document.defaultView?.innerWidth)
|
||||
);
|
||||
|
||||
setup() {
|
||||
const mediaQuery = this.document.defaultView?.matchMedia(
|
||||
const isMobileMediaQuery = this.document.defaultView?.matchMedia(
|
||||
`(max-width: ${MOBILE_BREAKPOINT - 1}px)`
|
||||
);
|
||||
|
||||
if (isMobileMediaQuery) {
|
||||
fromEvent(isMobileMediaQuery, 'change')
|
||||
.pipe(
|
||||
map(() =>
|
||||
this.getIsMobileByInnerWidth(this.document.defaultView?.innerWidth)
|
||||
),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
.subscribe(this.isMobile$);
|
||||
}
|
||||
|
||||
const systemColorSchemaMediaQuery = this.document.defaultView?.matchMedia(
|
||||
'(prefers-color-scheme: dark)'
|
||||
);
|
||||
|
||||
if (mediaQuery) {
|
||||
fromEvent(mediaQuery, 'change')
|
||||
if (systemColorSchemaMediaQuery) {
|
||||
fromEvent(systemColorSchemaMediaQuery, 'change')
|
||||
.pipe(
|
||||
map(() => (mediaQuery.matches ? 'dark' : 'light')),
|
||||
startWith(this.systemColorSchema),
|
||||
map(() => (systemColorSchemaMediaQuery.matches ? 'dark' : 'light')),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
.subscribe(this.systemColorSchema$);
|
||||
@ -85,6 +101,13 @@ export class ThemeService {
|
||||
return systemColorSchema;
|
||||
}
|
||||
|
||||
private getIsMobileByInnerWidth(innerWidth: number | undefined): boolean {
|
||||
if (innerWidth === undefined) {
|
||||
return false;
|
||||
}
|
||||
return innerWidth < MOBILE_BREAKPOINT;
|
||||
}
|
||||
|
||||
get systemColorSchema(): PreferColorSchemaClass {
|
||||
return this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)')
|
||||
.matches
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
import { useInject } from '@/infra/di/inject';
|
||||
import { ThemeService } from '@/infra/styles/theme.service';
|
||||
import { useAtomValue } from 'jotai/react';
|
||||
import { atomWithObservable } from 'jotai/utils';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
const themeService = useInject(ThemeService);
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
const isMobile = useAtomValue(
|
||||
useMemo(
|
||||
() =>
|
||||
atomWithObservable(() => themeService.isMobile$, {
|
||||
initialValue: themeService.isMobile$.value,
|
||||
}),
|
||||
[themeService.isMobile$]
|
||||
)
|
||||
);
|
||||
|
||||
return !!isMobile
|
||||
return isMobile;
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@ import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
|
||||
import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
|
||||
import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscriptionId'
|
||||
import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId'
|
||||
import { Route as AppCredential3rdEditIdImport } from './routes/_app/credential3rd/edit.$id'
|
||||
import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
|
||||
|
||||
// Create/Update Routes
|
||||
@ -179,6 +180,12 @@ const AppSubscriptionsDetailSubscriptionIdRoute =
|
||||
getParentRoute: () => AppSubscriptionsRouteRoute,
|
||||
} as any)
|
||||
|
||||
const AppCredential3rdEditIdRoute = AppCredential3rdEditIdImport.update({
|
||||
id: '/edit/$id',
|
||||
path: '/edit/$id',
|
||||
getParentRoute: () => AppCredential3rdRouteRoute,
|
||||
} as any)
|
||||
|
||||
const AppCredential3rdDetailIdRoute = AppCredential3rdDetailIdImport.update({
|
||||
id: '/detail/$id',
|
||||
path: '/detail/$id',
|
||||
@ -343,6 +350,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AppCredential3rdDetailIdImport
|
||||
parentRoute: typeof AppCredential3rdRouteImport
|
||||
}
|
||||
'/_app/credential3rd/edit/$id': {
|
||||
id: '/_app/credential3rd/edit/$id'
|
||||
path: '/edit/$id'
|
||||
fullPath: '/credential3rd/edit/$id'
|
||||
preLoaderRoute: typeof AppCredential3rdEditIdImport
|
||||
parentRoute: typeof AppCredential3rdRouteImport
|
||||
}
|
||||
'/_app/subscriptions/detail/$subscriptionId': {
|
||||
id: '/_app/subscriptions/detail/$subscriptionId'
|
||||
path: '/detail/$subscriptionId'
|
||||
@ -378,12 +392,14 @@ interface AppCredential3rdRouteRouteChildren {
|
||||
AppCredential3rdCreateRoute: typeof AppCredential3rdCreateRoute
|
||||
AppCredential3rdManageRoute: typeof AppCredential3rdManageRoute
|
||||
AppCredential3rdDetailIdRoute: typeof AppCredential3rdDetailIdRoute
|
||||
AppCredential3rdEditIdRoute: typeof AppCredential3rdEditIdRoute
|
||||
}
|
||||
|
||||
const AppCredential3rdRouteRouteChildren: AppCredential3rdRouteRouteChildren = {
|
||||
AppCredential3rdCreateRoute: AppCredential3rdCreateRoute,
|
||||
AppCredential3rdManageRoute: AppCredential3rdManageRoute,
|
||||
AppCredential3rdDetailIdRoute: AppCredential3rdDetailIdRoute,
|
||||
AppCredential3rdEditIdRoute: AppCredential3rdEditIdRoute,
|
||||
}
|
||||
|
||||
const AppCredential3rdRouteRouteWithChildren =
|
||||
@ -481,6 +497,7 @@ export interface FileRoutesByFullPath {
|
||||
'/subscriptions/manage': typeof AppSubscriptionsManageRoute
|
||||
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
|
||||
'/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
|
||||
'/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
|
||||
'/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
|
||||
'/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
|
||||
}
|
||||
@ -508,6 +525,7 @@ export interface FileRoutesByTo {
|
||||
'/subscriptions/manage': typeof AppSubscriptionsManageRoute
|
||||
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
|
||||
'/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
|
||||
'/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
|
||||
'/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
|
||||
'/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
|
||||
}
|
||||
@ -536,6 +554,7 @@ export interface FileRoutesById {
|
||||
'/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
|
||||
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
|
||||
'/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
|
||||
'/_app/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
|
||||
'/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
|
||||
'/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
|
||||
}
|
||||
@ -565,6 +584,7 @@ export interface FileRouteTypes {
|
||||
| '/subscriptions/manage'
|
||||
| '/auth/oidc/callback'
|
||||
| '/credential3rd/detail/$id'
|
||||
| '/credential3rd/edit/$id'
|
||||
| '/subscriptions/detail/$subscriptionId'
|
||||
| '/subscriptions/edit/$subscriptionId'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
@ -591,6 +611,7 @@ export interface FileRouteTypes {
|
||||
| '/subscriptions/manage'
|
||||
| '/auth/oidc/callback'
|
||||
| '/credential3rd/detail/$id'
|
||||
| '/credential3rd/edit/$id'
|
||||
| '/subscriptions/detail/$subscriptionId'
|
||||
| '/subscriptions/edit/$subscriptionId'
|
||||
id:
|
||||
@ -617,6 +638,7 @@ export interface FileRouteTypes {
|
||||
| '/_app/subscriptions/manage'
|
||||
| '/auth/oidc/callback'
|
||||
| '/_app/credential3rd/detail/$id'
|
||||
| '/_app/credential3rd/edit/$id'
|
||||
| '/_app/subscriptions/detail/$subscriptionId'
|
||||
| '/_app/subscriptions/edit/$subscriptionId'
|
||||
fileRoutesById: FileRoutesById
|
||||
@ -695,7 +717,8 @@ export const routeTree = rootRoute
|
||||
"children": [
|
||||
"/_app/credential3rd/create",
|
||||
"/_app/credential3rd/manage",
|
||||
"/_app/credential3rd/detail/$id"
|
||||
"/_app/credential3rd/detail/$id",
|
||||
"/_app/credential3rd/edit/$id"
|
||||
]
|
||||
},
|
||||
"/_app/playground": {
|
||||
@ -771,6 +794,10 @@ export const routeTree = rootRoute
|
||||
"filePath": "_app/credential3rd/detail.$id.tsx",
|
||||
"parent": "/_app/credential3rd"
|
||||
},
|
||||
"/_app/credential3rd/edit/$id": {
|
||||
"filePath": "_app/credential3rd/edit.$id.tsx",
|
||||
"parent": "/_app/credential3rd"
|
||||
},
|
||||
"/_app/subscriptions/detail/$subscriptionId": {
|
||||
"filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
|
||||
"parent": "/_app/subscriptions"
|
||||
|
||||
@ -19,7 +19,6 @@ import {
|
||||
import { useAppForm } from '@/components/ui/tanstack-form';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
type Credential3rdInsertDto,
|
||||
Credential3rdInsertSchema,
|
||||
INSERT_CREDENTIAL_3RD,
|
||||
} from '@/domains/recorder/schema/credential3rd';
|
||||
@ -27,6 +26,7 @@ import { useInject } from '@/infra/di/inject';
|
||||
import {
|
||||
Credential3rdTypeEnum,
|
||||
type InsertCredential3rdMutation,
|
||||
type InsertCredential3rdMutationVariables,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import { PlatformService } from '@/infra/platform/platform.service';
|
||||
import type { RouteStateDataOption } from '@/infra/routes/traits';
|
||||
@ -47,7 +47,8 @@ function CredentialCreateRouteComponent() {
|
||||
const platformService = useInject(PlatformService);
|
||||
|
||||
const [insertCredential3rd, { loading }] = useMutation<
|
||||
InsertCredential3rdMutation['credential3rdCreateOne']
|
||||
InsertCredential3rdMutation['credential3rdCreateOne'],
|
||||
InsertCredential3rdMutationVariables
|
||||
>(INSERT_CREDENTIAL_3RD, {
|
||||
onCompleted(data) {
|
||||
toast.success('Credential created');
|
||||
@ -69,16 +70,20 @@ function CredentialCreateRouteComponent() {
|
||||
username: '',
|
||||
password: '',
|
||||
userAgent: '',
|
||||
} as Credential3rdInsertDto,
|
||||
},
|
||||
validators: {
|
||||
onBlur: Credential3rdInsertSchema,
|
||||
onSubmit: Credential3rdInsertSchema,
|
||||
},
|
||||
onSubmit: async (form) => {
|
||||
const value = {
|
||||
...form.value,
|
||||
userAgent: form.value.userAgent || platformService.userAgent,
|
||||
};
|
||||
if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
|
||||
await insertCredential3rd({
|
||||
variables: {
|
||||
data: form.value,
|
||||
data: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -142,9 +147,7 @@ function CredentialCreateRouteComponent() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{field.state.meta.errors && (
|
||||
<p className="text-destructive text-sm">
|
||||
{field.state.meta.errors[0]?.toString()}
|
||||
</p>
|
||||
<FormFieldErrors errors={field.state.meta.errors} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -209,7 +212,7 @@ function CredentialCreateRouteComponent() {
|
||||
the default value"
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Current user agent: {platformService.userAgent}
|
||||
Current default user agent: {platformService.userAgent}
|
||||
</p>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors errors={field.state.meta.errors} />
|
||||
|
||||
@ -1,9 +1,214 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { QueryErrorView } from '@/components/ui/query-error-view';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { GET_CREDENTIAL_3RD_DETAIL } from '@/domains/recorder/schema/credential3rd';
|
||||
import type { GetCredential3rdDetailQuery } from '@/infra/graphql/gql/graphql';
|
||||
import type { RouteStateDataOption } from '@/infra/routes/traits';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router';
|
||||
import { format } from 'date-fns/format';
|
||||
import { ArrowLeft, Edit, Eye, EyeOff } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
component: Credential3rdDetailRouteComponent,
|
||||
staticData: {
|
||||
breadcrumb: { label: 'Detail' },
|
||||
} satisfies RouteStateDataOption,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_app/credential3rd/detail/$id"!</div>
|
||||
function Credential3rdDetailRouteComponent() {
|
||||
const { id } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const { loading, error, data } = useQuery<GetCredential3rdDetailQuery>(
|
||||
GET_CREDENTIAL_3RD_DETAIL,
|
||||
{
|
||||
variables: {
|
||||
id: Number.parseInt(id),
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
}
|
||||
);
|
||||
|
||||
const handleBack = () => {
|
||||
navigate({
|
||||
to: '/credential3rd/manage',
|
||||
});
|
||||
};
|
||||
|
||||
const handleEnterEditMode = () => {
|
||||
navigate({
|
||||
to: '/credential3rd/edit/$id',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const credential = data?.credential3rd?.nodes?.[0];
|
||||
|
||||
if (loading) {
|
||||
return <DetailCardSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <QueryErrorView message={error.message} />;
|
||||
}
|
||||
|
||||
if (!credential) {
|
||||
return <DetailEmptyView message="Not found certain credential" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-4xl py-6">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="font-bold text-2xl">Credential detail</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
View and manage credential #{credential.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleEnterEditMode}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Credential information</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
View credential detail
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{credential.credentialType}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">ID</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">{credential.id}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Credential type</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{credential.credentialType}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Username</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{credential.username || 'Not set'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Password</Label>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted p-3">
|
||||
<span className="font-mono text-sm">
|
||||
{showPassword ? credential.password || '-' : '••••••••'}
|
||||
</span>
|
||||
{credential.password && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-3 w-3" />
|
||||
) : (
|
||||
<Eye className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">User Agent</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="break-all text-sm">
|
||||
{credential.userAgent || '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Created at</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{format(
|
||||
new Date(credential.createdAt),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Updated at</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{format(
|
||||
new Date(credential.updatedAt),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,292 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { QueryErrorView } from '@/components/ui/query-error-view';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useAppForm } from '@/components/ui/tanstack-form';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
type Credential3rdDetailDto,
|
||||
Credential3rdUpdateSchema,
|
||||
GET_CREDENTIAL_3RD_DETAIL,
|
||||
UPDATE_CREDENTIAL_3RD,
|
||||
} from '@/domains/recorder/schema/credential3rd';
|
||||
import type {
|
||||
Credential3rdTypeEnum,
|
||||
GetCredential3rdDetailQuery,
|
||||
UpdateCredential3rdMutation,
|
||||
UpdateCredential3rdMutationVariables,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import type { RouteStateDataOption } from '@/infra/routes/traits';
|
||||
import { useMutation, useQuery } from '@apollo/client';
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router';
|
||||
import { ArrowLeft, Eye, EyeOff, Save, X } from 'lucide-react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export const Route = createFileRoute('/_app/credential3rd/edit/$id')({
|
||||
component: Credential3rdEditRouteComponent,
|
||||
staticData: {
|
||||
breadcrumb: { label: 'Edit' },
|
||||
} satisfies RouteStateDataOption,
|
||||
});
|
||||
|
||||
function FormView({
|
||||
credential,
|
||||
onCompleted,
|
||||
}: {
|
||||
credential: Credential3rdDetailDto;
|
||||
onCompleted: VoidFunction;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
navigate({
|
||||
to: '/credential3rd/manage',
|
||||
});
|
||||
};
|
||||
|
||||
const [updateCredential, { loading: updating }] = useMutation<
|
||||
UpdateCredential3rdMutation['credential3rdUpdate'],
|
||||
UpdateCredential3rdMutationVariables
|
||||
>(UPDATE_CREDENTIAL_3RD, {
|
||||
onCompleted,
|
||||
onError: (error) => {
|
||||
toast('Update credential failed', {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
credentialType: credential.credentialType,
|
||||
username: credential.username,
|
||||
password: credential.password,
|
||||
userAgent: credential.userAgent,
|
||||
},
|
||||
validators: {
|
||||
onBlur: Credential3rdUpdateSchema,
|
||||
onSubmit: Credential3rdUpdateSchema,
|
||||
},
|
||||
onSubmit: (form) => {
|
||||
const value = form.value;
|
||||
updateCredential({
|
||||
variables: {
|
||||
data: value,
|
||||
filters: {
|
||||
id: {
|
||||
eq: credential.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-4xl py-6">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="font-bold text-2xl">Credential detail</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
View and manage credential #{credential.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleBack} disabled={updating}>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
<Button onClick={() => form.handleSubmit()} disabled={updating}>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
{updating ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Credential information</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
Edit credential information
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{credential.credentialType}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-6"
|
||||
>
|
||||
<form.Field name="credentialType">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Credential type</Label>
|
||||
<Select
|
||||
value={field.state.value!}
|
||||
onValueChange={(value) =>
|
||||
field.handleChange(value as Credential3rdTypeEnum)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select credential type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="mikan">Mikan</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="username">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Username</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value || ''}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Please enter username"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="password">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={field.state.value || ''}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Please enter password"
|
||||
className="pr-10"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
<form.Field name="userAgent">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>User Agent</Label>
|
||||
<Textarea
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value ?? undefined}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Please enter User Agent (optional)"
|
||||
rows={3}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Credential3rdEditRouteComponent() {
|
||||
const { id } = Route.useParams();
|
||||
|
||||
const { loading, error, data, refetch } =
|
||||
useQuery<GetCredential3rdDetailQuery>(GET_CREDENTIAL_3RD_DETAIL, {
|
||||
variables: {
|
||||
id: Number.parseInt(id),
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
const credential = data?.credential3rd?.nodes?.[0];
|
||||
|
||||
const onCompleted = useCallback(async () => {
|
||||
const refetchResult = await refetch();
|
||||
if (refetchResult.errors) {
|
||||
toast('Update credential failed', {
|
||||
description: refetchResult.errors[0].message,
|
||||
});
|
||||
} else {
|
||||
toast('Update credential successfully');
|
||||
}
|
||||
}, [refetch]);
|
||||
|
||||
if (loading) {
|
||||
return <DetailCardSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <QueryErrorView message={error.message} />;
|
||||
}
|
||||
|
||||
if (!credential) {
|
||||
return <DetailEmptyView message="Not found certain credential" />;
|
||||
}
|
||||
|
||||
return <FormView credential={credential} onCompleted={onCompleted} />;
|
||||
}
|
||||
@ -36,7 +36,6 @@ import {
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
import { Eye, EyeOff, Plus } from 'lucide-react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
@ -51,7 +50,10 @@ export const Route = createFileRoute('/_app/credential3rd/manage')({
|
||||
function CredentialManageRouteComponent() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
|
||||
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
|
||||
createdAt: false,
|
||||
updatedAt: false,
|
||||
});
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
@ -85,7 +87,9 @@ function CredentialManageRouteComponent() {
|
||||
onCompleted: async () => {
|
||||
const refetchResult = await refetch();
|
||||
if (refetchResult.errors) {
|
||||
toast.error(refetchResult.errors[0].message);
|
||||
toast.error('Failed to delete credential', {
|
||||
description: refetchResult.errors[0].message,
|
||||
});
|
||||
return;
|
||||
}
|
||||
toast.success('Credential deleted');
|
||||
@ -124,7 +128,6 @@ function CredentialManageRouteComponent() {
|
||||
{
|
||||
header: 'ID',
|
||||
accessorKey: 'id',
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return <div className="font-mono text-sm">{row.original.id}</div>;
|
||||
},
|
||||
@ -160,14 +163,10 @@ function CredentialManageRouteComponent() {
|
||||
const password = row.original.password;
|
||||
const isVisible = showPasswords[row.original.id];
|
||||
|
||||
if (!password) {
|
||||
return <div>-</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-mono text-sm">
|
||||
{isVisible ? password : '••••••••'}
|
||||
{isVisible ? password || '-' : '••••••••'}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@ -216,9 +215,7 @@ function CredentialManageRouteComponent() {
|
||||
const updatedAt = row.original.updatedAt;
|
||||
return (
|
||||
<div className="text-sm">
|
||||
{format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss', {
|
||||
locale: zhCN,
|
||||
})}
|
||||
{format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss')}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@ -231,12 +228,19 @@ function CredentialManageRouteComponent() {
|
||||
getId={(row) => row.original.id}
|
||||
showEdit
|
||||
showDelete
|
||||
onEdit={() => {
|
||||
showDetail
|
||||
onDetail={() => {
|
||||
navigate({
|
||||
to: '/credential3rd/detail/$id',
|
||||
params: { id: `${row.original.id}` },
|
||||
});
|
||||
}}
|
||||
onEdit={() => {
|
||||
navigate({
|
||||
to: '/credential3rd/edit/$id',
|
||||
params: { id: `${row.original.id}` },
|
||||
});
|
||||
}}
|
||||
onDelete={handleDeleteRecord(row)}
|
||||
/>
|
||||
),
|
||||
@ -260,6 +264,13 @@ function CredentialManageRouteComponent() {
|
||||
sorting,
|
||||
columnVisibility,
|
||||
},
|
||||
enableColumnPinning: true,
|
||||
initialState: {
|
||||
columnPinning: {
|
||||
left: [],
|
||||
right: ['actions'],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (error) {
|
||||
|
||||
@ -4,7 +4,7 @@ import { ProLink } from '@/components/ui/pro-link';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { AUTH_METHOD } from '@/infra/auth/defs';
|
||||
import { createFileRoute, redirect } from '@tanstack/react-router';
|
||||
import { useAtom } from 'jotai/react';
|
||||
import { useAtomValue } from 'jotai/react';
|
||||
import { atomWithObservable } from 'jotai/utils';
|
||||
import { EventTypes } from 'oidc-client-rx';
|
||||
import { useMemo } from 'react';
|
||||
@ -23,7 +23,7 @@ export const Route = createFileRoute('/auth/oidc/callback')({
|
||||
function OidcCallbackRouteComponent() {
|
||||
const { authService } = useAuth();
|
||||
|
||||
const isLoading = useAtom(
|
||||
const isLoading = useAtomValue(
|
||||
useMemo(
|
||||
() =>
|
||||
atomWithObservable(() =>
|
||||
@ -33,7 +33,7 @@ function OidcCallbackRouteComponent() {
|
||||
)
|
||||
);
|
||||
|
||||
const checkAuthResultError = useAtom(
|
||||
const checkAuthResultError = useAtomValue(
|
||||
useMemo(
|
||||
() =>
|
||||
atomWithObservable(() =>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"javascript": {
|
||||
"globals": ["Liveblocks"]
|
||||
},
|
||||
|
||||
"linter": {
|
||||
"rules": {
|
||||
"nursery": {
|
||||
@ -26,6 +27,12 @@
|
||||
"noSvgWithoutTitle": "off"
|
||||
},
|
||||
"complexity": {
|
||||
"noExcessiveCognitiveComplexity": {
|
||||
"level": "warn",
|
||||
"options": {
|
||||
"maxAllowedComplexity": 20
|
||||
}
|
||||
},
|
||||
"noBannedTypes": "off"
|
||||
},
|
||||
"correctness": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user