mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3983] Add permission template to app list cloud (#4592)
* [ADF-3983] Add permission template to app list cloud * [ADF-3983] Fix and add unit tests
This commit is contained in:
davidcanonieto
committed by
Eugenio Romano
Eugenio Romano
parent
921fdc00df
commit
68f674c0fd
@@ -1,8 +1,8 @@
|
||||
<div class="menu-container" *ngIf="apps$ | async as appsList; else loading">
|
||||
<div class="menu-container" *ngIf="apps$ | async as appsList; else loadingOrError">
|
||||
<ng-container *ngIf="appsList.length > 0; else noApps">
|
||||
<div *ngIf="isGrid(); else appList" fxLayout="row wrap">
|
||||
<adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%" *ngFor="let app of appsList"
|
||||
[applicationInstance]="app" (selectedApp)="onSelectApp($event)">
|
||||
<adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%"
|
||||
*ngFor="let app of appsList" [applicationInstance]="app" (selectedApp)="onSelectApp($event)">
|
||||
</adf-cloud-app-details>
|
||||
</div>
|
||||
|
||||
@@ -24,15 +24,23 @@
|
||||
</ng-content>
|
||||
|
||||
<ng-template #defaultEmptyTemplate>
|
||||
<adf-empty-content icon="apps" [title]="'ADF_CLOUD_TASK_LIST.APPS.TITLE' | translate" [subtitle]="'ADF_CLOUD_TASK_LIST.APPS.SUBTITLE' | translate">
|
||||
<adf-empty-content icon="apps" [title]="'ADF_CLOUD_TASK_LIST.APPS.NO_APPS.TITLE' | translate"
|
||||
[subtitle]="'ADF_CLOUD_TASK_LIST.APPS.NO_APPS.SUBTITLE' | translate">
|
||||
</adf-empty-content>
|
||||
</ng-template>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #loading>
|
||||
<ng-template #loadingOrError>
|
||||
<div *ngIf="loadingError$ | async; else loading" class="adf-app-list-error">
|
||||
<adf-empty-content icon="error_outline" [title]="'ADF_CLOUD_TASK_LIST.APPS.ERROR.TITLE' | translate"
|
||||
[subtitle]="'ADF_CLOUD_TASK_LIST.APPS.ERROR.SUBTITLE' | translate">
|
||||
</adf-empty-content>
|
||||
</div>
|
||||
<ng-template #loading>
|
||||
<ng-container>
|
||||
<div class="adf-app-list-spinner">
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-app-list-spinner, .adf-app-list-empty {
|
||||
.adf-app-list-spinner, .adf-app-list-empty, .adf-app-list-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { setupTestBed, CoreModule, AlfrescoApiServiceMock, AlfrescoApiService } from '@alfresco/adf-core';
|
||||
import { of } from 'rxjs';
|
||||
import { of, throwError } from 'rxjs';
|
||||
|
||||
import { fakeApplicationInstance } from '../mock/app-model.mock';
|
||||
import { AppListCloudComponent } from './app-list-cloud.component';
|
||||
@@ -40,7 +40,7 @@ describe('AppListCloudComponent', () => {
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach( async(() => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreModule.forRoot(), ProcessServiceCloudTestingModule, AppListCloudModule],
|
||||
providers: [
|
||||
@@ -56,7 +56,7 @@ describe('AppListCloudComponent', () => {
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach( () => {
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppListCloudComponent);
|
||||
component = fixture.componentInstance;
|
||||
alfrescoApiService = TestBed.get(AlfrescoApiService);
|
||||
@@ -105,11 +105,28 @@ describe('AppListCloudComponent', () => {
|
||||
expect(defaultEmptyTemplate).toBeDefined();
|
||||
expect(defaultEmptyTemplate).not.toBeNull();
|
||||
expect(emptyContent).not.toBeNull();
|
||||
expect(emptyTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.TITLE');
|
||||
expect(emptySubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.SUBTITLE');
|
||||
expect(emptyTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.NO_APPS.TITLE');
|
||||
expect(emptySubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.NO_APPS.SUBTITLE');
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should display default no permissions template when response returns exception', () => {
|
||||
getAppsSpy.and.returnValue(throwError({}));
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
component.loadingError$.next(true);
|
||||
fixture.detectChanges();
|
||||
const errorTemplate = fixture.nativeElement.querySelector('.adf-app-list-error');
|
||||
const errorTitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__title');
|
||||
const errorSubtitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__subtitle');
|
||||
expect(errorTemplate).not.toBeNull();
|
||||
expect(errorTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.TITLE');
|
||||
expect(errorSubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.SUBTITLE');
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Grid Layout ', () => {
|
||||
|
||||
it('should display a grid by default', () => {
|
||||
|
||||
@@ -15,93 +15,100 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
|
||||
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
|
||||
import { ApplicationInstanceModel } from '../models/application-instance.model';
|
||||
import { ApplicationDeploymentCloudService } from '../services/app-deployment-cloud.service';
|
||||
import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
|
||||
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
|
||||
import { Observable, of, Subject } from 'rxjs';
|
||||
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
|
||||
import { ApplicationInstanceModel } from '../models/application-instance.model';
|
||||
import { ApplicationDeploymentCloudService } from '../services/app-deployment-cloud.service';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-app-list',
|
||||
templateUrl: './app-list-cloud.component.html',
|
||||
styleUrls: ['./app-list-cloud.component.scss'],
|
||||
providers: [
|
||||
@Component({
|
||||
selector: 'adf-cloud-app-list',
|
||||
templateUrl: './app-list-cloud.component.html',
|
||||
styleUrls: ['./app-list-cloud.component.scss'],
|
||||
providers: [
|
||||
{ provide: AppsProcessCloudService, useClass: ApplicationDeploymentCloudService }
|
||||
]
|
||||
})
|
||||
export class AppListCloudComponent implements OnInit, AfterContentInit {
|
||||
]
|
||||
})
|
||||
export class AppListCloudComponent implements OnInit, AfterContentInit {
|
||||
|
||||
public static LAYOUT_LIST: string = 'LIST';
|
||||
public static LAYOUT_GRID: string = 'GRID';
|
||||
public static RUNNING_STATUS: string = 'RUNNING';
|
||||
public static LAYOUT_LIST: string = 'LIST';
|
||||
public static LAYOUT_GRID: string = 'GRID';
|
||||
public static RUNNING_STATUS: string = 'RUNNING';
|
||||
|
||||
@ContentChild(CustomEmptyContentTemplateDirective)
|
||||
emptyCustomContent: CustomEmptyContentTemplateDirective;
|
||||
@ContentChild(CustomEmptyContentTemplateDirective)
|
||||
emptyCustomContent: CustomEmptyContentTemplateDirective;
|
||||
|
||||
/** (**required**) Defines the layout of the apps. There are two possible
|
||||
* values, "GRID" and "LIST".
|
||||
*/
|
||||
@Input()
|
||||
layoutType: string = AppListCloudComponent.LAYOUT_GRID;
|
||||
/** (**required**) Defines the layout of the apps. There are two possible
|
||||
* values, "GRID" and "LIST".
|
||||
*/
|
||||
@Input()
|
||||
layoutType: string = AppListCloudComponent.LAYOUT_GRID;
|
||||
|
||||
/** Emitted when an app entry is clicked. */
|
||||
@Output()
|
||||
appClick: EventEmitter<ApplicationInstanceModel> = new EventEmitter<ApplicationInstanceModel>();
|
||||
/** Emitted when an app entry is clicked. */
|
||||
@Output()
|
||||
appClick: EventEmitter<ApplicationInstanceModel> = new EventEmitter<ApplicationInstanceModel>();
|
||||
|
||||
apps$: Observable<any>;
|
||||
apps$: Observable<any>;
|
||||
loadingError$ = new Subject<boolean>();
|
||||
hasEmptyCustomContentTemplate: boolean = false;
|
||||
|
||||
hasEmptyCustomContentTemplate: boolean = false;
|
||||
constructor(private appsProcessCloudService: AppsProcessCloudService) { }
|
||||
|
||||
constructor(private appsProcessCloudService: AppsProcessCloudService) { }
|
||||
ngOnInit() {
|
||||
if (!this.isValidType()) {
|
||||
this.setDefaultLayoutType();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (!this.isValidType()) {
|
||||
this.setDefaultLayoutType();
|
||||
}
|
||||
this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(AppListCloudComponent.RUNNING_STATUS)
|
||||
.pipe(
|
||||
catchError((error) => {
|
||||
this.loadingError$.next(true);
|
||||
return of();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(AppListCloudComponent.RUNNING_STATUS);
|
||||
}
|
||||
ngAfterContentInit() {
|
||||
if (this.emptyCustomContent) {
|
||||
this.hasEmptyCustomContentTemplate = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
if (this.emptyCustomContent) {
|
||||
this.hasEmptyCustomContentTemplate = true;
|
||||
}
|
||||
}
|
||||
onSelectApp(app: ApplicationInstanceModel): void {
|
||||
this.appClick.emit(app);
|
||||
}
|
||||
|
||||
onSelectApp(app: ApplicationInstanceModel): void {
|
||||
this.appClick.emit(app);
|
||||
}
|
||||
/**
|
||||
* Check if the value of the layoutType property is an allowed value
|
||||
*/
|
||||
isValidType(): boolean {
|
||||
if (this.layoutType && (this.layoutType === AppListCloudComponent.LAYOUT_LIST || this.layoutType === AppListCloudComponent.LAYOUT_GRID)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the value of the layoutType property is an allowed value
|
||||
*/
|
||||
isValidType(): boolean {
|
||||
if (this.layoutType && (this.layoutType === AppListCloudComponent.LAYOUT_LIST || this.layoutType === AppListCloudComponent.LAYOUT_GRID)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
/**
|
||||
* Assign the default value to LayoutType
|
||||
*/
|
||||
setDefaultLayoutType(): void {
|
||||
this.layoutType = AppListCloudComponent.LAYOUT_GRID;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assign the default value to LayoutType
|
||||
*/
|
||||
setDefaultLayoutType(): void {
|
||||
this.layoutType = AppListCloudComponent.LAYOUT_GRID;
|
||||
}
|
||||
/**
|
||||
* Return true if the layout type is LIST
|
||||
*/
|
||||
isList(): boolean {
|
||||
return this.layoutType === AppListCloudComponent.LAYOUT_LIST;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if the layout type is LIST
|
||||
*/
|
||||
isList(): boolean {
|
||||
return this.layoutType === AppListCloudComponent.LAYOUT_LIST;
|
||||
}
|
||||
/**
|
||||
* Return true if the layout type is GRID
|
||||
*/
|
||||
isGrid(): boolean {
|
||||
|
||||
/**
|
||||
* Return true if the layout type is GRID
|
||||
*/
|
||||
isGrid(): boolean {
|
||||
|
||||
return this.layoutType === AppListCloudComponent.LAYOUT_GRID;
|
||||
}
|
||||
}
|
||||
return this.layoutType === AppListCloudComponent.LAYOUT_GRID;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,8 +47,14 @@
|
||||
},
|
||||
"ADF_CLOUD_TASK_LIST": {
|
||||
"APPS": {
|
||||
"TITLE": "No Applications Found",
|
||||
"SUBTITLE": "Create a new application that you want to easily find later"
|
||||
"NO_APPS": {
|
||||
"TITLE": "No Applications Found",
|
||||
"SUBTITLE": "Create a new application that you want to easily find later"
|
||||
},
|
||||
"ERROR": {
|
||||
"TITLE": "There was an error",
|
||||
"SUBTITLE": "Check you have permission to access the apps"
|
||||
}
|
||||
},
|
||||
"START_TASK": {
|
||||
"FORM": {
|
||||
|
||||
Reference in New Issue
Block a user