Merge pull request #707 from contember/feat/selectInitialSorting

feat(playground): add initialSorting to select fields
contember · May 27, 2024 · 4f76634 · 4f76634
2 parents dc97775 + 0fbedc2
commit 4f76634
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/packages/playground/admin/app/pages/select.tsx b/packages/playground/admin/app/pages/select.tsx
@@ -13,7 +13,7 @@ export const hasOne = () => <>
 		</Slots.Actions>
 		<EntitySubTree entity={'SelectRoot(unique=unique)'} setOnCreate={'(unique=unique)'}>
 			<div className={'space-y-4'}>
-				<SelectField field={'hasOne'} label="Has one value">
+				<SelectField field={'hasOne'} label="Has one value" initialSorting={{ name: 'asc' }}>
 					<Field field={'name'} />
 				</SelectField>
 			</div>

diff --git a/packages/playground/admin/lib/components/form/select.tsx b/packages/playground/admin/lib/components/form/select.tsx
@@ -24,11 +24,11 @@ export type SelectFieldProps =
 	& SelectInputProps
 	& Omit<FormContainerProps, 'children'>
 
-export const SelectField = Component<SelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors }) => {
+export const SelectField = Component<SelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors, initialSorting }) => {
 	return (
 		<FormHasOneRelationScope field={field}>
 			<FormContainer description={description} label={label} errors={errors}>
-				<SelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm}>
+				<SelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm} initialSorting={initialSorting}>
 					{children}
 				</SelectInput>
 			</FormContainer>
@@ -40,11 +40,11 @@ export type MultiSelectFieldProps =
 	& MultiSelectInputProps
 	& Omit<FormContainerProps, 'children'>
 
-export const MultiSelectField = Component<MultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors }) => {
+export const MultiSelectField = Component<MultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors, initialSorting }) => {
 	return (
 		<FormHasManyRelationScope field={field}>
 			<FormContainer description={description} label={label} errors={errors}>
-				<MultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm}>
+				<MultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm} initialSorting={initialSorting}>
 					{children}
 				</MultiSelectInput>
 			</FormContainer>
@@ -56,11 +56,11 @@ export type SortableMultiSelectFieldProps =
 	& SortableMultiSelectInputProps
 	& Omit<FormContainerProps, 'children'>
 
-export const SortableMultiSelectField = Component<SortableMultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, sortableBy, connectAt, createNewForm, errors }) => {
+export const SortableMultiSelectField = Component<SortableMultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, sortableBy, connectAt, createNewForm, errors, initialSorting }) => {
 	return (
 		<FormHasManyRelationScope field={field}>
 			<FormContainer description={description} label={label} errors={errors}>
-				<SortableMultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} sortableBy={sortableBy} connectAt={connectAt} createNewForm={createNewForm}>
+				<SortableMultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} sortableBy={sortableBy} connectAt={connectAt} createNewForm={createNewForm} initialSorting={initialSorting}>
 					{children}
 				</SortableMultiSelectInput>
 			</FormContainer>

diff --git a/packages/playground/admin/lib/components/select/multi-select.tsx b/packages/playground/admin/lib/components/select/multi-select.tsx
@@ -19,7 +19,7 @@ import { SelectDefaultFilter } from './filter'
 import { SelectListInner } from './list'
 import { MultiSelect, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
 import { CreateEntityDialog } from './create-new'
-import { DataViewUnionFilterFields } from '@contember/react-dataview'
+import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
 import { useFormFieldId } from '@contember/react-form'
 
 export type MultiSelectInputProps =
@@ -30,9 +30,10 @@ export type MultiSelectInputProps =
 		placeholder?: ReactNode
 		createNewForm?: ReactNode
 		queryField?: DataViewUnionFilterFields
-}
+		initialSorting?: DataViewSortingDirections
+	}
 
-export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
+export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm, initialSorting }) => {
 	const id = useFormFieldId()
 	return (
 		<MultiSelect field={field} options={options}>
@@ -64,7 +65,7 @@ export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, query
 
 					</SelectInputWrapperUI>
 					<SelectPopoverContent>
-						<SelectDataView queryField={queryField}>
+						<SelectDataView initialSorting={initialSorting} queryField={queryField}>
 							<SelectListInner filterToolbar={<SelectDefaultFilter />}>
 								<SelectOption>
 									<SelectItemTrigger>

diff --git a/packages/playground/admin/lib/components/select/select.tsx b/packages/playground/admin/lib/components/select/select.tsx
@@ -10,7 +10,7 @@ import { SelectListInner } from './list'
 import { Select, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
 import { CreateEntityDialog } from './create-new'
 import { SelectDefaultFilter } from './filter'
-import { DataViewUnionFilterFields } from '@contember/react-dataview'
+import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
 import { useFormFieldId } from '@contember/react-form'
 
 export type SelectInputProps =
@@ -21,10 +21,11 @@ export type SelectInputProps =
 		placeholder?: ReactNode
 		createNewForm?: ReactNode
 		queryField?: DataViewUnionFilterFields
+		initialSorting?: DataViewSortingDirections
 	}
 
 
-export const SelectInput = Component<SelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
+export const SelectInput = Component<SelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm, initialSorting }) => {
 	const [open, setOpen] = React.useState(false)
 	const id = useFormFieldId()
 
@@ -55,7 +56,7 @@ export const SelectInput = Component<SelectInputProps>(({ field, queryField, opt
 						</SelectInputActionsUI>
 					</SelectInputWrapperUI>
 					<SelectPopoverContent>
-						<SelectDataView queryField={queryField}>
+						<SelectDataView initialSorting={initialSorting} queryField={queryField}>
 							<SelectListInner filterToolbar={<SelectDefaultFilter />}>
 								<SelectOption>
 									<SelectItemTrigger>

diff --git a/packages/playground/admin/lib/components/select/sortable-select.tsx b/packages/playground/admin/lib/components/select/sortable-select.tsx
@@ -21,7 +21,7 @@ import { RepeaterSortable, RepeaterSortableDragOverlay, RepeaterSortableDropIndi
 import { Component, HasOne, SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField } from '@contember/interface'
 import { SelectDataView, SelectItemTrigger, SelectOption, SelectPlaceholder, SortableMultiSelect } from '@contember/react-select'
 import { CreateEntityDialog } from './create-new'
-import { DataViewUnionFilterFields } from '@contember/react-dataview'
+import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
 import { SelectDefaultFilter } from './filter'
 import { useFormFieldId } from '@contember/react-form'
 
@@ -35,17 +35,18 @@ const MultiSortableSelectDropIndicator = ({ position }: { position: 'before' | '
 
 export type SortableMultiSelectInputProps =
 	& {
-	field: SugaredRelativeEntityList['field']
-	sortableBy: SugaredRelativeSingleField['field']
-	connectAt: SugaredRelativeSingleEntity['field']
-	children: ReactNode
-	options?: SugaredQualifiedEntityList['entities']
-	placeholder?: ReactNode
-	createNewForm?: ReactNode
-	queryField?: DataViewUnionFilterFields
-}
+		field: SugaredRelativeEntityList['field']
+		sortableBy: SugaredRelativeSingleField['field']
+		connectAt: SugaredRelativeSingleEntity['field']
+		children: ReactNode
+		options?: SugaredQualifiedEntityList['entities']
+		placeholder?: ReactNode
+		createNewForm?: ReactNode
+		queryField?: DataViewUnionFilterFields
+		initialSorting?: DataViewSortingDirections
+	}
 
-export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>(({ field, queryField, options, children, sortableBy, connectAt, placeholder, createNewForm }) => {
+export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>(({ field, queryField, options, children, sortableBy, connectAt, placeholder, createNewForm, initialSorting }) => {
 	const id = useFormFieldId()
 	return (
 		<SortableMultiSelect field={field} sortableBy={sortableBy} connectAt={connectAt} options={options}>
@@ -98,7 +99,7 @@ export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>
 					</SelectInputWrapperUI>
 
 					<SelectPopoverContent>
-						<SelectDataView queryField={queryField}>
+						<SelectDataView initialSorting={initialSorting} queryField={queryField}>
 							<SelectListInner filterToolbar={<SelectDefaultFilter />}>
 								<SelectOption>
 									<SelectItemTrigger>