add/delete notes

README.md

@@ -69,9 +69,8 @@ Please don't hitch your wagon to this star just yet... I'm coding this in the op
 - [x] Read only Notes Dashboard
 - [x] SSR Rendered (SEO Optimised) [Note](/pages/notes/[note_id].vue) Display
 - [x] Max Notes limit property on Plan 
-- [ ] Max Notes enforced
+- [x] Max Notes enforced
-- [ ] Optional public SSR Rendered public notes index page
+- [x] Add, Delete notes on Dashboard
-- [ ] Add, Delete, edit notes on Dashboard
 
 ### Mobile App
 - [ ] Flutter App Demo integrating with API endpoints, Auth etc

lib/services/notes.service.ts

@@ -14,6 +14,15 @@ export default class NotesService {
   }
 
   async createNote( account_id: number, note_text: string ) {
+    const account = await prisma_client.account.findFirstOrThrow({
+      where: { id: account_id},
+      include: { notes: true}
+    });
+
+    if(account.notes.length>= account.max_notes){
+      throw new Error('Note Limit reached, no new notes can be added');
+    }
+    
     return prisma_client.note.create({ data: { account_id, note_text }});
   }
 

pages/dashboard.vue

@@ -7,6 +7,12 @@
 
   const notesStore = useNotesStore();
   const { notes } = storeToRefs(notesStore);  // ensure the notes list is reactive
+  const newNoteText = ref('')
+
+  async function addNote(){
+    await notesStore.createNote(newNoteText.value)
+    newNoteText.value = '';
+  }
 
   onMounted(async () => {
     await notesStore.fetchNotesForCurrentUser();
@@ -15,6 +21,7 @@
 <template>
   <div>
     <h3>Notes Dashboard</h3>
-    <p v-for="note in notes">{{ note.note_text }}</p>
+    <p v-for="note in notes">{{ note.note_text }} <button @click.prevent="notesStore.deleteNote(note.id)">-</button></p>
+    <p><input v-model="newNoteText"/><button @click.prevent="addNote()">Add</button></p>
   </div>
 </template>

server/trpc/routers/notes.router.ts

@@ -20,4 +20,22 @@ export const notesRouter = router({
         note,
       }
     }),
+  createNote: protectedProcedure
+    .input(z.object({ note_text: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const notesService = new NotesService();
+      const note = (ctx.activeAccountId)?await notesService.createNote(ctx.activeAccountId, input.note_text):null; 
+      return {
+        note,
+      }
+    }),
+  deleteNote: protectedProcedure
+    .input(z.object({ note_id: z.number() }))
+    .mutation(async ({ ctx, input }) => {
+      const notesService = new NotesService();
+      const note = (ctx.activeAccountId)?await notesService.deleteNote(input.note_id):null; 
+      return {
+        note,
+      }
+    }),
 })

stores/notes.store.ts

@@ -26,10 +26,26 @@ export const useNotesStore = defineStore('notes', () => {
     }  
   }
 
+  async function createNote(note_text: string) {
+    const { $client } = useNuxtApp();
+    const { note } =  await $client.notes.createNote.mutate({note_text});
+    if(note){
+      _notes.value.push(note);
+    }
+  }
+
+  async function deleteNote(note_id: number) {
+    const { $client } = useNuxtApp();
+    const { note } =  await $client.notes.deleteNote.mutate({note_id});
+    if(note){
+      _notes.value = _notes.value.filter(n => n.id !== note.id);
+    }
+  }
+
   // if the active account changes, fetch notes again (i.e dynamic.. probabl overkill)
   watch(activeAccountId, async (val, oldVal)=> {
     await fetchNotesForCurrentUser()
   });
 
-  return { notes: _notes, fetchNotesForCurrentUser }
+  return { notes: _notes, fetchNotesForCurrentUser, createNote, deleteNote }
 });