Add owner_id to playlist

ui/src/common/Writable.js

@@ -1,19 +1,19 @@
 import { cloneElement, Children, isValidElement } from 'react'
 
-export const isWritable = (owner) => {
+export const isWritable = (ownerId) => {
   return (
-    localStorage.getItem('username') === owner ||
+    localStorage.getItem('userId') === ownerId ||
     localStorage.getItem('role') === 'admin'
   )
 }
 
-export const isReadOnly = (owner) => {
-  return !isWritable(owner)
+export const isReadOnly = (ownerId) => {
+  return !isWritable(ownerId)
 }
 
 export const Writable = (props) => {
   const { record = {}, children } = props
-  if (isWritable(record.owner)) {
+  if (isWritable(record.ownerId)) {
     return Children.map(children, (child) =>
       isValidElement(child) ? cloneElement(child, props) : child
     )
@@ -24,4 +24,4 @@ export const Writable = (props) => {
 export const isSmartPlaylist = (pls) => !!pls.rules
 
 export const canChangeTracks = (pls) =>
-  isWritable(pls.owner) && !isSmartPlaylist(pls)
+  isWritable(pls.ownerId) && !isSmartPlaylist(pls)

ui/src/common/useSelectedFields.js

@@ -22,7 +22,8 @@ export const useSelectedFields = ({
   useEffect(() => {
     if (
       !resourceFields ||
-      Object.keys(resourceFields).length !== Object.keys(columns).length
+      Object.keys(resourceFields).length !== Object.keys(columns).length ||
+      !Object.keys(columns).every((c) => c in resourceFields)
     ) {
       const obj = {}
       for (const key of Object.keys(columns)) {

ui/src/dialogs/AddToPlaylistDialog.test.js

@@ -5,22 +5,23 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
 import { AddToPlaylistDialog } from './AddToPlaylistDialog'
 
 describe('AddToPlaylistDialog', () => {
+  beforeAll(() => localStorage.setItem('userId', 'admin'))
   afterEach(cleanup)
 
   const mockData = [
-    { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
-    { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+    { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+    { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
   ]
   const mockIndexedData = {
     'sample-id1': {
       id: 'sample-id1',
       name: 'sample playlist 1',
-      owner: 'admin',
+      ownerId: 'admin',
     },
     'sample-id2': {
       id: 'sample-id2',
       name: 'sample playlist 2',
-      owner: 'admin',
+      ownerId: 'admin',
     },
   }
   const selectedIds = ['song-1', 'song-2']

ui/src/dialogs/SelectPlaylistInput.js

@@ -30,7 +30,7 @@ export const SelectPlaylistInput = ({ onChange }) => {
 
   const options =
     ids &&
-    ids.map((id) => data[id]).filter((option) => isWritable(option.owner))
+    ids.map((id) => data[id]).filter((option) => isWritable(option.ownerId))
 
   const handleOnChange = (event, newValue) => {
     let newState = []

ui/src/dialogs/SelectPlaylistInput.test.js

@@ -5,24 +5,25 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
 import { SelectPlaylistInput } from './SelectPlaylistInput'
 
 describe('SelectPlaylistInput', () => {
+  beforeAll(() => localStorage.setItem('userId', 'admin'))
   afterEach(cleanup)
   const onChangeHandler = jest.fn()
 
   it('should call the handler with the selections', async () => {
     const mockData = [
-      { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
-      { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+      { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+      { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
     ]
     const mockIndexedData = {
       'sample-id1': {
         id: 'sample-id1',
         name: 'sample playlist 1',
-        owner: 'admin',
+        ownerId: 'admin',
       },
       'sample-id2': {
         id: 'sample-id2',
         name: 'sample playlist 2',
-        owner: 'admin',
+        ownerId: 'admin',
       },
     }
 
@@ -74,7 +75,7 @@ describe('SelectPlaylistInput', () => {
     fireEvent.keyDown(document.activeElement, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
-        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
       ])
     })
 
@@ -82,8 +83,8 @@ describe('SelectPlaylistInput', () => {
     fireEvent.keyDown(document.activeElement, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
-        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
-        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
       ])
     })
 
@@ -94,8 +95,8 @@ describe('SelectPlaylistInput', () => {
     fireEvent.keyDown(document.activeElement, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
-        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
-        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
         { name: 'new playlist' },
       ])
     })
@@ -106,8 +107,8 @@ describe('SelectPlaylistInput', () => {
     fireEvent.keyDown(document.activeElement, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
-        { id: 'sample-id1', name: 'sample playlist 1', owner: 'admin' },
-        { id: 'sample-id2', name: 'sample playlist 2', owner: 'admin' },
+        { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
+        { id: 'sample-id2', name: 'sample playlist 2', ownerId: 'admin' },
         { name: 'new playlist' },
         { name: 'another new playlist' },
       ])

ui/src/i18n/en.json

@@ -138,7 +138,7 @@
             "fields": {
                 "name": "Name",
                 "duration": "Duration",
-                "owner": "Owner",
+                "ownerName": "Owner",
                 "public": "Public",
                 "updatedAt": "Updated at",
                 "createdAt": "Created at",

ui/src/layout/PlaylistsSubMenu.js

@@ -74,7 +74,7 @@ const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
     />
   )
 
-  const user = localStorage.getItem('username')
+  const userId = localStorage.getItem('userId')
   const myPlaylists = []
   const sharedPlaylists = []
 
@@ -82,7 +82,7 @@ const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
     const allPlaylists = Object.keys(data).map((id) => data[id])
 
     allPlaylists.forEach((pls) => {
-      if (user === pls.owner) {
+      if (userId === pls.ownerId) {
         myPlaylists.push(pls)
       } else {
         sharedPlaylists.push(pls)

ui/src/playlist/PlaylistEdit.js

@@ -35,7 +35,7 @@ const PlaylistEditForm = (props) => {
       <TextInput multiline source="comment" />
       <BooleanInput
         source="public"
-        disabled={!isWritable(record.owner) || isSmartPlaylist(record)}
+        disabled={!isWritable(record.ownerId) || isSmartPlaylist(record)}
       />
       <FormDataConsumer>
         {(formDataProps) => <SyncFragment {...formDataProps} />}

ui/src/playlist/PlaylistList.js

@@ -58,7 +58,7 @@ const TogglePublicInput = ({ resource, source }) => {
     <Switch
       checked={record[source]}
       onClick={handleClick}
-      disabled={!isWritable(record.owner) || isSmartPlaylist(record)}
+      disabled={!isWritable(record.ownerId) || isSmartPlaylist(record)}
     />
   )
 }
@@ -70,7 +70,7 @@ const PlaylistList = (props) => {
 
   const toggleableFields = useMemo(() => {
     return {
-      owner: <TextField source="owner" />,
+      ownerName: <TextField source="ownerName" />,
       songCount: isDesktop && <NumberField source="songCount" />,
       duration: isDesktop && <DurationField source="duration" />,
       updatedAt: isDesktop && (
@@ -94,10 +94,7 @@ const PlaylistList = (props) => {
       filters={<PlaylistFilter />}
       actions={<PlaylistListActions />}
     >
-      <Datagrid
-        rowClick="show"
-        isRowSelectable={(r) => isWritable(r && r.owner)}
-      >
+      <Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r?.ownerId)}>
         <TextField source="name" />
         {columns}
         <Writable>