ADD boolean chars as checkboxes on price simulator (#134)

* ADD boolean chars as checkboxes on price simulator

* Disable select when char is disabled

Author: laraminones

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

@@ -1115,11 +1115,11 @@ export class CreateProductSpecComponent implements OnInit {
     if(this.booleanCharSelected){
       this.creatingChars=[
         {
-          isDefault:true,
+          isDefault:false,
           value: true as any
         },
         {
-          isDefault:false,
+          isDefault:true,
           value:false as any
         }
       ]

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

@@ -1329,11 +1329,11 @@ export class UpdateProductSpecComponent implements OnInit {
     if(this.booleanCharSelected){
       this.creatingChars=[
         {
-          isDefault:true,
+          isDefault:false,
           value: true as any
         },
         {
-          isDefault:false,
+          isDefault:true,
           value:false as any
         }
       ]

src/app/shared/characteristic/characteristic.component.html

@@ -4,7 +4,7 @@
       <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ characteristic.name }}</h4>
       <markdown class="text-gray-500 dark:text-gray-400 text-wrap break-all" [data]="characteristic.description"></markdown>
     </div>
-
+    @if(!isDisabled){
     <!-- Slider -->
     @if (isSlider()){
       <div class="flex items-center space-x-2">
@@ -32,6 +32,7 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
         </select>
       </div>
     }
+    }
 
 } @else {
   <div class="grid grid-cols-2 items-center">

src/app/shared/characteristic/characteristic.component.ts

@@ -35,6 +35,8 @@ interface Characteristic {
 export class CharacteristicComponent implements OnInit {
   @Input() characteristic!: ProductSpecificationCharacteristic;
   @Input() readOnly: boolean = false;
+  @Input() isDisabled: boolean = false;
+  @Input() canBeDisabled: boolean = false;
   @Output() valueChange = new EventEmitter<any>();
 
   control = new FormControl();

src/app/shared/price-plan-drawer/price-plan-drawer.component.html

@@ -61,15 +61,33 @@ <h5 id="drawer-right-label" class="inline-flex items-center text-wrap break-all
         <p class="mt-6 text-sm text-gray-500 dark:text-gray-400">This price plan has an associate profile. That means that the following characteristics are already set for you.</p>
         <div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800">
           @for (ch of filteredCharacteristics ; track ch.id) {
+            @if(!ch.name?.endsWith('- enabled')){
             <app-characteristic [characteristic]="ch" [readOnly]="true" (valueChange)="onValueChange($event)"></app-characteristic>
+            }
           }
         </div>
       } @else if(filteredCharacteristics.length > 0) {
         <p class="mt-6 text-sm text-gray-500 dark:text-gray-400">Please select the characteristics you need to suit this offer to you.</p>
         <div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800">
-          @for (ch of filteredCharacteristics ; track ch.id) {
-            @if (!disabledCharacteristics.includes(ch.id)) {
-            <app-characteristic [characteristic]="ch" [readOnly]="false" (valueChange)="onValueChange($event)"></app-characteristic>
+          @for (ch of filteredCharacteristics ; track ch.id; let i = $index) {
+            @if(!ch.name?.endsWith('- enabled')){
+              <div class="flex flex-row w-full items-start">
+                @if(canBeDisabledChars.includes(ch.id)){
+                  <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start my-4 mr-2">
+                    <input type="checkbox" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
+                    <div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+                  </label>
+                }
+                <div class="flex w-full">
+                  <app-characteristic
+                  [characteristic]="ch"
+                  [readOnly]="false"
+                  [isDisabled]="disabledCharacteristics.includes(ch.id)"
+                  [canBeDisabled]="canBeDisabledChars.includes(ch.id)"
+                  (valueChange)="onValueChange($event)">
+                  </app-characteristic>
+                </div>
+              </div>
             }
           }
         </div>

src/app/shared/price-plan-drawer/price-plan-drawer.component.ts

@@ -65,6 +65,7 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
   characteristics: ProductSpecificationCharacteristic[] = []; // Características dinámicas
   filteredCharacteristics: ProductSpecificationCharacteristic[] = [];
   disabledCharacteristics: any[] = [];
+  canBeDisabledChars: any[]=[];
 
   @HostListener('document:keydown.escape', ['$event'])
   handleEscape(event: KeyboardEvent): void {
@@ -231,15 +232,46 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
 
         characteristicsGroup.addControl(
           characteristic.id,
-          this.fb.control(defaultValue || null, Validators.required)
+          this.fb.control(defaultValue ?? null, Validators.required)
         );
+        if(!characteristic.name?.endsWith('- enabled') && this.filteredCharacteristics.some((char => char.name === characteristic.name+' - enabled'))){
+          this.canBeDisabledChars.push(characteristic.id)
+          this.disabledCharacteristics.push(characteristic.id)
+        }
       }
     });
 
     this.form.setControl('characteristics', characteristicsGroup);
   }
-  
-  
+
+  onToggleChange(event: Event, charName: any): void {
+    const inputElement = event.target as HTMLInputElement;
+    const isChecked = inputElement.checked;
+    let char = this.filteredCharacteristics.find(char => char.name == charName+' - enabled')
+    const characteristicsGroup = this.form.get('characteristics') as FormGroup;
+    if(char && char.id)
+    characteristicsGroup.get(char.id)?.setValue(isChecked)
+
+    const cleanName = char?.name?.replace(/- enabled$/, '').trim();
+    const disabledChar = this.filteredCharacteristics.find(
+      item => item.name === cleanName
+    );
+    //const isSelected = event.selectedValue === true || event.selectedValue === 'true';
+    if (disabledChar) {
+      if (!isChecked) {
+        // Add it if it's not already in the array
+        if (!this.disabledCharacteristics.includes(disabledChar.id)) {
+          this.disabledCharacteristics.push(disabledChar.id);
+        }
+      } else {
+        // Remove it if it exists
+        this.disabledCharacteristics = this.disabledCharacteristics.filter(
+          id => id !== disabledChar.id
+        );
+      }
+    }
+    this.calculatePrice();
+  }
 
   // Handle price plan selection
   async onPricePlanSelected(pricePlan: any) {
@@ -326,7 +358,7 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
     const characteristicsGroup = this.form.get('characteristics') as FormGroup;
     characteristicsGroup.get(event.characteristicId)?.setValue(event.selectedValue);
 
-    let char = this.filteredCharacteristics.find(item => item.id === event.characteristicId);
+    /*let char = this.filteredCharacteristics.find(item => item.id === event.characteristicId);
     if (char?.name?.endsWith('- enabled')) {
       const cleanName = char.name.replace(/- enabled$/, '').trim();
       const disabledChar = this.filteredCharacteristics.find(
@@ -348,7 +380,7 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
         }
       }
     }    
-    console.log(char)
+    console.log(char)*/
     this.calculatePrice();
   }
 
@@ -407,14 +439,19 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
         if(value==null && valueType=='number'){
           value=0
         }
-  
-        this.orderChars.push({
-          "name": this.filteredCharacteristics[idx].name,
-          "value": value,
-          "valueType": valueType,
-        })
+
+        if(!this.filteredCharacteristics[idx].name?.endsWith('- enabled')){
+          this.orderChars.push({
+            "name": this.filteredCharacteristics[idx].name,
+            "value": value,
+            "valueType": valueType,
+          })
+        } 
+
       }
     }
+    console.log('Calculating the price with...')
+    console.log(this.orderChars)
   }
 
   // Método para calcular el precio usando el servicio