Add playlist views

ui/src/App.js

@@ -71,6 +71,7 @@ const App = () => (
         ),
         <Resource name="albumSong" />,
         <Resource name="translation" />,
+        <Resource name="playlistTrack" />,
         <Player />,
       ]}
     </Admin>

ui/src/dataProvider/httpClient.js

@@ -1,14 +1,11 @@
 import { fetchUtils } from 'react-admin'
-import jsonServerProvider from 'ra-data-json-server'
-import baseUrl from './utils/baseUrl'
-import config from './config'
+import baseUrl from '../utils/baseUrl'
+import config from '../config'
 
-const restUrl = '/app/api'
 const customAuthorizationHeader = 'X-ND-Authorization'
 
 const httpClient = (url, options = {}) => {
   url = baseUrl(url)
-  url = url.replace(restUrl + '/albumSong', restUrl + '/song')
   if (!options.headers) {
     options.headers = new Headers({ Accept: 'application/json' })
   }
@@ -27,6 +24,4 @@ const httpClient = (url, options = {}) => {
   })
 }
 
-const dataProvider = jsonServerProvider(restUrl, httpClient)
-
-export default dataProvider
+export default httpClient

ui/src/dataProvider/index.js

@@ -0,0 +1,3 @@
+import wrapperDataProvider from './wrapperDataProvider'
+
+export default wrapperDataProvider

ui/src/dataProvider/wrapperDataProvider.js

@@ -0,0 +1,68 @@
+import jsonServerProvider from 'ra-data-json-server'
+import httpClient from './httpClient'
+
+const restUrl = '/app/api'
+
+const dataProvider = jsonServerProvider(restUrl, httpClient)
+
+const mapResource = (resource, params) => {
+  console.log('R: ', resource, 'P: ', params)
+  switch (resource) {
+    case 'albumSong':
+      return ['song', params]
+
+    case 'playlistTrack':
+      // /api/playlistTrack?playlist_id=123  => /api/playlist/123/tracks
+      let plsId = '0'
+      if (params.filter) {
+        plsId = params.filter.playlist_id
+        delete params.filter.playlist_id
+      }
+      return [`playlist/${plsId}/tracks`, params]
+
+    default:
+      return [resource, params]
+  }
+}
+
+const wrapperDataProvider = {
+  ...dataProvider,
+  getList: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.getList(r, p)
+  },
+  getOne: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.getOne(r, p)
+  },
+  getMany: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.getMany(r, p)
+  },
+  getManyReference: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.getManyReference(r, p)
+  },
+  update: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.update(r, p)
+  },
+  updateMany: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.updateMany(r, p)
+  },
+  create: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.create(r, p)
+  },
+  delete: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.delete(r, p)
+  },
+  deleteMany: (resource, params) => {
+    const [r, p] = mapResource(resource, params)
+    return dataProvider.deleteMany(r, p)
+  },
+}
+
+export default wrapperDataProvider

ui/src/playlist/PlaylistCreate.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  Create,
+  SimpleForm,
+  TextInput,
+  BooleanInput,
+  required,
+} from 'react-admin'
+
+const PlaylistCreate = (props) => (
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput source="name" validate={required()} />
+      <TextInput multiline source="comment" />
+      <BooleanInput source="public" initialValue={true} />
+    </SimpleForm>
+  </Create>
+)
+
+export default PlaylistCreate

ui/src/playlist/PlaylistEdit.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  Edit,
+  SimpleForm,
+  TextInput,
+  BooleanInput,
+  required,
+} from 'react-admin'
+
+const PlaylistEdit = (props) => (
+  <Edit {...props}>
+    <SimpleForm>
+      <TextInput source="name" validate={required()} />
+      <TextInput source="comment" />
+      <BooleanInput source="public" />
+    </SimpleForm>
+  </Edit>
+)
+
+export default PlaylistEdit

ui/src/playlist/PlaylistList.js

@@ -1,22 +1,15 @@
 import React from 'react'
 import {
-  List,
   Datagrid,
   TextField,
   BooleanField,
   NumberField,
   DateField,
 } from 'react-admin'
-import { DurationField, Title } from '../common'
+import { DurationField, List } from '../common'
 
 const PlaylistList = (props) => (
-  <List
-    {...props}
-    title={
-      <Title subTitle={'resources.playlist.name'} args={{ smart_count: 2 }} />
-    }
-    exporter={false}
-  >
+  <List {...props} exporter={false}>
     <Datagrid rowClick="edit">
       <TextField source="name" />
       <TextField source="owner" />

ui/src/playlist/index.js

@@ -1,7 +1,11 @@
 import PlaylistIcon from '../icons/Playlist'
 import PlaylistList from './PlaylistList'
+import PlaylistEdit from './PlaylistEdit'
+import PlaylistCreate from './PlaylistCreate'
 
 export default {
   icon: PlaylistIcon,
   list: PlaylistList,
+  create: PlaylistCreate,
+  edit: PlaylistEdit,
 }