We-Eat/client/src/main/scala/com/weEat/modules/PageSelect.scala

package com.weEat.modules

import mhtml.{Rx,Var}

case class PageSelect(
  numPages: Rx[Int],
  revealedRadius: Rx[Int] = Rx(3)
) extends Module {
  private val _page = Var[Int](1)

  // TODO: Add buttons for First/Last page

  // TODO: Allow the user to click on `...` to temporarily expand the upper or
  // lower reveal boundary
  private val _minRevealed = _page.zip(revealedRadius).map({
    case (p, r) => 1.max(p - r)
  })
  private val _maxRevealed = _page.zip(revealedRadius).zip(numPages).map({
    case ((p, r), n) => n.min(p + r)
  })

  val page = _page.zip(numPages).map({ case (idx, pages) => idx.min(pages) - 1 })

  private def idxToString(targIdx: Int, str: String) =
    _page.map({page: Int => if (page == targIdx) str else ""})

  val render = {
    <ul class="pagination">
      <li class={idxToString(1, " disabled").map("page-item"+_)}>
        <a class="page-link" href="#" onclick={ () => _page.update(_ - 1)}>
          <span>{"<"}</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>
      <li class="page-item disabled" style={_minRevealed.map({ min =>
        if (min <= 1) "display: none;" else ""
      })}><a class="page-link" href="#">...</a></li>
      {
        _minRevealed.zip(_maxRevealed).map({
          case (min, max) => for (i <- (min to max)) yield {
            <li class={idxToString(i, " active").map("page-item"+_)}>
              <a class="page-link" href="#" onclick={ () => _page.update(_ => i)}>
                {i.toString}
              </a>
            </li>
          }
        })
      }
      <li class="page-item disabled" style={_maxRevealed.zip(numPages).map({
        case (max, n) => if (n <= max) "display: none;" else ""
      })}><a class="page-link" href="#">...</a></li>
    <li class={numPages.flatMap({targIdx =>
      _page.map({page: Int => if (page >= targIdx) " disabled" else ""})
    }).map("page-item"+_)}>
        <a class="page-link" href="#" onclick={ () => _page.update(_ + 1)}>
          <span>{">"}</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    </ul>
  }
}