[us40] Support for rule modification

Author: Musholic

src/app/rules/rule.repository.spec.ts

@@ -120,6 +120,35 @@ describe('RuleRepository', () => {
       expect(rules).toEqual([]);
     });
   });
+
+  describe('update', () => {
+    it('should update an existing rule', async () => {
+      // Arrange
+      const ruleRepository = MockRender(RuleRepository).point.componentInstance;
+      // 2 calls to 'backup' expected, from create, and then from update
+      mockBackupCall().times(2);
+      let rule: Rule = {
+        name: 'TestRule',
+        category: ['Test1', 'ChildTest1'],
+        script: 'return true'
+      };
+      await ruleRepository.create(rule)
+      rule.name = 'TestRule edited';
+
+      // Act
+      await ruleRepository.update(rule)
+
+      // Assert
+      let rules = await db.rules.toArray();
+      expect(rules)
+        .toEqual([{
+          id: 1,
+          name: 'TestRule edited',
+          category: ['Test1', 'ChildTest1'],
+          script: 'return true'
+        }]);
+    })
+  })
 });
 
 export function mockRuleRepository() {

src/app/rules/rule.repository.ts

@@ -30,4 +30,11 @@ export class RuleRepository {
       this.databaseBackupAndRestoreService.backup().subscribe();
     }
   }
+
+  async update(rule: Rule) {
+    if (rule.id) {
+      await db.rules.update(rule.id, rule);
+      this.databaseBackupAndRestoreService.backup().subscribe();
+    }
+  }
 }

src/app/rules/rule.service.spec.ts

@@ -307,7 +307,8 @@ export function mockRuleService() {
       runAll: ruleServiceMock.runAll,
       create: ruleServiceMock.create,
       findAll: ruleServiceMock.findAll,
-      delete: ruleServiceMock.delete
+      delete: ruleServiceMock.delete,
+      update: ruleServiceMock.update
     }
   });
   return ruleServiceMock;

src/app/rules/rule.service.ts

@@ -68,6 +68,10 @@ export class RuleService {
     return this.ruleRepository.delete(rule);
   }
 
+  update(rule: Rule): Promise<void> {
+    return this.ruleRepository.update(rule);
+  }
+
   /**
    * Run the given rules on the given files and return the associated category for each file that got a matching rule
    */
@@ -167,6 +171,7 @@ export class RuleService {
   }
 
   // TODO: move and refactor duplicate to FileService
+
   private findOrCreateCategories(categories: string[], categoryId: string): Observable<string> {
     let categoryName = categories.shift();
     if (categoryName !== undefined) {

src/app/rules/rules.component.html

@@ -5,22 +5,22 @@
 <div class="smd-main-content">
   <h1>Setup rules</h1>
   <div class="actionButtons">
-    <button (click)="showCreate = true" [disabled]="showCreate" mat-raised-button>Create new rule</button>
+    <button (click)="showCreate()" [disabled]="ruleToCreateOrUpdate" mat-raised-button>Create new rule</button>
     &nbsp;
     <button (click)="runAll()" color="primary" mat-raised-button>Run all</button>
   </div>
-  <form (ngSubmit)="createNewRule()" *ngIf="showCreate">
+  <form (ngSubmit)="createOrUpdateRule()" *ngIf="ruleToCreateOrUpdate">
     <div class="nameAndCategoryFields">
       <mat-form-field>
         <mat-label>Name</mat-label>
-        <input [(ngModel)]="ruleToCreate.name" matInput name="name" required>
+        <input [(ngModel)]="ruleToCreateOrUpdate.name" matInput name="name" required>
       </mat-form-field>
       &nbsp;
       <mat-form-field>
         <mat-label>Category</mat-label>
         <mat-chip-grid #chipGrid aria-label="Enter category">
-          <mat-chip-row *ngFor="let cat of ruleToCreate.category">
-            {{cat}}
+          <mat-chip-row *ngFor="let cat of ruleToCreateOrUpdate.category">
+            {{ cat }}
             <button matChipRemove>
               <mat-icon>cancel</mat-icon>
             </button>
@@ -34,28 +34,34 @@ <h1>Setup rules</h1>
     </div>
     <mat-form-field class="fullWidth">
       <mat-label>Script</mat-label>
-      <textarea [(ngModel)]="ruleToCreate.script" matInput name="script" required></textarea>
+      <textarea [(ngModel)]="ruleToCreateOrUpdate.script" matInput name="script" required></textarea>
     </mat-form-field>
     <div class="actionButtons">
-      <button (click)="showCreate = false" mat-raised-button>Cancel</button>
+      <button (click)="cancelCreateOrUpdate()" mat-raised-button>Cancel</button>
       &nbsp;
-      <button color="primary" mat-raised-button type="submit">Create</button>
+      <button *ngIf="ruleToCreateOrUpdate.id" color="primary" mat-raised-button type="submit">Update</button>
+      <button *ngIf="!ruleToCreateOrUpdate.id" color="primary" mat-raised-button type="submit">Create</button>
     </div>
   </form>
   <mat-accordion [multi]="true">
     <mat-expansion-panel *ngFor="let rule of rules">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{rule.name}}
+          {{ rule.name }}
         </mat-panel-title>
         <mat-panel-description>
-          <span *ngFor="let cat of rule.category; first as first"><span *ngIf="!first"> &nbsp;&gt; </span>{{cat}}</span>
+          <span *ngFor="let cat of rule.category; first as first"><span
+            *ngIf="!first"> &nbsp;&gt; </span>{{ cat }}</span>
         </mat-panel-description>
       </mat-expansion-panel-header>
       <div class="ruleScript">
-        {{rule.script}}
+        {{ rule.script }}
+      </div>
+      <div class="ruleButtons">
+        <button (click)="update(rule)" mat-raised-button>Edit</button>
+        &nbsp;
+        <button (click)="delete(rule)" color="warn" mat-raised-button>Delete</button>
       </div>
-      <button (click)="delete(rule)" class="ruleDeleteButton" color="warn" mat-raised-button>Delete</button>
     </mat-expansion-panel>
   </mat-accordion>
 </div>

src/app/rules/rules.component.scss

@@ -32,6 +32,6 @@ mat-form-field {
   width: 100%;
 }
 
-.ruleDeleteButton {
+.ruleButtons {
   margin-top: 20px;
 }

src/app/rules/rules.component.spec.ts

@@ -93,9 +93,9 @@ describe('RulesComponent', () => {
     // Act
     await page.clickOnCreateNewRule();
     fixture.detectChanges();
-    await page.setCreateRuleName('New rule');
-    await page.setCreateRuleCategory(['Cat1', 'ChildCat1']);
-    await page.setCreateRuleScript('return fileName === "child_cat_1.txt"');
+    await page.setRuleName('New rule');
+    await page.setRuleCategory(['Cat1', 'ChildCat1']);
+    await page.setRuleScript('return fileName === "child_cat_1.txt"');
     await page.clickOnCreate();
 
     // Assert
@@ -137,6 +137,48 @@ describe('RulesComponent', () => {
     expect(Page.getRuleNames())
       .toEqual([]);
   }))
+
+  it('should update an existing rule', fakeAsync(async () => {
+    // Arrange
+    let ruleService = mockRuleService();
+
+    let rule: Rule = {
+      id: 1,
+      name: 'Rule1',
+      category: ['Cat1', 'ChildCat1'],
+      script: 'return fileName === "child_cat_1.txt"'
+    };
+    when(() => ruleService.findAll()).thenResolve([rule]);
+
+    // A refresh is expected after update
+    let editedRule: Rule = {
+      id: 1,
+      name: 'Rule1 edited',
+      category: ['Cat1', 'ChildCat1'],
+      script: 'return fileName === "child_cat_1.txt"'
+    };
+    when(() => ruleService.findAll()).thenResolve([editedRule]);
+
+    when(() => ruleService.update(editedRule)).thenResolve(undefined);
+
+    let fixture = MockRender(RulesComponent);
+    tick();
+
+    let page = new Page(fixture);
+
+    // Act
+    await page.clickOnEditFirstRule();
+    fixture.detectChanges();
+    await page.setRuleName('Rule1 edited');
+    await page.clickOnUpdate();
+
+    // Assert
+    // No failure in mock setup
+    tick();
+    fixture.detectChanges();
+    expect(Page.getRuleNames())
+      .toEqual(['Rule1 edited']);
+  }))
 });
 
 
@@ -195,12 +237,17 @@ class Page {
     await button.click();
   }
 
-  async setCreateRuleName(name: string) {
+  async clickOnEditFirstRule() {
+    let button = await this.loader.getHarness(MatButtonHarness.with({text: 'Edit'}));
+    await button.click();
+  }
+
+  async setRuleName(name: string) {
     let input = await this.getInputByFloatingLabel('Name');
     await input.setValue(name);
   }
 
-  async setCreateRuleCategory(category: string[]) {
+  async setRuleCategory(category: string[]) {
     // let inputHarness = await this.loader.getHarness(MatInputHarness.with({placeholder: 'Select category...'}));
     let chipGridHarness = await this.loader.getHarness(MatChipGridHarness);
     let inputHarness = await chipGridHarness.getInput()
@@ -213,7 +260,7 @@ class Page {
     }
   }
 
-  async setCreateRuleScript(script: string) {
+  async setRuleScript(script: string) {
     let inputHarness = await this.getInputByFloatingLabel('Script');
     await inputHarness.setValue(script);
   }
@@ -223,6 +270,11 @@ class Page {
     await button.click();
   }
 
+  async clickOnUpdate() {
+    let button = await this.loader.getHarness(MatButtonHarness.with({text: 'Update'}));
+    await button.click();
+  }
+
   private async getInputByFloatingLabel(floatingLabelText: string | RegExp) {
     let formFieldHarness = await this.loader.getHarness(MatFormFieldHarness.with({floatingLabelText: floatingLabelText}));
     let control = await formFieldHarness.getControl();

src/app/rules/rules.component.ts

@@ -15,36 +15,36 @@ export class RulesComponent {
   readonly separatorKeysCodes = [ENTER] as const;
 
   rules: Rule[] = [];
-  showCreate: boolean = false;
-  ruleToCreate: Rule = {
-    name: '',
-    category: [],
-    script: ''
-  };
+  ruleToCreateOrUpdate?: Rule = undefined;
 
   constructor(private ruleService: RuleService) {
     this.refresh();
   }
 
-  createNewRule() {
-    this.ruleService.create(this.ruleToCreate)
-      .then(() => {
-        this.showCreate = false;
-        this.ruleToCreate = {
-          name: '',
-          category: [],
-          script: ''
-        };
-        this.refresh();
-      })
+  createOrUpdateRule() {
+    if (this.ruleToCreateOrUpdate) {
+      if (!this.ruleToCreateOrUpdate.id) {
+        this.ruleService.create(this.ruleToCreateOrUpdate)
+          .then(() => {
+            this.cancelCreateOrUpdate();
+            this.refresh();
+          })
+      } else {
+        this.ruleService.update(this.ruleToCreateOrUpdate)
+          .then(() => {
+            this.cancelCreateOrUpdate();
+            this.refresh();
+          })
+      }
+    }
   }
 
   runAll() {
     this.ruleService.runAll().subscribe();
   }
 
   add(event: MatChipInputEvent) {
-    this.ruleToCreate.category.push(event.value);
+    this.ruleToCreateOrUpdate?.category.push(event.value);
     event.chipInput.clear();
   }
 
@@ -55,6 +55,22 @@ export class RulesComponent {
       })
   }
 
+  update(rule: Rule) {
+    this.ruleToCreateOrUpdate = rule;
+  }
+
+  cancelCreateOrUpdate() {
+    this.ruleToCreateOrUpdate = undefined;
+  }
+
+  showCreate() {
+    this.ruleToCreateOrUpdate = {
+      name: '',
+      category: [],
+      script: ''
+    };
+  }
+
   private refresh() {
     this.ruleService.findAll()
       .then(rules => {