ui(admin): start work on DatabaseSelect.tsx
This commit is contained in:
Matthew Penner
parent
22807f1ff4
commit
8e07bb4bc2
3 changed files with 220 additions and 0 deletions
32
resources/scripts/api/admin/databases/searchDatabases.ts
Normal file
32
resources/scripts/api/admin/databases/searchDatabases.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
|
||||||
|
import http from '@/api/http';
|
||||||
|
|
||||||
|
interface Filters {
|
||||||
|
name?: string;
|
||||||
|
host?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Wow {
|
||||||
|
[index: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (filters?: Filters): Promise<Database[]> => {
|
||||||
|
let params = {};
|
||||||
|
if (filters !== undefined) {
|
||||||
|
params = Object.keys(filters).map((key) => {
|
||||||
|
const a: Wow = {};
|
||||||
|
a[`filter[${key}]`] = (filters as unknown as Wow)[key];
|
||||||
|
return a;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(params);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
http.get('/api/application/databases', { params: { ...params } })
|
||||||
|
.then(response => resolve(
|
||||||
|
(response.data.data || []).map(rawDataToDatabase)
|
||||||
|
))
|
||||||
|
.catch(reject);
|
||||||
|
});
|
||||||
|
};
|
||||||
68
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
Normal file
68
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import SearchableSelect from '@/components/elements/SearchableSelect';
|
||||||
|
import searchDatabases from '@/api/admin/databases/searchDatabases';
|
||||||
|
import { Database } from '@/api/admin/databases/getDatabases';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [ database, setDatabase ] = useState<Database | null>(null);
|
||||||
|
const [ databases, setDatabases ] = useState<Database[]>([]);
|
||||||
|
|
||||||
|
const onSearch = (query: string): Promise<void> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
searchDatabases({ name: query }).then((databases) => {
|
||||||
|
setDatabases(databases);
|
||||||
|
return resolve();
|
||||||
|
}).catch(reject);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelect = (database: Database) => {
|
||||||
|
setDatabase(database);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SearchableSelect
|
||||||
|
id="database"
|
||||||
|
name="Database"
|
||||||
|
items={databases}
|
||||||
|
setItems={setDatabases}
|
||||||
|
onSearch={onSearch}
|
||||||
|
onSelect={onSelect}
|
||||||
|
nullable
|
||||||
|
>
|
||||||
|
{databases.map(d => (
|
||||||
|
d.id === database?.id ?
|
||||||
|
<li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
// selectItem(d);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div css={tw`flex items-center`}>
|
||||||
|
<span css={tw`block font-medium truncate`}>
|
||||||
|
{d.name}
|
||||||
|
</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={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
// selectItem(d);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div css={tw`flex items-center`}>
|
||||||
|
<span css={tw`block font-normal truncate`}>
|
||||||
|
{d.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</SearchableSelect>
|
||||||
|
);
|
||||||
|
};
|
||||||
120
resources/scripts/components/elements/SearchableSelect.tsx
Normal file
120
resources/scripts/components/elements/SearchableSelect.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
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 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`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
interface Props<T> {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
nullable: boolean;
|
||||||
|
|
||||||
|
items: T[];
|
||||||
|
setItems: (items: T[]) => void;
|
||||||
|
|
||||||
|
onSearch: (query: string) => Promise<void>;
|
||||||
|
onSelect: (item: T) => void;
|
||||||
|
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SearchableSelect<T> ({ id, name, items, setItems, onSearch, children }: Props<T>) {
|
||||||
|
const [ loading, setLoading ] = useState(false);
|
||||||
|
const [ expanded, setExpanded ] = useState(false);
|
||||||
|
|
||||||
|
const [ inputText, setInputText ] = useState('');
|
||||||
|
|
||||||
|
const onFocus = () => {
|
||||||
|
setInputText('');
|
||||||
|
setItems([]);
|
||||||
|
setExpanded(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const search = debounce((query: string) => {
|
||||||
|
if (!expanded) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query === '' || query.length < 2) {
|
||||||
|
setItems([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
onSearch(query).then(() => setLoading(false));
|
||||||
|
}, 250);
|
||||||
|
|
||||||
|
/* const selectItem = (item: any) => {
|
||||||
|
onSelect(item);
|
||||||
|
}; */
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// setInputText(location.short);
|
||||||
|
setExpanded(false);
|
||||||
|
}, [ ]);
|
||||||
|
// }, [ location ]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key !== 'Escape') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// setInputText(location.short);
|
||||||
|
setExpanded(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handler);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', handler);
|
||||||
|
};
|
||||||
|
}, [ expanded ]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Label htmlFor={id}>{name}</Label>
|
||||||
|
|
||||||
|
<div css={tw`mt-1 relative`}>
|
||||||
|
<InputSpinner visible={loading}>
|
||||||
|
<Input type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} 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}>
|
||||||
|
{ items.length < 1 ?
|
||||||
|
inputText.length < 2 ?
|
||||||
|
<div css={tw`h-10 flex flex-row items-center px-3`}>
|
||||||
|
<p css={tw`text-sm`}>Please type 2 or more characters.</p>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div css={tw`h-10 flex flex-row items-center px-3`}>
|
||||||
|
<p css={tw`text-sm`}>No results found.</p>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<ul tabIndex={-1} 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`}>
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchableSelect;
|
||||||
Loading…
Reference in a new issue