inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

ACS-8256: Move "menu buttons" to Insights where it belongs (#9849)

Browse Source
This commit is contained in:
Denys Vuika
2024-07-01 11:01:26 -04:00
committed by GitHub
parent 80ff96a317
commit 5fa3afe3a5
17 changed files with 41 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AdfDateFnsAdapter, ButtonsMenuModule, DownloadService, ToolbarComponent, ToolbarTitleComponent } from '@alfresco/adf-core';
import { AdfDateFnsAdapter, DownloadService, ToolbarComponent, ToolbarTitleComponent } from '@alfresco/adf-core';
import {
AfterContentChecked,
Component,
@@ -45,6 +45,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { WIDGET_DIRECTIVES } from './widgets';
import { MatButtonModule } from '@angular/material/button';
import { ButtonsMenuComponent } from './buttons-menu/buttons-menu.component';
const FORMAT_DATE_ACTIVITI = 'YYYY-MM-DD';
@@ -113,15 +114,15 @@ export interface ReportFormValues {
MatIconModule,
ReactiveFormsModule,
ToolbarComponent,
ToolbarTitleComponent,
MatFormFieldModule,
MatInputModule,
MatMenuModule,
ToolbarTitleComponent,
...WIDGET_DIRECTIVES,
MatDialogModule,
FormsModule,
MatButtonModule,
ButtonsMenuModule
ButtonsMenuComponent
],
templateUrl: './analytics-report-parameters.component.html',
styleUrls: ['./analytics-report-parameters.component.scss'],

20
lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.html Normal file
View File

@@ -0,0 +1,20 @@
<div id="adf-buttons-menu" class="adf-buttons-menu" *ngIf="!isMenuEmpty">
<div *ngIf="isMobile()">
<button mat-icon-button [matMenuTriggerFor]="editReportMenu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #editReportMenu="matMenu" class="adf-buttons-menu-mobile">
<ng-content *ngTemplateOutlet="desktop">
</ng-content>
</mat-menu>
</div>
<div *ngIf="!isMobile()" class="adf-buttons-menu-desktop">
<ng-content *ngTemplateOutlet="desktop">
</ng-content>
</div>
</div>
<ng-template #desktop>
<ng-content></ng-content>
</ng-template>

30
lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss Normal file
View File

@@ -0,0 +1,30 @@
.adf-buttons-menu {
margin-right: 10px;
& div {
display: flex;
}
&-mobile {
margin-right: 10px;
}
&-desktop {
display: flex;
button {
color: black;
padding: 0;
}
button > span {
display: none;
}
/* stylelint-disable selector-class-pattern */
button > .mat-icon {
color: black;
margin: 0 10px;
}
}
}

118
lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.spec.ts Normal file
View File

@@ -0,0 +1,118 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ButtonsMenuComponent } from '@alfresco/adf-insights';
import { CommonModule } from '@angular/common';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'adf-custom-container',
standalone: true,
imports: [CommonModule, ButtonsMenuComponent, MatMenuModule, MatIconModule],
template: `
<adf-buttons-action-menu>
<button mat-menu-item (click)="assignValue()"><mat-icon>settings</mat-icon><span>Button</span></button>
</adf-buttons-action-menu>
`
})
export class CustomContainerComponent {
value: number;
assignValue() {
this.value = 1;
}
}
@Component({
selector: 'adf-custom-empty-container',
template: `<adf-buttons-action-menu></adf-buttons-action-menu>`
})
export class CustomEmptyContainerComponent {}
describe('ButtonsMenuComponent', () => {
describe('When Buttons are injected', () => {
let fixture: ComponentFixture<CustomContainerComponent>;
let component: CustomContainerComponent;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ButtonsMenuComponent, CustomContainerComponent]
});
fixture = TestBed.createComponent(CustomContainerComponent);
element = fixture.debugElement.nativeElement;
component = fixture.componentInstance;
});
afterEach(() => {
fixture.destroy();
});
it('should render buttons menu when at least one button is declared', async () => {
fixture.detectChanges();
await fixture.whenStable();
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
expect(buttonsMenuElement).toBeDefined();
});
it('should trigger event when a specific button is clicked', async () => {
expect(component.value).toBeUndefined();
fixture.detectChanges();
await fixture.whenStable();
const button = element.querySelector('button');
button.click();
fixture.detectChanges();
await fixture.whenStable();
expect(component.value).toBe(1);
});
});
describe('When no buttons are injected', () => {
let fixture: ComponentFixture<CustomEmptyContainerComponent>;
let element: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ButtonsMenuComponent],
declarations: [CustomEmptyContainerComponent]
});
fixture = TestBed.createComponent(CustomEmptyContainerComponent);
element = fixture.nativeElement;
});
afterEach(() => {
fixture.destroy();
TestBed.resetTestingModule();
});
it('should hide buttons menu if buttons input is empty', async () => {
fixture.detectChanges();
await fixture.whenStable();
const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
expect(buttonsMenuElement).toBeNull();
});
});
});

44
lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.ts Normal file
View File

@@ -0,0 +1,44 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ContentChildren, QueryList, AfterContentInit, ViewEncapsulation } from '@angular/core';
import { MatMenuItem, MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
@Component({
selector: 'adf-buttons-action-menu',
standalone: true,
imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule],
templateUrl: './buttons-menu.component.html',
styleUrls: ['./buttons-menu.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ButtonsMenuComponent implements AfterContentInit {
@ContentChildren(MatMenuItem) buttons: QueryList<MatMenuItem>;
isMenuEmpty: boolean;
ngAfterContentInit() {
this.isMenuEmpty = this.buttons.length <= 0;
}
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
}

3
lib/insights/src/lib/analytics-process/public-api.ts
View File

@@ -21,6 +21,7 @@ import { AnalyticsReportListComponent } from './components/analytics-report-list
import { AnalyticsReportParametersComponent } from './components/analytics-report-parameters.component';
import { AnalyticsGeneratorComponent } from './components/analytics-generator.component';
import { AnalyticsReportHeatMapComponent } from './components/analytics-report-heat-map.component';
import { ButtonsMenuComponent } from './components/buttons-menu/buttons-menu.component';
export * from './components/analytics.component';
export * from './components/analytics-report-heat-map.component';
@@ -28,12 +29,14 @@ export * from './components/analytics-generator.component';
export * from './components/analytics-report-list.component';
export * from './components/analytics-report-parameters.component';
export * from './components/analytics.component';
export * from './components/buttons-menu/buttons-menu.component';
export * from './services/analytics.service';
export * from './components/widgets';
export const ANALYTICS_PROCESS_DIRECTIVES = [
...WIDGET_DIRECTIVES,
ButtonsMenuComponent,
AnalyticsComponent,
AnalyticsReportListComponent,
AnalyticsReportParametersComponent,