Contacts App ب Vuejs 3 Darija Composition Api & Pinia الجزء الثاني
فهاد الجزء الثاني من Contacts App ب Vuejs 3 Darija Composition Api & Pinia غادي نكملوا ل projet ونزيدو ل components لي بقاو باش نزيد نعرض نعدل ونحذف contact.
نظرة سريعة بالفيديو
1- إضافة Contact Component
من بعد فنفس dossier components زيد fichier سميه Contact.vue ولي فيه هاد الكود :
//
<template>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<img src="https://cdn.pixabay.com/photo/2017/11/10/05/48/user-2935527__480.png"
:alt="contact.name" class="img-fluid rounded me-2" width="60" height="60">
<div class="d-flex flex-column">
<h6>{{contact.name}}</h6>
<h6>{{contact.phone}}</h6>
</div>
</div>
</div>
<div class="card-footer bg-white d-flex justify-content-between">
<router-link :to="`/edit/${contact.id}`" class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</router-link>
<button
@click="deleteContact(contact.id)"
class="btn btn-sm btn-danger">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
contact: {
type: Object,
default: {
name: '',
phone: ''
}
}
});
//emit event
const emit = defineEmits(['deleteContactEvent']);
//delete contact function
const deleteContact = (id) => {
emit('deleteContactEvent',id);
}
</script>
<style>
</style>
2- إضافة AddEditContact Component
من بعد فنفس dossier components زيد fichier سميه AddEditContact.vue ولي فيه هاد الكود :
//
<template>
<form class="row g-3 mt-2">
<div class="col-auto">
<label for="name" class="visually-hidden">Name</label>
<input
v-model="data.contact.name"
type="text"
class="form-control"
name="name"
placeholder="Name">
</div>
<div class="col-auto">
<label for="phone" class="visually-hidden">Phone</label>
<input
v-model="data.contact.phone"
type="text"
class="form-control"
autocomplete="off"
name="phone"
placeholder="Phone">
</div>
<div class="col-auto" v-if="updating">
<button type="submit"
:disabled="!data.contact.name || !data.contact.phone"
@click.prevent="updateContact"
class="btn btn-warning mb-3">
<i class="bi bi-pen"></i> Update
</button>
</div>
<div class="col-auto" v-else>
<button type="submit"
:disabled="!data.contact.name || !data.contact.phone"
@click.prevent="addContact"
class="btn btn-primary mb-3">
<i class="bi bi-plus"></i> Add
</button>
</div>
</form>
</template>
<script setup>
import { onMounted, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid';
import { useContactsStore } from '../stores/storeContacts';
//get routes
const route = useRoute();
const router = useRouter();
//get params
const props = defineProps({
updating: {
type: Boolean,
default: false
}
})
const data = reactive({
contact: {
name: '',
phone: ''
},
exists: false
});
//get store
const storeContacts = useContactsStore();
//add contact
const addContact = () => {
let contact = {
id: uuidv4(),
name: data.contact.name,
phone: data.contact.phone
}
storeContacts.addContact(contact);
data.contact.name = '';
data.contact.phone = '';
}
//update contact
const updateContact = () => {
let contact = {
id: route.params.id,
name: data.contact.name,
phone: data.contact.phone
}
storeContacts.updateContact(contact);
router.push('/');
}
onMounted(() => {
if(props.updating){
data.contact = storeContacts.getContact(route.params.id);
}
});
</script>
<style>
</style>
3- إضافة EditContact Component
من بعد فنفس dossier components زيد fichier سميه EditContact.vue ولي فيه هاد الكود :
//
<template>
<div class="row my-4">
<div class="col-md-8 mx-auto">
<div class="card">
<div class="card-body d-flex justify-content-center">
<AddEditContact :updating="true"></AddEditContact>
</div>
</div>
</div>
</div>
</template>
<script setup>
import AddEditContact from './AddEditContact.vue';
</script>
<style>
</style>
4- إضافة Home Component
من بعد فنفس dossier components زيد fichier سميه Home.vue ولي فيه هاد الكود :
//
<template>
<div class="row mt-3">
<div class="col-md-8 mx-auto">
<div class="card">
<div class="card-body d-flex justify-content-center">
<AddEditContact></AddEditContact>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="row">
<Contact
v-for="contact in storeContacts.contacts"
:key="contact.id"
:contact="contact"
@deleteContactEvent="deleteContact"
/>
</div>
</div>
</div>
</template>
<script setup>
import Contact from './Contact.vue';
import { useContactsStore } from '../stores/storeContacts';
import AddEditContact from './AddEditContact.vue';
//get store
const storeContacts = useContactsStore();
//delete contact function
const deleteContact = (id) => {
storeContacts.removeContact(id);
}
</script>
<style>
</style>
5- تعديل ل App Component
منبعد غادي نديرو تعديل على ل App component ودير npm run dev باش ت démarrer serveur.
الكود ديال الملف هو :
//
<template>
<div class="container">
<Header />
<router-view></router-view>
</div>
</template>
<script setup>
import Header from './components/Header.vue'
</script>
<style>
</style>