Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
} @else {
<div class="max-h-96 overflow-y-auto pr-2">
@for (acbr of appliedCustomerBillingRates; track acbr.id) {
<div class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
<div data-cy="acbr" class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<p class="text-sm font-bold text-gray-700 dark:text-white">
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
</div>

<div class="flex flex-row w-full justify-end">
<button type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center align-middle me-2">
<button data-cy="createUsageSpec" type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center align-middle me-2">
<p class="pl-2 pr-2">{{ 'USAGE_SPECS._add_new' | translate }}</p>
<svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
</svg>
</button>
</button>
</div>

</div>
Expand All @@ -30,7 +30,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
} @else {
<div class="bg-secondary-50 dark:bg-secondary-100 border dark:border-gray-800 mt-8 p-4 rounded-lg">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
<table data-cy="usageSpecTable" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
<thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
<tr>
<th scope="col" class="px-6 py-3">
Expand All @@ -46,18 +46,18 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
</thead>
<tbody>
@for (usage of usageSpecs; track usage.id) {
<tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
<tr data-cy="usageSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
<td [ngClass]="{
'break-all': hasLongWord(usage.name, 20),
'break-words': !hasLongWord(usage.name, 20)
}" class="px-6 py-4 text-wrap break-words">
{{usage.name}}
</td>
<td class="hidden md:table-cell px-6 py-4">
{{usage.description}}
{{usage.description}}
</td>
<td class="px-6 py-4">
<button type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
<button data-cy="usageSpecEdit" type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
<svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 4.182A4.136 4.136 0 0 1 16.9 3c1.087 0 2.13.425 2.899 1.182A4.01 4.01 0 0 1 21 7.037c0 1.068-.43 2.092-1.194 2.849L18.5 11.214l-5.8-5.71 1.287-1.31.012-.012Zm-2.717 2.763L6.186 12.13l2.175 2.141 5.063-5.218-2.141-2.108Zm-6.25 6.886-1.98 5.849a.992.992 0 0 0 .245 1.026 1.03 1.03 0 0 0 1.043.242L10.282 19l-5.25-5.168Zm6.954 4.01 5.096-5.186-2.218-2.183-5.063 5.218 2.185 2.15Z" clip-rule="evenodd"/>
</svg>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@if (nameControl) {
<label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
<input id="prod-name" type="text" [formControl]="nameControl" maxLength="100"
<input data-cy="usageSpecName" id="prod-name" type="text" [formControl]="nameControl" 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"/>
}
@if (descControl) {
<label class="font-bold text-lg col-span-2 dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
<app-markdown-textarea [formControl]="descControl"></app-markdown-textarea>
<app-markdown-textarea data-cy="usageSpecDescription" [formControl]="descControl"></app-markdown-textarea>
}

Original file line number Diff line number Diff line change
Expand Up @@ -56,33 +56,33 @@
}
@if(showCreateMetric==false){
<div class="flex w-full justify-items-center justify-center">
<button type="button" (click)="showCreateMetric=!showCreateMetric" 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="btnNewMetric" type="button" (click)="showCreateMetric=!showCreateMetric" 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">
{{ 'USAGE_SPECS._create_metric' | 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-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
</svg>
</svg>
</button>
</div>
} @else {
<form class="m-4" [formGroup]="metricsForm">
<div>
<label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
<input formControlName="name" type="text" id="prod-name" maxLength="100"
<input data-cy="metricName" 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 for="description" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
<textarea id="description" formControlName="description" rows="4"
<textarea data-cy="metricDescription" id="description" formControlName="description" rows="4"
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>
</form>
<div class="flex w-full justify-items-center justify-center mt-4">
<button type="button" (click)="saveMetric()" [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? '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="btnSaveMetric" type="button" (click)="saveMetric()" [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? '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">
{{ 'USAGE_SPECS._save_metric' | 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"/>
</svg>
</svg>
</button>
</div>
}
10 changes: 5 additions & 5 deletions src/app/shared/forms/usage-spec/usage-spec.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-

<!-- Navigation Buttons -->
<div class="flex justify-end mt-6 space-x-4">
<button (click)="goToStep(currentStep - 1)"
<button data-cy="usageSpecPrevious" (click)="goToStep(currentStep - 1)"
[disabled]="currentStep === 0"
[ngClass]="{
'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
Expand All @@ -78,8 +78,8 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
</svg>
{{ 'USAGE_SPECS._previous' | translate }}
</button>
<button (click)="goToStep(currentStep + 1)"

<button data-cy="usageSpecNext" (click)="goToStep(currentStep + 1)"
[disabled]="currentStep === steps.length - 1 || (formType === 'create' && !validateCurrentStep()) || !canNavigate(currentStep)"
[ngClass]="{
'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (formType !== 'create' || validateCurrentStep() || canNavigate(currentStep)),
Expand All @@ -94,10 +94,10 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
</svg>
</button>
@if(formType === 'create' && currentStep === 2 || formType === 'update'){
<button (click)="submitForm()"
<button data-cy="btnCreateUsageSpec" (click)="submitForm()"
[disabled]="!usageSpecForm.controls['generalInfo'].valid"
[ngClass]="formType === 'update' && !usageSpecForm.controls['generalInfo'].valid ? 'opacity-50' : 'hover:bg-primary-50'"

class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
{{ formType === 'create' ? 'Create Usage Spec' : 'Update Usage Spec' }}
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/header/header.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
</a>
</li>
<li>
<button id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
<button data-cy="usageSpecs" id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
</li>
<li>
<button id="myInventory" (click)="goTo('/product-inventory')"class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faBoxesStacked" class="mr-2"></fa-icon>{{ 'HEADER._inventory' | translate }}</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
<div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-4">
@for (ch of filteredCharacteristics ; track ch.id; let i = $index) {
@if(!ch.name?.endsWith('- enabled')){
<div class="flex flex-row w-full items-start">
<div data-cy="offerChar" 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">
Expand All @@ -101,7 +101,7 @@
<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">You can change the metric values to simulate final prices</p>
<div class="grid grid-cols-4 gap-2 mb-4">
@for (metric of metrics || []; track metric.unitOfMeasure) {
<div class="flex flex-col">
<div data-cy="offerMetric" class="flex flex-col">
<h5 [ngClass]="{
'break-all': hasLongWord(metric.unitOfMeasure, 20),
'break-words': !hasLongWord(metric.unitOfMeasure, 20)
Expand Down
Loading