feat: add enable flag

This commit adds an simple flag to allow/forbid edition mode. closes #12
ngneat · Nov 13, 2021 · 91f616b · 91f616b
1 parent f1cd855
commit 91f616b
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -197,6 +197,7 @@ The following actions will trigger this event:
 | ---------------------- | ------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------- |
 | openBindingEvent       | `string`                  | The MouseEvent type to display the editMode                  | `click`                                                              |
 | closeBindingEvent      | `string`                  | The MouseEvent type to display the viewMode                  | `click`                                                                 |
+| enabled                | `boolean`                 | Allows or forbids edit mode (doesn't switch to it)           | `true`                                                                 |
 
 ## Outputs
 

diff --git a/projects/ngneat/edit-in-place/src/lib/editable.component.ts b/projects/ngneat/edit-in-place/src/lib/editable.component.ts
@@ -26,6 +26,7 @@ import { Mode } from './mode';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditableComponent implements OnInit, OnDestroy {
+  @Input() enabled = true;
   @Input() openBindingEvent = this.config.openBindingEvent;
   @Input() closeBindingEvent = this.config.closeBindingEvent;
 
@@ -67,6 +68,7 @@ export class EditableComponent implements OnInit, OnDestroy {
   private handleViewMode(): void {
     this.viewHandler = fromEvent(this.element, this.openBindingEvent)
       .pipe(
+        filter(() => this.enabled),
         withLatestFrom(this.editMode$),
         filter(([_, editMode]) => !editMode),
         takeUntil(this.destroy$)

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -401,4 +401,43 @@ <h4>Grouped inputs</h4>
   </form>
 </section>
 
+<section>
+  <h4>Sample enable flag</h4>
+  <div class="form-check">
+    <input
+      #enableFlagInput
+      class="form-check-input"
+      type="checkbox"
+      id="enable-flag"
+      name="enable-flag"
+      checked
+      data-testid="sample-enable-flag-check"
+    />
+    <label for="enable-flag" class="form-check-label">Allows edit</label>
+  </div>
+  <article>
+    <editable
+      data-testid="sample-enable-flag"
+      [enabled]="enableFlagInput.checked"
+      (save)="updateSingleField('inputText', 'inputControl')"
+      (cancel)="cancelSingleField('inputText', 'inputControl')"
+    >
+      <ng-template viewMode>
+        {{ inputText }}
+      </ng-template>
+      <ng-template editMode>
+        <div class="form-group">
+          <input
+            class="form-control"
+            data-testid="sample-enable-flag-edit"
+            placeholder="Title"
+            type="text"
+            [formControl]="inputControl"
+          />
+        </div>
+      </ng-template>
+    </editable>
+  </article>
+</section>
+
 <div data-testid="outside"></div>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -253,4 +253,43 @@ describe('GIVEN AppComponent', () => {
       });
     });
   });
+
+  describe('Sample enable flag', () => {
+    describe('IN ENABLE mode', () => {
+      describe('WHEN INITIALIZING the component', () => {
+        it('THEN should render the text content', () => {
+          expect(spectator.query(byTestId('sample-enable-flag-check'))).toHaveProperty('checked', true);
+          expect(spectator.query(byTestId('sample-enable-flag'))).toContainText('foo');
+        });
+      });
+      describe('WHEN clicking on the text', () => {
+        it('THEN should render the input', () => {
+          expect(spectator.query(byTestId('sample-enable-flag-check'))).toHaveProperty('checked', true);
+          spectator.click(byTestId('sample-enable-flag'));
+          expect(spectator.query(byTestId('sample-enable-flag-edit'))).toBeVisible();
+        });
+      });
+    });
+    describe('IN DISABLE mode', () => {
+      beforeEach(() => {
+        spectator.click(byTestId('sample-enable-flag-check'));
+      });
+
+      describe('WHEN INITIALIZING the component', () => {
+        it('THEN should render the text content', () => {
+          expect(spectator.query(byTestId('sample-enable-flag-check'))).toHaveProperty('checked', false);
+          expect(spectator.query(byTestId('sample-enable-flag'))).toContainText('foo');
+        });
+      });
+
+      describe('WHEN clicking on the text', () => {
+        it('THEN should NOT render the input', () => {
+          expect(spectator.query(byTestId('sample-enable-flag-check'))).toHaveProperty('checked', false);
+          spectator.click(byTestId('sample-enable-flag'));
+          expect(spectator.query(byTestId('sample-enable-flag'))).toContainText('foo');
+          expect(spectator.query(byTestId('sample-enable-flag-edit'))).not.toBeVisible();
+        });
+      });
+    });
+  });
 });