[ACS-3513] [ACS-3515] Create, edit and delete rule set link (#2810)

This commit is contained in:
Thomas Hunter
2022-11-24 15:37:01 +00:00
committed by GitHub
parent a479394166
commit d9d2441b3a
20 changed files with 439 additions and 76 deletions

View File

@@ -6,6 +6,7 @@
tabindex="0"
[rule]="item.rule"
[isSelected]="isSelected(item.rule)"
[showEnabledToggle]="showEnabledToggles"
(click)="onRuleClicked(item.rule)"
(enabledChanged)="onEnabledChanged(item.rule, $event)">
</aca-rule-list-item>

View File

@@ -62,10 +62,8 @@ describe('RuleListGroupingUiComponent', () => {
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);
});
});

View File

@@ -40,6 +40,8 @@ export class RuleListGroupingUiComponent {
items: RuleGroupingItem[] = [];
@Input()
selectedRule: Rule = null;
@Input()
showEnabledToggles = false;
@Output()
selectRule = new EventEmitter<Rule>();

View File

@@ -3,6 +3,7 @@
<span class="aca-rule-list-item__header__name">{{ rule.name }}</span>
<mat-slide-toggle
*ngIf="showEnabledToggle"
[checked]="rule.isEnabled"
(click)="onToggleClick(!rule.isEnabled, $event)">
</mat-slide-toggle>

View File

@@ -39,6 +39,8 @@ export class RuleListItemUiComponent {
@Input()
@HostBinding('class.selected')
isSelected: boolean;
@Input()
showEnabledToggle = false;
@Output()
enabledChanged = new EventEmitter<boolean>();

View File

@@ -4,26 +4,22 @@
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"
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
(click)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded"
(keyup.enter)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded">
<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' }}
<span class="aca-rule-list__item__header__title">
{{ '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>
</div>
</span>
<mat-icon class="aca-rule-list__item__header__icon">
{{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</div>
<aca-rule-list-grouping
@@ -44,34 +40,37 @@
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">
<div
tabindex="0"
class="aca-rule-list__item__header"
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
(click)="mainRuleSetExpanded = !mainRuleSetExpanded"
(keyup.enter)="mainRuleSetExpanded = !mainRuleSetExpanded">
<span class="aca-rule-list__item__header__title" data-automation-id="main-rule-set-title">
<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>
</span>
<mat-icon class="aca-rule-list__item__header__icon">
{{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</div>
<ng-container *ngIf="!isMainRuleSetOwned">
<mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetEditLinkClicked($event)">edit</mat-icon>
<mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetUnlinkClicked($event)">link_off</mat-icon>
</ng-container>
<mat-icon class="aca-rule-list__item__header__icon">
{{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</div>
<aca-rule-list-grouping
*ngIf="mainRuleSetExpanded"
[items]="mainRuleSetGroupingItems"
[selectedRule]="selectedRule"
[showEnabledToggles]="isMainRuleSetOwned"
(selectRule)="onSelectRule($event)"
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
(loadMoreRules)="onLoadMoreRules($event)">

View File

@@ -14,31 +14,29 @@
&__header {
display: flex;
flex-direction: row;
gap: 4px;
align-items: stretch;
cursor: pointer;
color: var(--theme-text-color);
user-select: none;
font-size: 0.9em;
padding: 0.5em 1em;
& > * {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
&__title {
padding: 0.5em 1em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex: 1;
&__text {
display: flex;
flex-direction: row;
align-items: center;
.mat-icon {
transform: scale(0.8);
}
.mat-icon {
transform: scale(0.8);
}
}
}

View File

@@ -38,8 +38,6 @@ describe('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],
@@ -59,7 +57,7 @@ describe('RuleListUiComponent', () => {
fixture.detectChanges();
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((mainRuleSetTitleElement.nativeElement as HTMLDivElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES');
});
it('should show "Rules from linked folder" as a title if the main rule set is linked', () => {
@@ -67,6 +65,6 @@ describe('RuleListUiComponent', () => {
fixture.detectChanges();
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');
expect((mainRuleSetTitleElement.nativeElement as HTMLDivElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES');
});
});

View File

@@ -58,6 +58,10 @@ export class RuleListUiComponent {
selectRule = new EventEmitter<Rule>();
@Output()
ruleEnabledChanged = new EventEmitter<[Rule, boolean]>();
@Output()
ruleSetEditLinkClicked = new EventEmitter<RuleSet>();
@Output()
ruleSetUnlinkClicked = new EventEmitter<RuleSet>();
inheritedRuleSetsExpanded = true;
mainRuleSetExpanded = true;
@@ -118,4 +122,14 @@ export class RuleListUiComponent {
onRuleEnabledChanged(event: [Rule, boolean]) {
this.ruleEnabledChanged.emit(event);
}
onRuleSetEditLinkClicked(event: Event) {
event.stopPropagation();
this.ruleSetEditLinkClicked.emit(this.mainRuleSet);
}
onRuleSetUnlinkClicked(event: Event) {
event.stopPropagation();
this.ruleSetUnlinkClicked.emit(this.mainRuleSet);
}
}