Features - Read, Create, Update, Delete

[ 1 ] - Read

// Define `notes` as a reactive array of `Note` objects
const notes = ref<Note[]>([]);

try {
		// GET Request to: /merchants/${_merchantId}/notes
    const response = await axios.get(`/merchants/${_merchantId}/notes`);
    notes.value = response.data.data;
} catch (err) {
   // Handle error
} finally {
   // Handle finish
}

// web.php - route
Route::get('/merchants/{merchant}/notes', [NoteController::class, 'getMerchantNotes'])->name('getMerchantNotes');

// Note Controller
public function getMerchantNotes(Request $request, Merchant $merchant)
{
		// Merchant notes with creator information
    $query = $merchant->notes()->with(['creator']);
		
		// CODE BETWEEN HIDED ( filter operation for future explanation )
    
    return NoteResource::collection($query->latest()->get());
}

[ 2 ] - Update

try {
		// PUT Requset to: `/notes/${note.id}`
    await axios.put(`/notes/${note.id}`, editForm.value);
} catch (err) {
    // Handle error
} finally {
		// Update current note data avoiding an additional GET request
    note.title = editForm.value.title;
    note.body = editForm.value.body;
    note.type = editForm.value.type;
    note.status = editForm.value.status;
}

// web.php - route
Route::apiResource('notes', NoteController::class);

// Note Controller
public function update(UpdateNoteRequest $request, Note $note)
{
		// Apply 'policy' to verify the user has permission to update this note.
    try {
        $this->authorize('update', $note);
    } catch (AuthorizationException $e) {
        return response()->json([
            'message' => 'You are not allowed to update this note.'
        ], 403);
    }
    
    // Perform the update with validated request data
    $note->update($request->validated());
    
    // Return the updated note with API response formatting
    return new NoteResource($note);
}

[ 3 ] - Delete

NOTE: Extra step for delete operation

try {
		// DELETE Request to: `/notes/${noteId}`
    await axios.delete(`/notes/${noteId}`);
} catch (err) {
    // Handle error
} finally {
		// Remove current note avoiding an additional GET request
    notes.value = notes.value.filter((note: any) => note.id !== noteId);
}

// web.php - route
Route::apiResource('notes', NoteController::class);

// Note Controller
public function destroy(Note $note)
{
		// Apply 'policy' to verify the user has permission to delete this note.
    try {
        $this->authorize('delete', $note);
    } catch (AuthorizationException $e) {
        return response()->json([
            'message' => 'You are not allowed to delete this note.'
        ], 403);
    }
		
    $note->delete();
    return response()->noContent();
}

[ 4 ] - Create

// Register the AddNote component and assign a ref 
// Pass `show` method for the `refresh` event to update the list
<AddNote ref="addNoteRef" @refresh="show"></AddNote>

// Define the ref to access the AddNote component instance
const addNoteRef = ref<InstanceType<typeof AddNote> | null>(null);

// Trigger the `show` method on the addNote component with merchant ID
const showAddNote = () => {
    addNoteRef.value?.show(merchantId.value);
};

try {
		// POST Request to: `/notes` with form data
    await axios.post('/notes', editForm.value);
} catch (err) {
    // Handle error
} finally {
		// Emit 'refresh' event with merchantId to trigger parent method to 
		// refresh the merchant notes list
    emits('refresh', editForm.value.merchantId);
}