inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-10-01 14:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

move upload and create to extensions

Browse Source
This commit is contained in:
Denys Vuika
2023-03-01 17:27:36 +00:00
committed by Sheena Malhotra
parent 52cbf442d4
commit 69204a2c13
10 changed files with 170 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
projects/aca-content/assets/app.extensions.json
View File

@@ -188,34 +188,6 @@
} }
} }
], ],
"upload": [
{
"id": "app.create.uploadFile",
"order": 100,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES",
"actions": {
"click": "UPLOAD_FILES"
},
"rules": {
"visible": "app.isUploadSupported"
}
},
{
"id": "app.create.uploadFolder",
"order": 200,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS",
"actions": {
"click": "UPLOAD_FOLDER"
},
"rules": {
"visible": "app.isUploadSupported"
}
}
],
"navbar": [ "navbar": [
{ {
"id": "app.navbar.primary", "id": "app.navbar.primary",
@@ -287,10 +259,116 @@
} }
], ],
"toolbar": [ "toolbar": [
{
"id": "app.toolbar.create",
"type": "menu",
"order": 10,
"title": "APP.HEADER.BUTTONS.CREATE",
"description": "APP.HEADER.BUTTONS.CREATE_TOOLTIP",
"data": {
"menuType": "button"
},
"children": [
{
"id": "app.create.folder",
"order": 100,
"icon": "create_new_folder",
"title": "APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER",
"description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
"actions": {
"click": "CREATE_FOLDER"
},
"rules": {
"visible": "app.navigation.folder.canCreate"
}
},
{
"id": "app.create.library",
"order": 200,
"title": "APP.NEW_MENU.MENU_ITEMS.CREATE_LIBRARY",
"description": "APP.NEW_MENU.TOOLTIPS.CREATE_LIBRARY",
"icon": "create_new_folder",
"actions": {
"click": "CREATE_LIBRARY"
},
"rules": {
"visible": "app.canCreateLibrary"
}
},
{
"id": "app.create.fileFromTemplate",
"order": 300,
"icon": "description",
"title": "APP.NEW_MENU.MENU_ITEMS.FILE_TEMPLATE",
"description": "APP.NEW_MENU.MENU_ITEMS.FILE_TEMPLATE",
"description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FILE_NOT_ALLOWED",
"actions": {
"click": "FILE_FROM_TEMPLATE"
},
"rules": {
"visible": "app.navigation.folder.canUpload"
}
},
{
"id": "app.create.folderFromTemplate",
"order": 400,
"icon": "create_new_folder",
"title": "APP.NEW_MENU.MENU_ITEMS.FOLDER_TEMPLATE",
"description": "APP.NEW_MENU.MENU_ITEMS.FOLDER_TEMPLATE",
"description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
"actions": {
"click": "FOLDER_FROM_TEMPLATE"
},
"rules": {
"visible": "app.navigation.folder.canUpload"
}
}
]
},
{
"id": "app.toolbar.upload",
"type": "menu",
"order": 20,
"title": "APP.HEADER.BUTTONS.UPLOAD",
"description": "APP.HEADER.BUTTONS.UPLOAD_TOOLTIP",
"data": {
"menuType": "flat-button",
"color": "primary"
},
"children": [
{
"id": "app.create.uploadFile",
"order": 100,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES",
"actions": {
"click": "UPLOAD_FILES"
},
"rules": {
"visible": "app.isUploadSupported"
}
},
{
"id": "app.create.uploadFolder",
"order": 200,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS",
"actions": {
"click": "UPLOAD_FOLDER"
},
"rules": {
"visible": "app.isUploadSupported"
}
}
]
},
{ {
"id": "app.toolbar.search.separator", "id": "app.toolbar.search.separator",
"type": "separator", "type": "separator",
"order": 90 "order": 89
}, },
{ {
"id": "app.toolbar.search", "id": "app.toolbar.search",
@@ -414,7 +492,7 @@
"type": "menu", "type": "menu",
"order": 10000, "order": 10000,
"icon": "more_vert", "icon": "more_vert",
"title": "APP.ACTIONS.MORE", "description": "APP.ACTIONS.MORE",
"children": [ "children": [
{ {
"id": "app.toolbar.toggleLock", "id": "app.toolbar.toggleLock",

22
projects/aca-content/src/lib/components/header-actions/header-actions.component.html
View File

@@ -1,25 +1,3 @@
<adf-toolbar class="adf-toolbar--inline"> <adf-toolbar class="adf-toolbar--inline">
<button mat-flat-button data-automation-id="create-button" *ngIf="canShowCreateButton()"
[matMenuTriggerFor]="createMenu"
[attr.title]="'APP.HEADER.BUTTONS.CREATE_TOOLTIP' | translate">
{{ 'APP.HEADER.BUTTONS.CREATE' | translate }}
</button>
<mat-menu #createMenu="matMenu" role="menu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of createActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<button mat-flat-button color="primary" data-automation-id="upload-button" *ngIf="canShowUploadButton()"
[matMenuTriggerFor]="uploadMenu"
[attr.title]="'APP.HEADER.BUTTONS.UPLOAD_TOOLTIP' | translate">
{{ 'APP.HEADER.BUTTONS.UPLOAD' | translate }}
</button>
<mat-menu #uploadMenu="matMenu" role="menu" class="app-upload-menu__root-menu app-upload-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of uploadActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<aca-search-input class="app-search-input"></aca-search-input> <aca-search-input class="app-search-input"></aca-search-input>
</adf-toolbar> </adf-toolbar>

106
projects/aca-content/src/lib/components/header-actions/header-actions.component.spec.ts
View File

@@ -1,106 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppTestingModule } from '../../testing/app-testing.module';
import { HeaderActionsComponent } from './header-actions.component';
import { ContentActionType } from '@alfresco/adf-extensions';
import { AppExtensionService } from '@alfresco/aca-shared';
import { of } from 'rxjs';
import { By } from '@angular/platform-browser';
import { CoreModule } from '@alfresco/adf-core';
import { AppHeaderActionsModule } from './header-actions.module';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
describe('HeaderActionsComponent', () => {
let fixture: ComponentFixture<HeaderActionsComponent>;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppTestingModule, CoreModule.forRoot(), AppHeaderActionsModule, RouterTestingModule],
declarations: [HeaderActionsComponent]
});
const extensionService = TestBed.inject(AppExtensionService);
spyOn(extensionService, 'getCreateActions').and.returnValue(
of([
{
id: 'action1',
type: ContentActionType.button,
title: 'create action one'
},
{
id: 'action2',
type: ContentActionType.button,
title: 'create action two'
}
])
);
spyOn(extensionService, 'getUploadActions').and.returnValue(
of([
{
id: 'action3',
type: ContentActionType.button,
title: 'upload action one'
}
])
);
router = TestBed.inject(Router);
fixture = TestBed.createComponent(HeaderActionsComponent);
fixture.detectChanges();
});
const getCreateButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
const getUploadButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id="upload-button"]')).nativeElement;
it('should render menu items when create menu is opened', async () => {
spyOnProperty(router, 'url').and.returnValue('/personal-files');
fixture.detectChanges();
await fixture.whenStable();
getCreateButton().click();
const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
expect(menuItems.length).toBe(2);
const menuItemOne = (menuItems[0].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
const menuItemTwo = (menuItems[1].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
expect(menuItemOne.innerText).toBe('create action one');
expect(menuItemTwo.innerText).toBe('create action two');
});
it('should render menu items when upload menu is opened', async () => {
spyOnProperty(router, 'url').and.returnValue('/personal-files');
fixture.detectChanges();
await fixture.whenStable();
getUploadButton().click();
const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
expect(menuItems.length).toBe(1);
const menuItemOne = (menuItems[0].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
expect(menuItemOne.innerText).toBe('upload action one');
});
});

35
projects/aca-content/src/lib/components/header-actions/header-actions.component.ts
View File

@@ -23,12 +23,10 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>. * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppExtensionService } from '@alfresco/aca-shared';
import { SetCurrentFolderAction, AppStore } from '@alfresco/aca-shared/store'; import { SetCurrentFolderAction, AppStore } from '@alfresco/aca-shared/store';
import { ContentActionRef } from '@alfresco/adf-extensions'; import { ContentActionRef } from '@alfresco/adf-extensions';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@Component({ @Component({
@@ -37,29 +35,10 @@ import { Subject } from 'rxjs';
styleUrls: ['./header-actions.component.scss'], styleUrls: ['./header-actions.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class HeaderActionsComponent implements OnInit, OnDestroy { export class HeaderActionsComponent implements OnDestroy {
private onDestroy$ = new Subject<boolean>(); private onDestroy$ = new Subject<boolean>();
createActions: Array<ContentActionRef> = []; constructor(private store: Store<AppStore>) {}
uploadActions: Array<ContentActionRef> = [];
constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
ngOnInit(): void {
this.extensions
.getCreateActions()
.pipe(takeUntil(this.onDestroy$))
.subscribe((actions) => {
this.createActions = actions;
});
this.extensions
.getUploadActions()
.pipe(takeUntil(this.onDestroy$))
.subscribe((actions) => {
this.uploadActions = actions;
});
}
ngOnDestroy() { ngOnDestroy() {
this.onDestroy$.next(true); this.onDestroy$.next(true);
@@ -70,12 +49,4 @@ export class HeaderActionsComponent implements OnInit, OnDestroy {
trackByActionId(_: number, action: ContentActionRef) { trackByActionId(_: number, action: ContentActionRef) {
return action.id; return action.id;
} }
canShowCreateButton(): boolean {
return this.createActions.length > 0;
}
canShowUploadButton(): boolean {
return this.uploadActions.length > 0;
}
} }

8
projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts
View File

@@ -69,7 +69,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
showHeader = ShowHeaderMode.Data; showHeader = ShowHeaderMode.Data;
filterSorting = 'name-asc'; filterSorting = 'name-asc';
createActions: Array<ContentActionRef> = []; createActions: Array<ContentActionRef> = [];
uploadActions: Array<ContentActionRef> = [];
protected subscriptions: Subscription[] = []; protected subscriptions: Subscription[] = [];
@@ -83,13 +82,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
this.createActions = actions; this.createActions = actions;
}); });
this.extensions
.getUploadActions()
.pipe(takeUntil(this.onDestroy$))
.subscribe((actions) => {
this.uploadActions = actions;
});
this.sharedPreviewUrl$ = this.store.select(getSharedUrl); this.sharedPreviewUrl$ = this.store.select(getSharedUrl);
this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState)); this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState));

2
projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.html
View File

@@ -10,7 +10,7 @@
<adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider> <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
<ng-container *ngSwitchCase="'menu'"> <ng-container *ngSwitchCase="'menu'">
<app-toolbar-menu [actionRef]="actionRef" [color]="color"> </app-toolbar-menu> <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'custom'"> <ng-container *ngSwitchCase="'custom'">

38
projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
View File

@@ -1,6 +1,38 @@
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'button'">
<button <button
[id]="actionRef.id" [id]="actionRef.id"
[color]="color" [color]="data?.color || color"
mat-button
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
[matMenuTriggerFor]="menu"
[disabled]="actionRef.disabled"
#matTrigger="matMenuTrigger"
>
<span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
</button>
</ng-container>
<ng-container *ngSwitchCase="'flat-button'">
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-flat-button
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
[matMenuTriggerFor]="menu"
[disabled]="actionRef.disabled"
#matTrigger="matMenuTrigger"
>
<span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
</button>
</ng-container>
<ng-container *ngSwitchDefault>
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-icon-button mat-icon-button
[attr.aria-label]="actionRef.description || actionRef.title | translate" [attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate" [attr.title]="actionRef.description || actionRef.title | translate"
@@ -8,8 +40,10 @@
[disabled]="actionRef.disabled" [disabled]="actionRef.disabled"
#matTrigger="matMenuTrigger" #matTrigger="matMenuTrigger"
> >
<adf-icon [value]="actionRef.icon"></adf-icon> <adf-icon *ngIf="actionRef.icon" [value]="actionRef.icon"></adf-icon>
</button> </button>
</ng-container>
</ng-container>
<mat-menu #menu="matMenu" [overlapTrigger]="false"> <mat-menu #menu="matMenu" [overlapTrigger]="false">
<ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId"> <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">

10
projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts
View File

@@ -51,6 +51,16 @@ export class ToolbarMenuComponent implements AfterViewInit {
@ViewChildren(ToolbarMenuItemComponent) @ViewChildren(ToolbarMenuItemComponent)
toolbarMenuItems: QueryList<ToolbarMenuItemComponent>; toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
@Input()
data: {
menuType?: string;
color?: string;
};
get type(): string {
return this.data?.menuType || 'default';
}
@HostListener('document:keydown.Escape') @HostListener('document:keydown.Escape')
handleKeydownEscape() { handleKeydownEscape() {
this.matTrigger.closeMenu(); this.matTrigger.closeMenu();

14
projects/aca-shared/src/lib/services/app.extension.service.ts
View File

@@ -79,7 +79,6 @@ export class AppExtensionService implements RuleContext {
private _contextMenuActions = new BehaviorSubject<Array<ContentActionRef>>([]); private _contextMenuActions = new BehaviorSubject<Array<ContentActionRef>>([]);
private _openWithActions = new BehaviorSubject<Array<ContentActionRef>>([]); private _openWithActions = new BehaviorSubject<Array<ContentActionRef>>([]);
private _createActions = new BehaviorSubject<Array<ContentActionRef>>([]); private _createActions = new BehaviorSubject<Array<ContentActionRef>>([]);
private _uploadActions = new BehaviorSubject<Array<ContentActionRef>>([]);
private _mainActions = new BehaviorSubject<ContentActionRef>(null); private _mainActions = new BehaviorSubject<ContentActionRef>(null);
private _sidebarActions = new BehaviorSubject<Array<ContentActionRef>>([]); private _sidebarActions = new BehaviorSubject<Array<ContentActionRef>>([]);
@@ -159,7 +158,6 @@ export class AppExtensionService implements RuleContext {
this._contextMenuActions.next(this.loader.getContentActions(config, 'features.contextMenu')); this._contextMenuActions.next(this.loader.getContentActions(config, 'features.contextMenu'));
this._openWithActions.next(this.loader.getContentActions(config, 'features.viewer.openWith')); this._openWithActions.next(this.loader.getContentActions(config, 'features.viewer.openWith'));
this._createActions.next(this.loader.getElements<ContentActionRef>(config, 'features.create')); this._createActions.next(this.loader.getElements<ContentActionRef>(config, 'features.create'));
this._uploadActions.next(this.loader.getElements<ContentActionRef>(config, 'features.upload'));
this._mainActions.next(this.loader.getFeatures(config).mainAction); this._mainActions.next(this.loader.getFeatures(config).mainAction);
this.navbar = this.loadNavBar(config); this.navbar = this.loadNavBar(config);
@@ -362,18 +360,6 @@ export class AppExtensionService implements RuleContext {
); );
} }
getUploadActions(): Observable<Array<ContentActionRef>> {
return this._uploadActions.pipe(
map((uploadActions) =>
uploadActions
.filter((action) => this.filterVisible(action))
.map((action) => this.copyAction(action))
.map((action) => this.buildMenu(action))
.map((action) => this.setActionDisabledFromRule(action))
)
);
}
getMainAction(): Observable<ContentActionRef> { getMainAction(): Observable<ContentActionRef> {
return this._mainActions.pipe( return this._mainActions.pipe(
filter((mainAction) => mainAction && this.filterVisible(mainAction)), filter((mainAction) => mainAction && this.filterVisible(mainAction)),

4
projects/aca-testing-shared/src/components/sidenav/sidenav.ts
View File

@@ -31,7 +31,7 @@ import { Component } from '../component';
export class Sidenav extends Component { export class Sidenav extends Component {
links = this.component.all(by.css('.item')); links = this.component.all(by.css('.item'));
activeLink = this.byCss('.action-button--active'); activeLink = this.byCss('.action-button--active');
newButton = element(By.css(('[data-automation-id="create-button"]'))); newButton = element(By.css(('[id="app.toolbar.create"]')));
personalFiles = this.byCss(`[data-automation-id='app.navbar.personalFiles']`); personalFiles = this.byCss(`[data-automation-id='app.navbar.personalFiles']`);
fileLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.menu']`); fileLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.menu']`);
myLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.files']`, browser); myLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.files']`, browser);
@@ -53,7 +53,7 @@ export class Sidenav extends Component {
} }
async closeNewMenu(): Promise<void> { async closeNewMenu(): Promise<void> {
await BrowserActions.click(element(by.css('button[data-automation-id="create-button"] span span'))); await BrowserActions.click(element(by.css('button[id="app.toolbar.create"] span span')));
await this.menu.waitForMenuToClose(); await this.menu.waitForMenuToClose();
} }