Skip to content

Commit

Permalink
feat(layouts): streamlined settings layout for all objects
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomjeannesson
tomjeannesson committed Oct 20, 2023
1 parent 2c5f2a0 commit 3408654
Show file tree
Hide file tree
Showing 21 changed files with 739 additions and 546 deletions.
3 changes: 1 addition & 2 deletions desktop-app/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
"extends": [
"plugin:react/recommended",
"plugin:tailwindcss/recommended",
"next/core-web-vitals",
"next/babel"
"next/core-web-vitals"
],
"parserOptions": {
"ecmaVersion": "latest",
Expand Down
40 changes: 33 additions & 7 deletions desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,6 @@ export interface RetreivedExchangeAccount extends ExchangeAccount {
uuid: string
}

export async function listExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>
): Promise<AxiosResponse<RetreivedExchangeAccount[]>> {
const response = await request(searchParams, 'GET', '/api/exchange_account/')
return response as AxiosResponse<RetreivedExchangeAccount[]>
}

export async function getExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>,
id: string
Expand All @@ -31,6 +24,13 @@ export async function getExchangeAccount(
return response as AxiosResponse<RetreivedExchangeAccount>
}

export async function listExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>
): Promise<AxiosResponse<RetreivedExchangeAccount[]>> {
const response = await request(searchParams, 'GET', '/api/exchange_account/')
return response as AxiosResponse<RetreivedExchangeAccount[]>
}

export async function createExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>,
data: ExchangeAccount
Expand All @@ -44,6 +44,32 @@ export async function createExchangeAccount(
return response as AxiosResponse<RetreivedExchangeAccount>
}

export async function deleteExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>,
id: string
): Promise<AxiosResponse<null>> {
const response = await request(
searchParams,
'DELETE',
`/api/exchange_account/${id}/`
)
return response as AxiosResponse<null>
}

export async function updateExchangeAccount(
searchParams: ReturnType<typeof useSearchParams>,
id: string,
data: { name: string; description: string }
): Promise<AxiosResponse<RetreivedExchangeAccount>> {
const response = await request(
searchParams,
'PATCH',
`/api/exchange_account/${id}/`,
data
)
return response as AxiosResponse<RetreivedExchangeAccount>
}

export async function getPossibleExchanges(
searchParams: ReturnType<typeof useSearchParams>
): Promise<AxiosResponse<string[]>> {
Expand Down
2 changes: 1 addition & 1 deletion desktop-app/renderer/api/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useSearchParams } from 'next/navigation'

export function request(
searchParams: ReturnType<typeof useSearchParams>,
method: string,
method: 'GET' | 'POST' | 'DELETE' | 'PUT' | 'PATCH',
url: string,
data: Object | null = null,
headers: AxiosHeaders | null = null
Expand Down
139 changes: 66 additions & 73 deletions desktop-app/renderer/components/custom/headerPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,47 +9,47 @@ import {
DialogTitle,
DialogTrigger
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
Popover,
PopoverContent,
PopoverTrigger
} from '@/components/ui/popover'
import { ToastAction } from '@/components/ui/toast'
import { useToast } from '@/components/ui/use-toast'
import { addServer, getServers, removeServer } from '@/lib/localStorage'
import { Server, addServer, getServers, removeServer } from '@/lib/localStorage'
import { standardUrlPartial } from '@/lib/queryParams'
import { DialogClose } from '@radix-ui/react-dialog'
import { PlusIcon } from '@radix-ui/react-icons'
import { Settings } from 'lucide-react'
import { useSearchParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { useState } from 'react'
import AllInputs from './selectedObject/inputs'

export default function ServerPopover(): JSX.Element {
const { toast } = useToast()
const defaultServerName = 'Localhost'
const defaultServerURL = 'http://localhost:8000'
const defaulAPIToken = 'xxxxxxxx.xxxxxx.xxxxxxxxx'
const [newServerName, setNewServerName] = useState(defaultServerName)
const [newServerURL, setNewServerURL] = useState(defaultServerURL)
const [newServerToken, setNewServerToken] = useState(defaulAPIToken)
const defaultServer: Omit<Server, 'id'> = {
name: 'Localhost',
url: 'http://localhost:8000',
token: 'xxxxxxxx.xxxxxx.xxxxxxxxx'
}

const [servers, setServers] = useState(getServers())
const router = useRouter()
const searchParams = useSearchParams()
const currentURL = router.asPath
const urlBase = currentURL.split('?')[0].split('/')[1]
const urlId = currentURL.split('?')[0].split('/')[2]
const [openDialog, setOpenDialog] = useState(false)

const [server, setServer] = useState(defaultServer)
return (
<Popover>
<PopoverTrigger asChild>
<Button variant={'ghost'}>Servers</Button>
</PopoverTrigger>
<PopoverContent className="flex w-80 flex-col items-center">
<div className="flex flex-col items-stretch space-y-3">
{Object.entries(servers).map(([key, server], index) => {
{Object.values(servers).map((server, index) => {
return (
<div key={index + 1} className="flex flex-row space-x-1">
<Button
Expand All @@ -73,6 +73,25 @@ export default function ServerPopover(): JSX.Element {
.catch((err) => {
console.error(err)
})
} else if (currentURL.startsWith('/servers')) {
router
.push(
standardUrlPartial(
`/servers/`,
server.id,
{
server: server.id,
exchangeAccount: '',
space: '',
fleet: '',
bot: ''
},
searchParams
)
)
.catch((err) => {
console.error(err)
})
} else {
router
.push(
Expand Down Expand Up @@ -127,7 +146,7 @@ export default function ServerPopover(): JSX.Element {
</div>
)
})}
<Dialog key={0}>
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">
<PlusIcon className="mr-2 h-5 w-5" />
Expand All @@ -143,61 +162,42 @@ export default function ServerPopover(): JSX.Element {
API key.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
</Label>
<Input
id="name"
defaultValue={defaultServerName}
className="col-span-3"
onChange={(e) => {
setNewServerName(e.currentTarget.value)
}}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="url" className="text-right">
URL
</Label>
<Input
id="url"
defaultValue={defaultServerURL}
className="col-span-3"
onChange={(e) => {
setNewServerURL(e.currentTarget.value)
}}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="token" className="text-right">
API Token
</Label>
<Input
id="token"
defaultValue={defaulAPIToken}
className="col-span-3"
onChange={(e) => {
setNewServerToken(e.currentTarget.value)
}}
/>
</div>
</div>
<AllInputs
inputs={[
{
label: 'Name',
key: 'name',
type: 'input'
},
{
label: 'URL',
key: 'url',
type: 'input'
},
{
label: 'API Token',
key: 'token',
type: 'input'
}
]}
object={server}
setObject={setServer}
objectName="Server"
/>
<DialogFooter>
<Button
type="submit"
onClick={async () => {
try {
await connectKey(newServerURL, newServerToken)
await connectKey(server.url, server.token)
} catch (err) {
console.error(err)
toast({
title: `Unable Added new server: ${newServerName}`,
title: `Unable Added new server: ${server.name}`,
description: (
<>
You werent able to connect to {newServerURL} with
the API token {newServerToken}.
You werent able to connect to {server.url} with the
API token {server.token}.
<br />
<br />
Please check the URL and the API token and try
Expand All @@ -211,18 +211,13 @@ export default function ServerPopover(): JSX.Element {
})
return
}
const id = addServer(
newServerName,
newServerURL,
newServerToken
)
const id = addServer(server.name, server.url, server.token)
if (!id && id !== 0) {
console.log('Unable to add server')
return
}
setServer(defaultServer)
setServers(getServers())
setNewServerName(defaultServerName)
setNewServerURL(defaultServerURL)
router
.push(
standardUrlPartial(
Expand All @@ -241,21 +236,18 @@ export default function ServerPopover(): JSX.Element {
.catch((err) => {
console.error(err)
})
document.getElementById('close-button')?.click()
toast({
title: `Added new server: ${newServerName}`,
description: `You are now able to connect to ${newServerURL}`,
title: `Added new server: ${server.name}`,
description: `You are now able to connect to ${server.url}`,
action: (
<ToastAction
altText="Goto schedule to undo"
onClick={() => {
Object.entries(getServers()).map(
([key, server]) => {
if (server.id === id?.toString()) {
removeServer(server.id)
}
Object.values(getServers()).map((server) => {
if (server.id === id?.toString()) {
removeServer(server.id)
}
)
})
setServers(getServers())
router
.push(
Expand All @@ -281,6 +273,7 @@ export default function ServerPopover(): JSX.Element {
</ToastAction>
)
})
document.getElementById('close-button')?.click()
}}
>
Connect
Expand Down
2 changes: 1 addition & 1 deletion desktop-app/renderer/components/custom/panel/infoPanelCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function InfoPanelCard({
}): JSX.Element {
return (
<PanelCard
className="h-32 w-80"
className="h-32 w-80 min-w-fit"
title={title}
badge={badge}
description={description}
Expand Down
19 changes: 11 additions & 8 deletions desktop-app/renderer/components/custom/panel/panelCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,17 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
return (
<Card
className={cn(
'hover:bg-secondary space-y-2 flex flex-col justify-center',
'hover:bg-secondary flex flex-col justify-center space-y-2',
className
)}
onClick={onClick}
ref={ref}
>
{(title || badge) && (
<CardHeader className="flex flex-row items-end justify-between space-y-0 ">
<CardTitle className="text-sm font-normal">{title}</CardTitle>
<CardHeader className="flex flex-row items-end justify-between space-y-0">
<CardTitle className="px-3 text-sm font-normal">{title}</CardTitle>
{badge && (
<Badge className="text-xs italic hover:bg-foreground">
<Badge className="hover:bg-foreground text-xs italic">
{badge}
</Badge>
)}
Expand All @@ -59,6 +59,7 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
)
}
)
CardComponent.displayName = 'CardComponent'

export default function PanelCard({
children,
Expand Down Expand Up @@ -86,9 +87,10 @@ export default function PanelCard({
title={title}
badge={badge}
onClick={onClick}
children={children}
description={description}
/>
>
{children}
</CardComponent>
</TooltipTrigger>
<TooltipContent>{tooltip}</TooltipContent>
</Tooltip>
Expand All @@ -99,8 +101,9 @@ export default function PanelCard({
title={title}
badge={badge}
onClick={onClick}
children={children}
description={description}
/>
>
{children}
</CardComponent>
)
}
Loading

0 comments on commit 3408654

Please sign in to comment.