mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-31 17:38:28 +00:00
[MNT-21386] move settings to a separate project (#1676)
* move settings to a separate project * rework theming
This commit is contained in:
Denys Vuika
GitHub
@@ -1,107 +0,0 @@
|
||||
<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async">
|
||||
<adf-toolbar-title>
|
||||
<a
|
||||
class="app-menu__title"
|
||||
title="{{ appName$ | async }}"
|
||||
[routerLink]="['/']"
|
||||
>
|
||||
<img [src]="logo" alt="{{ appName$ | async }}" />
|
||||
</a>
|
||||
</adf-toolbar-title>
|
||||
</adf-toolbar>
|
||||
|
||||
<mat-accordion multi="true" displayMode="flat">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{
|
||||
'APP.SETTINGS.REPOSITORY-SETTINGS' | translate
|
||||
}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<form
|
||||
[formGroup]="form"
|
||||
novalidate
|
||||
(ngSubmit)="apply(form.value, form.valid)"
|
||||
>
|
||||
<div>
|
||||
<mat-form-field class="settings-input" appearance="outline">
|
||||
<mat-label>ACS Repository URL</mat-label>
|
||||
<input matInput formControlName="ecmHost" type="text" />
|
||||
<mat-error *ngIf="form.get('ecmHost').hasError('pattern')">
|
||||
{{ 'APP.SETTINGS.INVALID-VALUE-FORMAT' | translate }}
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('ecmHost').hasError('required')">
|
||||
{{ 'APP.SETTINGS.REQUIRED-FIELD' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="settings-input" appearance="outline">
|
||||
<mat-label>Authentication Type</mat-label>
|
||||
<mat-select formControlName="authType">
|
||||
<mat-option value="BASIC">Basic</mat-option>
|
||||
<mat-option value="OAUTH">OAuth (Identity Service)</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="settings-input" appearance="outline">
|
||||
<mat-label>Alfresco Identity Service URL</mat-label>
|
||||
<input matInput formControlName="aisHost" type="text" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="settings-buttons">
|
||||
<button mat-button (click)="reset()">
|
||||
{{ 'APP.SETTINGS.RESET' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
color="primary"
|
||||
type="submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
{{ 'APP.SETTINGS.APPLY' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel *ngFor="let group of settingGroups">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{ group.name | translate }}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="aca-settings-parameter-list">
|
||||
<ng-container *ngFor="let param of group.parameters">
|
||||
<ng-container [ngSwitch]="param.type">
|
||||
<ng-container *ngSwitchCase="'boolean'">
|
||||
<mat-checkbox
|
||||
[checked]="getBooleanParamValue(param)"
|
||||
(change)="setParamValue(param, $event.checked)"
|
||||
>{{ param.name | translate }}</mat-checkbox
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'string'">
|
||||
<mat-form-field class="settings-input" appearance="outline">
|
||||
<mat-label>{{ param.name | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
[value]="getStringParamValue(param)"
|
||||
(blur)="setParamValue(param, $event.target.value)"
|
||||
(keyup.enter)="setParamValue(param, $event.target.value)"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
<span>Unknown parameter type: {{ param.name | translate }}</span>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
@@ -1,144 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { SettingsComponent } from './settings.component';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { setupTestBed, StorageService } from '@alfresco/adf-core';
|
||||
import { AppSettingsModule } from './settings.module';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
|
||||
import { AppExtensionService, SettingsParameterRef } from '@alfresco/aca-shared';
|
||||
|
||||
describe('SettingsComponent', () => {
|
||||
let fixture: ComponentFixture<SettingsComponent>;
|
||||
let component: SettingsComponent;
|
||||
let storage: StorageService;
|
||||
let appExtensions: AppExtensionService;
|
||||
|
||||
let stringParam: SettingsParameterRef;
|
||||
let boolParam: SettingsParameterRef;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
AppSettingsModule,
|
||||
AppTestingModule,
|
||||
TranslateModule.forRoot({
|
||||
loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
storage = TestBed.inject(StorageService);
|
||||
appExtensions = TestBed.inject(AppExtensionService);
|
||||
|
||||
stringParam = {
|
||||
key: 'key',
|
||||
name: 'param1',
|
||||
type: 'string',
|
||||
value: 'paramValue'
|
||||
};
|
||||
|
||||
boolParam = {
|
||||
key: 'key',
|
||||
name: 'param2',
|
||||
type: 'boolean',
|
||||
value: true
|
||||
};
|
||||
});
|
||||
|
||||
it('should retrieve string param value from storage', () => {
|
||||
spyOn(storage, 'getItem').and.returnValue('storageValue');
|
||||
|
||||
const value = component.getStringParamValue(stringParam);
|
||||
expect(value).toBe('storageValue');
|
||||
});
|
||||
|
||||
it('should use param value as fallback when storage is empty', () => {
|
||||
spyOn(storage, 'getItem').and.returnValue(null);
|
||||
|
||||
const value = component.getStringParamValue(stringParam);
|
||||
expect(value).toBe('paramValue');
|
||||
});
|
||||
|
||||
it('should save param value', () => {
|
||||
spyOn(storage, 'setItem').and.stub();
|
||||
|
||||
component.setParamValue(stringParam, 'test');
|
||||
|
||||
expect(stringParam.value).toBe('test');
|
||||
expect(storage.setItem).toHaveBeenCalledWith(stringParam.key, stringParam.value);
|
||||
});
|
||||
|
||||
it('should save param value only if changed', () => {
|
||||
spyOn(storage, 'setItem').and.stub();
|
||||
|
||||
component.setParamValue(stringParam, 'test');
|
||||
component.setParamValue(stringParam, 'test');
|
||||
component.setParamValue(stringParam, 'test');
|
||||
|
||||
expect(storage.setItem).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should retrieve boolean param value', () => {
|
||||
const getItemSpy = spyOn(storage, 'getItem').and.returnValue('true');
|
||||
expect(component.getBooleanParamValue(boolParam)).toBe(true);
|
||||
|
||||
getItemSpy.and.returnValue('false');
|
||||
expect(component.getBooleanParamValue(boolParam)).toBe(false);
|
||||
});
|
||||
|
||||
it('should fallback to boolean param value when storage is empty', () => {
|
||||
spyOn(storage, 'getItem').and.returnValue(null);
|
||||
expect(component.getBooleanParamValue(boolParam)).toBe(true);
|
||||
});
|
||||
|
||||
it('should render categories as expansion panels', async () => {
|
||||
spyOn(component, 'reset').and.stub();
|
||||
|
||||
appExtensions.settingGroups = [
|
||||
{
|
||||
id: 'group1',
|
||||
name: 'Group 1',
|
||||
parameters: []
|
||||
},
|
||||
{
|
||||
id: 'group2',
|
||||
name: 'Group 2',
|
||||
parameters: []
|
||||
}
|
||||
];
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
|
||||
expect(panels.length).toBe(3);
|
||||
});
|
||||
});
|
||||
@@ -1,80 +0,0 @@
|
||||
@mixin aca-settings-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.aca-settings-parameter-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aca-settings {
|
||||
&-extensions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.settings-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: mat-color($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: mat-color($background, card);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { AppConfigService, StorageService, OauthConfigModel } from '@alfresco/adf-core';
|
||||
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppStore, getHeaderColor, getAppName, getUserProfile, SetSettingsParameterAction } from '@alfresco/aca-shared/store';
|
||||
import { ProfileState } from '@alfresco/adf-extensions';
|
||||
import { AppExtensionService, SettingsGroupRef, SettingsParameterRef } from '@alfresco/aca-shared';
|
||||
|
||||
interface RepositoryConfig {
|
||||
ecmHost: string;
|
||||
authType: string;
|
||||
aisHost: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'aca-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-settings' }
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
private defaultPath = '/assets/images/alfresco-logo-white.svg';
|
||||
|
||||
form: FormGroup;
|
||||
|
||||
profile$: Observable<ProfileState>;
|
||||
appName$: Observable<string>;
|
||||
headerColor$: Observable<string>;
|
||||
|
||||
get settingGroups(): SettingsGroupRef[] {
|
||||
return this.appExtensions.getSettingsGroups();
|
||||
}
|
||||
|
||||
constructor(
|
||||
private appExtensions: AppExtensionService,
|
||||
private store: Store<AppStore>,
|
||||
private appConfig: AppConfigService,
|
||||
private storage: StorageService,
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
this.profile$ = store.select(getUserProfile);
|
||||
this.appName$ = store.select(getAppName);
|
||||
this.headerColor$ = store.select(getHeaderColor);
|
||||
}
|
||||
|
||||
get logo(): string {
|
||||
return this.appConfig.get('application.logo', this.defaultPath);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.fb.group({
|
||||
ecmHost: ['', [Validators.required, Validators.pattern('^(http|https)://.*[^/]$')]],
|
||||
aisHost: ['', [Validators.required, Validators.pattern('^(http|https)://.*[^/]$')]],
|
||||
authType: ['']
|
||||
});
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
apply(model: RepositoryConfig, isValid: boolean) {
|
||||
if (isValid) {
|
||||
this.storage.setItem('ecmHost', model.ecmHost);
|
||||
this.storage.setItem('authType', model.authType);
|
||||
|
||||
const config: OauthConfigModel = this.appConfig.get<OauthConfigModel>('oauth2', null);
|
||||
config.host = model.aisHost;
|
||||
this.storage.setItem('oauth2', JSON.stringify(config));
|
||||
|
||||
// window.location.reload(true);
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
const config: OauthConfigModel = this.appConfig.get<OauthConfigModel>('oauth2', null);
|
||||
|
||||
this.form.reset({
|
||||
ecmHost: this.storage.getItem('ecmHost') || this.appConfig.get<string>('ecmHost'),
|
||||
aisHost: config.host,
|
||||
authType: this.appConfig.get<string>('authType')
|
||||
});
|
||||
}
|
||||
|
||||
getStringParamValue(param: SettingsParameterRef): string {
|
||||
return this.storage.getItem(param.key) || param.value;
|
||||
}
|
||||
|
||||
setParamValue(param: SettingsParameterRef, value: any) {
|
||||
const currentValue = this.getStringParamValue(param);
|
||||
|
||||
if (currentValue !== value.toString()) {
|
||||
param.value = value;
|
||||
this.saveToStorage(param);
|
||||
}
|
||||
}
|
||||
|
||||
getBooleanParamValue(param: SettingsParameterRef): boolean {
|
||||
const result = this.storage.getItem(param.key);
|
||||
if (result) {
|
||||
return result === 'true';
|
||||
} else {
|
||||
return param.value ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
private saveToStorage(param: SettingsParameterRef) {
|
||||
this.storage.setItem(param.key, param.value ? param.value.toString() : param.value);
|
||||
this.store.dispatch(new SetSettingsParameterAction({ name: param.key, value: param.value }));
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { SettingsComponent } from './settings.component';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: SettingsComponent,
|
||||
data: {
|
||||
title: 'Settings'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)],
|
||||
declarations: [SettingsComponent]
|
||||
})
|
||||
export class AppSettingsModule {}
|
||||
Reference in New Issue
Block a user