filter rooms

backend/src/graphql/resolvers/rooms.ts

@@ -88,11 +88,20 @@ export default {
       try {
         const first = params.first || 10
         const before = params.before || null
+        const search = params.search || null
         const result = await session.readTransaction(async (transaction) => {
+          const conditions: string[] = []
+          if (before) conditions.push('sortDate < $before')
+          if (search) conditions.push('toLower(roomName) CONTAINS toLower($search)')
+          const whereClause = conditions.length ? `WHERE ${conditions.join(' AND ')}` : ''
           const cypher = `
             MATCH (currentUser:User { id: $currentUserId })-[:CHATS_IN]->(room:Room)
-            WITH room, COALESCE(room.lastMessageAt, room.createdAt) AS sortDate
-            ${before ? 'WHERE sortDate < $before' : ''}
+            OPTIONAL MATCH (room)-[:ROOM_FOR]->(g:Group)
+            OPTIONAL MATCH (room)<-[:CHATS_IN]-(otherUser:User)
+              WHERE g IS NULL AND otherUser.id <> $currentUserId
+            WITH room, COALESCE(room.lastMessageAt, room.createdAt) AS sortDate,
+                 COALESCE(g.name, otherUser.name) AS roomName
+            ${whereClause}
             RETURN room.id AS id
             ORDER BY sortDate DESC
             LIMIT toInteger($first)
@@ -101,6 +110,7 @@ export default {
             currentUserId: context.user.id,
             first,
             before,
+            search,
           })
         })
         const roomIds: string[] = result.records.map((record) => record.get('id') as string)

backend/src/graphql/types/type/Room.gql

@@ -70,7 +70,7 @@ type Mutation {
 }
 
 type Query {
-  Room(id: ID, userId: ID, groupId: ID, first: Int, before: String, orderBy: [_RoomOrdering]): [Room]
+  Room(id: ID, userId: ID, groupId: ID, first: Int, before: String, search: String, orderBy: [_RoomOrdering]): [Room]
   UnreadRooms: Int
 }
 

webapp/components/Chat/Chat.vue

@@ -23,9 +23,11 @@
     :responsive-breakpoint="responsiveBreakpoint"
     :single-room="singleRoom"
     show-reaction-emojis="false"
+    custom-search-room-enabled="true"
     @send-message="sendMessage($event.detail[0])"
     @fetch-messages="fetchMessages($event.detail[0])"
-    @fetch-more-rooms="fetchRooms"
+    @fetch-more-rooms="fetchMoreRooms"
+    @search-room="searchRooms($event.detail[0])"
     @add-room="toggleUserSearch"
     @open-user-tag="redirectToUserProfile($event.detail[0])"
     @open-file="openFile($event.detail[0].file.file)"
@@ -180,6 +182,7 @@ export default {
       roomsLoaded: false,
       roomCursor: null,
       roomPageSize: 10,
+      roomSearch: '',
       selectedRoom: null,
       activeRoomId: null,
       loadingRooms: true,
@@ -519,12 +522,12 @@ export default {
       })
     },
 
-    async fetchRooms({ room } = {}) {
+    async fetchRooms({ room, search } = {}) {
       this.roomsLoaded = false
       try {
         const variables = room?.id
           ? { id: room.id }
-          : { first: this.roomPageSize, before: this.roomCursor }
+          : { first: this.roomPageSize, before: this.roomCursor, ...(search && { search }) }
 
         const {
           data: { Room },
@@ -541,7 +544,6 @@ export default {
         this.rooms = [...this.rooms, ...newRooms]
 
         if (!room?.id && Room.length > 0) {
-          // Update cursor to the oldest room's sort date
           const lastRoom = Room[Room.length - 1]
           this.roomCursor = lastRoom.lastMessageAt || lastRoom.createdAt
         }
@@ -557,10 +559,21 @@ export default {
         this.rooms = []
         this.$toast.error(error.message)
       }
-      // must be set false after initial rooms are loaded and never changed again
       this.loadingRooms = false
     },
 
+    async searchRooms(event) {
+      const value = typeof event === 'string' ? event : event?.value
+      this.roomSearch = value || ''
+      this.rooms = []
+      this.roomCursor = null
+      await this.fetchRooms({ search: this.roomSearch || undefined })
+    },
+
+    fetchMoreRooms() {
+      this.fetchRooms({ search: this.roomSearch || undefined })
+    },
+
     async fetchMessages({ room, options = {} }) {
       if (this.selectedRoom?.id !== room.id) {
         this.messages = []

webapp/graphql/Rooms.js

@@ -37,8 +37,8 @@ export const createGroupRoom = () => gql`
 export const roomQuery = () => gql`
   ${imageUrls}
 
-  query Room($first: Int, $before: String, $id: ID, $userId: ID, $groupId: ID) {
-    Room(first: $first, before: $before, id: $id, userId: $userId, groupId: $groupId) {
+  query Room($first: Int, $before: String, $id: ID, $userId: ID, $groupId: ID, $search: String) {
+    Room(first: $first, before: $before, id: $id, userId: $userId, groupId: $groupId, search: $search) {
       id
       roomId
       roomName