2021-01-25 18:00:09 +01:00
|
|
|
<template>
|
|
|
|
<li>
|
2021-01-25 18:52:30 +01:00
|
|
|
<h2>{{ name }} {{ isFavoriteText }}</h2>
|
2021-01-25 18:04:57 +01:00
|
|
|
<button @click="toggleDetails()">{{ buttonDetailsText }}</button>
|
2021-01-25 18:52:30 +01:00
|
|
|
<button @click="toggleFavorite()">Mark as Favorite</button>
|
2021-01-25 18:00:09 +01:00
|
|
|
<ul v-if="detailsAreVisible">
|
2021-01-25 18:32:18 +01:00
|
|
|
<li><strong>Phone:</strong> {{ phoneNumber }}</li>
|
|
|
|
<li><strong>Email:</strong> {{ emailAddress }}</li>
|
2021-01-25 18:00:09 +01:00
|
|
|
</ul>
|
2021-02-01 21:36:35 +01:00
|
|
|
<button @click="$emit('delete-friend', id)">Delete</button>
|
2021-01-25 18:00:09 +01:00
|
|
|
</li>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
2021-01-25 18:52:30 +01:00
|
|
|
//props: ["name", "emailAddress", "phoneNumber"],
|
|
|
|
props: {
|
2021-01-27 12:47:15 +01:00
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-01-25 18:52:30 +01:00
|
|
|
name: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
phoneNumber: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
emailAddress: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
isFavorite: {
|
2021-01-25 23:05:01 +01:00
|
|
|
type: Boolean,
|
2021-01-25 18:52:30 +01:00
|
|
|
required: false,
|
2021-01-25 23:05:01 +01:00
|
|
|
default: false,
|
2021-01-25 18:52:30 +01:00
|
|
|
},
|
|
|
|
},
|
2021-01-27 12:53:30 +01:00
|
|
|
emits: {
|
|
|
|
"toggle-favorite": function(id) {
|
|
|
|
if (id) {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
console.warn("ID is missing!");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
},
|
2021-02-01 21:36:35 +01:00
|
|
|
"delete-friend": function(id) {
|
|
|
|
if (id) {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
console.warn("ID is missing!");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
},
|
2021-01-27 12:53:30 +01:00
|
|
|
},
|
2021-01-25 18:00:09 +01:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
detailsAreVisible: false,
|
|
|
|
};
|
|
|
|
},
|
2021-01-25 18:04:57 +01:00
|
|
|
computed: {
|
|
|
|
buttonDetailsText() {
|
|
|
|
if (this.detailsAreVisible) {
|
|
|
|
return "Hide Details";
|
|
|
|
} else {
|
|
|
|
return "Show Details";
|
|
|
|
}
|
|
|
|
},
|
2021-01-25 18:52:30 +01:00
|
|
|
isFavoriteText() {
|
2021-01-27 12:48:27 +01:00
|
|
|
if (this.isFavorite) {
|
2021-01-25 18:52:30 +01:00
|
|
|
return "(Favorite)";
|
|
|
|
} else {
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
},
|
2021-01-25 18:04:57 +01:00
|
|
|
},
|
2021-01-25 18:00:09 +01:00
|
|
|
methods: {
|
|
|
|
toggleDetails() {
|
|
|
|
this.detailsAreVisible = !this.detailsAreVisible;
|
|
|
|
},
|
2021-01-25 18:52:30 +01:00
|
|
|
toggleFavorite() {
|
2021-01-27 12:47:15 +01:00
|
|
|
this.$emit("toggle-favorite", this.id);
|
2021-01-25 18:52:30 +01:00
|
|
|
},
|
2021-01-25 18:00:09 +01:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|