inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "AAE-44098 Bottom Tab nav buttons (#11801)" (#11832)

Browse Source 
This reverts commit 7864f1a8e0.
This commit is contained in:
Joshua Cain
2026-04-23 11:39:17 +00:00
committed by GitHub
parent 510a813ed2
commit e3fc03c58d
7 changed files with 112 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/form-renderer.component.spec.ts
-135
View File
@@ -86,30 +86,6 @@ const expectElementToBeValid = (testingUtils: UnitTestingUtils, fieldId: string)
expect(invalidElementContainer).toBeFalsy();
};
const buildTabbedForm = (tabCount: number, hiddenTabIndices: number[] = []): FormModel => {
const tabs = Array.from({ length: tabCount }, (_, i) => ({
id: `tab-${i}`,
title: `Tab ${i}`
}));
const fields = tabs.map((tab) => ({
id: `container-${tab.id}`,
type: 'container',
tab: tab.id,
numberOfColumns: 1,
fields: { 1: [{ id: `text-${tab.id}`, type: 'text', name: `Text in ${tab.title}` }] }
}));
const form = new FormModel({ tabs, fields });
hiddenTabIndices.forEach((tabIndex) => {
if (form.tabs[tabIndex]) {
form.tabs[tabIndex].isVisible = false;
}
});
return form;
};
describe('Form Renderer Component', () => {
let formRendererComponent: FormRendererComponent<any>;
let fixture: ComponentFixture<FormRendererComponent<any>>;
@@ -933,117 +909,6 @@ describe('Form Renderer Component', () => {
});
});
describe('Tab navigation', () => {
describe('visibleTabs', () => {
it('should return only tabs where isVisible is true', () => {
formRendererComponent.formDefinition = buildTabbedForm(3, [1]);
expect(formRendererComponent.visibleTabs().length).toBe(2);
expect(formRendererComponent.visibleTabs().every((t) => t.isVisible)).toBeTrue();
});
it('should return all tabs when none are hidden', () => {
formRendererComponent.formDefinition = buildTabbedForm(3);
expect(formRendererComponent.visibleTabs().length).toBe(3);
});
it('should return empty array when all tabs are hidden', () => {
formRendererComponent.formDefinition = buildTabbedForm(3, [0, 1, 2]);
expect(formRendererComponent.visibleTabs().length).toBe(0);
});
});
describe('canNavigateNext and canNavigatePrevious', () => {
beforeEach(() => {
fixture.componentRef.setInput('formDefinition', buildTabbedForm(3));
fixture.detectChanges();
});
it('should not allow navigating previous on the first tab', () => {
expect(formRendererComponent.canNavigatePrevious).toBeFalse();
expect(formRendererComponent.canNavigateNext).toBeTrue();
});
it('should allow navigating previous and next between the first and last tabs', async () => {
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
expect(formRendererComponent.canNavigatePrevious).toBeTrue();
expect(formRendererComponent.canNavigateNext).toBeTrue();
});
it('should not allow navigating next on the last tab', async () => {
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
formRendererComponent.tabGroup.selectedIndexChange.emit(1);
fixture.detectChanges();
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
formRendererComponent.tabGroup.selectedIndexChange.emit(2);
fixture.detectChanges();
expect(formRendererComponent.canNavigatePrevious).toBeTrue();
expect(formRendererComponent.canNavigateNext).toBeFalse();
});
});
describe('navigateToNextTab and navigateToPreviousTab', () => {
beforeEach(() => {
fixture.componentRef.setInput('formDefinition', buildTabbedForm(3));
fixture.detectChanges();
expect(formRendererComponent.tabGroup).toBeDefined();
});
it('should increment selectedIndex when navigating to next tab', async () => {
const initialIndex = formRendererComponent.tabGroup.selectedIndex;
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
expect(formRendererComponent.tabGroup.selectedIndex).toBe(initialIndex + 1);
});
it('should decrement selectedIndex when navigating to previous tab', async () => {
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
const indexAfterNext = formRendererComponent.tabGroup.selectedIndex;
formRendererComponent.navigateToPreviousTab();
fixture.detectChanges();
await fixture.whenStable();
expect(formRendererComponent.tabGroup.selectedIndex).toBe(indexAfterNext - 1);
});
it('should not go below 0 when navigating previous on the first tab', async () => {
formRendererComponent.navigateToPreviousTab();
fixture.detectChanges();
await fixture.whenStable();
expect(formRendererComponent.tabGroup.selectedIndex).toBe(0);
});
it('should not exceed last index when navigating next on the last tab', async () => {
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
formRendererComponent.tabGroup.selectedIndexChange.emit(1);
fixture.detectChanges();
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
formRendererComponent.tabGroup.selectedIndexChange.emit(2);
fixture.detectChanges();
const lastIndex = formRendererComponent.tabGroup.selectedIndex;
formRendererComponent.navigateToNextTab();
fixture.detectChanges();
await fixture.whenStable();
expect(formRendererComponent.tabGroup.selectedIndex).toBe(lastIndex);
});
});
});
describe('Repeatable section', () => {
const repeatableSectionField = new FormFieldModel(new FormModel(), {
id: 'RepeatableSection0tbw2y',
lib/core/src/lib/form/components/form-renderer.component.ts
+3 -50
View File
@@ -16,25 +16,12 @@
*/
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
AfterViewInit,
ChangeDetectorRef,
Component,
DestroyRef,
inject,
Injector,
Input,
OnDestroy,
OnInit,
signal,
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { ChangeDetectorRef, Component, DestroyRef, inject, Injector, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
import { MatTabsModule } from '@angular/material/tabs';
import { TranslatePipe } from '@ngx-translate/core';
import { FormRulesManager, formRulesManagerFactory } from '../models/form-rules.model';
import { FormService } from '../services/form.service';
@@ -84,7 +71,7 @@ import { FormLayoutColumn, getFormLayoutColumnWidth } from './helpers/column-wid
],
encapsulation: ViewEncapsulation.None
})
export class FormRendererComponent<T> implements OnInit, OnDestroy, AfterViewInit {
export class FormRendererComponent<T> implements OnInit, OnDestroy {
private readonly middlewareServices = inject<FormFieldModelRenderMiddleware[]>(FORM_FIELD_MODEL_RENDER_MIDDLEWARE, { optional: true }) ?? [];
public readonly formService = inject(FormService);
@@ -100,22 +87,6 @@ export class FormRendererComponent<T> implements OnInit, OnDestroy, AfterViewIni
@Input()
readOnly = false;
@ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
private readonly currentTabIndex = signal(0);
get canNavigateNext(): boolean {
return this.currentTabIndex() < this.visibleTabCount - 1;
}
get canNavigatePrevious(): boolean {
return this.currentTabIndex() > 0;
}
get visibleTabCount(): number {
return this.visibleTabs().length;
}
debugMode: boolean;
fields: FormFieldModel[];
@@ -134,12 +105,6 @@ export class FormRendererComponent<T> implements OnInit, OnDestroy, AfterViewIni
.subscribe(() => this.visibilityService.refreshVisibility(this.formDefinition));
}
ngAfterViewInit(): void {
if (this.tabGroup) {
this.tabGroup.selectedIndexChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((index) => this.currentTabIndex.set(index));
}
}
ngOnDestroy() {
this.formRulesManager.destroy();
}
@@ -152,18 +117,6 @@ export class FormRendererComponent<T> implements OnInit, OnDestroy, AfterViewIni
return this.formDefinition.tabs.filter((tab) => tab.isVisible);
}
navigateToNextTab(): void {
if (this.tabGroup && this.canNavigateNext) {
this.tabGroup.selectedIndex = this.tabGroup.selectedIndex + 1;
}
}
navigateToPreviousTab(): void {
if (this.tabGroup && this.canNavigatePrevious) {
this.tabGroup.selectedIndex = this.tabGroup.selectedIndex - 1;
}
}
getNumberOfColumns(content: ContainerModel): number {
return (content.json?.numberOfColumns || 1) > (content.columns?.length || 1)
? content.json?.numberOfColumns || 1
lib/core/src/lib/i18n/en.json
-6
View File
@@ -87,12 +87,6 @@
"NO_LABEL": "Cancel"
}
},
"BUTTON": {
"PREVIOUS_TAB": "Previous",
"PREVIOUS_TAB_TITLE": "Navigate to previous tab",
"NEXT_TAB": "Next",
"NEXT_TAB_TITLE": "Navigate to next tab"
},
"FIELD_STYLE": {
"FONT_SIZE": "Font size",
"FONT_WEIGHT": "Font weight",