Redmine

      // Restore selection after "load more" appends users to the list

      $form.on('redmine:watcherUsersUpdated', function() {

        restoreChecked();

      });

  # Number of users listed per page in the "add watcher" dialog

  WATCHER_USERS_PER_PAGE = 100 unless const_defined?(:WATCHER_USERS_PER_PAGE)

    limit = WATCHER_USERS_PER_PAGE

    offset = params[:offset].to_i

    offset = 0 if offset < 0

      # A search query already caps the result, so no "load more" is needed

      scope = Principal.assignable_watchers.limit(limit)

    end

    scope = scope.sorted.like(params[:q])

    if params[:q].blank?

      # Fetch one extra record to know whether a further page exists

      users = scope.offset(offset).limit(limit + 1).to_a

      @more_users_for_watcher = users.size > limit

      @watcher_users_next_offset = offset + limit

      users = users.first(limit)

    else

      @more_users_for_watcher = false

      users = scope.to_a

import { Controller } from "@hotwired/stimulus"

import { get } from "@rails/request.js"

// Loads the next page of a list and appends it in place of the "load more"

// trigger. The server is expected to return an HTML fragment (the next page of

// items, optionally followed by a new trigger).

export default class extends Controller {

  static targets = ["trigger"]

  static values = { afterLoadEvent: String }

  async load(event) {

    event.preventDefault()

    // Keep a direct reference to the clicked trigger: the fragment we insert may

    // contain a new trigger, so resolving triggerTarget again would be ambiguous.

    const trigger = this.triggerTarget

    const response = await get(event.currentTarget.href, { responseKind: "html" })

    if (!response.ok) {

      return

    }

    trigger.insertAdjacentHTML("beforebegin", await response.html)

    trigger.remove()

    this.dispatchAfterLoadEvent()

  }

  dispatchAfterLoadEvent() {

    if (this.hasAfterLoadEventValue) {

      this.element.dispatchEvent(new CustomEvent(this.afterLoadEventValue, { bubbles: true }))

    }

  }

}

  <div id="users_for_watcher"

       data-controller="load-more"

       data-load-more-after-load-event-value="redmine:watcherUsersUpdated">

    <%= render :partial => 'watchers/users_for_watcher', :locals => {:users => users} %>

<%= principals_check_box_tags 'watcher[user_ids][]', users %>

<% if @more_users_for_watcher %>

  <p class="watcher-more-users" data-load-more-target="trigger">

    <%= link_to(

          l(:label_more),

          url_for(

            :controller => 'watchers',

            :action => 'autocomplete_for_user',

            :object_type => params[:object_type],

            :object_id => params[:object_id],

            :project_id => params[:project_id],

            :q => params[:q],

            :offset => @watcher_users_next_offset

          ),

          :data => {:action => 'load-more#load'}

        ) %>

  </p>

<% end %>

<%= render :partial => 'watchers/users_for_watcher', :locals => {:users => @users} %>

  label_more: More

  label_more: さらに表示

  def test_autocomplete_without_query_should_not_paginate_within_a_page

    @request.session[:user_id] = 2

    get :autocomplete_for_user, :params => {:project_id => 'ecookbook'}, :xhr => true

    assert_response :success

    assert_select 'input[name=?]', 'watcher[user_ids][]', :count => 2

    assert_select 'p.watcher-more-users', :count => 0

  end

  def test_autocomplete_without_query_should_load_more_users

    project = Project.find(1)

    WatchersController::WATCHER_USERS_PER_PAGE.times do

      User.add_to_project(User.generate!, project)

    end

    @request.session[:user_id] = 2

    get :autocomplete_for_user, :params => {:project_id => 'ecookbook'}, :xhr => true

    assert_response :success

    assert_select 'input[name=?]', 'watcher[user_ids][]',

                  :count => WatchersController::WATCHER_USERS_PER_PAGE

    assert_select 'p.watcher-more-users a[data-action=?][href*=?]',

                  'load-more#load', "offset=#{WatchersController::WATCHER_USERS_PER_PAGE}"

    # The old submit-style onclick handler must not be used

    assert_select 'a[onclick]', false

    get :autocomplete_for_user,

        :params => {:project_id => 'ecookbook',

                    :offset => WatchersController::WATCHER_USERS_PER_PAGE},

        :xhr => true

    assert_response :success

    # eCookbook has 2 fixture watchers, so the second page holds the remaining 2

    assert_select 'input[name=?]', 'watcher[user_ids][]', :count => 2

    assert_select 'p.watcher-more-users', :count => 0

  end

  def test_autocomplete_with_query_should_not_paginate

    (WatchersController::WATCHER_USERS_PER_PAGE + 1).times do |i|

      User.generate!(:firstname => 'Loadmore', :lastname => "User#{i}")

    end

    @request.session[:user_id] = 2

    get :autocomplete_for_user,

        :params => {:project_id => 'ecookbook', :q => 'loadmore'}, :xhr => true

    assert_response :success

    # A search query is capped by limit and never shows a "load more" trigger

    assert_select 'input[name=?]', 'watcher[user_ids][]',

                  :count => WatchersController::WATCHER_USERS_PER_PAGE

    assert_select 'p.watcher-more-users', :count => 0

  end

  def test_new_should_wire_load_more_controller

    @request.session[:user_id] = 2

    get :new, :params => {:object_type => 'issue', :object_id => '2'}, :xhr => true

    assert_response :success

    assert_match /data-controller=\\"load-more\\"/, response.body

  end