feat(riot-v5): add new tag-table tag

Now supports show-content-digest and is-image-remove-activated attributes

src/components/docker-registry-ui.riot

@@ -28,7 +28,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </route>
       <route path="{baseRoute}taglist/(.*)">
         <tag-list registry-url="{ state.registryUrl }" registry-name="{ state.name }"
-          image="{ router.getTagListImage() }"></tag-list>
+          image="{ router.getTagListImage() }" show-content-digest="{props.showContentDigest}"
+          is-image-remove-activated="{props.isImageRemoveActivated}"></tag-list>
       </route>
     </router>
   </main>

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

@@ -29,11 +29,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </h2>
     </div>
   </material-card>
+
   <div if="{ !state.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
+
   <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
 
+  <tag-table if="{ state.loadend }" tags="{state.tags}" asc="{state.asc}"
+    show-content-digest="{props.showContentDigest}" is-image-remove-activated="{props.isImageRemoveActivated}"
+    onReverseOrder="{ onReverseOrder }"></tag-table>
+
   <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
 
   <script>
@@ -49,9 +55,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       getPageLabels
     } from '../../scripts/utils'
     import Pagination from './pagination.riot'
+    import TagTable from './tag-table.riot'
     export default {
       components: {
-        Pagination
+        Pagination,
+        TagTable,
       },
       onBeforeMount(props) {
         this.state = {
@@ -126,6 +134,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           image.trigger('content-digest-chars', chars);
         });
       },
+
+      onReverseOrder() {
+        if (this.state.asc) {
+          this.state.tags.reverse();
+          this.state.asc = false;
+        } else {
+          this.state.tags.sort(compare);
+          this.state.asc = true;
+        }
+        this.update();
+      },
       getPageLabels,
       getNumPages
     }

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

@@ -0,0 +1,89 @@
+<!--
+Copyright (C) 2016-2019 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<tag-table>
+  <material-card class="taglist" multi-delete="{ this.multiDelete }" tags="{ getPage(props.tags.tags, this.page) }">
+    <table style="border: none;">
+      <thead>
+        <tr>
+          <th class="creation-date">Creation date</th>
+          <th class="image-size">Size</th>
+          <th id="image-content-digest-header" if="{ props.showContentDigest }">Content Digest</th>
+
+          <th id="image-tag-header"
+            class="{ props.asc ? 'material-card-th-sorted-ascending' : 'material-card-th-sorted-descending' }"
+            onclick="{() => props.onReverseOrder() }">Tag
+          </th>
+          <th class="show-tag-history">History</th>
+          <th class="remove-tag { state.toDelete > 0 ? 'delete' : '' }" if="{ props.isImageRemoveActivated }">
+            <material-checkbox ref="remove-tag-checkbox" class="indeterminate" if="{ state.toDelete === 0}"
+              title="Toggle multi-delete. Alt+Click to select all tags."></material-checkbox>
+            <material-button waves-center="true" rounded="true" waves-color="#ddd"
+              title="This will delete selected images." onclick="{ bulkDelete }" if="{ state.toDelete > 0 }">
+              <i class="material-icons">delete</i>
+            </material-button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr each="{ image in props.tags }">
+          <td class="creation-date">
+            <image-date image="{ image }" />
+          </td>
+          <td class="image-size">
+            <image-size image="{ image }" />
+          </td>
+          <td if="{ props.showContentDigest }">
+            <image-content-digest image="{ image }" />
+            <copy-to-clipboard target="digest" image="{ image }" />
+          </td>
+          <td>
+            <image-tag image="{ image }" />
+            <copy-to-clipboard target="tag" image="{ image }" />
+          </td>
+          <td class="show-tag-history">
+            <tag-history-button image="{ image }" />
+          </td>
+          <td if="{ props.isImageRemoveActivated }">
+            <remove-image multi-delete="{ state.multiDelete }" image="{ image }" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </material-card>
+  <script>
+    import {
+      Http
+    } from '../../scripts/http';
+    import {
+      getPage,
+    } from '../../scripts/utils'
+    export default {
+      components: {
+
+      },
+      onBeforeMount(props) {
+        this.state = {
+          toDelete: 0,
+          multiDelete: false
+        }
+      },
+      onMounted(props, state) {},
+      bulkDelete() {},
+      getPage
+    }
+  </script>
+</tag-table>

src/index.html

@@ -81,6 +81,8 @@
 
     const tag = document.createElement('docker-registry-ui');
     tag.setAttribute('registry-url', getRegistryURL());
+    tag.setAttribute('show-content-digest', true);
+    tag.setAttribute('is-image-remove-activated', true);
     document.getElementsByTagName('body').item(0).appendChild(tag);
   </script>
   <!-- build:js docker-registry-ui.js -->

src/index.js

@@ -4,6 +4,7 @@ import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/mat
 import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
 import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
 import MaterialButton from 'riot-mui/src/material-elements/material-button/material-button.riot';
+import MaterialCheckbox from 'riot-mui/src/material-elements/material-checkbox/material-checkbox.riot';
 
 import DockerRegistryUI from './components/docker-registry-ui.riot';
 
@@ -14,6 +15,7 @@ register('material-footer', MaterialFooter);
 register('material-navbar', MaterialNavbar);
 register('material-spinner', MaterialSpinner);
 register('material-button', MaterialButton);
+register('material-checkbox', MaterialCheckbox);
 
 const createApp = component(DockerRegistryUI);
 const tags = document.getElementsByTagName('docker-registry-ui');

src/style.scss

@@ -18,6 +18,8 @@
 @import 'riot-mui/src/material-elements/material-footer/material-footer.scss';
 @import 'riot-mui/src/material-elements/material-card/material-card.scss';
 @import 'riot-mui/src/material-elements/material-spinner/material-spinner.scss';
+@import 'riot-mui/src/material-elements/material-button/material-button.scss';
+@import 'riot-mui/src/material-elements/material-checkbox/material-checkbox.scss';
 
 @import './roboto.scss';
 @import './material-icons.scss';