feat(admin-next): add file list

pnpm-lock.yaml

@@ -1602,6 +1602,9 @@ importers:
       express-mongoose-ra-json-server:
         specifier: ^0.1.0
         version: 0.1.0(express@4.18.2)(mongoose@6.1.1)
+      filesize:
+        specifier: ^8.0.7
+        version: 8.0.7
       jsonwebtoken:
         specifier: ^8.5.1
         version: 8.5.1

server/admin-next/package.json

@@ -15,6 +15,7 @@
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "express-mongoose-ra-json-server": "^0.1.0",
+    "filesize": "^8.0.7",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",

server/admin-next/src/client/App.tsx

@@ -5,9 +5,9 @@ import {
   Resource,
   Tushan,
 } from 'tushan';
-import { IconMessage, IconUser } from 'tushan/icon';
+import { IconFile, IconMessage, IconUser, IconUserGroup } from 'tushan/icon';
 import { authProvider } from './auth';
-import { groupFields, messageFields, userFields } from './fields';
+import { fileFields, groupFields, messageFields, userFields } from './fields';
 import { httpClient } from './request';
 
 const dataProvider = jsonServerProvider('/admin/api', httpClient);
@@ -56,7 +56,7 @@ function App() {
       <Resource
         name="groups"
         label="Groups"
-        icon={<IconMessage />}
+        icon={<IconUserGroup />}
         list={
           <ListTable
             filter={[
@@ -69,6 +69,23 @@ function App() {
           />
         }
       />
+
+      <Resource
+        name="file"
+        label="Files"
+        icon={<IconFile />}
+        list={
+          <ListTable
+            filter={[
+              createTextField('q', {
+                label: 'Search',
+              }),
+            ]}
+            fields={fileFields}
+            action={{ detail: true }}
+          />
+        }
+      />
     </Tushan>
   );
 }

server/admin-next/src/client/components/field/filesize.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import filesize from 'filesize';
+import { createFieldFactory, FieldDetailComponent } from 'tushan';
+
+export const FileSizeFieldDetail: FieldDetailComponent = React.memo((props) => {
+  return <span>{filesize(Number(props.value))}</span>;
+});
+FileSizeFieldDetail.displayName = 'FileSizeFieldDetail';
+
+export const createFileSizeField = createFieldFactory({
+  detail: FileSizeFieldDetail,
+  edit: FileSizeFieldDetail,
+});

server/admin-next/src/client/fields.ts

@@ -1,10 +1,13 @@
 import {
-  createAvatarField,
   createEmailField,
-  createImageField,
   createTextField,
   createBooleanField,
+  createAvatarField,
+  createJSONField,
+  createDateTimeField,
+  createUrlField,
 } from 'tushan';
+import { createFileSizeField } from './components/field/filesize';
 
 export const userFields = [
   createTextField('id', {
@@ -25,22 +28,21 @@ export const userFields = [
   createBooleanField('temporary', {
     label: 'Temporary',
   }),
-  createImageField('avatar', {
+  createAvatarField('avatar', {
     label: 'Avatar',
-    height: 42,
   }),
-  createTextField('settings', {
+  createJSONField('settings', {
     label: 'Settings',
     list: {
       width: 200,
     },
+  }),
+  createDateTimeField('createdAt', {
+    format: 'iso',
     edit: {
-      hidden: true, // wait for json field
+      hidden: true,
     },
   }),
-  createTextField('createdAt', {
-    label: 'Created At',
-  }),
 ];
 
 export const messageFields = [
@@ -56,8 +58,13 @@ export const messageFields = [
   createTextField('groupId'),
   createTextField('converseId'),
   createBooleanField('hasRecall'),
-  createTextField('reactions'),
-  createTextField('createdAt'),
+  createJSONField('reactions'),
+  createDateTimeField('createdAt', {
+    format: 'iso',
+    edit: {
+      hidden: true,
+    },
+  }),
 ];
 
 export const groupFields = [
@@ -76,7 +83,28 @@ export const groupFields = [
       hidden: true,
     },
   }),
-  createTextField('roles'),
-  createTextField('fallbackPermissions'),
-  createTextField('createdAt'),
+  createJSONField('roles'),
+  createJSONField('fallbackPermissions'),
+  createDateTimeField('createdAt', {
+    format: 'iso',
+    edit: {
+      hidden: true,
+    },
+  }),
+];
+
+export const fileFields = [
+  createTextField('objectName'),
+  createUrlField('url'),
+  createFileSizeField('size', {
+    list: {
+      width: 120,
+    },
+  }),
+  createTextField('metaData.content-type', {
+    label: 'Content Type',
+  }),
+  createTextField('etag'),
+  createTextField('userId'),
+  createDateTimeField('createdAt'),
 ];