From 4a4a9da0a35d0192600624eb37d9fdb39a0af76c Mon Sep 17 00:00:00 2001
From: Nikita Marunko <aerfus@yandex.ru>
Date: Mon, 1 Jan 2024 22:38:19 +0900
Subject: [PATCH] feat(ui): display minimum and maximum values

Feature request.

Refs #378
---
 .../schemas/schema/schema.component.css       | 12 +++++++++
 .../schemas/schema/schema.component.html      | 26 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 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
index 92adde268..19d2fefe5 100644
--- 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
index 3ec755a00..67af11ea9 100644
--- 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>