dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

ui(admin): start work on LocationSelect.tsx

Browse Source
This commit is contained in:
Matthew Penner 2021-01-31 15:59:37 -07:00
parent 1c8143ad9d
commit 7bbe9e8e89
5 changed files with 160 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/Http/Controllers/Api/Application/Locations/LocationController.php
View File

@ -2,7 +2,6 @@
namespace Pterodactyl\Http\Controllers\Api\Application\Locations;
use Illuminate\Http\Response;
use Pterodactyl\Models\Location;
use Illuminate\Http\JsonResponse;
use Spatie\QueryBuilder\QueryBuilder;
@ -21,25 +20,10 @@ use Pterodactyl\Http\Requests\Api\Application\Locations\UpdateLocationRequest;
class LocationController extends ApplicationApiController
{
/**
* @var \Pterodactyl\Services\Locations\LocationCreationService
*/
private $creationService;
/**
* @var \Pterodactyl\Services\Locations\LocationDeletionService
*/
private $deletionService;
/**
* @var \Pterodactyl\Contracts\Repository\LocationRepositoryInterface
*/
private $repository;
/**
* @var \Pterodactyl\Services\Locations\LocationUpdateService
*/
private $updateService;
private LocationCreationService $creationService;
private LocationDeletionService $deletionService;
private LocationUpdateService $updateService;
private LocationRepositoryInterface $repository;
/**
* LocationController constructor.
@ -47,15 +31,15 @@ class LocationController extends ApplicationApiController
public function __construct(
LocationCreationService $creationService,
LocationDeletionService $deletionService,
LocationRepositoryInterface $repository,
LocationUpdateService $updateService
LocationUpdateService $updateService,
LocationRepositoryInterface $repository
) {
parent::__construct();
$this->creationService = $creationService;
$this->deletionService = $deletionService;
$this->repository = $repository;
$this->updateService = $updateService;
$this->repository = $repository;
}
/**
@ -66,7 +50,7 @@ class LocationController extends ApplicationApiController
$perPage = $request->query('per_page', 10);
if ($perPage < 1) {
$perPage = 10;
} else if ($perPage > 100) {
} elseif ($perPage > 100) {
throw new BadRequestHttpException('"per_page" query parameter must be below 100.');
}
@ -94,9 +78,6 @@ class LocationController extends ApplicationApiController
* Store a new location on the Panel and return a HTTP/201 response code with the
* new location attached.
*
* @param \Pterodactyl\Http\Requests\Api\Application\Locations\StoreLocationRequest $request
* @return \Illuminate\Http\JsonResponse
*
* @throws \Pterodactyl\Exceptions\Model\DataValidationException
*/
public function store(StoreLocationRequest $request): JsonResponse

20
resources/scripts/api/admin/locations/searchLocations.ts Normal file
View File

@ -0,0 +1,20 @@
import http from '@/api/http';
import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
export default (filters?: Record<string, string>): Promise<Location[]> => {
const params = {};
if (filters !== undefined) {
Object.keys(filters).forEach(key => {
// @ts-ignore
params['filter[' + key + ']'] = filters[key];
});
}
return new Promise((resolve, reject) => {
http.get('/api/application/locations', { params: { ...params } })
.then(response => resolve(
(response.data.data || []).map(rawDataToLocation)
))
.catch(reject);
});
};

111
resources/scripts/components/admin/nodes/LocationSelect.tsx Normal file
View File

@ -0,0 +1,111 @@
import React, { useEffect, useState } from 'react';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import { Location } from '@/api/admin/locations/getLocations';
import searchLocations from '@/api/admin/locations/searchLocations';
import InputSpinner from '@/components/elements/InputSpinner';
import { debounce } from 'debounce';
const Dropdown = styled.div<{ expanded: boolean }>`
${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
${props => !props.expanded && tw`hidden`};
`;
export default ({ defaultLocation }: { defaultLocation: Location }) => {
const [ loading, setLoading ] = useState(false);
const [ expanded, setExpanded ] = useState(false);
const [ location, setLocation ] = useState<Location>(defaultLocation);
const [ locations, setLocations ] = useState<Location[]>([]);
const [ inputText, setInputText ] = useState('');
const onFocus = () => {
setInputText('');
setLocations([]);
setExpanded(true);
};
const onBlur = () => {
// setInputText(location.short);
// setExpanded(false);
};
const search = debounce((query: string) => {
if (!expanded) {
return;
}
if (query === '') {
setLocations([]);
return;
}
setLoading(true);
searchLocations({ short: query }).then((locations) => {
console.log(locations);
setLocations(locations);
}).then(() => setLoading(false));
}, 200);
const selectLocation = (location: Location) => {
setLocation(location);
};
useEffect(() => {
setInputText(location.short);
setExpanded(false);
}, [ location ]);
return (
<div>
<Label htmlFor="listbox-label">Location</Label>
<div css={tw`mt-1 relative`}>
<InputSpinner visible={loading}>
<Input type="text" value={inputText} onFocus={onFocus} onBlur={onBlur} onChange={e => {
setInputText(e.currentTarget.value);
search(e.currentTarget.value);
}}
/>
</InputSpinner>
<div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
<svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
</svg>
</div>
<Dropdown expanded={expanded}>
<ul tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
{locations.map(l => (
l.id === location.id ?
<li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={() => selectLocation(l)}>
<div css={tw`flex items-center`}>
<span css={tw`block font-medium truncate`}>
{l.short}
</span>
</div>
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
<svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
</svg>
</span>
</li>
:
<li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={() => selectLocation(l)}>
<div css={tw`flex items-center`}>
<span css={tw`block font-normal truncate`}>
{l.short}
</span>
</div>
</li>
))}
</ul>
</Dropdown>
</div>
</div>
);
};

20
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View File

@ -1,3 +1,4 @@
import LocationSelect from '@/components/admin/nodes/LocationSelect';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
@ -12,8 +13,11 @@ import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
interface Values {
public: boolean;
name: string;
description: string;
locationId: number;
fqdn: string;
}
export default () => {
@ -44,8 +48,11 @@ export default () => {
<Formik
onSubmit={submit}
initialValues={{
public: node.public,
name: node.name,
description: node.description || '',
locationId: node.locationId,
fqdn: node.fqdn,
}}
validationSchema={object().shape({
name: string().required().max(191),
@ -77,6 +84,19 @@ export default () => {
/>
</div>
<div css={tw`mb-6`}>
<LocationSelect defaultLocation={{ id: 1, short: 'local', long: '', createdAt: new Date(), updatedAt: new Date() }}/>
</div>
<div css={tw`mb-6`}>
<Field
id={'fqdn'}
name={'fqdn'}
label={'FQDN'}
type={'text'}
/>
</div>
<div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>

2
resources/scripts/routers/AdminRouter.tsx
View File

@ -188,7 +188,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
</Sidebar>
<div css={tw`h-16 w-screen flex md:hidden flex-row flex-shrink-0 items-center bg-neutral-900 px-6`}>
<h1 css={tw`text-2xl text-neutral-50 whitespace-nowrap`}>{applicationName}</h1>
<h1 css={tw`text-2xl text-neutral-50 whitespace-nowrap font-medium`}>{applicationName}</h1>
<div css={tw`flex md:hidden flex-shrink-0 ml-auto`}>
<button css={tw`inline-flex items-center justify-center p-2 rounded-md text-neutral-400 hover:text-neutral-50 hover:bg-neutral-700 focus:outline-none focus:bg-neutral-700 focus:text-neutral-50`}>