Skip to content

Optional characteristic with default enablement implemented #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fdelavega merged 2 commits into from
Jan 28, 2026
Merged

Optional characteristic with default enablement implemented #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
daac066
optional characteristic with default enability implemented
Jan 27, 2026
51d964d
FIX: enabled chars in price component selection
Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 25 additions & 32 deletions ...ings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"/>
Expand Down
104 changes: 30 additions & 74 deletions ...erings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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=[];
}

Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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
}
]
})
}
}

Expand All @@ -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();
}
Expand All @@ -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 {
Expand Down
Loading
Loading