mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-31 17:38:28 +00:00
[ACS-4010] Rule sets listing regrouping (#2803)
* [ACS-4010] Rule sets listing regrouping * Linting * Unit tests * Remove TODOs
This commit is contained in:
Thomas Hunter
GitHub
@@ -0,0 +1,47 @@
|
||||
<ng-container *ngFor="let item of items">
|
||||
|
||||
<aca-rule-list-item
|
||||
*ngIf="item.type === 'rule'; else loadMoreRules"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
tabindex="0"
|
||||
[rule]="item.rule"
|
||||
[isSelected]="isSelected(item.rule)"
|
||||
(click)="onRuleClicked(item.rule)"
|
||||
(enabledChanged)="onEnabledChanged(item.rule, $event)">
|
||||
</aca-rule-list-item>
|
||||
|
||||
<ng-template #loadMoreRules>
|
||||
<div
|
||||
*ngIf="item.type === 'load-more-rules'; else loadMoreRuleSets"
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="onClickLoadMoreRules(item.ruleSet)"
|
||||
(keyup.enter)="onClickLoadMoreRules(item.ruleSet)">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOAD_MORE_RULES' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadMoreRuleSets>
|
||||
<div
|
||||
*ngIf="item.type === 'load-more-rule-sets'; else loadingRules"
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="onClickLoadMoreRuleSets()"
|
||||
(keyup.enter)="onClickLoadMoreRuleSets()">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOAD_MORE_RULE_SETS' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadingRules>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)">
|
||||
<mat-spinner mode="indeterminate" [diameter]="16"></mat-spinner>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOADING_RULES' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</ng-container>
|
||||
@@ -0,0 +1,27 @@
|
||||
.aca-rule-list-grouping {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__non-rule-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theme-disabled-text-color);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 0.5em 0;
|
||||
|
||||
&.load-more {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.mat-spinner {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/*!
|
||||
* @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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { RuleListGroupingUiComponent } from './rule-list-grouping.ui-component';
|
||||
import { ruleListGroupingItemsMock, rulesMock } from '../../mock/rules.mock';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { CoreTestingModule } from '@alfresco/adf-core';
|
||||
import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
|
||||
|
||||
describe('RuleListGroupingUiComponent', () => {
|
||||
let component: RuleListGroupingUiComponent;
|
||||
let fixture: ComponentFixture<RuleListGroupingUiComponent>;
|
||||
let debugElement: DebugElement;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreTestingModule, AcaFolderRulesModule],
|
||||
declarations: [RuleListGroupingUiComponent]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(RuleListGroupingUiComponent);
|
||||
component = fixture.componentInstance;
|
||||
debugElement = fixture.debugElement;
|
||||
});
|
||||
|
||||
it('should display the list of rules', () => {
|
||||
expect(component).toBeTruthy();
|
||||
|
||||
component.items = ruleListGroupingItemsMock;
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
const rules = debugElement.queryAll(By.css('.aca-rule-list-item'));
|
||||
|
||||
expect(rules).toBeTruthy('Could not find rules');
|
||||
expect(rules.length).toBe(2, 'Unexpected number of rules');
|
||||
|
||||
const rule = debugElement.query(By.css('.aca-rule-list-item:first-child'));
|
||||
const name = rule.query(By.css('.aca-rule-list-item__header__name'));
|
||||
const description = rule.query(By.css('.aca-rule-list-item__description'));
|
||||
const toggleBtn = rule.query(By.css('mat-slide-toggle'));
|
||||
|
||||
expect(name.nativeElement.textContent).toBe(rulesMock[0].name);
|
||||
expect(toggleBtn).toBeTruthy();
|
||||
expect(description.nativeElement.textContent).toBe(rulesMock[0].description);
|
||||
});
|
||||
});
|
||||
@@ -24,84 +24,49 @@
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { RuleSet } from '../../model/rule-set.model';
|
||||
import { NodeInfo } from '@alfresco/aca-shared/store';
|
||||
import { Rule } from '../../model/rule.model';
|
||||
import { RuleGroupingItem } from '../../model/rule-grouping-item.model';
|
||||
import { RuleSet } from '../../model/rule-set.model';
|
||||
|
||||
@Component({
|
||||
selector: 'aca-rule-set-list',
|
||||
templateUrl: './rule-set-list.ui-component.html',
|
||||
styleUrls: ['./rule-set-list.ui-component.scss'],
|
||||
selector: 'aca-rule-list-grouping',
|
||||
templateUrl: 'rule-list-grouping.ui-component.html',
|
||||
styleUrls: ['rule-list-grouping.ui-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-rule-set-list' }
|
||||
host: { class: 'aca-rule-list-grouping' }
|
||||
})
|
||||
export class RuleSetListUiComponent {
|
||||
export class RuleListGroupingUiComponent {
|
||||
@Input()
|
||||
folderId = '';
|
||||
private _ruleSets: RuleSet[] = [];
|
||||
items: RuleGroupingItem[] = [];
|
||||
@Input()
|
||||
get ruleSets(): RuleSet[] {
|
||||
return this._ruleSets;
|
||||
}
|
||||
set ruleSets(value: RuleSet[]) {
|
||||
this._ruleSets = value;
|
||||
this.expandedRuleSets = [...value];
|
||||
}
|
||||
@Input()
|
||||
hasMoreRuleSets = false;
|
||||
@Input()
|
||||
ruleSetsLoading = false;
|
||||
@Input()
|
||||
selectedRule = null;
|
||||
selectedRule: Rule = null;
|
||||
|
||||
@Output()
|
||||
navigateToOtherFolder = new EventEmitter<string>();
|
||||
@Output()
|
||||
loadMoreRuleSets = new EventEmitter<void>();
|
||||
@Output()
|
||||
loadMoreRules = new EventEmitter<RuleSet>();
|
||||
@Output()
|
||||
selectRule = new EventEmitter<Rule>();
|
||||
@Output()
|
||||
ruleEnabledChanged = new EventEmitter<[Rule, boolean]>();
|
||||
@Output()
|
||||
loadMoreRules = new EventEmitter<RuleSet>();
|
||||
@Output()
|
||||
loadMoreRuleSets = new EventEmitter<void>();
|
||||
|
||||
expandedRuleSets: RuleSet[] = [];
|
||||
|
||||
isRuleSetLinked(ruleSet: RuleSet): boolean {
|
||||
return ruleSet.linkedToBy.indexOf(this.folderId) > -1;
|
||||
}
|
||||
|
||||
isRuleSetExpanded(ruleSet: RuleSet): boolean {
|
||||
return this.expandedRuleSets.indexOf(ruleSet) > -1;
|
||||
}
|
||||
|
||||
clickRuleSetHeader(ruleSet: RuleSet) {
|
||||
if (this.isRuleSetExpanded(ruleSet)) {
|
||||
this.expandedRuleSets.splice(this.expandedRuleSets.indexOf(ruleSet), 1);
|
||||
} else {
|
||||
this.expandedRuleSets.push(ruleSet);
|
||||
}
|
||||
}
|
||||
|
||||
clickNavigateButton(folder: NodeInfo) {
|
||||
if (folder && folder.id) {
|
||||
this.navigateToOtherFolder.emit(folder.id);
|
||||
}
|
||||
}
|
||||
|
||||
clickLoadMoreRuleSets() {
|
||||
this.loadMoreRuleSets.emit();
|
||||
}
|
||||
|
||||
clickLoadMoreRules(ruleSet: RuleSet) {
|
||||
this.loadMoreRules.emit(ruleSet);
|
||||
}
|
||||
|
||||
onSelectRule(rule: Rule) {
|
||||
onRuleClicked(rule: Rule): void {
|
||||
this.selectRule.emit(rule);
|
||||
}
|
||||
|
||||
onRuleEnabledChanged(event: [Rule, boolean]) {
|
||||
this.ruleEnabledChanged.emit(event);
|
||||
isSelected(rule): boolean {
|
||||
return rule.id === this.selectedRule?.id;
|
||||
}
|
||||
|
||||
onEnabledChanged(rule: Rule, isEnabled: boolean) {
|
||||
this.ruleEnabledChanged.emit([rule, isEnabled]);
|
||||
}
|
||||
|
||||
onClickLoadMoreRules(ruleSet: RuleSet) {
|
||||
this.loadMoreRules.emit(ruleSet);
|
||||
}
|
||||
|
||||
onClickLoadMoreRuleSets() {
|
||||
this.loadMoreRuleSets.emit();
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
<div class="aca-rule-list-item__header">
|
||||
|
||||
<span class="aca-rule-list-item__header__name">{{ rule.name }}</span>
|
||||
<mat-slide-toggle [(ngModel)]="rule.isEnabled" (click)="onToggleClick(!rule.isEnabled, $event)"></mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle
|
||||
[checked]="rule.isEnabled"
|
||||
(click)="onToggleClick(!rule.isEnabled, $event)">
|
||||
</mat-slide-toggle>
|
||||
|
||||
</div>
|
||||
<div class="aca-rule-list-item__description">{{ rule.description }}</div>
|
||||
|
||||
@@ -45,6 +45,7 @@ export class RuleListItemUiComponent {
|
||||
|
||||
onToggleClick(isEnabled: boolean, event: Event) {
|
||||
event.stopPropagation();
|
||||
this.rule.isEnabled = !this.rule.isEnabled;
|
||||
this.enabledChanged.emit(isEnabled);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,80 @@
|
||||
<div class="aca-rules-list" >
|
||||
<aca-rule-list-item
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
tabindex="0"
|
||||
*ngFor="let rule of rules"
|
||||
[rule]="rule"
|
||||
[isSelected]="isSelected(rule)"
|
||||
(click)="onRuleClicked(rule)"
|
||||
(enabledChanged)="onEnabledChanged(rule, $event)">
|
||||
</aca-rule-list-item>
|
||||
<div
|
||||
*ngIf="inheritedRuleSetGroupingItems.length > 0"
|
||||
class="aca-rule-list__item"
|
||||
data-automation-id="rule-list-item"
|
||||
[ngClass]="{ expanded: inheritedRuleSetsExpanded }">
|
||||
|
||||
<div class="aca-rule-list__item__header">
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="aca-rule-list__item__header__title"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded"
|
||||
(keyup.enter)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded">
|
||||
|
||||
<span class="aca-rule-list__item__header__title__text">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
|
||||
<mat-icon [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
|
||||
info
|
||||
</mat-icon>
|
||||
</span>
|
||||
<mat-icon class="aca-rule-list__item__header__icon">
|
||||
{{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }}
|
||||
</mat-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<aca-rule-list-grouping
|
||||
*ngIf="inheritedRuleSetsExpanded"
|
||||
[items]="inheritedRuleSetGroupingItems"
|
||||
[selectedRule]="selectedRule"
|
||||
(selectRule)="onSelectRule($event)"
|
||||
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
|
||||
(loadMoreRules)="onLoadMoreRules($event)"
|
||||
(loadMoreRuleSets)="onLoadMoreRuleSets()">
|
||||
</aca-rule-list-grouping>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngIf="mainRuleSetGroupingItems.length > 0"
|
||||
class="aca-rule-list__item"
|
||||
data-automation-id="rule-list-item"
|
||||
[ngClass]="{ expanded: mainRuleSetExpanded }">
|
||||
|
||||
<div class="aca-rule-list__item__header">
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="aca-rule-list__item__header__title"
|
||||
data-automation-id="main-rule-set-title"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="mainRuleSetExpanded = !mainRuleSetExpanded"
|
||||
(keyup.enter)="mainRuleSetExpanded = !mainRuleSetExpanded">
|
||||
|
||||
<ng-container *ngIf="isMainRuleSetOwned; else linkedRuleSet">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }}
|
||||
</ng-container>
|
||||
<ng-template #linkedRuleSet>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }}
|
||||
</ng-template>
|
||||
|
||||
<mat-icon class="aca-rule-list__item__header__icon">
|
||||
{{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
|
||||
</mat-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<aca-rule-list-grouping
|
||||
*ngIf="mainRuleSetExpanded"
|
||||
[items]="mainRuleSetGroupingItems"
|
||||
[selectedRule]="selectedRule"
|
||||
(selectRule)="onSelectRule($event)"
|
||||
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
|
||||
(loadMoreRules)="onLoadMoreRules($event)">
|
||||
</aca-rule-list-grouping>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,52 @@
|
||||
.aca-rule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
gap: 8px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
color: var(--theme-text-color);
|
||||
user-select: none;
|
||||
font-size: 0.9em;
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 0.5em 1em;
|
||||
flex: 1;
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.mat-icon {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.aca-rule-list__item__header {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,49 +23,50 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { RuleListUiComponent } from './rule-list.ui-component';
|
||||
import { rulesMock } from '../../mock/rules.mock';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { CoreTestingModule } from '@alfresco/adf-core';
|
||||
import { RuleListGroupingUiComponent } from '../rule-list-grouping/rule-list-grouping.ui-component';
|
||||
import { RuleListItemUiComponent } from '../rule-list-item/rule-list-item.ui-component';
|
||||
import { ownedRuleSetMock, ruleSetsMock, ruleSetWithLinkMock } from '../../mock/rule-sets.mock';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { CoreTestingModule } from '@alfresco/adf-core';
|
||||
import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
|
||||
import { owningFolderIdMock } from '../../mock/node.mock';
|
||||
|
||||
describe('RuleListUiComponent', () => {
|
||||
let component: RuleListUiComponent;
|
||||
let fixture: ComponentFixture<RuleListUiComponent>;
|
||||
let component: RuleListUiComponent;
|
||||
let debugElement: DebugElement;
|
||||
|
||||
const innerTextWithoutIcon = (element: HTMLDivElement): string => element.innerText.replace(/(expand_more|chevron_right)$/, '').trim();
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreTestingModule, AcaFolderRulesModule],
|
||||
declarations: [RuleListUiComponent]
|
||||
imports: [CoreTestingModule],
|
||||
declarations: [RuleListUiComponent, RuleListGroupingUiComponent, RuleListItemUiComponent]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(RuleListUiComponent);
|
||||
component = fixture.componentInstance;
|
||||
debugElement = fixture.debugElement;
|
||||
|
||||
component.folderId = owningFolderIdMock;
|
||||
component.inheritedRuleSets = ruleSetsMock;
|
||||
});
|
||||
|
||||
it('should display the list of rules', () => {
|
||||
expect(component).toBeTruthy();
|
||||
|
||||
component.rules = rulesMock;
|
||||
|
||||
it('should show "Rules from current folder" as a title if the main rule set is owned', () => {
|
||||
component.mainRuleSet = ownedRuleSetMock;
|
||||
fixture.detectChanges();
|
||||
|
||||
const rules = debugElement.queryAll(By.css('.aca-rule-list-item'));
|
||||
const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));
|
||||
expect(innerTextWithoutIcon(mainRuleSetTitleElement.nativeElement as HTMLDivElement)).toBe('ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES');
|
||||
});
|
||||
|
||||
expect(rules).toBeTruthy('Could not find rules');
|
||||
expect(rules.length).toBe(2, 'Unexpected number of rules');
|
||||
it('should show "Rules from linked folder" as a title if the main rule set is linked', () => {
|
||||
component.mainRuleSet = ruleSetWithLinkMock;
|
||||
fixture.detectChanges();
|
||||
|
||||
const rule = debugElement.query(By.css('.aca-rule-list-item:first-child'));
|
||||
const name = rule.query(By.css('.aca-rule-list-item__header__name'));
|
||||
const description = rule.query(By.css('.aca-rule-list-item__description'));
|
||||
const toggleBtn = rule.query(By.css('mat-slide-toggle'));
|
||||
|
||||
expect(name.nativeElement.textContent).toBe(rulesMock[0].name);
|
||||
expect(toggleBtn).toBeTruthy();
|
||||
expect(description.nativeElement.textContent).toBe(rulesMock[0].description);
|
||||
const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));
|
||||
expect(innerTextWithoutIcon(mainRuleSetTitleElement.nativeElement as HTMLDivElement)).toBe('ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -24,35 +24,98 @@
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { RuleSet } from '../../model/rule-set.model';
|
||||
import { Rule } from '../../model/rule.model';
|
||||
import { RuleGroupingItem } from '../../model/rule-grouping-item.model';
|
||||
import { FolderRuleSetsService } from '../../services/folder-rule-sets.service';
|
||||
|
||||
@Component({
|
||||
selector: 'aca-rule-list',
|
||||
templateUrl: 'rule-list.ui-component.html',
|
||||
styleUrls: ['rule-list.ui-component.scss'],
|
||||
templateUrl: './rule-list.ui-component.html',
|
||||
styleUrls: ['./rule-list.ui-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-rule-list' }
|
||||
})
|
||||
export class RuleListUiComponent {
|
||||
@Input()
|
||||
rules: Rule[] = [];
|
||||
mainRuleSet: RuleSet = null;
|
||||
@Input()
|
||||
selectedRule: Rule = null;
|
||||
folderId: string;
|
||||
@Input()
|
||||
inheritedRuleSets: RuleSet[] = [];
|
||||
@Input()
|
||||
hasMoreRuleSets = false;
|
||||
@Input()
|
||||
ruleSetsLoading = false;
|
||||
@Input()
|
||||
selectedRule = null;
|
||||
|
||||
@Output()
|
||||
loadMoreRuleSets = new EventEmitter<void>();
|
||||
@Output()
|
||||
loadMoreRules = new EventEmitter<RuleSet>();
|
||||
@Output()
|
||||
selectRule = new EventEmitter<Rule>();
|
||||
@Output()
|
||||
ruleEnabledChanged = new EventEmitter<[Rule, boolean]>();
|
||||
|
||||
onRuleClicked(rule: Rule): void {
|
||||
inheritedRuleSetsExpanded = true;
|
||||
mainRuleSetExpanded = true;
|
||||
|
||||
get isMainRuleSetOwned(): boolean {
|
||||
return FolderRuleSetsService.isOwnedRuleSet(this.mainRuleSet, this.folderId);
|
||||
}
|
||||
|
||||
get mainRuleSetGroupingItems(): RuleGroupingItem[] {
|
||||
return this.mainRuleSet ? this.getRuleSetGroupingItems(this.mainRuleSet) : [];
|
||||
}
|
||||
|
||||
get inheritedRuleSetGroupingItems(): RuleGroupingItem[] {
|
||||
const items = this.inheritedRuleSets.reduce((accumulator: RuleGroupingItem[], currentRuleSet: RuleSet) => {
|
||||
accumulator.push(...this.getRuleSetGroupingItems(currentRuleSet));
|
||||
return accumulator;
|
||||
}, []);
|
||||
if (this.ruleSetsLoading || this.hasMoreRuleSets) {
|
||||
items.push({
|
||||
type: this.ruleSetsLoading ? 'loading' : 'load-more-rule-sets'
|
||||
});
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
getRuleSetGroupingItems(ruleSet: RuleSet): RuleGroupingItem[] {
|
||||
const items: RuleGroupingItem[] = ruleSet.rules.map((rule: Rule) => ({
|
||||
type: 'rule',
|
||||
rule
|
||||
}));
|
||||
if (ruleSet.loadingRules || ruleSet.hasMoreRules) {
|
||||
items.push(
|
||||
ruleSet.loadingRules
|
||||
? {
|
||||
type: 'loading'
|
||||
}
|
||||
: {
|
||||
type: 'load-more-rules',
|
||||
ruleSet
|
||||
}
|
||||
);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
onLoadMoreRuleSets() {
|
||||
this.loadMoreRuleSets.emit();
|
||||
}
|
||||
|
||||
onLoadMoreRules(ruleSet: RuleSet) {
|
||||
this.loadMoreRules.emit(ruleSet);
|
||||
}
|
||||
|
||||
onSelectRule(rule: Rule) {
|
||||
this.selectRule.emit(rule);
|
||||
}
|
||||
|
||||
isSelected(rule): boolean {
|
||||
return rule.id === this.selectedRule?.id;
|
||||
}
|
||||
|
||||
onEnabledChanged(rule: Rule, isEnabled: boolean) {
|
||||
this.ruleEnabledChanged.emit([rule, isEnabled]);
|
||||
onRuleEnabledChanged(event: [Rule, boolean]) {
|
||||
this.ruleEnabledChanged.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<div
|
||||
*ngFor="let ruleSet of ruleSets"
|
||||
class="aca-rule-set-list__item"
|
||||
data-automation-id="rule-set-list-item"
|
||||
[ngClass]="{ expanded: isRuleSetExpanded(ruleSet) }">
|
||||
|
||||
<div class="aca-rule-set-list__item__header">
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
*ngIf="ruleSet.owningFolder.id !== folderId"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
class="aca-rule-set-list__item__header__navigate-button"
|
||||
(click)="clickNavigateButton(ruleSet.owningFolder)"
|
||||
(keyup.enter)="clickNavigateButton(ruleSet.owningFolder)">
|
||||
<mat-icon>edit_note</mat-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="aca-rule-set-list__item__header__title"
|
||||
data-automation-id="rule-set-item-title"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="clickRuleSetHeader(ruleSet)"
|
||||
(keyup.enter)="clickRuleSetHeader(ruleSet)">
|
||||
|
||||
<ng-container *ngIf="ruleSet.owningFolder.id === folderId; else nonOwnedRuleSet">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_BY_THIS_FOLDER' | translate }}
|
||||
</ng-container>
|
||||
|
||||
<ng-template #nonOwnedRuleSet>
|
||||
<ng-container *ngIf="isRuleSetLinked(ruleSet); else inheritedRuleSet">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_FROM' | translate }} {{ ruleSet.owningFolder.name }}
|
||||
</ng-container>
|
||||
|
||||
<ng-template #inheritedRuleSet>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_FROM' | translate }} {{ ruleSet.owningFolder.name }}
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
<mat-icon class="aca-rule-set-list__item__header__icon">
|
||||
{{ isRuleSetExpanded(ruleSet) ? 'expand_more' : 'chevron_right' }}
|
||||
</mat-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="isRuleSetExpanded(ruleSet)">
|
||||
<aca-rule-list
|
||||
[rules]="ruleSet.rules"
|
||||
[selectedRule]="selectedRule"
|
||||
(selectRule)="onSelectRule($event)"
|
||||
(ruleEnabledChanged)="onRuleEnabledChanged($event)">
|
||||
</aca-rule-list>
|
||||
|
||||
<div
|
||||
*ngIf="ruleSet.hasMoreRules || ruleSet.loadingRules"
|
||||
tabindex="0"
|
||||
class="aca-rule-set-list__item__load-more load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="clickLoadMoreRules(ruleSet)"
|
||||
(keyup.enter)="clickLoadMoreRules(ruleSet)">
|
||||
<ng-container *ngIf="!ruleSet.loadingRules; else rulesLoadingTemplate">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOAD_MORE_RULES' | translate }}
|
||||
</ng-container>
|
||||
<ng-template #rulesLoadingTemplate>
|
||||
<mat-spinner mode="indeterminate" [diameter]="16"></mat-spinner>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOADING_RULES' | translate }}
|
||||
</ng-template>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngIf="hasMoreRuleSets"
|
||||
tabindex="0"
|
||||
class="aca-rule-set-list__load-more load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
[matRippleDisabled]="ruleSetsLoading"
|
||||
(click)="clickLoadMoreRuleSets()"
|
||||
(keyup.enter)="clickLoadMoreRuleSets()">
|
||||
<ng-container *ngIf="!ruleSetsLoading; else ruleSetsLoadingTemplate">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOAD_MORE_RULE_SETS' | translate }}
|
||||
</ng-container>
|
||||
<ng-template #ruleSetsLoadingTemplate>
|
||||
<mat-spinner mode="indeterminate" [diameter]="16"></mat-spinner>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOADING_RULE_SETS' | translate }}
|
||||
</ng-template>
|
||||
</div>
|
||||
@@ -1,78 +0,0 @@
|
||||
.aca-rule-set-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
gap: 8px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
color: var(--theme-text-color);
|
||||
user-select: none;
|
||||
font-size: 0.9em;
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 0.5em 1em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__navigate-button {
|
||||
border-right: 1px solid var(--theme-border-color);
|
||||
padding: 0.5em;
|
||||
|
||||
mat-icon {
|
||||
transform: scale(0.8);
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__load-more {
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.aca-rule-set-list__item__header {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__load-more {
|
||||
padding: 1em 2em;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theme-disabled-text-color);
|
||||
font-style: italic;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
.mat-spinner {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,76 +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 { RuleSetListUiComponent } from './rule-set-list.ui-component';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { CoreTestingModule } from '@alfresco/adf-core';
|
||||
import { RuleListUiComponent } from '../rule-list/rule-list.ui-component';
|
||||
import { RuleListItemUiComponent } from '../rule-list-item/rule-list-item.ui-component';
|
||||
import { ruleSetsMock } from '../../mock/rule-sets.mock';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { owningFolderIdMock } from '../../mock/node.mock';
|
||||
|
||||
describe('RuleSetListUiComponent', () => {
|
||||
let fixture: ComponentFixture<RuleSetListUiComponent>;
|
||||
let component: RuleSetListUiComponent;
|
||||
let debugElement: DebugElement;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreTestingModule],
|
||||
declarations: [RuleSetListUiComponent, RuleListUiComponent, RuleListItemUiComponent]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(RuleSetListUiComponent);
|
||||
component = fixture.componentInstance;
|
||||
debugElement = fixture.debugElement;
|
||||
|
||||
component.folderId = owningFolderIdMock;
|
||||
component.ruleSets = ruleSetsMock;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should display a list of rule sets', () => {
|
||||
const ruleSetElements = debugElement.queryAll(By.css(`[data-automation-id="rule-set-list-item"]`));
|
||||
|
||||
expect(ruleSetElements.length).toBe(3);
|
||||
});
|
||||
|
||||
it('should show the right message for the right sort of rule set', () => {
|
||||
const ruleSetTitleElements = debugElement.queryAll(By.css(`[data-automation-id="rule-set-item-title"]`));
|
||||
|
||||
const innerTextWithoutIcon = (element: HTMLDivElement): string => element.innerText.replace(/(expand_more|chevron_right)$/, '').trim();
|
||||
|
||||
expect(ruleSetTitleElements.length).toBe(3);
|
||||
expect(innerTextWithoutIcon(ruleSetTitleElements[0].nativeElement as HTMLDivElement)).toBe(
|
||||
'ACA_FOLDER_RULES.RULE_LIST.INHERITED_FROM other-folder-name'
|
||||
);
|
||||
expect(innerTextWithoutIcon(ruleSetTitleElements[1].nativeElement as HTMLDivElement)).toBe('ACA_FOLDER_RULES.RULE_LIST.OWNED_BY_THIS_FOLDER');
|
||||
expect(innerTextWithoutIcon(ruleSetTitleElements[2].nativeElement as HTMLDivElement)).toBe(
|
||||
'ACA_FOLDER_RULES.RULE_LIST.LINKED_FROM other-folder-name'
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user