search by owner in avatars table

Author: aditya-mitra

packages/client-core/src/admin/components/Avatars/AvatarTable.tsx

@@ -34,7 +34,7 @@ import Checkbox from '@etherealengine/ui/src/primitives/mui/Checkbox'
 
 import { useFind, useMutation } from '@etherealengine/engine/src/common/functions/FeathersHooks'
 import TableComponent from '../../common/Table'
-import { AvatarColumn, AvatarData, avatarColumns } from '../../common/variables/avatar'
+import { AvatarColumn, avatarColumns } from '../../common/variables/avatar'
 import styles from '../../styles/admin.module.scss'
 import AvatarDrawer, { AvatarDrawerMode } from './AvatarDrawer'
 
@@ -83,56 +83,54 @@ const AvatarTable = ({ className, search, selectedAvatarIds, setSelectedAvatarId
     }
   }
 
-  const createData = (el: AvatarType): AvatarData => {
-    return {
-      el,
-      select: (
-        <>
-          <Checkbox
-            className={styles.checkbox}
-            checked={selectedAvatarIds.has(el.id)}
-            onChange={() => {
-              toggleSelection(el.id)
-            }}
-          />
-        </>
-      ),
-      id: el.id,
-      name: el.name as string,
-      owner: el.userId,
-      thumbnail: (
-        <img
-          style={{ maxHeight: '50px' }}
-          crossOrigin="anonymous"
-          src={el.thumbnailResource?.url + '?' + new Date().getTime()}
-          alt=""
+  const createData = (el: AvatarType): any => ({
+    el,
+    select: (
+      <>
+        <Checkbox
+          className={styles.checkbox}
+          checked={selectedAvatarIds.has(el.id)}
+          onChange={() => {
+            toggleSelection(el.id)
+          }}
         />
-      ),
-      action: (
-        <>
-          <a
-            className={styles.actionStyle}
-            onClick={() => {
-              avatarData.set(el)
-              openAvatarDrawer.set(true)
-            }}
-          >
-            <span className={styles.spanWhite}>{t('admin:components.common.view')}</span>
-          </a>
-          <a
-            className={styles.actionStyle}
-            onClick={() => {
-              avatarId.set(el.id)
-              avatarName.set(el.name)
-              openConfirm.set(true)
-            }}
-          >
-            <span className={styles.spanDange}>{t('admin:components.common.delete')}</span>
-          </a>
-        </>
-      )
-    }
-  }
+      </>
+    ),
+    id: el.id,
+    name: el.name as string,
+    owner: (el as any).userName,
+    thumbnail: (
+      <img
+        style={{ maxHeight: '50px' }}
+        crossOrigin="anonymous"
+        src={el.thumbnailResource?.url + '?' + new Date().getTime()}
+        alt=""
+      />
+    ),
+    action: (
+      <>
+        <a
+          className={styles.actionStyle}
+          onClick={() => {
+            avatarData.set(el)
+            openAvatarDrawer.set(true)
+          }}
+        >
+          <span className={styles.spanWhite}>{t('admin:components.common.view')}</span>
+        </a>
+        <a
+          className={styles.actionStyle}
+          onClick={() => {
+            avatarId.set(el.id)
+            avatarName.set(el.name)
+            openConfirm.set(true)
+          }}
+        >
+          <span className={styles.spanDange}>{t('admin:components.common.delete')}</span>
+        </a>
+      </>
+    )
+  })
 
   const submitRemoveAvatar = async () => {
     adminAvatarRemove(avatarId.value)

packages/server-core/src/user/avatar/avatar.hooks.ts

@@ -155,6 +155,28 @@ const updateUserAvatars = async (context: HookContext<AvatarService>) => {
   }
 }
 
+const addAndSortByUserName = async (context: HookContext<AvatarService>) => {
+  if (!context.params.query) return
+
+  const userNameAlias = 'userName'
+
+  const sort = context.params.query.$sort?.['owner']
+  delete context.params.query.$sort?.['owner']
+  const nameLike = context.params.query.name as any
+  delete context.params.query.name
+
+  const query = context.service.createQuery(context.params)
+
+  query.leftJoin(userPath, `${userPath}.id`, `${avatarPath}.userId`)
+  if (nameLike) {
+    query.where(`${avatarPath}.name`, 'LIKE', nameLike.$like)
+  }
+  query.orderBy(`${userPath}.name`, sort === 1 ? 'asc' : 'desc')
+  query.select(`${avatarPath}.*`, `${userPath}.name AS ${userNameAlias}`)
+
+  context.params.knex = query
+}
+
 export default {
   around: {
     all: [schemaHooks.resolveExternal(avatarExternalResolver), schemaHooks.resolveResult(avatarResolver)]
@@ -164,7 +186,8 @@ export default {
     all: [() => schemaHooks.validateQuery(avatarQueryValidator), schemaHooks.resolveQuery(avatarQueryResolver)],
     find: [
       iffElse(isAction('admin'), verifyScope('admin', 'admin'), ensureUserAccessibleAvatars),
-      discardQuery('action')
+      discardQuery('action'),
+      addAndSortByUserName
     ],
     get: [],
     create: [