Optional characteristic with default enablement implemented (Ficodes#185)

* optional characteristic with default enability implemented

* FIX: enabled chars in price component selection

---------

Co-authored-by: SHENGXING LU <slu@SHENGXINGs-MacBook-Air.local>

Author: sluFicodes

src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html

@@ -557,49 +557,42 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                         </div>
                     } @else {
                         <form class="m-4 grid grid-cols-2 gap-4" [formGroup]="charsForm">
-                            @if(!booleanCharSelected){
-                                <div>
-                                    <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                    <input data-cy="charName" formControlName="name" type="text" id="prod-name" maxLength="100"
-                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-
-                                </div>
-                            } @else {
-                                <div>
-                                    @if(nonBooleanChars.length>0){
-                                        <label for="prod-name" class="font-bold text-lg dark:text-white">Select the related characteristic's name</label>
-                                        <select id="type" (change)="onSelectBooleanName($event)"
-                                        class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                        @for(charname of nonBooleanChars; track charname){
-                                            <option value="{{charname}}">{{charname}}</option>
-                                        }    
-                                        </select>
-                                    }@else{
-                                        <div class="flex flex-items items-center align-items-middle text-gray-600 dark:text-gray-200 col-span-2">
-                                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                            </svg>
-                                            <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no characteristic available.</h3>
-                                        </div>
-                                    }
-
-                                </div>
-                            }
+                            <div>
+                                <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
+                                <input data-cy="charName" formControlName="name" type="text" id="prod-name" maxLength="100"
+                                class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+                            </div>
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._type' | translate }}</label>
                                 <select data-cy="charType" id="type" (change)="onTypeChange($event)"
                                 class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                     <option selected value="string">String</option>
                                     <option value="number">Number</option>
                                     <option value="range">Number range</option>
-                                    <option value="boolean">Boolean</option>
                                 </select>
                             </div>
                             <div class="col-span-2">
                                 <label for="description" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                                 <textarea data-cy="charDescription" id="description" formControlName="description" rows="4" maxLength="500"
                                 class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
-                            </div>                        
+                            </div>
+                            <div class="col-span-2 flex align-items-middle h-fit">
+                                <label for="is-optional" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._make_optional' | translate }}</label>
+                                <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                                    <input type="checkbox" id="is-optional" [(ngModel)]="isOptional" [ngModelOptions]="{standalone: true}" class="sr-only peer">
+                                    <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
+                                </label>
+                            </div>
+                            @if(isOptional){
+                                <div>
+                                    <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._default_value' | translate }}</label>
+                                    <select [(ngModel)]="optionalDftTrue" [ngModelOptions]="{standalone: true}"
+                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                        <option [value]="false">{{ 'CREATE_PROD_SPEC._default_false' | translate }}</option>
+                                        <option [value]="true">{{ 'CREATE_PROD_SPEC._default_true' | translate }}</option>
+                                    </select>
+                                </div>
+                            }
                         </form>
                         <div class="m-4">
                             @if(creatingChars.length>0){
@@ -642,7 +635,7 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                                     }
                                 </div>
                             }
-                            <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 || booleanCharSelected ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._add_values' | translate }}</label>
+                            <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._add_values' | translate }}</label>
                             @if(stringCharSelected){
                                 <div class="flex flex-row items-center align-items-middle">
                                     <input data-cy="charStringValue" type="text" id="value" [(ngModel)]="stringValue"
@@ -707,7 +700,7 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                                 </div>
                             }
                             <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected)" [ngClass]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+                                <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || creatingChars.length==0" [ngClass]="!charsForm.valid || creatingChars.length==0 ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
                                     {{ 'CREATE_PROD_SPEC._save_char' | translate }}
                                     <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>

src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts

@@ -94,12 +94,12 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   stringCharSelected:boolean=true;
   numberCharSelected:boolean=false;
   rangeCharSelected:boolean=false;
-  booleanCharSelected:boolean=false;
+  isOptional:boolean=false;
+  optionalDftTrue:boolean=false;
   prodChars:ProductSpecificationCharacteristic[]=[];
   finishChars:ProductSpecificationCharacteristic[]=[];
   creatingChars:CharacteristicValueSpecification[]=[];
   showCreateChar:boolean=false;
-  nonBooleanChars:string[]=[];
 
   //BUNDLE INFO:
   bundleChecked:boolean=false;
@@ -691,7 +691,6 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.stringCharSelected=true;
     this.numberCharSelected=false;
     this.rangeCharSelected=false;
-    this.booleanCharSelected=false;
     this.showPreview=false;
     this.refreshChars();
   }
@@ -1019,7 +1018,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.stringCharSelected=true;
     this.numberCharSelected=false;
     this.rangeCharSelected=false;
-    this.booleanCharSelected=false;
+    this.isOptional=false;
+    this.optionalDftTrue=false;
     this.creatingChars=[];
   }
 
@@ -1083,37 +1083,23 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       this.stringCharSelected=true;
       this.numberCharSelected=false;
       this.rangeCharSelected=false;
-      this.booleanCharSelected=false;
       this.charsForm.reset();
     }else if (event.target.value=='number'){
       this.stringCharSelected=false;
       this.numberCharSelected=true;
       this.rangeCharSelected=false;
-      this.booleanCharSelected=false;
       this.charsForm.reset();
     }else if (event.target.value=='range'){
       this.stringCharSelected=false;
       this.numberCharSelected=false;
       this.rangeCharSelected=true;
-      this.booleanCharSelected=false;
       this.charsForm.reset();
-    } else {
-      this.stringCharSelected=false;
-      this.numberCharSelected=false;
-      this.rangeCharSelected=false;
-      this.booleanCharSelected=true;
-      // Set default only if not already selected
-      if (!this.charsForm.get('name')?.value && this.nonBooleanChars.length > 0) {
-        this.charsForm.get('name')?.setValue(this.nonBooleanChars[0]+' - enabled');
-      }
     }
+    this.isOptional=false;
+    this.optionalDftTrue=false;
     this.creatingChars=[];
   }
 
-  onSelectBooleanName(event: any){
-    this.charsForm.get('name')?.setValue(event.target.value+' - enabled');
-  }
-
   addCharValue(){
     if(this.stringCharSelected){
       console.log('string')
@@ -1196,44 +1182,32 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   saveChar(){
-    if(this.booleanCharSelected){
-      this.creatingChars=[
-        {
-          isDefault:false,
-          value: true as any
-        },
-        {
-          isDefault:true,
-          value:false as any
-        }
-      ]
-    }
     if(this.charsForm.value.name!=null){
+      // Create the main characteristic
       this.prodChars.push({
         id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
         name: this.charsForm.value.name,
         description: this.charsForm.value.description != null ? this.charsForm.value.description : '',
         productSpecCharacteristicValue: this.creatingChars
       })
 
-      // Check if it's not a boolean-enabled characteristic
-      if (!this.charsForm.value.name.endsWith('- enabled')) {
-        // Look for a corresponding "enabled" version
-        const hasEnabledVersion = this.prodChars.some(
-          (item) => item.name === `${name} - enabled`
-        );
-
-        // Only push if there's no "- enabled" variant
-        if (!hasEnabledVersion) {
-          this.nonBooleanChars.push(this.charsForm.value.name);
-        }
-      } else {
-        const cleanName = this.charsForm.value.name.replace(/- enabled$/, '').trim();
-        const nonBooleanIndex = this.nonBooleanChars.findIndex(item => item === cleanName);
-        if (nonBooleanIndex !== -1) {
-          console.log('eliminar boolean')
-          this.nonBooleanChars.splice(nonBooleanIndex, 1);
-        }
+      // Create the X - enabled characteristic
+      if(this.isOptional){
+        this.prodChars.push({
+          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+          name: this.charsForm.value.name + ' - enabled',
+          description: 'Optional toggle for ' + this.charsForm.value.name,
+          productSpecCharacteristicValue: [
+            {
+              isDefault: this.optionalDftTrue,
+              value: true as any
+            },
+            {
+              isDefault: !this.optionalDftTrue,
+              value:false as any
+            }
+          ]
+        })
       }
     }
 
@@ -1243,6 +1217,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.stringCharSelected=true;
     this.numberCharSelected=false;
     this.rangeCharSelected=false;
+    this.isOptional=false;
+    this.optionalDftTrue=false;
     this.refreshChars();
     this.cdr.detectChanges();
   }
@@ -1254,37 +1230,17 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       this.prodChars.splice(index, 1);
     }
 
-    if(!char.name.endsWith('- enabled')){      
-      const nonBooleanIndex = this.nonBooleanChars.findIndex(item => item === char.name);
-      if (nonBooleanIndex !== -1) {
-        console.log('eliminar boolean')
-        this.nonBooleanChars.splice(nonBooleanIndex, 1);
-      }
+    // If deleting a main characteristic, also delete its "- enabled" variant if it exists
+    if(!char.name.endsWith('- enabled')){
       const relatedEnabledIndex = this.prodChars.findIndex(item => item.name === char.name+' - enabled');
       if (relatedEnabledIndex !== -1) {
-        console.log('eliminar')
+        console.log('eliminar related enabled')
         this.prodChars.splice(relatedEnabledIndex, 1);
       }
-    } else {
-      const cleanName = char.name.replace(/- enabled$/, '').trim();
-      const nonBooleanIndex = this.nonBooleanChars.findIndex(item => item === cleanName);
-      if (nonBooleanIndex == -1) {
-        console.log('añadir boolean')
-        this.nonBooleanChars.push(cleanName)
-      }
-    }
-
-    if(this.booleanCharSelected){
-      // Set default only if not already selected
-      if (this.nonBooleanChars.length > 0) {
-        this.charsForm.get('name')?.setValue(this.nonBooleanChars[0]+' - enabled');
-      } else {
-        this.charsForm.reset();
-      }
     }
 
     this.cdr.detectChanges();
-    console.log(this.prodChars)    
+    console.log(this.prodChars)
   }
 
   checkInput(value: string): boolean {