From 0fbedc2f72f05c9e270f7b52016d384bcbd1f813 Mon Sep 17 00:00:00 2001
From: Tomas Langer <tomaslanger@hotmail.cz>
Date: Mon, 27 May 2024 09:33:10 +0200
Subject: [PATCH] feat(playground): add initialSorting to select fields

---
 .../playground/admin/app/pages/select.tsx     |  2 +-
 .../admin/lib/components/form/select.tsx      | 12 ++++-----
 .../lib/components/select/multi-select.tsx    |  9 ++++---
 .../admin/lib/components/select/select.tsx    |  7 +++---
 .../lib/components/select/sortable-select.tsx | 25 ++++++++++---------
 5 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/playground/admin/app/pages/select.tsx b/packages/playground/admin/app/pages/select.tsx
index 14ed77b7f..0cc1a7357 100644
--- 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
index b1625ff49..95e7642ab 100644
--- 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
index fa11e0b57..649964e28 100644
--- 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
index 2e7a32873..944bf4101 100644
--- 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
index 16273d636..39b72c7d8 100644
--- 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>