To enhance the functionality of the GetNotes.vue component, you can introduce a new property within the data section to keep track of the currently selected card by its ID. This ID can then be passed on to the UpdateNote component for further processing.
GetNotes.vue
<template>
<div class="note-cards-container">
<div class="note-card" v-for="card in cards" :key="card.id">
<div class="note-content" @click="handleCardClick(card.id)">
<h3>{{card.title}}</h3>
<p>{{card.text}}</p>
</div>
<div class="card-options">
<ActionIcon />
<button class="close-button" type="button" v-if="isPopupVisible" @click="submitChanges();togglePopup();">Close</button>
</div>
</div>
<div class="update-popup" id="popup">
<Updatenote :cardId="selectedCard"/>
</div>
</div>
</template>
<script>
import service from '../../services/Service'
import ActionIcon from '../../components/shared/ActionIcon.vue'
import Updatenote from '../../components/modals/Updatenote.vue'
export default {
name: 'GetNotes',
components: {
ActionIcon,
Updatenote
},
data() {
return {
isPopupVisible: false,
cards: [{
id: 1,
title: 'Sample Note',
text: 'This is a sample note.'
}],
selectedCard: '',
}
},
methods: {
togglePopup() {
this.isPopupVisible = !this.isPopupVisible;
},
async submitChanges() {
service.updateNote().then(response => {
this.notes.push(...response.data);
})
},
handleCardClick(id) {
var popup = document.getElementById('popup');
popup.classList.toggle('active');
this.selectedCard = id;
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/GetNotes.scss";
</style>
In the Updatenote.vue component, utilize the provided ID to trigger an API call related to that specific card. The cardId attribute will hold the ID of the currently clicked card for reference.
Updatenote.vue
<template>
<div class="update-note-container">
<form class="update-form" @submit.prevent="handleSubmit" id="update-id">
<input name="title" id="name-input" v-model="title" placeholder="Title" autocomplete="off" />
<textarea name="content" id="text-input" v-model="description" placeholder="Enter your note..." autocomplete="off"></textarea>
<ActionIcon />
<button @click="updateNote()" type="submit">Close</button>
</form>
</div>
</template>
<script>
import service from '../../services/Service'
import ActionIcon from '../../components/shared/ActionIcon.vue'
export default {
name: 'Updatenote',
components: {
ActionIcon
},
props: ['cardId'],
data() {
return {
title: '',
description: ''
}
},
methods: {
updateNote: function() {
const updatedData = {
id: this.cardId,
title: this.title,
description: this.description
};
service.updateNote(updatedData).then(response => {
console.log("Update successful", response);
localStorage.setItem('token', response.data.token);
this.notes.push(...response.data);
})
},
}
}
</script>
<style scoped>
...........
</style>