Add pagination to conversations list

pos-module-chat/modules/chat/public/assets/style/pos-chat-inbox.css

@@ -117,7 +117,7 @@
       transition: all .2s ease-in-out;
     }
 
-    .pos-chat-conversations:not(:has(.pos-chat-conversationCard:hover)) .pos-chat-conversationCard.active {
+    .pos-chat-conversations:not(:has(.pos-chat-conversationCard:hover)) .pos-chat-conversationCard-active {
       anchor-name: --pos-chat-conversation-active;
     }
 
@@ -165,6 +165,14 @@
     white-space: nowrap;
   }
 
+/* load more button */
+.pos-chat-conversations-more {
+  padding-block-start: var(--pos-padding-card);
+  display: none;
+
+  text-align: center;
+}
+
 
 /* conversation
 ============================================================================ */

pos-module-chat/modules/chat/public/graphql/conversations/search.graphql

@@ -21,6 +21,8 @@ query search(
     sort: { updated_at: { order: DESC } }
   ) {
     total_entries
+    current_page
+    has_next_page
     results {
       id
       created_at

pos-module-chat/modules/chat/public/views/pages/api/conversations/show.json.liquid

@@ -0,0 +1,26 @@
+---
+slug: api/chat/conversations
+method: get
+---
+
+{% doc %}
+  Get conversations for given participant
+
+  @param {string} page - page number for pagination
+  @param {number} [per_page] - items per page (default: 20)
+{% enddoc %}
+
+{% liquid
+  function current_profile = 'modules/user/helpers/current_profile'
+
+  # platformos-check-disable ConvertIncludeToRender, UnreachableCode, DeprecatedTag, MetadataParamsCheck
+  include 'modules/user/helpers/can_do_or_unauthorized', requester: current_profile, do: 'chat.inbox', entity: null, access_callback: null, redirect_anonymous_to_login: null, forbidden_partial: null
+  # platformos-check-enable ConvertIncludeToRender, UnreachableCode, DeprecatedTag, MetadataParamsCheck
+
+  assign page = context.params.page | to_positive_integer: 0
+  assign per_page = context.params.per_page | to_positive_integer: 4
+
+  function conversations = 'modules/chat/queries/conversations/search_by_participant', page: page, limit: per_page, participant_id: current_profile.id
+
+  render 'modules/chat/json/conversations/show', conversations: conversations
+%}

pos-module-chat/modules/chat/public/views/pages/api/messages/show.json.liquid

@@ -3,14 +3,13 @@ slug: api/chat/messages
 method: get
 ---
 
-{% comment %}
+{% doc %}
   Get messages for given conversation
 
-  Params:
-  - conversation id (string, required)
-  - page number for pagination (int, default: 1)
-  - items per page (int, default: 30)
-{% endcomment %}
+  @param {string} conversation_id - the ID of the conversation
+  @param {string} page - page number for pagination
+  @param {number} [per_page] - items per page (default: 30)
+{% enddoc %}
 
 {% liquid
   function current_profile = 'modules/user/helpers/current_profile'
@@ -20,10 +19,10 @@ method: get
   # platformos-check-enable ConvertIncludeToRender, UnreachableCode, DeprecatedTag, MetadataParamsCheck
 
   assign conversation_id = context.params.conversation_id
-  assign page = context.params.page | plus: 0 | default: 1
-  assign limit = context.params.per_page | plus: 0 | default: 30
+  assign page = context.params.page | to_positive_integer: 1
+  assign per_page = context.params.per_page | to_positive_integer: 30
 
-  function messages = 'modules/chat/queries/messages/search_by_participant', conversation_id: conversation_id, page: page, limit: limit, participant_id: current_profile.id
+  function messages = 'modules/chat/queries/messages/search_by_participant', conversation_id: conversation_id, page: page, limit: per_page, participant_id: current_profile.id
 
-  render 'modules/chat/theme/json/messages/show', messages: messages
+  render 'modules/chat/json/messages/show', messages: messages
 %}

pos-module-chat/modules/chat/public/views/pages/conversations.frame.liquid

@@ -0,0 +1,26 @@
+---
+layout: ''
+---
+
+{% doc %}
+  Get conversations for given participant and return them in HTML
+
+  @param {string} page - page number for pagination
+  @param {number} [per_page] - items per page (default: 20)
+{% enddoc %}
+
+
+{% liquid
+  function current_profile = 'modules/user/helpers/current_profile'
+
+  # platformos-check-disable ConvertIncludeToRender, UnreachableCode, DeprecatedTag, MetadataParamsCheck
+  include 'modules/user/helpers/can_do_or_unauthorized', requester: current_profile, do: 'chat.inbox', entity: null, access_callback: null, redirect_anonymous_to_login: null, forbidden_partial: null
+  # platformos-check-enable ConvertIncludeToRender, UnreachableCode, DeprecatedTag, MetadataParamsCheck
+
+  assign page = context.params.page | to_positive_integer: 0
+  assign per_page = context.params.per_page | to_positive_integer: 30
+
+  function conversations = 'modules/chat/queries/conversations/search_by_participant', page: page, limit: per_page, participant_id: current_profile.id
+
+  render 'modules/chat/conversations', conversations: conversations, current: null, current_profile: current_profile
+%}

pos-module-chat/modules/chat/public/views/pages/inbox.html.liquid → pos-module-chat/modules/chat/public/views/pages/inbox.liquid

@@ -28,7 +28,7 @@ slug: inbox
       endfor
     endif
   endif
-  function conversations = 'modules/chat/queries/conversations/search_by_participant', participant_id: current_profile.id, limit: 20, page: 1
+  function conversations = 'modules/chat/queries/conversations/search_by_participant', participant_id: current_profile.id, limit: 30, page: 1
 
   if conversations.total_entries > 0
     if current_conversation and current_conversation.participants == blank

pos-module-chat/modules/chat/public/views/partials/conversation.liquid

@@ -1,15 +1,17 @@
 {% doc %}
-  @param {string} id - Conversation ID
-  @param {boolean} current - Whether this is the active conversation
-  @param {string} name - Display name of the participant
-  @param {string} image_src - Avatar image URL
-  @param {string} last_message - Last message text
-  @param {string} [timezone] - Timezone for date formatting
+  @param {number} id - conversation ID
+  @param {boolean} current - whether this is the active conversation
+  @param {string} name - display name of the participant
+  @param {string} image_src - avatar image URL
+  @param {string} last_message - last message text
+  @param {string} [timezone] - timezone for date formatting
 {% enddoc %}
+
+
 {% if current == false %}
-	<a href="/inbox?conversation_id={{ id }}">
+  <a href="/inbox?conversation_id={{ id }}">
 {% endif %}
-    <div class="pos-chat-conversationCard {% if current %} active {% endif %}" data-tc="chat-room">
+    <div class="pos-chat-conversationCard {% if current %} pos-chat-conversationCard-active {% endif %}">
       {% render 'modules/common-styling/user/avatar', size: 'l', name: name, image_src: image_src, class: null %}
         <span class="pos-chat-conversationCard-name">
           {{ name }}
@@ -24,5 +26,5 @@
         </div>
     </div>
 {% if current == false %}
-	</a>
-{% endif %}
+  </a>
+{% endif %}

pos-module-chat/modules/chat/public/views/partials/conversations.liquid

@@ -0,0 +1,39 @@
+{% doc %}
+  lists all the conversations
+
+  @param {object} conversations - the conversations object returned from the conversations query
+  @param {object} current - the current conversation object
+
+  @param {object} current_profile - the current profile object
+{% enddoc %}
+
+
+{% for conversation in conversations.results %}
+  {% liquid
+    assign participants = conversation.participants
+    assign current_participants = participants | select: id: current_profile.id
+    assign other_participants = participants | subtract_array: current_participants
+    assign from_profile = other_participants | first
+    log current
+
+    if conversation.id == current.id
+      assign conversation['current'] = true
+    else
+      assign conversation['current'] = false
+    endif
+    assign name = from_profile.first_name | append: ' ' | append: from_profile.last_name | default: from_profile.name
+    assign image_src = from_profile.avatar.photo.versions.sm
+    assign last_message = conversation.last_message.message
+  %}
+  {% if conversation.last_message %}
+    <li>
+      {% render 'modules/chat/conversation', id: conversation.id, current: conversation['current'], name: name, image_src: image_src, last_message: last_message, timezone: current_profile.timezone %}
+    </li>
+  {% endif %}
+{% endfor %}
+
+{% if conversations.has_next_page %}
+  <li class="pos-chat-conversations-more">
+    <button class="pos-button pos-button-small" data-page="{{ conversations.current_page | plus: 1 }}">Load more</button>
+  </li>
+{% endif %}

pos-module-chat/modules/chat/public/views/partials/inbox.liquid

@@ -60,29 +60,7 @@
 >
 
   <ul class="pos-chat-conversations" id="pos-chat-conversations">
-    {% for conversation in conversations.results %}
-      {% liquid
-        assign participants = conversation.participants
-        assign current_participants = participants | select: id: current_profile.id
-        assign other_participants = participants | subtract_array: current_participants
-        assign from_profile = other_participants | first
-
-        if conversation.id == current_conversation.id
-          assign current = true
-        else
-          assign current = false
-        endif
-
-        assign name = from_profile.first_name | append: ' ' | append: from_profile.last_name | default: from_profile.name
-        assign image_src = from_profile.avatar.photo.versions.sm
-        assign last_message = conversation.last_message.message
-      %}
-      {% if conversation.last_message %}
-        <li>
-          {% render 'modules/chat/conversation', id: conversation.id, current: current, name: name, image_src: image_src, last_message: last_message, timezone: current_profile.timezone %}
-        </li>
-      {% endif %}
-    {% endfor %}
+    {% render 'modules/chat/conversations', conversations: conversations, current: current_conversation, current_profile: current_profile %}
   </ul>
 
   {% if current_conversation %}
@@ -122,6 +100,8 @@
             for message in list
               if message.autor_id == current_profile.id
                 assign authored = true
+              else
+                assign authored = false
               endif
 
               render 'modules/chat/message', message: message, authored: authored, timezone: current_profile.timezone

pos-module-chat/modules/chat/public/views/partials/json/conversations/show.liquid

@@ -0,0 +1,7 @@
+{% liquid
+  if conversations.results.size == 0
+    assign conversations['message'] = 'No conversations found'
+  endif
+%}
+
+{{ conversations }}

pos-module-chat/modules/chat/public/views/partials/json/messages/show.liquid

@@ -0,0 +1,7 @@
+{% liquid
+  if messages.results.size == 0
+    assign messages['message'] = 'No messages found'
+  endif
+%}
+
+{{ messages }}

pos-module-chat/modules/chat/template-values.json

@@ -2,7 +2,7 @@
   "name": "Pos Module Chat",
   "machine_name": "chat",
   "type": "module",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "dependencies": {
     "core": "^2.1.9",
     "user": "^5.2.10",

pos-module-chat/pos-module.json

@@ -6,5 +6,5 @@
   },
   "machine_name": "chat",
   "name": "Pos Module Chat",
-  "version": "1.3.2"
+  "version": "1.3.4"
 }

pos-module-chat/pos-module.lock.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "core": "2.1.9",
     "user": "5.2.11",
-    "common-styling": "1.37.30"
+    "common-styling": "1.38.1"
   },
   "devDependencies": {},
   "registries": {

pos-module-chat/tests/messaging.spec.ts

@@ -317,7 +317,7 @@ test.describe('Testing messaging', () => {
     // Deliver three messages to the client out of chronological order and read back the
     // rendered order. created_at, not arrival order, must determine the displayed order.
     const renderedOrder = await page.evaluate(() => {
-      const chat = (window as any).pos.modules.chat;
+      const chat = (window as any).pos.modules.active.chat;
       const base = Date.parse('2020-01-01T00:00:00Z');
       const make = (text: string, offsetSeconds: number) => ({
         message: text,