inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-26215 Standalone app list (process cloud) (#10523)

Browse Source
This commit is contained in:
Denys Vuika 2025-01-03 13:08:08 -05:00 committed by GitHub
parent 802756f2f3
commit 2bd7b3e57f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 172 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/process-services-cloud/components/app-list-cloud.component.md
View File

@ -2,19 +2,19 @@
Title: App List Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
Last reviewed: 2025-01-03
---
# [App List Cloud Component](../../../lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts "Defined in app-list-cloud.component.ts")
# App List Cloud Component
`standalone`, `component`
Shows all deployed cloud application instances.
## Basic Usage
```html
<adf-cloud-app-list
[layoutType]="'GRID'">
</adf-cloud-app-list>
<adf-cloud-app-list [layoutType]="'GRID'" />
```
### [Transclusions](../../user-guide/transclusion.md)
@ -23,8 +23,7 @@ You can show custom content when there are no apps available by supplying an
`<adf-custom-empty-content>` section:
```html
<adf-cloud-app-list
[layoutType]="'GRID'">
<adf-cloud-app-list [layoutType]="'GRID'">
<adf-custom-empty-content>
No Apps present
</adf-custom-empty-content>
@ -38,7 +37,13 @@ If you are generating a project for Activiti 7, you must add the list of apps yo
For example :
```json
"alfresco-deployed-apps" : [{"name": "simple-app"}]
{
"alfresco-deployed-apps": [
{
"name": "simple-app"
}
]
}
```
## Class members
@ -46,11 +51,11 @@ For example :
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
|------------|----------|---------------|--------------------------------------------------------------------------------------------------|
| layoutType | `string` | LAYOUT_GRID | (**required**) Defines the layout of the apps. There are two possible values, "GRID" and "LIST". |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| appClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ApplicationInstanceModel`](../../../lib/process-services-cloud/src/lib/app/models/application-instance.model.ts)`>` | Emitted when an app entry is clicked. |
|----------|------------------------------------------|---------------------------------------|
| appClick | `EventEmitter<ApplicationInstanceModel>` | Emitted when an app entry is clicked. |

35
lib/process-services-cloud/src/lib/app/app-list-cloud.module.spec.ts
View File

@ -1,35 +0,0 @@
/*!
* @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 { NoopTranslateModule } from '@alfresco/adf-core';
import { AppListCloudModule } from './app-list-cloud.module';
import { TestBed } from '@angular/core/testing';
describe('AppListCloudModule', () => {
let appListCloudModule: AppListCloudModule;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppListCloudModule, NoopTranslateModule]
});
appListCloudModule = TestBed.inject(AppListCloudModule);
});
it('should create an instance', () => {
expect(appListCloudModule).toBeTruthy();
});
});

10
lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts
View File

@ -16,15 +16,11 @@
*/
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { CommonModule } from '@angular/common';
import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
import { AppListCloudComponent } from './components/app-list-cloud.component';
import { TEMPLATE_DIRECTIVES, CoreModule } from '@alfresco/adf-core';
import { AppDetailsCloudComponent } from './components/app-details-cloud/app-details-cloud.component';
import { AppListCloudComponent } from './components/app-list-cloud/app-list-cloud.component';
@NgModule({
imports: [CommonModule, ...TEMPLATE_DIRECTIVES, MaterialModule, CoreModule],
declarations: [AppListCloudComponent, AppDetailsCloudComponent],
imports: [AppListCloudComponent, AppDetailsCloudComponent],
exports: [AppListCloudComponent, AppDetailsCloudComponent]
})
export class AppListCloudModule {}

62
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts
View File

@ -1,62 +0,0 @@
/*!
* @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, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
@Component({
selector: 'adf-cloud-app-details',
templateUrl: './app-details-cloud.component.html',
styleUrls: ['./app-details-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppDetailsCloudComponent {
@Input()
applicationInstance: ApplicationInstanceModel;
@Output()
selectedApp = new EventEmitter<ApplicationInstanceModel>();
/**
* Pass the selected app as next
*
* @param app application model
*/
onSelectApp(app: ApplicationInstanceModel): void {
this.selectedApp.emit(app);
}
/**
* Get application instance theme
*
* @returns the name of the theme
*/
getTheme(): string {
return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
}
/**
* Get application instance icon
*
* @returns the name of the icon
*/
getIcon(): string {
return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
}
}

0
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.html → lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.html
View File

55
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss → lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.scss
View File

@ -22,16 +22,46 @@
}
$tile-themes: (
theme-1: (bg: #269abc, color: #168aac),
theme-2: (bg: #7da9b0, color: #6d99a0),
theme-3: (bg: #7689ab, color: #66799b),
theme-4: (bg: #c74e3e, color: #b73e2e),
theme-5: (bg: #fab96c, color: #eaa95c),
theme-6: (bg: #759d4c, color: #658d3c),
theme-7: (bg: #b1b489, color: #a1a479),
theme-8: (bg: #a17299, color: #916289),
theme-9: (bg: #696c67, color: #595c57),
theme-10: (bg: #cabb33, color: #baab23)
theme-1: (
bg: #269abc,
color: #168aac
),
theme-2: (
bg: #7da9b0,
color: #6d99a0
),
theme-3: (
bg: #7689ab,
color: #66799b
),
theme-4: (
bg: #c74e3e,
color: #b73e2e
),
theme-5: (
bg: #fab96c,
color: #eaa95c
),
theme-6: (
bg: #759d4c,
color: #658d3c
),
theme-7: (
bg: #b1b489,
color: #a1a479
),
theme-8: (
bg: #a17299,
color: #916289
),
theme-9: (
bg: #696c67,
color: #595c57
),
theme-10: (
bg: #cabb33,
color: #baab23
)
);
adf-cloud-app-details {
@ -69,10 +99,7 @@ adf-cloud-app-details {
max-width: unset;
&:hover {
box-shadow:
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
cursor: pointer;
transform: scale(1.015);
}

9
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts → lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.spec.ts
View File

@ -16,11 +16,10 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { fakeApplicationInstance } from '../mock/app-model.mock';
import { fakeApplicationInstance } from '../../mock/app-model.mock';
import { AppDetailsCloudComponent } from './app-details-cloud.component';
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
import { AppListCloudModule } from '../app-list-cloud.module';
import { DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
import { DEFAULT_APP_INSTANCE_THEME } from '../../models/application-instance.model';
describe('AppDetailsCloudComponent', () => {
let component: AppDetailsCloudComponent;
@ -29,7 +28,7 @@ describe('AppDetailsCloudComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ProcessServiceCloudTestingModule, AppListCloudModule]
imports: [ProcessServiceCloudTestingModule, AppDetailsCloudComponent]
});
fixture = TestBed.createComponent(AppDetailsCloudComponent);
component = fixture.componentInstance;

7
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.stories.ts → lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.stories.ts
View File

@ -17,9 +17,8 @@
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AppDetailsCloudComponent } from './app-details-cloud.component';
import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
import { AppListCloudModule } from '../app-list-cloud.module';
import { fakeApplicationInstance } from '../mock/app-model.mock';
import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
import { fakeApplicationInstance } from '../../mock/app-model.mock';
import { importProvidersFrom } from '@angular/core';
export default {
@ -27,7 +26,7 @@ export default {
title: 'Process Services Cloud/App List Cloud/App Details Cloud',
decorators: [
moduleMetadata({
imports: [AppListCloudModule]
imports: [AppDetailsCloudComponent]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

66
lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.ts Normal file
View File

@ -0,0 +1,66 @@
/*!
* @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, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../../models/application-instance.model';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
@Component({
selector: 'adf-cloud-app-details',
standalone: true,
imports: [CommonModule, TranslateModule, MatIconModule, MatCardModule],
templateUrl: './app-details-cloud.component.html',
styleUrls: ['./app-details-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppDetailsCloudComponent {
@Input()
applicationInstance: ApplicationInstanceModel;
@Output()
selectedApp = new EventEmitter<ApplicationInstanceModel>();
/**
* Pass the selected app as next
*
* @param app application model
*/
onSelectApp(app: ApplicationInstanceModel): void {
this.selectedApp.emit(app);
}
/**
* Get application instance theme
*
* @returns the name of the theme
*/
getTheme(): string {
return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
}
/**
* Get application instance icon
*
* @returns the name of the icon
*/
getIcon(): string {
return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
}
}

0
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html → lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.html
View File

0
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss → lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss
View File

13
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts → lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.spec.ts
View File

@ -19,10 +19,12 @@ import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AlfrescoApiService } from '@alfresco/adf-content-services';
import { of, throwError } from 'rxjs';
import { fakeApplicationInstance } from '../mock/app-model.mock';
import { fakeApplicationInstance } from '../../mock/app-model.mock';
import { AppListCloudComponent, LAYOUT_GRID, LAYOUT_LIST } from './app-list-cloud.component';
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
import { AppsProcessCloudService } from '../../services/apps-process-cloud.service';
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
import { MatIconModule } from '@angular/material/icon';
import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
describe('AppListCloudComponent', () => {
let component: AppListCloudComponent;
@ -40,6 +42,8 @@ describe('AppListCloudComponent', () => {
};
@Component({
standalone: true,
imports: [MatIconModule, CustomEmptyContentTemplateDirective, AppListCloudComponent],
template: `
<adf-cloud-app-list>
<adf-custom-empty-content-template>
@ -53,8 +57,7 @@ describe('AppListCloudComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ProcessServiceCloudTestingModule],
declarations: [CustomEmptyAppListCloudTemplateComponent]
imports: [ProcessServiceCloudTestingModule, AppListCloudComponent, CustomEmptyAppListCloudTemplateComponent]
});
fixture = TestBed.createComponent(AppListCloudComponent);
component = fixture.componentInstance;

5
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.stories.ts → lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.stories.ts
View File

@ -16,8 +16,7 @@
*/
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
import { AppListCloudModule } from '../app-list-cloud.module';
import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
import { AppListCloudComponent } from './app-list-cloud.component';
import { importProvidersFrom } from '@angular/core';
@ -26,7 +25,7 @@ export default {
title: 'Process Services Cloud/App List Cloud/App List Cloud',
decorators: [
moduleMetadata({
imports: [AppListCloudModule]
imports: [AppListCloudComponent]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

24
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts → lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.ts
View File

@ -15,12 +15,19 @@
* limitations under the License.
*/
import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
import { CustomEmptyContentTemplateDirective, EmptyContentComponent } from '@alfresco/adf-core';
import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, ViewEncapsulation } 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 { AppsProcessCloudService } from '../../services/apps-process-cloud.service';
import { ApplicationInstanceModel } from '../../models/application-instance.model';
import { catchError } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { AppDetailsCloudComponent } from '../app-details-cloud/app-details-cloud.component';
import { MatIconModule } from '@angular/material/icon';
import { MatLineModule } from '@angular/material/core';
import { MatListModule } from '@angular/material/list';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
export const LAYOUT_LIST: string = 'LIST';
export const LAYOUT_GRID: string = 'GRID';
@ -28,6 +35,17 @@ export const DEPLOYED_STATUS: string = 'DEPLOYED';
@Component({
selector: 'adf-cloud-app-list',
standalone: true,
imports: [
CommonModule,
TranslateModule,
AppDetailsCloudComponent,
MatIconModule,
MatLineModule,
MatListModule,
EmptyContentComponent,
MatProgressSpinnerModule
],
templateUrl: './app-list-cloud.component.html',
styleUrls: ['./app-list-cloud.component.scss'],
encapsulation: ViewEncapsulation.None

4
lib/process-services-cloud/src/lib/app/public-api.ts
View File

@ -15,8 +15,8 @@
* limitations under the License.
*/
export * from './components/app-list-cloud.component';
export * from './components/app-details-cloud.component';
export * from './components/app-list-cloud/app-list-cloud.component';
export * from './components/app-details-cloud/app-details-cloud.component';
export * from './services/apps-process-cloud.service';
export * from './models/application-instance.model';
export * from './app-list-cloud.module';

30
lib/process-services-cloud/src/lib/process/process-header/process-header-cloud.module.spec.ts
View File

@ -1,30 +0,0 @@
/*!
* @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 { ProcessHeaderCloudModule } from './process-header-cloud.module';
describe('ProcessHeaderCloudModule', () => {
let processHeaderCloudModule: ProcessHeaderCloudModule;
beforeEach(() => {
processHeaderCloudModule = new ProcessHeaderCloudModule();
});
it('should create an instance', () => {
expect(processHeaderCloudModule).toBeTruthy();
});
});

30
lib/process-services-cloud/src/lib/task/task-header/task-header-cloud.module.spec.ts
View File

@ -1,30 +0,0 @@
/*!
* @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 { TaskHeaderCloudModule } from './task-header-cloud.module';
describe('TaskHeaderCloudModule', () => {
let taskHeaderCloudModule: TaskHeaderCloudModule;
beforeEach(() => {
taskHeaderCloudModule = new TaskHeaderCloudModule();
});
it('should create an instance', () => {
expect(taskHeaderCloudModule).toBeTruthy();
});
});