delete feature

resources/js/components/IndexField.vue

@@ -13,7 +13,10 @@
                 <div
                     class="overflow-y-auto flex-grow flex px-4 py-5"
                 >
-                    <notes :notes="notes" @reply-to="defineFormData($event)"></notes>
+                    <notes :notes="notes"
+                           @reply-to="defineFormData($event)"
+                           @delete-note="deleteNote"
+                    ></notes>
                 </div>
                 <div class="bg-gray-50 p-4">
                     <note-form
@@ -125,6 +128,17 @@ export default {
             this.notable_type = data ? data.notable_type : this.field.notable_type;
             this.reply_to_id = data ? data.reply_to_id : '';
             this.reply_to_name = data ? data.reply_to_name : '';
+        },
+
+        deleteNote(data){
+
+            let noteArray = data.isReply ? this.notes[this.notes.findIndex(note => note.id === data.notableID)].notes : this.notes
+
+            this.$delete(noteArray, noteArray.findIndex(note => note.id === data.dataID))
+
+            if(!data.isReply){
+                this.notesCount = this.notesCount - 1;
+            }
         }
     }
 };

resources/js/components/Notes/Note.vue

@@ -8,16 +8,28 @@
             />
         </div>
         <div>
+
             <div class="flex space-x-2">
                 <h4 class="text-lg font-semibold">{{ data.author ? data.author.name : '-' }}</h4>
-                <icon-eye-off v-if="data.personal" />
+                <icon-eye-off v-if="data.personal"/>
+
+                <!--EDIT-->
+                <a class="text-sm font-bold text-yellow-400 cursor-pointer"
+                   @click="onEdit"
+                >Edit</a>
+
+                <!--DELETE-->
+                <a class="text-sm font-bold text-red-500 cursor-pointer"
+                   @click="onDelete"
+                >Delete</a>
             </div>
 
             <p
                 class="trix-content my-3"
                 v-if="data.as_html"
                 v-html="data.note"
             ></p>
+
             <p class="my-3" v-else>{{ data.note }}</p>
 
             <p class="text-gray-500">{{ createdAt }}</p>
@@ -27,11 +39,10 @@
             </div>
 
             <div v-if="!isReply" v-for="note in data.notes" class="mt-6 flex">
-                <note :data=note :key="note.note"></note>
+                <note :data=note :key="note.note" @delete-note="onDelete($event, true)"></note>
             </div>
         </div>
 
-
     </li>
 </template>
 
@@ -66,6 +77,29 @@ export default {
                 reply_to_id: this.data.id,
                 reply_to_name: this.data.author ? this.data.author.name : '-'
             });
+        },
+        onDelete(data, reply) {
+
+            if(!reply){
+                Nova.request().delete('/nova-vendor/notes-field/' + this.data.id).then(response => {
+                    this.$toasted.show('Note Removed', {type: 'success'})
+
+                    this.$emit('delete-note', {
+                        isReply: this.isReply,
+                        notableID: this.data.notable_id,
+                        dataID: this.data.id
+                    })
+                })
+            } else {
+                this.$emit('delete-note', data)
+            }
+        },
+        onEdit() {
+            //get NOTE ID
+            //check personal status
+            //check html status
+            //display note
+            //update changes
         }
     },
     computed: {

resources/js/components/Notes/Notes.vue

@@ -4,7 +4,10 @@
                 <h2 class="text-xl font-semibold opacity-50">No notes found...</h2>
             </div>
             <ul class="space-y-4 flex-grow">
-                <note v-for="note in notes" :data="note" :key="note.note" @reply-to="handleReplyTo($event)"></note>
+                <note v-for="note in notes" :data="note" :key="note.note"
+                      @reply-to="handleReplyTo($event)"
+                      @delete-note="deleteNote"
+                ></note>
             </ul>
         </div>
 </template>
@@ -21,11 +24,14 @@ export default {
         notes: {
             type: Array,
             required: true
-        },
+        }
     },
     methods: {
         handleReplyTo(data) {
             this.$emit('reply-to', data)
+        },
+        deleteNote(data){
+            this.$emit('delete-note', data)
         }
     }
 }

routes/api.php

@@ -16,3 +16,9 @@
 
 Route::get('', [NoteController::class, 'index']);
 Route::post('new', [NoteController::class, 'store']);
+
+//DELETE NOTE (DELETE -> DESTROY)
+Route::delete('{note}', [NoteController::class, 'destroy']);
+
+//EDIT NOTE (PATCH?)
+Route::patch('updateNote', [NoteController::class, 'update']);

src/Http/Controllers/NoteController.php

@@ -10,11 +10,13 @@
 
 class NoteController extends Controller
 {
+    //VIEW ALL NOTES
     public function index(Request $request): JsonResponse
     {
         return response()->json(Note::whereNotableTypeAndId($request->input('notable_type'), $request->input('notable_id'))->with('author', 'notes')->get());
     }
 
+    //SAVE A NOTE
     public function store(NoteRequest $request): JsonResponse
     {
         if($request->input('reply_to_id')) {
@@ -32,14 +34,16 @@ public function store(NoteRequest $request): JsonResponse
         return response()->json(Note::create($request->validated())->load('author', 'notes'));
     }
 
-    // public function store(NoteRequest $request): JsonResponse
-    // {
-    //     if($request->validated()['reply_to_id'] != null){
-    //         $note = Note::find($request->input('reply_to_id'));
-    //         $noteData = collect($request->validated())->except('notable_type', 'notable_id', 'reply_to_id')->toArray();
-    //         $newNote = $note->notes()->create($noteData);
-    //         return response()->json($newNote->load('author'));
-    //     }
-    //     return response()->json(Note::create($request->validated())->load('author'));
-    // }
+    //DELETE NOTE
+    public function destroy(Request $request, Note $note): JsonResponse
+    {
+        $note->delete();
+        return response()->json(['message'=>'success']);
+    }
+
+    //UPDATE NOTE
+    public function update(NoteRequest $request): JsonResponse
+    {
+        return response();
+    }
 }