feat(taglist-order): add new option `taglist-order`

src/components/docker-registry-ui.riot

@@ -55,6 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           filter-results="{ state.filter }"
           on-authentication="{ onAuthentication }"
           use-control-cache-header="{ truthy(props.useControlCacheHeader) }"
+          taglist-order="{ taglistOrderParser(props.taglistOrder) }"
         ></tag-list>
       </route>
       <route path="{baseRoute}taghistory/(.*)">
@@ -129,6 +130,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import { stripHttps, getRegistryServers, setRegistryServers, truthy, stringToArray } from '../scripts/utils';
     import router from '../scripts/router';
     import { loadTheme } from '../scripts/theme';
+    import { taglistOrderParser } from '../scripts/taglist-order';
 
     export default {
       components: {
@@ -241,6 +243,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       version,
       truthy,
       stringToArray,
+      taglistOrderParser,
     };
   </script>
   <style>

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

@@ -61,11 +61,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
   <script>
     import { Http } from '../../scripts/http';
-    import { DockerImage, compare } from '../../scripts/docker-image';
+    import { DockerImage } from '../../scripts/docker-image';
     import { getNumPages, getPageLabels } from '../../scripts/utils';
     import Pagination from './pagination.riot';
     import TagTable from './tag-table.riot';
     import router from '../../scripts/router';
+    import { getTagComparator } from '../../scripts/taglist-order';
+
     export default {
       components: {
         Pagination,
@@ -86,6 +88,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         // this may be run before the final document size is available, so schedule
         //  a correction once everything is set up.
         window.requestAnimationFrame(this.onResize);
+        this.tagComparator = getTagComparator(props.taglistOrder);
       },
       display(props, state) {
         state.tags = [];
@@ -106,7 +109,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                     useControlCacheHeader: props.useControlCacheHeader,
                   })
               )
-              .sort(compare);
+              .sort(self.tagComparator);
             window.requestAnimationFrame(self.onResize);
             self.update({
               page: Math.min(state.page, getNumPages(tags)),
@@ -168,7 +171,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           this.state.tags.reverse();
           this.state.asc = false;
         } else {
-          this.state.tags.sort(compare);
+          this.state.tags.sort(this.tagComparator);
           this.state.asc = true;
         }
         this.update();

src/index.html

@@ -47,6 +47,7 @@
       show-catalog-nb-tags="${SHOW_CATALOG_NB_TAGS}"
       history-custom-labels="${HISTORY_CUSTOM_LABELS}"
       use-control-cache-header="${USE_CONTROL_CACHE_HEADER}"
+      taglist-order="${TAGLIST_ORDER}
       theme="${THEME}"
       theme-primary-text="${THEME_PRIMARY_TEXT}"
       theme-neutral-text="${THEME_NEUTRAL_TEXT}"
@@ -73,6 +74,7 @@
       show-catalog-nb-tags="true"
       history-custom-labels="first_custom_labels,second_custom_labels"
       use-control-cache-header="false"
+      taglist-order="alpha-asc;num-desc"
       theme="auto"
       theme-primary-text=""
       theme-neutral-text=""

src/scripts/docker-image.js

@@ -18,33 +18,6 @@ import { Http } from './http';
 import { isDigit, eventTransfer, ERROR_CAN_NOT_READ_CONTENT_DIGEST } from './utils';
 import observable from '@riotjs/observable';
 
-const tagReduce = (acc, e) => {
-  if (acc.length > 0 && isDigit(acc[acc.length - 1].charAt(0)) == isDigit(e)) {
-    acc[acc.length - 1] += e;
-  } else {
-    acc.push(e);
-  }
-  return acc;
-};
-
-export function compare(e1, e2) {
-  const tag1 = e1.tag.match(/./g).reduce(tagReduce, []);
-  const tag2 = e2.tag.match(/./g).reduce(tagReduce, []);
-
-  for (var i = 0; i < tag1.length && i < tag2.length; i++) {
-    const compare = tag1[i].localeCompare(tag2[i]);
-    if (isDigit(tag1[i].charAt(0)) && isDigit(tag2[i].charAt(0))) {
-      const diff = tag1[i] - tag2[i];
-      if (diff != 0) {
-        return diff;
-      }
-    } else if (compare != 0) {
-      return compare;
-    }
-  }
-  return e1.tag.length - e2.tag.length;
-}
-
 export class DockerImage {
   constructor(name, tag, { list, registryUrl, onNotify, onAuthentication, useControlCacheHeader }) {
     this.name = name;