ui(admin): start work on LocationSelect.tsx
This commit is contained in:
Matthew Penner
parent
1c8143ad9d
commit
7bbe9e8e89
5 changed files with 160 additions and 28 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -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
20
resources/scripts/api/admin/locations/searchLocations.ts
Normal 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
111
resources/scripts/components/admin/nodes/LocationSelect.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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`}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue