feat(reminders): add boilerplate for add reminder dialog

src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.html

@@ -0,0 +1,27 @@
+<mat-dialog-content>
+  <h2 class="mat-h2">{{data.note.reminderId ? 'Edit' : 'Add'}} reminder
+    reminder for note</h2>
+
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <div class="wrap-buttons">
+    <button color="primary"
+            (click)="close(true)"
+            class="btn btn-primary submit-button"
+            mat-raised-button>Save Reminder
+    </button>
+
+    <button type="button"
+            color="warn"
+            (click)="close(false)"
+            class="btn btn-primary submit-button"
+            mat-raised-button>Delete Reminder
+    </button>
+    <button type="button"
+            (click)="close(false)"
+            class="btn btn-primary submit-button"
+            mat-raised-button>Cancel
+    </button>
+  </div>
+</mat-dialog-actions>

src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogAddNoteReminderComponent } from './dialog-add-note-reminder.component';
+
+describe('DialogAddNoteReminderComponent', () => {
+  let component: DialogAddNoteReminderComponent;
+  let fixture: ComponentFixture<DialogAddNoteReminderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogAddNoteReminderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogAddNoteReminderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Note } from '../note.model';
+
+@Component({
+  selector: 'dialog-add-note-reminder',
+  templateUrl: './dialog-add-note-reminder.component.html',
+  styleUrls: ['./dialog-add-note-reminder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogAddNoteReminderComponent {
+  constructor(
+    private _matDialogRef: MatDialogRef<DialogAddNoteReminderComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { note: Note },
+  ) {
+  }
+
+  close(isConfirm: boolean) {
+    this._matDialogRef.close(isConfirm);
+  }
+}

src/app/note/note.model.ts

@@ -6,4 +6,5 @@ export interface Note {
   backgroundColor?: string;
   created: number;
   modified: number;
+  reminderId?: string;
 }

src/app/note/note.module.ts

@@ -9,15 +9,25 @@ import { NotesComponent } from './notes/notes.component';
 import { NoteComponent } from './note/note.component';
 import { UiModule } from '../ui/ui.module';
 import { NoteService } from './note.service';
+import { DialogAddNoteReminderComponent } from './dialog-add-note-reminder/dialog-add-note-reminder.component';
+import { ReminderModule } from '../reminder/reminder.module';
 
 @NgModule({
-  declarations: [NotesComponent, NoteComponent],
+  declarations: [
+    NotesComponent,
+    NoteComponent,
+    DialogAddNoteReminderComponent
+  ],
   imports: [
+    ReminderModule,
     CommonModule,
     UiModule,
     StoreModule.forFeature(NOTE_FEATURE_NAME, fromNote.reducer),
     EffectsModule.forFeature([NoteEffects]),
   ],
+  entryComponents: [
+    DialogAddNoteReminderComponent
+  ],
   exports: [NotesComponent],
   providers: [NoteService]
 })

src/app/note/note/note.component.html

@@ -17,15 +17,16 @@
     </button>
 
     <mat-menu #menu="matMenu">
-      <button mat-menu-item>
+      <button mat-menu-item
+              (click)="editReminder()">
         <mat-icon>schedule</mat-icon>
-        Add reminder (not implemented)
+        {{note.reminderId ? 'Edit' : 'Add'}} reminder
       </button>
       <button mat-menu-item
               (click)="toggleLock()">
         <mat-icon *ngIf="note.isLock">lock</mat-icon>
         <mat-icon *ngIf="!note.isLock">lock_open</mat-icon>
-        {{note.isLock? 'Enable markdown parse ' : 'Disable markdown parsing'}}
+        {{note.isLock ? 'Enable markdown parse ' : 'Disable markdown parsing'}}
       </button>
       <button mat-menu-item
               (click)="removeNote()">

src/app/note/note/note.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { Note } from '../note.model';
 import { NoteService } from '../note.service';
+import { MatDialog } from '@angular/material';
+import { DialogAddNoteReminderComponent } from '../dialog-add-note-reminder/dialog-add-note-reminder.component';
 
 @Component({
   selector: 'note',
@@ -14,7 +16,10 @@ export class NoteComponent implements OnInit {
 
   @ViewChild('markdownEl') markdownEl: HTMLElement;
 
-  constructor(private _noteService: NoteService) {
+  constructor(
+    private readonly _matDialog: MatDialog,
+    private readonly _noteService: NoteService
+  ) {
   }
 
   ngOnInit() {
@@ -31,4 +36,12 @@ export class NoteComponent implements OnInit {
   removeNote() {
     this._noteService.remove(this.note.id);
   }
+
+  editReminder() {
+    this._matDialog.open(DialogAddNoteReminderComponent, {
+      data: {
+        note: this.note,
+      }
+    });
+  }
 }

src/app/reminder/reminder.module.ts

@@ -3,8 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ReminderService } from './reminder.service';
 import { ProjectModule } from '../project/project.module';
 import { CoreModule } from '../core/core.module';
-import { TasksModule } from '../tasks/tasks.module';
-import { NoteModule } from '../note/note.module';
 
 @NgModule({
   declarations: [],
@@ -12,8 +10,6 @@ import { NoteModule } from '../note/note.module';
     CommonModule,
     CoreModule,
     ProjectModule,
-    TasksModule,
-    NoteModule,
   ],
   providers: [
     ReminderService,

src/app/reminder/reminder.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ProjectService } from '../project/project.service';
 import { PersistenceService } from '../core/persistence/persistence.service';
-import { NoteService } from '../note/note.service';
 import { RecurringConfig, Reminder, ReminderType } from './reminder.model';
 import { SnackService } from '../core/snack/snack.service';
 import shortid from 'shortid';
@@ -19,7 +18,6 @@ export class ReminderService {
   constructor(
     private readonly _projectService: ProjectService,
     private readonly _persistenceService: PersistenceService,
-    private readonly _noteService: NoteService,
     private readonly _notifyService: NotifyService,
     private readonly _snackService: SnackService,
   ) {
@@ -38,6 +36,10 @@ export class ReminderService {
     }
   }
 
+  getById(reminderId: string) {
+    return this._reminders.find(reminder => reminder.id === reminderId);
+  }
+
   addReminder(type: ReminderType, relatedId: string, remindAt: number, recurringConfig?: RecurringConfig) {
     this._reminders.push({
       id: shortid(),