Add bulk action to make playlists private/public

Better responsiveness

resources/i18n/pt.json

@@ -150,7 +150,9 @@
             "actions": {
                 "selectPlaylist": "Selecione a playlist:",
                 "addNewPlaylist": "Criar \"%{name}\"",
-                "export": "Exportar"
+                "export": "Exportar",
+                "makePublic": "Pública",
+                "makePrivate": "Pessoal"
             },
             "message": {
                 "duplicate_song": "Adicionar músicas duplicadas",

ui/src/i18n/en.json

@@ -150,7 +150,9 @@
             "actions": {
                 "selectPlaylist": "Select a playlist:",
                 "addNewPlaylist": "Create \"%{name}\"",
-                "export": "Export"
+                "export": "Export",
+                "makePublic": "Make Public",
+                "makePrivate": "Make Private"
             },
             "message": {
                 "duplicate_song": "Add duplicated songs",

ui/src/playlist/ChangePublicStatusButton.js

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { LockOpen, Lock } from '@material-ui/icons'
+import { BulkUpdateButton, useTranslate } from 'react-admin'
+
+const ChangePublicStatusButton = (props) => {
+  const translate = useTranslate()
+  const playlists = { public: props?.public }
+  const label = props?.public
+    ? translate('resources.playlist.actions.makePublic')
+    : translate('resources.playlist.actions.makePrivate')
+  const icon = props?.public ? <LockOpen /> : <Lock />
+  return (
+    <BulkUpdateButton {...props} data={playlists} label={label} icon={icon} />
+  )
+}
+
+export default ChangePublicStatusButton

ui/src/playlist/PlaylistEdit.js

@@ -13,7 +13,7 @@ import {
   ReferenceInput,
   SelectInput,
 } from 'react-admin'
-import { isSmartPlaylist, isWritable, Title } from '../common'
+import { isWritable, Title } from '../common'
 
 const SyncFragment = ({ formData, variant, ...rest }) => {
   return (
@@ -52,10 +52,7 @@ const PlaylistEditForm = (props) => {
       ) : (
         <TextField source="ownerName" />
       )}
-      <BooleanInput
+      <BooleanInput source="public" disabled={!isWritable(record.ownerId)} />
-        source="public"
-        disabled={!isWritable(record.ownerId) || isSmartPlaylist(record)}
-      />
       <FormDataConsumer>
         {(formDataProps) => <SyncFragment {...formDataProps} />}
       </FormDataConsumer>

ui/src/playlist/PlaylistList.js

@@ -12,6 +12,8 @@ import {
   useUpdate,
   useNotify,
   useRecordContext,
+  BulkDeleteButton,
+  usePermissions,
 } from 'react-admin'
 import Switch from '@material-ui/core/Switch'
 import { useMediaQuery } from '@material-ui/core'
@@ -22,24 +24,29 @@ import {
   isWritable,
   useSelectedFields,
   useResourceRefresh,
-  isSmartPlaylist,
 } from '../common'
 import PlaylistListActions from './PlaylistListActions'
+import ChangePublicStatusButton from './ChangePublicStatusButton'
 
-const PlaylistFilter = (props) => (
+const PlaylistFilter = (props) => {
-  <Filter {...props} variant={'outlined'}>
+  const { permissions } = usePermissions()
-    <SearchInput source="q" alwaysOn />
+  return (
-    <ReferenceInput
+    <Filter {...props} variant={'outlined'}>
-      source="owner_id"
+      <SearchInput source="q" alwaysOn />
-      reference="user"
+      {permissions === 'admin' && (
-      perPage={0}
+        <ReferenceInput
-      sort={{ field: 'name', order: 'ASC' }}
+          source="owner_id"
-      alwaysOn
+          reference="user"
-    >
+          perPage={0}
-      <SelectInput optionText="name" />
+          sort={{ field: 'name', order: 'ASC' }}
-    </ReferenceInput>
+          alwaysOn
-  </Filter>
+        >
-)
+          <SelectInput optionText="name" />
+        </ReferenceInput>
+      )}
+    </Filter>
+  )
+}
 
 const TogglePublicInput = ({ resource, source }) => {
   const record = useRecordContext()
@@ -69,11 +76,19 @@ const TogglePublicInput = ({ resource, source }) => {
     <Switch
       checked={record[source]}
       onClick={handleClick}
-      disabled={!isWritable(record.ownerId) || isSmartPlaylist(record)}
+      disabled={!isWritable(record.ownerId)}
     />
   )
 }
 
+const PlaylistListBulkActions = (props) => (
+  <>
+    <ChangePublicStatusButton public={true} {...props} />
+    <ChangePublicStatusButton public={false} {...props} />
+    <BulkDeleteButton {...props} />
+  </>
+)
+
 const PlaylistList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
@@ -81,9 +96,9 @@ const PlaylistList = (props) => {
 
   const toggleableFields = useMemo(
     () => ({
-      ownerName: <TextField source="ownerName" />,
+      ownerName: isDesktop && <TextField source="ownerName" />,
-      songCount: isDesktop && <NumberField source="songCount" />,
+      songCount: !isXsmall && <NumberField source="songCount" />,
-      duration: isDesktop && <DurationField source="duration" />,
+      duration: <DurationField source="duration" />,
       updatedAt: isDesktop && (
         <DateField source="updatedAt" sortByOrder={'DESC'} />
       ),
@@ -105,6 +120,7 @@ const PlaylistList = (props) => {
       exporter={false}
       filters={<PlaylistFilter />}
       actions={<PlaylistListActions />}
+      bulkActionButtons={!isXsmall && <PlaylistListBulkActions />}
     >
       <Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r?.ownerId)}>
         <TextField source="name" />