feat(taglist): add new option TAGLIST_PAGE_SIZE (#318)

README.md

@@ -102,6 +102,7 @@ Some env options are available for use this interface for **only one server** (w
 - `CATALOG_DEFAULT_EXPANDED`: Expand by default all repositories in catalog (see [#302](https://github.com/Joxit/docker-registry-ui/issues/302)). (default: `false`). Since 2.5.0
 - `CATALOG_MIN_BRANCHES`: Set the minimum repository/namespace to expand (e.g. `joxit/docker-registry-ui` `joxit/` is the repository/namespace). Can be 0 to disable branching. (see [#319](https://github.com/Joxit/docker-registry-ui/pull/319)). (default: `1`). Since 2.5.0
 - `CATALOG_MAX_BRANCHES`: Set the maximum repository/namespace to expand (e.g. `joxit/docker-registry-ui` `joxit/` is the repository/namespace). Can be 0 to disable branching. (see [#319](https://github.com/Joxit/docker-registry-ui/pull/319)). (default: `1`). Since 2.5.0
+- `TAGLIST_PAGE_SIZE`: Set the number of tags to display in one page. (default: `100`). Since 2.5.0
 
 There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-standalone/).
 

bin/90-docker-registry-ui.sh

@@ -15,6 +15,7 @@ sed -i "s~\${TAGLIST_ORDER}~${TAGLIST_ORDER}~" index.html
 sed -i "s~\${CATALOG_DEFAULT_EXPANDED}~${CATALOG_DEFAULT_EXPANDED}~" index.html
 sed -i "s~\${CATALOG_MIN_BRANCHES}~${CATALOG_MIN_BRANCHES}~" index.html
 sed -i "s~\${CATALOG_MAX_BRANCHES}~${CATALOG_MAX_BRANCHES}~" index.html
+sed -i "s~\${TAGLIST_PAGE_SIZE}~${TAGLIST_PAGE_SIZE}~" index.html
 
 grep -o 'THEME[A-Z_]*' index.html | while read e; do
   sed -i "s~\${$e}~$(printenv $e)~" index.html

src/components/docker-registry-ui.riot

@@ -74,6 +74,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           on-authentication="{ onAuthentication }"
           use-control-cache-header="{ truthy(props.useControlCacheHeader) }"
           taglist-order="{ props.taglistOrder }"
+          tags-per-page="{ props.tagsPerPage }"
         ></tag-list>
       </route>
       <route path="{baseRoute}taghistory/(.*)">

src/components/tag-list/tag-list.riot

@@ -39,7 +39,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <material-spinner></material-spinner>
   </div>
 
-  <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
+  <pagination
+    pages="{ getPageLabels(state.page, getNumPages(state.tags, props.tagsPerPage)) }"
+    onPageUpdate="{onPageUpdate}"
+  ></pagination>
 
   <tag-table
     if="{ state.loadend }"
@@ -54,10 +57,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     on-notify="{ props.onNotify }"
     filter-results="{ props.filterResults }"
     on-authentication="{ props.onAuthentication }"
+    tags-per-page="{ props.tagsPerPage }"
   >
   </tag-table>
 
-  <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
+  <pagination
+    pages="{ getPageLabels(state.page, getNumPages(state.tags, props.tagsPerPage)) }"
+    onPageUpdate="{onPageUpdate}"
+  ></pagination>
 
   <script>
     import { Http } from '../../scripts/http';

src/components/tag-list/tag-table.riot

@@ -267,7 +267,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         });
       },
       getPage(tags, page) {
-        const sortedTags = getPage(tags, page);
+        const sortedTags = getPage(tags, page, this.props.tagsPerPage);
         if (this.state.orderType === 'date') {
           sortedTags.sort((e1, e2) =>
             !this.state.desc

src/index.html

@@ -62,6 +62,7 @@
       theme-footer-text="${THEME_FOOTER_TEXT}"
       theme-footer-neutra-text="${THEME_FOOTER_NEUTRAL_TEXT}"
       theme-footer-background="${THEME_FOOTER_BACKGROUND}"
+      tags-per-page="${TAGLIST_PAGE_SIZE}"
     >
     </docker-registry-ui>
     <!-- endbuild -->
@@ -92,6 +93,7 @@
       theme-footer-text=""
       theme-footer-neutra-text=""
       theme-footer-background=""
+      tags-per-page=""
     >
     </docker-registry-ui>
     <!-- endbuild -->