From a8c5f9105a3939c5f57e4326ce82219254df849b Mon Sep 17 00:00:00 2001
From: HuyNVN <huynvn97@gmail.com>
Date: Thu, 26 Sep 2024 13:38:55 +0700
Subject: [PATCH] update style input field for multivalue

---
 .../inputfield/inputfield.component.css       | 19 ++++++++
 .../inputfield/inputfield.component.html      | 43 +++++++++++++++----
 .../inputfield/inputfield.component.ts        |  4 +-
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/app/components/inputfield/inputfield.component.css b/src/app/components/inputfield/inputfield.component.css
index 51fc361..eff8b45 100644
--- a/src/app/components/inputfield/inputfield.component.css
+++ b/src/app/components/inputfield/inputfield.component.css
@@ -8,6 +8,7 @@
 
 .card {
     padding: 10px 5px !important;
+    border: 1px solid rgba(225, 228, 229, 1);
 }
 
 .card-body {
@@ -28,4 +29,22 @@
     line-height: 16.94px;
     text-align: left;
     color: rgba(78, 95, 111, 1);
+}
+
+.input-group-for-children {
+    background-color: #fff;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255, 255, 255, 1);
+    overflow: hidden;
+}
+
+/* .input-group-for-children label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+} */
+
+.input-group-for-children .form-control {
+    background-color: transparent;
+    border: none !important;
 }
\ No newline at end of file
diff --git a/src/app/components/inputfield/inputfield.component.html b/src/app/components/inputfield/inputfield.component.html
index 19d4ed9..5482918 100644
--- a/src/app/components/inputfield/inputfield.component.html
+++ b/src/app/components/inputfield/inputfield.component.html
@@ -1,10 +1,7 @@
 <!--Primitive values-->
-<div class="form-group my-2" *ngIf="!getType().startsWith('array') && !getType().startsWith('attribute')">
+<div class="form-group my-2" *ngIf="!isChildren && !getType().startsWith('array') && !getType().startsWith('attribute')">
   <!--Name-->
   <label *ngIf="name" style="margin-bottom: 10px;">{{ name }}</label>
-  <!-- <div>
-    <span class="input-group-text" *ngIf="name">{{ name }}</span>
-  </div> -->
   <div class="input-group">
     <!--Input-->
     <input class="form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" type="text"     [disabled]="static" *ngIf="getType() == 'string'" placeholder="Input text">
@@ -29,15 +26,45 @@
   </div>
 </div>
 
+<div class="input-group my-2" style="flex-wrap: unset;" *ngIf="isChildren && !getType().startsWith('array') && !getType().startsWith('attribute')">
+  
+  <div class="input-group input-group-for-children d-flex justify-content-center align-items-center">
+    <!--Name-->
+    <div class="d-flex justify-content-center align-items-center" style="width: 50px; height: 80% !important; border-right: 1px solid rgba(225, 228, 229, 1) !important;">
+      <label *ngIf="name">{{ name }}</label>
+    </div>
+    <!--Input-->
+    <input class="form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" type="text"     [disabled]="static" *ngIf="getType() == 'string'" placeholder="Input text">
+    <input class="form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" type="number"   [disabled]="static" *ngIf="getType() == 'number'" placeholder="0">
+    <div class="input-group-text" *ngIf="getType() == 'boolean'">
+      <input class="form-check-input mt-0" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" type="checkbox" [disabled]="static" placeholder="Select value">
+    </div>
+    <select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" class="form-control" [disabled]="static" *ngIf="getType() == 'enum'">
+      <option *ngFor="let val of options" [value]="val">{{val}}</option>
+    </select>
+    <select multiple class="form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" [size]="options.length"  [disabled]="static" *ngIf="getType() == 'enum-multi'">
+      <option *ngFor="let val of options" [value]="val">{{val}}</option>
+    </select>
+  </div>
+
+   <!--Add/delete-->
+    <button class="btn btn-outline-secondary btn-trash-circle" type="button" (click)="deleteCallback(refID)" *ngIf="deleteCallback != null">
+    <span class="fa fa-trash"></span>
+    </button>
+    <button class="btn btn-outline-secondary btn-trash-circle" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
+      <span class="fa fa-plus"></span>
+    </button>
+</div>
+
 <!--Arrays-->
-<div class="card my-2 mt-4 {{getType().startsWith('array') && isChild ? 'bg-surface-secondary': 'bg-surface' }}" *ngIf="getType().startsWith('array')">
-  <div class="card-header {{getType().startsWith('array') && isChild ? 'card-header-child' : ''}}" style="border-bottom: none;">
+<div class="card my-2 mt-4 {{getType().startsWith('array') && hasChildren ? 'bg-surface-secondary': 'bg-surface' }}" *ngIf="getType().startsWith('array')">
+  <div class="card-header {{getType().startsWith('array') && hasChildren ? 'card-header-child' : ''}}" style="border-bottom: none;">
     {{name}}
     <button class="btn btn-delete-complex-attribute float-end bg-transparent border-0 position-absolute" style="right: 0; top: 0;" type="button" (click)="deleteCallback(refID)" *ngIf="deleteCallback != null"><span class="fa fa-trash"></span></button>
   </div>
   <div class="card-body">
     <div *ngFor="let item of value; let i=index" class="card-element ">
-      <app-inputfield [type]="elemType(getType())" [name]="i+1" [(value)]="value[i]" [deleteCallback]="delete" [refID]="i" [static]="true"></app-inputfield>
+      <app-inputfield [type]="elemType(getType())" [name]="i+1" [(value)]="value[i]" [deleteCallback]="delete" [refID]="i" [static]="true" isChildren="true"></app-inputfield>
     </div>
   </div>
   <div class="card-footer">
@@ -48,7 +75,7 @@
 
 <!--Attributes-->
 <app-inputfield [name]="value['key']" [(value)]="value['value']" [deleteCallback]="deleteCallback" [refID]="refID"
-    *ngIf="getType().startsWith('attribute') && addCallback == null" [isChild]="true"></app-inputfield>
+    *ngIf="getType().startsWith('attribute') && addCallback == null" [hasChildren]="true"></app-inputfield>
 <div class="input-group my-2" *ngIf="getType().startsWith('attribute') && addCallback != null">
   <input class="form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" type="text"     [disabled]="static">
   <select #newType class="form-control">
diff --git a/src/app/components/inputfield/inputfield.component.ts b/src/app/components/inputfield/inputfield.component.ts
index 0ac9671..f04c368 100644
--- a/src/app/components/inputfield/inputfield.component.ts
+++ b/src/app/components/inputfield/inputfield.component.ts
@@ -14,8 +14,8 @@ export class InputfieldComponent implements OnInit {
   @Input() refID;    // Reference for deletion (e.g. Array index)
   @Input() addCallback; // A callback for addition
   @Input() static = false; // Whether the object cannot be edited (only applies to primitives)
-  @Input() isChild = false; // Is this field is child of any input field
-
+  @Input() hasChildren = false; // Is this a input has children
+  @Input() isChildren = false; // Is this field is child of any input field
   @Output() valueChange: EventEmitter<any> = new EventEmitter();
 
   constructor() { }