Allow changing playlist's owner. Relates to #698

ui/src/common/useSelectedFields.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 import { setOmittedFields, setToggleableFields } from '../actions'
 
+// TODO Refactor
 export const useSelectedFields = ({
   resource,
   columns,

ui/src/playlist/PlaylistEdit.js

@@ -9,6 +9,9 @@ import {
   BooleanInput,
   required,
   useTranslate,
+  usePermissions,
+  ReferenceInput,
+  SelectInput,
 } from 'react-admin'
 import { isSmartPlaylist, isWritable, Title } from '../common'
 
@@ -29,10 +32,26 @@ const PlaylistTitle = ({ record }) => {
 
 const PlaylistEditForm = (props) => {
   const { record } = props
+  const { permissions } = usePermissions()
   return (
     <SimpleForm redirect="list" variant={'outlined'} {...props}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
+      {permissions === 'admin' ? (
+        <ReferenceInput
+          source="ownerId"
+          reference="user"
+          perPage={0}
+          sort={{ field: 'name', order: 'ASC' }}
+        >
+          <SelectInput
+            label={'resources.playlist.fields.ownerName'}
+            optionText="userName"
+          />
+        </ReferenceInput>
+      ) : (
+        <TextField source="ownerName" />
+      )}
       <BooleanInput
         source="public"
         disabled={!isWritable(record.ownerId) || isSmartPlaylist(record)}

ui/src/playlist/PlaylistList.js

@@ -5,7 +5,9 @@ import {
   EditButton,
   Filter,
   NumberField,
+  ReferenceInput,
   SearchInput,
+  SelectInput,
   TextField,
   useUpdate,
   useNotify,
@@ -27,6 +29,15 @@ import PlaylistListActions from './PlaylistListActions'
 const PlaylistFilter = (props) => (
   <Filter {...props} variant={'outlined'}>
     <SearchInput source="q" alwaysOn />
+    <ReferenceInput
+      source="owner_id"
+      reference="user"
+      perPage={0}
+      sort={{ field: 'name', order: 'ASC' }}
+      alwaysOn
+    >
+      <SelectInput optionText="name" />
+    </ReferenceInput>
   </Filter>
 )
 
@@ -68,8 +79,8 @@ const PlaylistList = (props) => {
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   useResourceRefresh('playlist')
 
-  const toggleableFields = useMemo(() => {
-    return {
+  const toggleableFields = useMemo(
+    () => ({
       ownerName: <TextField source="ownerName" />,
       songCount: isDesktop && <NumberField source="songCount" />,
       duration: isDesktop && <DurationField source="duration" />,
@@ -79,8 +90,9 @@ const PlaylistList = (props) => {
       public: !isXsmall && (
         <TogglePublicInput source="public" sortByOrder={'DESC'} />
       ),
-    }
-  }, [isDesktop, isXsmall])
+    }),
+    [isDesktop, isXsmall]
+  )
 
   const columns = useSelectedFields({
     resource: 'playlist',

ui/src/playlist/PlaylistListActions.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { cloneElement } from 'react'
 import {
   sanitizeListRestProps,
   TopToolbar,
@@ -14,6 +14,7 @@ const PlaylistListActions = ({ className, ...rest }) => {
 
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {cloneElement(rest.filters, { context: 'button' })}
       <CreateButton basePath="/playlist">
         {translate('ra.action.create')}
       </CreateButton>