[ACS-3512] - ACA enable/disable rule from listing (#2636)

* initial html layout

* toggleRule method

* [ACS-3512] - ACA enable/disable rule from listing

* useless crutch was deleted

projects/aca-folder-rules/src/lib/manage-rules/manage-rules.smart-component.html

@@ -30,7 +30,8 @@
           <mat-divider></mat-divider>
 
           <div class="aca-manage-rules__container" *ngIf="(rules$ | async).length > 0 ; else emptyContent">
-            <aca-rules-list [rules]="rules$ | async" (ruleSelected)="onRuleSelected($event)" [selectedRule]="selectedRule"></aca-rules-list>
+            <aca-rules-list [rules]="rules$ | async" (ruleSelected)="onRuleSelected($event)"
+                            [selectedRule]="selectedRule" [nodeId]="nodeId"></aca-rules-list>
             <div class="aca-manage-rules__container__rule-details">
               <div class="aca-manage-rules__container__preview">
                 <div class="aca-manage-rules__container__preview__toolbar">

projects/aca-folder-rules/src/lib/rules-list/rule/rule-list-item.ui-component.html

@@ -1,7 +1,9 @@
   <div class="aca-rule" [class.selected]="isSelected" >
     <div class="rule-info">
-      <span class="aca-rule-title">{{rule.name}}</span>
+      <div class="rule-info__header">
+        <span class="rule-info__header__title">{{rule.name}}</span>
+        <mat-slide-toggle [(ngModel)]="rule.enabled" (click)="onToggleClick(!rule.enabled)"></mat-slide-toggle>
+      </div>
       <p>{{rule.description}}</p>
     </div>
   </div>
-

projects/aca-folder-rules/src/lib/rules-list/rule/rule-list-item.ui-component.scss

@@ -5,13 +5,6 @@
   margin-bottom: 8px;
   cursor: pointer;
 
-  .aca-rule-title{
-    font-weight: 900;
-    font-size: 14px;
-    color: #212121;
-    line-height: 20px;
-  }
-
   p{
     margin: 6px 0 0 0;
     color: rgba(33, 35, 40, 0.7);
@@ -22,6 +15,22 @@
   }
 }
 
+.rule-info{
+  width: 100%;
+
+  &__header{
+    display: flex;
+    justify-content: space-between;
+
+    &__title{
+      font-weight: 900;
+      font-size: 14px;
+      color: #212121;
+      line-height: 20px;
+    }
+  }
+}
+
 .selected{
   background: rgba(31, 116, 219, 0.24);
 }

projects/aca-folder-rules/src/lib/rules-list/rule/rule-list-item.ui-component.spec.ts

@@ -25,12 +25,16 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RuleListItemUiComponent } from './rule-list-item.ui-component';
+import { CoreTestingModule } from '@alfresco/adf-core';
 
 describe('RuleComponent', () => {
   let component: RuleListItemUiComponent;
   let fixture: ComponentFixture<RuleListItemUiComponent>;
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CoreTestingModule]
+    });
     fixture = TestBed.createComponent(RuleListItemUiComponent);
     component = fixture.componentInstance;
   });

projects/aca-folder-rules/src/lib/rules-list/rule/rule-list-item.ui-component.ts

@@ -25,6 +25,7 @@
 
 import { Component, Input } from '@angular/core';
 import { Rule } from '../../model/rule.model';
+import { FolderRulesService } from '../../services/folder-rules.service';
 
 @Component({
   selector: 'aca-rule',
@@ -34,4 +35,11 @@ import { Rule } from '../../model/rule.model';
 export class RuleListItemUiComponent {
   @Input() rule: Rule;
   @Input() isSelected: boolean;
+  @Input() nodeId: string;
+
+  constructor(private folderRulesService: FolderRulesService) {}
+
+  onToggleClick(enabled: boolean) {
+    this.folderRulesService.toggleRule(this.nodeId, this.rule.id, { ...this.rule, enabled });
+  }
 }

projects/aca-folder-rules/src/lib/rules-list/rules-list.ui-component.html

@@ -1,3 +1,4 @@
 <div class="aca-rules-list" >
-  <aca-rule *ngFor="let rule of rules" [rule]="rule" (click)="onRuleClicked(rule)" [isSelected]="isSelected(rule)"></aca-rule>
+  <aca-rule *ngFor="let rule of rules" [rule]="rule" (click)="onRuleClicked(rule)" [isSelected]="isSelected(rule)"
+            [nodeId]="nodeId"></aca-rule>
 </div>

projects/aca-folder-rules/src/lib/rules-list/rules-list.ui-component.spec.ts

@@ -60,10 +60,12 @@ describe('RulesListComponent', () => {
     expect(rules.length).toBe(2, 'Unexpected number of rules');
 
     const rule = debugElement.query(By.css('.aca-rule:first-child'));
-    const title = rule.query(By.css('.aca-rule-title'));
+    const title = rule.query(By.css('.rule-info__header__title'));
     const description = rule.query(By.css('p'));
+    const toggleBtn = rule.query(By.css('mat-slide-toggle'));
 
     expect(title.nativeElement.textContent).toBe(dummyRules[0].name);
+    expect(toggleBtn).toBeTruthy();
     expect(description.nativeElement.textContent).toBe(dummyRules[0].description);
   });
 });

projects/aca-folder-rules/src/lib/rules-list/rules-list.ui-component.ts

@@ -38,6 +38,9 @@ export class RulesListUiComponent {
   @Input()
   selectedRule: Rule;
 
+  @Input()
+  nodeId: string;
+
   @Output()
   ruleSelected = new EventEmitter<Rule>();
 

projects/aca-folder-rules/src/lib/services/folder-rules.service.spec.ts

@@ -109,4 +109,20 @@ describe('FolderRulesService', () => {
       expect(apiCallSpy).toHaveBeenCalledWith(`/nodes/${nodeId}/rule-sets/${ruleSetId}/rules/${ruleId}`, 'DELETE', params);
     });
   });
+
+  describe('toggleRule', () => {
+    const paramsWithBody = [{}, {}, {}, {}, dummyRules[0], ['application/json'], ['application/json']];
+    beforeEach(async () => {
+      apiCallSpy = spyOn<any>(folderRulesService, 'apiCall')
+        .withArgs(`/nodes/${nodeId}/rule-sets/${ruleSetId}/rules/${ruleId}`, 'PUT', paramsWithBody)
+        .and.returnValue([]);
+
+      folderRulesService.toggleRule(nodeId, ruleId, dummyRules[0]);
+    });
+
+    it('should send correct PUT request', async () => {
+      expect(apiCallSpy).toHaveBeenCalled();
+      expect(apiCallSpy).toHaveBeenCalledWith(`/nodes/${nodeId}/rule-sets/${ruleSetId}/rules/${ruleId}`, 'PUT', paramsWithBody);
+    });
+  });
 });

projects/aca-folder-rules/src/lib/services/folder-rules.service.ts

@@ -132,6 +132,20 @@ export class FolderRulesService {
     );
   }
 
+  toggleRule(nodeId: string, ruleId: string, rule: Rule, ruleSetId: string = '-default-'): void {
+    from(
+      this.apiCall(`/nodes/${nodeId}/rule-sets/${ruleSetId}/rules/${ruleId}`, 'PUT', [
+        {},
+        {},
+        {},
+        {},
+        { ...rule },
+        ['application/json'],
+        ['application/json']
+      ])
+    ).subscribe({ error: (error) => console.error(error) });
+  }
+
   private apiCall(path: string, httpMethod: string, params?: any[]): Promise<any> {
     return this.apiService.getInstance().contentClient.callApi(path, httpMethod, ...params);
   }