Contacts App ب Vuejs 3 Darija Composition Api & Pinia الجزء الثاني

منذ 10 أشهر imadbelasri Vuejs

فهاد الجزء الثاني من 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>