Error badge

Author: maimux2x

web/app/components/details-count.gts

@@ -1,3 +1,5 @@
+import NumberBadge from 'repository/components/number-badge';
+
 import type { TOC } from '@ember/component/template-only';
 import type { components } from 'schema/openapi';
 
@@ -9,13 +11,7 @@ interface Signature {
   };
 }
 
-export default <template>
-  {{#let (detailsCount @results) as |count|}}
-    {{#if count}}
-      <span class="badge bg-secondary">{{count}}</span>
-    {{/if}}
-  {{/let}}
-</template> satisfies TOC<Signature>;
+export default <template><NumberBadge @number={{detailsCount @results}} /></template> satisfies TOC<Signature>;
 
 function detailsCount(results: Results) {
   return results.reduce((acc, { details }) => acc + details.length, 0);

web/app/components/number-badge.gts

@@ -0,0 +1,13 @@
+import type { TOC } from '@ember/component/template-only';
+
+interface Signature {
+  Args: {
+    number: number;
+  };
+}
+
+export default <template>
+  {{#if @number}}
+    <span class="badge bg-secondary">{{@number}}</span>
+  {{/if}}
+</template> satisfies TOC<Signature>;

web/app/templates/accession-renewal.gts

@@ -5,6 +5,7 @@ import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 
+import NumberBadge from 'repository/components/number-badge';
 import ProgressLabel from 'repository/components/progress-label';
 import ValidityBadge from 'repository/components/validity-badge';
 
@@ -80,10 +81,24 @@ export default class extends Component<Signature> {
 
       <div>
         <dt>Validity</dt>
-        <dd><ValidityBadge @validity={{@model.renewal.validity}} /></dd>
+
+        <dd>
+          <ValidityBadge @validity={{@model.renewal.validity}} />
+          <NumberBadge @number={{@model.renewal.validation_details.length}} />
+        </dd>
       </div>
     </dl>
 
+    {{#if @model.renewal.file}}
+      <h3>File</h3>
+
+      <button
+        type="button"
+        class="btn btn-link p-0 mb-3"
+        {{on "click" (fn this.downloadFile @model.renewal.file.url)}}
+      >{{@model.renewal.file.filename}}</button>
+    {{/if}}
+
     {{#if @model.renewal.validation_details.length}}
       <h3>Validation Results</h3>
 
@@ -105,14 +120,5 @@ export default class extends Component<Signature> {
         </tbody>
       </table>
     {{/if}}
-
-    {{#if @model.renewal.file}}
-      <h3>File</h3>
-      <button
-        type="button"
-        class="btn btn-link p-0"
-        {{on "click" (fn this.downloadFile @model.renewal.file.url)}}
-      >{{@model.renewal.file.filename}}</button>
-    {{/if}}
   </template>
 }

web/app/templates/accession/index.gts

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { LinkTo } from '@ember/routing';
 
 import AccessionSummary from 'repository/components/accession-summary';
+import NumberBadge from 'repository/components/number-badge';
 import ProgressLabel from 'repository/components/progress-label';
 import ValidityBadge from 'repository/components/validity-badge';
 import formatDate from 'repository/helpers/format-datetime';
@@ -40,50 +41,56 @@ export default class extends Component<Signature> {
       Renew Accession
     </LinkTo>
 
-    <table class="table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Created</th>
-          <th>Started</th>
-          <th>Finished</th>
-          <th>Progress</th>
-          <th>Validity</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {{#each this.renewals as |renewal|}}
+    {{#if this.renewals}}
+      <table class="table">
+        <thead>
           <tr>
-            <td>
-              <LinkTo @route="accession_renewal" @model={{renewal.id}}>
-                #{{renewal.id}}
-              </LinkTo>
-            </td>
-
-            <td>{{formatDate renewal.created_at}}</td>
-
-            <td>
-              {{#if renewal.started_at}}
-                {{formatDate renewal.started_at}}
-              {{else}}
-                -
-              {{/if}}
-            </td>
-
-            <td>
-              {{#if renewal.finished_at}}
-                {{formatDate renewal.finished_at}}
-              {{else}}
-                -
-              {{/if}}
-            </td>
-
-            <td><ProgressLabel @progress={{renewal.progress}} /></td>
-            <td><ValidityBadge @validity={{renewal.validity}} /></td>
+            <th>ID</th>
+            <th>Created</th>
+            <th>Started</th>
+            <th>Finished</th>
+            <th>Progress</th>
+            <th>Validity</th>
           </tr>
-        {{/each}}
-      </tbody>
-    </table>
+        </thead>
+
+        <tbody>
+          {{#each this.renewals as |renewal|}}
+            <tr>
+              <td>
+                <LinkTo @route="accession_renewal" @model={{renewal.id}}>
+                  #{{renewal.id}}
+                </LinkTo>
+              </td>
+
+              <td>{{formatDate renewal.created_at}}</td>
+
+              <td>
+                {{#if renewal.started_at}}
+                  {{formatDate renewal.started_at}}
+                {{else}}
+                  -
+                {{/if}}
+              </td>
+
+              <td>
+                {{#if renewal.finished_at}}
+                  {{formatDate renewal.finished_at}}
+                {{else}}
+                  -
+                {{/if}}
+              </td>
+
+              <td><ProgressLabel @progress={{renewal.progress}} /></td>
+
+              <td>
+                <ValidityBadge @validity={{renewal.validity}} />
+                <NumberBadge @number={{renewal.validation_details.length}} />
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    {{/if}}
   </template>
 }