calendar-notes-plugin 1.0.0

package/calendar-notes-plugin/src/app/components/notes/notes.css

@@ -0,0 +1,251 @@
+:host {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.notes {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 5px;
+  gap: 10px;
+  overflow: hidden;
+  margin-top: 0;
+  min-height: 0;
+}
+
+/* Inputs */
+.notes input{
+  height: 32px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+.notes textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  height: 60px;
+}
+
+.notes textarea {
+  resize: none;
+  min-height: 70px;
+}
+
+
+/* Form action wrapper */
+.form-actions {
+  display: flex;
+  justify-content: flex-end;   /* pushes button to right */
+  gap: 10px;
+  margin-top: 10px;
+}
+
+/* Save button */
+.save-btn {
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: none;
+  background: #4f46e5;
+  color: white;
+  cursor: pointer;
+}
+
+.cancel-btn {
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+}
+
+.cancel-btn:hover {
+  background: #f3f4f6;
+}
+
+.save-btn:hover {
+  background: #4338ca;
+}
+/*  REAL SCROLL FIX */
+.existing-notes {
+ border-top: 1px solid #eee;
+  padding-top: 2px;
+}
+
+/* Individual note */
+.existing-notes div {
+  background: #f3f4f6;
+  padding: 4px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+}
+
+.existing-notes p {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+}
+
+.notes h4,
+.notes h5 {
+  margin: 0;        /* removes browser default gap */
+}
+
+.add-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.add-bar:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.add-bar input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  color: #6b7280;
+  pointer-events: none; /* prevents typing */
+}
+
+.plus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 38px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #ed9817, #eb9a0f);
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  transition: transform 0.2s ease;
+}
+
+.add-bar:hover .plus {
+  transform: rotate(90deg);
+}
+
+/* Scrollable section */
+.notes-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 4px;
+  min-height: 0;
+}
+
+/* Form spacing */
+.note-form {
+  margin-bottom: 16px;
+}
+
+/* Saved notes style */
+.note-card {
+  background: #f4f6f8;
+  padding: 4px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  
+}
+
+.reminder-wrapper {
+  position: relative;
+}
+
+.reminder-wrapper input {
+  cursor: pointer;
+}
+
+/* Dropdown */
+.reminder-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  margin-top: 4px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+  z-index: 10;
+  overflow: hidden;
+}
+
+.reminder-dropdown div {
+  padding: 10px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.reminder-dropdown div:hover {
+  background: #f3f4f6;
+}
+.custom-time {
+  padding: 10px;
+  border-top: 1px solid #eee;
+}
+
+.custom-time input {
+  width: 100%;
+}
+
+/* Note header layout */
+.note-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Action icons */
+.note-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.icon {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.6;
+  transition: 0.2s ease;
+}
+
+.icon:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.icon svg {
+  fill: currentColor;
+}
+
+/* Specific hover colors */
+.icon.delete:hover {
+  color: #dc2626;   /* red */
+}
+
+.icon.edit:hover {
+  color: #4f46e5;   /* purple */
+}
+
+.reminder-text {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #f12011;
+}

package/calendar-notes-plugin/src/app/components/notes/notes.html

@@ -0,0 +1,107 @@
+<div class="notes" >
+
+  
+  <!-- Scrollable content -->
+  <div class="notes-scroll">
+
+  <div class="add-bar" *ngIf="!showForm" (click)="openForm()">
+    <input type="text" placeholder="Add New Note..." readonly />
+    <span class="plus">＋</span>
+  </div>
+
+
+  <!-- Expandable form -->
+  <div *ngIf="showForm" class="note-form">
+
+  <input 
+    type="text"
+    placeholder="Title"
+    [(ngModel)]="noteTitle"
+  />
+
+  <textarea 
+    placeholder="Write Your Note Here..."
+    [(ngModel)]="noteContent">
+  </textarea>
+<div class="reminder-section">
+
+  <div class="reminder-wrapper">
+
+  <input
+    type="text"
+    placeholder="Add reminder time"
+    [value]="displayReminder"
+    readonly
+    (click)="toggleReminderDropdown()"
+  />
+
+  <div class="reminder-dropdown" *ngIf="showReminderDropdown">
+    <div (click)="setQuickReminder(30)">30 minutes</div>
+    <div (click)="setQuickReminder(60)">1 hour</div>
+    <div (click)="setQuickReminder(120)">2 hours</div>
+  
+
+
+   <div class="custom-option" (click)="showCustomInput = true">
+      Custom time
+    </div>
+
+    <!-- Custom datetime picker -->
+    <div *ngIf="showCustomInput" class="custom-time">
+      <input
+        placeholder="Set custom time"
+        type="datetime-local"
+        [(ngModel)]="reminderTime"
+        (change)="setCustomReminder()"
+      />
+    </div>
+
+    <div 
+    *ngIf="reminderTime"
+    class="remove-option"
+    (click)="clearReminder()">
+    None
+    </div>
+</div>
+</div>
+</div>
+      <div class="form-actions">
+          <button type="button" class="cancel-btn" (click)="cancel()">Cancel</button>
+          <button type="button" class="save-btn" (click)="save()">Save Note</button>
+      </div>
+  </div>
+
+  <div class="existing-notes" *ngIf="selectedNotes.length > 0">
+    <h5>Saved Notes:-</h5>
+
+
+    <div class="note-card" *ngFor="let note of selectedNotes; let i = index">
+      <div class="note-header">
+      <strong>{{ note.title }}</strong>
+
+      <div class="note-actions">
+      <span class="icon edit" (click)="editNote(i)">
+        <svg viewBox="0 0 24 24" width="18" height="18">
+          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/>
+          <path d="M20.71 7.04a1 1 0 000-1.41L18.37 3.29a1 1 0 00-1.41 0l-1.83 1.83 
+          3.75 3.75 1.83-1.83z"/>
+        </svg>
+  </span>
+      <span class="icon delete" (click)="deleteNote(i)">
+        <svg viewBox="0 0 24 24" width="18" height="18">
+          <path d="M6 7h12v2H6zm2 3h8v10H8zm3-7h2v2h-2z"/>
+        </svg>
+  </span>
+    </div>
+  </div>
+      <p>{{ note.content }}</p>
+
+      <small *ngIf="note.reminder_at && getTimeLeft(note.reminder_at)" class="reminder-text">
+            ⏳ {{ getTimeLeft(note.reminder_at) }}
+      </small>
+
+  </div>
+</div>
+
+  </div>
+</div>

package/calendar-notes-plugin/src/app/components/notes/notes.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Notes } from './notes';
+
+describe('Notes', () => {
+  let component: Notes;
+  let fixture: ComponentFixture<Notes>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Notes]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Notes);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/calendar-notes-plugin/src/app/components/notes/notes.ts

@@ -0,0 +1,328 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnChanges, OnInit, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { v4 as uuidv4 } from 'uuid';
+import { ReminderService } from '../../services/notification';
+
+@Component({
+  selector: 'app-notes',
+  standalone: true,
+  imports: [FormsModule, CommonModule],
+  templateUrl: './notes.html',
+  styleUrls: ['./notes.css']
+})
+export class Notes implements OnChanges, OnInit {
+
+  @Input() selectedDate: string | null = null;
+  @Output() notesChanged = new EventEmitter<{ [key: string]: any[] }>();
+
+  noteTitle = '';
+  noteContent = '';
+  notes: { [key: string]: any[] } = {};
+  selectedNotes: any[] = [];
+  userId!: string;
+
+  reminderTime: string | null = null;
+  showReminderDropdown = false;
+  displayReminder = '';
+  showCustomInput = false;
+  editingIndex: number | null = null;
+  editingNoteId: string | null = null;
+  showForm = false;
+
+  constructor(
+    private ngZone: NgZone,
+    private cd: ChangeDetectorRef,
+    private reminderService: ReminderService
+  ) {
+    let storedId = localStorage.getItem('testUserId');
+    if (!storedId) {
+      storedId = uuidv4();
+      localStorage.setItem('testUserId', storedId);
+    }
+    this.userId = storedId;
+  }
+
+  ngOnInit() {
+    this.reminderService.requestPermission();
+    this.listenToHost();
+    this.loadNotesFromHost();
+
+    this.reminderService.timeTick$.subscribe(() => {
+    this.cd.detectChanges();
+    });
+
+  }
+
+  // =========================
+  // HOST MESSAGE LISTENER
+  // =========================
+  listenToHost() {
+    window.addEventListener('message', (event: MessageEvent) => {
+      //if (event.source !== window.parent) return;
+      const msg = event.data;
+      if (!msg || !msg.type) return;
+
+      this.ngZone.run(() => {
+        switch (msg.type) {
+          case 'USER_LOGIN':
+            this.userId = msg.userId;
+            this.loadNotesFromHost();
+            break;
+          case 'NOTES_LOADED':
+            if (!Array.isArray(msg.notes)) return;
+            this.handleNotesLoaded(msg.notes);
+            break;
+          case 'NOTE_SAVED':
+            this.handleNoteSaved(msg.note);
+            break;
+          case 'NOTE_UPDATED':
+            this.handleNoteUpdated(msg.note);
+            break;
+          case 'NOTE_DELETED':
+            this.handleNoteDeleted(msg.id);
+            break;
+        }
+        this.cd.detectChanges();
+      });
+    });
+  }
+
+  // =========================
+  // HANDLE NOTES
+  // =========================
+ handleNotesLoaded(data: any[]) {
+
+  const grouped: { [key: string]: any[] } = {};
+
+  data.forEach(note => {
+
+    const dateKey = note.note_date.split('T')[0];
+
+    if (!grouped[dateKey]) {
+      grouped[dateKey] = [];
+    }
+
+    grouped[dateKey].push(note);
+
+     this.reminderService.addReminder(note);
+
+  });
+
+  this.notes = grouped;
+
+  // send to panel for calendar indicator
+  this.notesChanged.emit(this.notes);
+
+  // IMPORTANT: show notes for current selected date
+  if (this.selectedDate && this.notes[this.selectedDate]) {
+    this.selectedNotes = [...this.notes[this.selectedDate]];
+  } else {
+    this.selectedNotes = [];
+  }
+
+}
+ handleNoteSaved(note: any) {
+
+  const dateKey = note.note_date.split('T')[0];
+
+  if (!this.notes[dateKey]) {
+    this.notes[dateKey] = [];
+  }
+
+  this.notes[dateKey].push(note);
+
+  // refresh object reference
+  this.notes = { ...this.notes };
+
+  //  update currently visible notes
+  if (this.selectedDate === dateKey) {
+    this.selectedNotes = [...this.notes[dateKey]];
+  }
+  this.reminderService.addReminder(note);
+  // update calendar indicator
+  this.notesChanged.emit(this.notes);
+
+  this.resetForm();
+
+}
+  handleNoteUpdated(note: any) {
+    if (!note || !note.note_date) return;
+    const dateKey = note.note_date;
+    const index = this.notes[dateKey]?.findIndex(n => n.id === note.id);
+    if (index !== undefined && index !== -1) this.notes[dateKey][index] = note;
+    this.selectedNotes = this.notes[this.selectedDate || dateKey] || [];
+    this.resetForm();
+  }
+
+  handleNoteDeleted(id: string) {
+    for (const dateKey in this.notes) {
+      this.notes[dateKey] = this.notes[dateKey].filter(n => n.id !== id);
+    }
+    this.selectedNotes = this.notes[this.selectedDate || ''] || [];
+    this.reminderService.removeReminder(id);
+  }
+
+  // =========================
+  // LOAD NOTES
+  // =========================
+  loadNotesFromHost() {
+    window.parent.postMessage({ type: 'LOAD_NOTES', userId: this.userId }, '*');
+  }
+
+  // =========================
+  // NG ON CHANGES
+  // =========================
+ ngOnChanges() {
+
+  if (this.selectedDate) {
+    this.selectedNotes = this.notes[this.selectedDate] || [];
+  } else {
+    this.selectedNotes = [];
+  }
+
+  this.resetForm();
+
+}
+  // =========================
+  // FORM
+  // =========================
+  openForm() {
+    this.showForm = true;
+  }
+
+  cancel() {
+    this.resetForm();
+  }
+
+  resetForm() {
+    this.showForm = false;
+    this.noteTitle = '';
+    this.noteContent = '';
+    this.reminderTime = null;
+    this.displayReminder = '';
+    this.showReminderDropdown = false;
+    this.showCustomInput = false;
+    this.editingIndex = null;
+    this.editingNoteId = null;
+  }
+
+  // =========================
+  // REMINDERS
+  // =========================
+  toggleReminderDropdown() {
+    this.showReminderDropdown = !this.showReminderDropdown;
+  }
+
+  setQuickReminder(minutes: number) {
+
+  const now = new Date();
+  now.setMinutes(now.getMinutes() + minutes);
+
+  this.reminderTime = now.toISOString(); // keep UTC
+
+  if (minutes === 30) this.displayReminder = 'Reminder in 30 minutes';
+  if (minutes === 60) this.displayReminder = 'Reminder in 1 hour';
+  if (minutes === 120) this.displayReminder = 'Reminder in 2 hours';
+
+  this.closeDropdown();
+}
+
+  setCustomReminder() {
+    if (!this.reminderTime) return;
+    const selected = new Date(this.reminderTime);
+    this.displayReminder = `Reminder on ${selected.toLocaleString()}`;
+    this.closeDropdown();
+  }
+
+  closeDropdown() {
+    this.showReminderDropdown = false;
+    this.showCustomInput = false;
+  }
+
+  clearReminder() {
+    this.reminderTime = null;
+    this.displayReminder = '';
+  }
+
+  // =========================
+  // SAVE NOTE
+  // =========================
+  save() {
+    if (!this.noteTitle || !this.selectedDate) return;
+
+    const payload: any = {
+      user_id: this.userId,
+      note_date: this.selectedDate,
+      title: this.noteTitle,
+      content: this.noteContent || '',
+       reminder_at: this.reminderTime
+    ? new Date(this.reminderTime).toISOString()
+    : null
+    };
+
+    if (this.editingNoteId) payload.id = this.editingNoteId;
+
+    const type = this.editingNoteId ? 'UPDATE_NOTE' : 'SAVE_NOTE';
+
+    // Send userId consistently
+    window.parent.postMessage({ type, userId: this.userId, payload }, '*');
+  }
+
+  // =========================
+  // EDIT / DELETE
+  // =========================
+  editNote(index: number) {
+    const note = this.selectedNotes[index];
+    this.noteTitle = note.title;
+    this.noteContent = note.content;
+    this.reminderTime = note.reminder_at || null;
+    this.displayReminder = note.reminder_at ? `Reminder on ${new Date(note.reminder_at).toLocaleString()}` : '';
+    this.editingIndex = index;
+    this.editingNoteId = note.id;
+    this.showForm = true;
+  }
+
+  deleteNote(index: number) {
+    const note = this.selectedNotes[index];
+    window.parent.postMessage({ type: 'DELETE_NOTE', id: note.id, userId: this.userId }, '*');
+  }
+
+  // =========================
+  // TIMER
+  // =========================
+  getTimeLeft(reminderAt: string): string | null {
+
+  if (!reminderAt) return null;
+
+  const now = new Date().getTime();
+  const reminderTime = new Date(reminderAt).getTime();
+
+  const diff = reminderTime - now;
+
+  if (diff <= 0) return 'expired';
+
+  const totalSeconds = Math.floor(diff / 1000);
+
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (days > 0) {
+    return `${days}d ${hours}h ${minutes}m ${seconds}s left`;
+  }
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s left`;
+  }
+
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s left`;
+  }
+
+  return `${seconds}s left`;
+}
+
+  
+}