feat(ui): display minimum and maximum values

Feature request. Refs springwolf#378
aerfus · Jan 1, 2024 · 4a4a9da · 4a4a9da
1 parent dcb0420
commit 4a4a9da
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.css b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
@@ -12,6 +12,10 @@
   color: red;
 }
 
+.type-content {
+  display: flex;
+}
+
 .type {
   color: #55a;
 }
@@ -20,3 +24,11 @@
   color: #6b6b6b;
   font-style: italic;
 }
+
+.range {
+  background-color: rgb(128, 90, 213);
+  color: rgb(255, 255, 255);
+  margin: 0 8 0 8;
+  padding: 2 4 2 4;
+  border-radius: 4px;
+}
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.html b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
@@ -41,7 +41,19 @@
 </table>
 
 <ng-template #valueContent let-value="value">
-  <span class="type" *ngIf="value.type != 'array'">{{ value.type }}</span>
+  <div class="type-content">
+    <span class="type" *ngIf="value.type != 'array'">{{ value.type }}</span>
+
+    <ng-container
+      [ngTemplateOutlet]="rangeContent"
+      [ngTemplateOutletContext]="{
+        minimum: value.minimum,
+        maximum: value.maximum
+      }"
+    >
+    </ng-container>
+  </div>
+
   <span class="type" *ngIf="value.refTitle">
     <a [href]="value.anchorUrl">{{ value.refTitle }}</a>
   </span>
@@ -56,3 +68,15 @@
     </mat-option>
   </mat-select>
 </ng-template>
+
+<ng-template #rangeContent let-minimum="minimum" let-maximum="maximum">
+  <span class="range" *ngIf="minimum !== undefined && maximum === undefined">
+    &gt;= {{ minimum }}
+  </span>
+  <span class="range" *ngIf="minimum === undefined && maximum !== undefined">
+    &lt;= {{ maximum }}
+  </span>
+  <span class="range" *ngIf="minimum !== undefined && maximum !== undefined">
+    [ {{ minimum }} .. {{ maximum }} ]
+  </span>
+</ng-template>