-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): implement order by, limit and offset in query generator #524
- Loading branch information
1 parent
5434e49
commit 28ea487
Showing
12 changed files
with
1,467 additions
and
535 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
lapis2-docs/src/components/QueryGenerator/LabelledInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| type Props = { | ||
| label: string; | ||
| value: string | number | undefined; | ||
| onChange: (value: string) => void; | ||
| }; | ||
|
|
||
| export const LabelledInput = ({ label, value, onChange }: Props) => { | ||
| return ( | ||
| <div> | ||
| <label className='mr-2'>{label}</label> | ||
| <input | ||
| type='text' | ||
| className='input input-bordered w-48' | ||
| value={value} | ||
| onChange={(e) => onChange(e.target.value)} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
130 changes: 130 additions & 0 deletions
130
lapis2-docs/src/components/QueryGenerator/OrderLimitOffsetSelection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import React, { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react'; | ||
| import { LabelledInput } from './LabelledInput.tsx'; | ||
| import { getResultFields, type QueryTypeSelectionState } from './QueryTypeSelectionState.ts'; | ||
| import type { Config } from '../../config.ts'; | ||
|
|
||
| export type OrderByLimitOffset = { | ||
| orderBy: string[]; | ||
| limit: number | undefined; | ||
| offset: number | undefined; | ||
| }; | ||
|
|
||
| type Props = { | ||
| config: Config; | ||
| queryType: QueryTypeSelectionState; | ||
| orderByLimitOffset: OrderByLimitOffset; | ||
| onOrderByLimitOffsetChange: Dispatch<SetStateAction<OrderByLimitOffset>>; | ||
| }; | ||
|
|
||
| export const OrderLimitOffsetSelection = ({ | ||
| config, | ||
| queryType, | ||
| orderByLimitOffset, | ||
| onOrderByLimitOffsetChange, | ||
| }: Props) => { | ||
| return ( | ||
| <div className='flex flex-col gap-4'> | ||
| <OderBySelection | ||
| config={config} | ||
| queryType={queryType} | ||
| orderBy={orderByLimitOffset.orderBy} | ||
| onOrderByLimitOffsetChange={onOrderByLimitOffsetChange} | ||
| /> | ||
| <LabelledInput | ||
| label='Limit:' | ||
| value={orderByLimitOffset.limit} | ||
| onChange={(value) => | ||
| onOrderByLimitOffsetChange((prev) => ({ | ||
| ...prev, | ||
| limit: value === '' ? undefined : parseInt(value), | ||
| })) | ||
| } | ||
| /> | ||
| <LabelledInput | ||
| label='Offset:' | ||
| value={orderByLimitOffset.offset} | ||
| onChange={(value) => | ||
| onOrderByLimitOffsetChange((prev) => ({ | ||
| ...prev, | ||
| offset: value === '' ? undefined : parseInt(value), | ||
| })) | ||
| } | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| type OrderBySelectionProps = { | ||
| config: Config; | ||
| queryType: QueryTypeSelectionState; | ||
| orderBy: string[]; | ||
| onOrderByLimitOffsetChange: Dispatch<SetStateAction<OrderByLimitOffset>>; | ||
| }; | ||
|
|
||
| const OderBySelection = ({ config, queryType, orderBy, onOrderByLimitOffsetChange }: OrderBySelectionProps) => { | ||
| let unselectedOrderByFields = useMemo( | ||
| () => | ||
| getResultFields(queryType, config) | ||
| .map((resultField) => resultField.name) | ||
| .filter((fieldName) => !orderBy.includes(fieldName)), | ||
| [orderBy, queryType], | ||
| ); | ||
|
|
||
| const [selectedOrderByField, setSelectedOrderByField] = useState(unselectedOrderByFields[0]); | ||
|
|
||
| useEffect(() => { | ||
| if (!unselectedOrderByFields.includes(selectedOrderByField)) { | ||
| setSelectedOrderByField(unselectedOrderByFields[0]); | ||
| } | ||
| }, [unselectedOrderByFields, selectedOrderByField]); | ||
|
|
||
| return ( | ||
| <div className='flex flex-column justify-start'> | ||
| <label className='mr-2'>Order by:</label> | ||
|
|
||
| <div> | ||
| {orderBy.map((value, index) => ( | ||
| <div key={index}> | ||
| <input readOnly className='input input-bordered' value={value} /> | ||
| <button | ||
| className='btn' | ||
| onClick={() => | ||
| onOrderByLimitOffsetChange((prev) => ({ | ||
| ...prev, | ||
| orderBy: prev.orderBy?.filter((_, i) => i !== index), | ||
| })) | ||
| } | ||
| > | ||
| - | ||
| </button> | ||
| </div> | ||
| ))} | ||
|
|
||
| {unselectedOrderByFields.length > 0 && ( | ||
| <> | ||
| <label className='mr-2'>Add a field:</label> | ||
| <select | ||
| className='input input-bordered' | ||
| onChange={(e) => setSelectedOrderByField(e.target.value)} | ||
| > | ||
| {unselectedOrderByFields.map((fieldName) => ( | ||
| <option key={fieldName}>{fieldName}</option> | ||
| ))} | ||
| </select> | ||
| <button | ||
| className='btn' | ||
| onClick={() => { | ||
| onOrderByLimitOffsetChange((prev) => ({ | ||
| ...prev, | ||
| orderBy: [...prev.orderBy, selectedOrderByField], | ||
| })); | ||
| }} | ||
| > | ||
| + | ||
| </button> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
2 changes: 1 addition & 1 deletion
2
lapis2-docs/src/components/QueryGenerator/OutputFormatSelection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 9 additions & 40 deletions
49
lapis2-docs/src/components/QueryGenerator/QueryTypeSelection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.