Skip to content

Fix form steps #160

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 5 commits into from
Dec 10, 2025
Merged

Fix form steps #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf7fc06
ADD horizontal steps on catalogs and products
laraminones Dec 2, 2025
9b9e1c5
ADD horizontal steps on services and resources forms
laraminones Dec 3, 2025
2ca99d2
ADD stepper and action button in every form
laraminones Dec 9, 2025
c0bda06
FIX catalog next buttons
laraminones Dec 10, 2025
5634fa9
FIX catalogs finish buttons
laraminones Dec 10, 2025
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
107 changes: 69 additions & 38 deletions ...s/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,36 +26,29 @@
<!-- End Breadcrumb -->

<div class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-8 rounded-lg">
<h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4">{{ 'CREATE_CATALOG._new' | translate }}</h2>
<hr class="h-px m-4 bg-gray-300 dark:bg-gray-200 border-0">
<div class="md:grid md:grid-cols-25/75 xl:grid-cols-20/80">
<div class="flex sm:flex-row md:flex-col md:mr-4 overflow-x-auto max-w-[calc(100vw-5rem)]">
<h2 class="text-xl hidden md:block font-bold text-black mb-4 dark:text-white">{{ 'CREATE_CATALOG._steps' | translate }}</h2>
<button id="general-info" (click)="toggleGeneral()" [disabled]="!generalDone"
class="grid sm:grid-rows-2 md:grid-rows-1 md:grid-cols-25/75 xl:grid-cols-20/80 mb-2 mr-2 md:mr-0 text-primary-100 dark:text-primary-50 justify-items-center md:justify-items-start">
<span id="general-circle" class="flex items-center justify-center w-6 h-6 md:w-8 md:h-8 border border-2 border-primary-100 dark:border-primary-50 rounded-full shrink-0">
1
</span>
<span>
<h3 class="flex sm:text-center md:text-start">{{ 'UPDATE_CATALOG._general' | translate }}</h3>
<p class="hidden xl:flex text-xs sm:text-center md:text-start">{{ 'UPDATE_CATALOG._general_info' | translate }}</p>
</span>
</button>
<hr class="h-px mb-2 bg-gray-300 dark:bg-gray-200 border-0">
<button id="summary" [disabled]="!finishDone || generalForm.invalid" (click)="showFinish()"
class="grid sm:grid-rows-2 md:grid-rows-1 md:grid-cols-25/75 xl:grid-cols-20/80 mb-2 mr-2 md:mr-0 text-gray-500 justify-items-center md:justify-items-start">
<span id="summary-circle" class="flex items-center justify-center w-6 h-6 md:w-8 md:h-8 border border-2 border-gray-400 rounded-full shrink-0">
2
</span>
<span>
<h3 class="flex justify-start">{{ 'UPDATE_CATALOG._finish' | translate }}</h3>
<p class="hidden xl:flex text-xs justify-start text-start">{{ 'UPDATE_CATALOG._summary' | translate }}</p>
</span>
</button>
</div>
<h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4 pb-4">{{ 'CREATE_CATALOG._new' | translate }}</h2>
<ol class="flex items-start w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400">
@for (step of steps; track i; let i = $index) {
<li
(click)="handleStepClick(i)"
[class.cursor-not-allowed]="!canNavigate(i)"
[class.opacity-50]="!canNavigate(i)"
[class.text-primary-100]="currentStep === i"
class="flex-1 cursor-pointer">
<span class="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 mx-auto border-2 border-primary-100 dark:border-primary-50 shrink-0 rounded-full"
[class.bg-primary-100]="currentStep === i"
[class.text-white]="currentStep === i">
{{ i + 1 }}
</span>
<span class="md:block mt-2 hidden">{{ step }}</span>
</li>
}
</ol>

<h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-white pb-4">{{ this.steps[currentStep] }}</h3>
<div class="md:p-8">
<div>
@if(showGeneral){
<h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4">{{ 'CREATE_CATALOG._general' | translate }}</h2>
@if (currentStep === 0) {
<form class="m-4 gap-4" [formGroup]="generalForm">
<label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_CATALOG._name' | translate }}</label>
<input data-cy="catalogName" formControlName="name" type="text" id="prod-name" maxLength="100"
Expand All @@ -67,18 +60,15 @@ <h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4">{{ 'CREATE_
<app-markdown-textarea data-cy=catalogDsc formControlName="description"></app-markdown-textarea>

</form>
<div class="flex w-full justify-items-end justify-end">
<button data-cy="catalogNext" type="button" (click)="showFinish();generalDone=true;" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
<!--<div class="flex w-full justify-items-end justify-end">
<button data-cy="catalogNext" type="button" (click)="goToStep(currentStep + 1)" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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_CATALOG._next' | 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 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</button>
</div>
}

@if(showSummary){
<h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_CATALOG._finish' | translate }}</h2>
</div>-->
} @else if (currentStep === 1) {
<div class="m-8">
@if(loading){
<div role="status" class="w-full h-full flex justify-center align-middle">
Expand Down Expand Up @@ -124,17 +114,58 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
}


<div class="flex w-full justify-items-end justify-end ml-4">
<!--<div class="flex w-full justify-items-end justify-end ml-4">
<button data-cy="catalogFinish" [disabled]="loading" type="button" (click)="createCatalog();" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
{{ 'CREATE_CATALOG._create' | 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 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</button>
</div>
</div>-->

</div>
}
<!-- Navigation Buttons -->
<div class="flex justify-end mt-6 space-x-4">
<button (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,
'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStep === 0
}"
class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
<svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor"
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
</svg>
{{ 'CREATE_OFFER._previous' | translate }}
</button>

<button data-cy=catalogNext (click)="goToStep(currentStep + 1)"
[disabled]="currentStep === steps.length - 1 || !validateCurrentStep() || !canNavigate(currentStep) || !generalForm.valid"
[ngClass]="{
'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (validateCurrentStep() || canNavigate(currentStep)),
'cursor-not-allowed opacity-50': currentStep === steps.length - 1 || (!validateCurrentStep() || !canNavigate(currentStep))
}"
class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
{{ 'CREATE_OFFER._next_step' | translate }}
<svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor"
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
</svg>
</button>
@if(currentStep === 1){
<button data-cy=catalogFinish (click)="createCatalog()"
[disabled]="!generalForm.valid || loading"
[ngClass]="loading || !generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'"

class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
Create Catalog
</button>
}
</div>
</div>
</div>
</div>
Expand Down
60 changes: 56 additions & 4 deletions ...ges/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ export class CreateCatalogComponent implements OnInit {

stepsElements:string[]=['general-info','summary'];
stepsCircles:string[]=['general-circle','summary-circle'];
currentStep = 0;
highestStep = 0;
steps = [
'General Info',
'Summary'
];

//markdown variables:
showPreview:boolean=false;
Expand Down Expand Up @@ -98,6 +104,14 @@ export class CreateCatalogComponent implements OnInit {

showFinish(){
this.finishDone=true;
this.setCatalogData();
this.showGeneral=false;
this.showSummary=true;
this.selectStep('summary','summary-circle');
this.showPreview=false;
}

setCatalogData(){
if(this.generalForm.value.name!=null){
this.catalogToCreate={
name: this.generalForm.value.name,
Expand All @@ -114,14 +128,11 @@ export class CreateCatalogComponent implements OnInit {
}
console.log('CATALOG TO CREATE:')
console.log(this.catalogToCreate)
this.showGeneral=false;
this.showSummary=true;
this.selectStep('summary','summary-circle');
}
this.showPreview=false;
}

createCatalog(){
this.setCatalogData();
this.loading=true;
this.api.postCatalog(this.catalogToCreate).subscribe({
next: data => {
Expand Down Expand Up @@ -289,4 +300,45 @@ export class CreateCatalogComponent implements OnInit {
return false
}
}

goToStep(index: number) {
// Solo validar en modo creación
if (index > this.currentStep) {
// Validar el paso actual
const currentStepValid = this.validateCurrentStep();
if (!currentStepValid) {
return; // No permitir avanzar si el paso actual no es válido
}
}

this.currentStep = index;
if(this.currentStep>this.highestStep){
this.highestStep=this.currentStep
}

if(this.currentStep==1){
this.showFinish();
}
}

validateCurrentStep(): boolean {
switch (this.currentStep) {
case 0: // General Info
return this.generalForm?.valid || false;
case 1: // Product Specification
return true;
default:
return true;
}
}

canNavigate(index: number) {
return (this.generalForm?.valid && (index <= this.currentStep)) || (this.generalForm?.valid && (index <= this.highestStep));
}

handleStepClick(index: number): void {
if (this.canNavigate(index)) {
this.goToStep(index);
}
}
}
Loading
Loading