Vuejs 3 Darija Review App الجزء الثاني
فهاد الجزء الثاني من Vuejs 3 Darija Review App غادي نكملوا ل projet ديالنا ونزيدو ل components لي بقاو باش نعرضوا reviews نديروا عليهم التعديلات والحذف ديالهم.
نظرة سريعة بالفيديو
1- إضافة Header Component
ف dossier components زيد fichier سميه Header.vue ولي فيه هاد الكود :
//
<template>
<div class='navbar navbar-right my-4'>
<div class="container d-flex justify-content-center">
<router-link to="/" class="navbar-brand text-dark" style="text-decoration: none;color: #000 !important;">
<h3>
<i class="bi bi-star-half fs-2 text-danger"></i> Vuejs 3 Review App
</h3>
</router-link>
</div>
</div>
</template>
<script setup>
</script>
<style>
</style>
2- إضافة ListItem Component
دائما ف dossier components زيد fichier سميه ListItem.vue ولي فيه هاد الكود :
//
<template>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">{{review.name}}</div>
<p>{{review.message}}</p>
<p>
<star-rating
read-only
:star-size="24"
:rating="review.rating"
></star-rating>
</p>
</div>
<div class="d-flex flex-column align-items-center">
<button
@click="store.removeReview(review.id)"
class="btn btn-sm btn-danger mb-2">
<i class="bi bi-trash"></i>
</button>
<router-link
:to="`/edit/${review.id}`"
class="btn btn-sm btn-warning mb-2">
<i class="bi bi-pencil"></i>
</router-link>
</div>
</li>
</template>
<script setup>
import StarRating from 'vue-star-rating'
import { useReviewStore } from '../stores'
//get store
const store = useReviewStore();
//get the props
const props = defineProps({
review:{
type: Object,
required: true
}
});
</script>
<style>
</style>
3- إضافة Form Component
دائما ف dossier components زيد fichier سميه Form.vue ولي فيه هاد الكود :
//
<template>
<form class='mt-5'>
<div class='mb-3'>
<label htmlFor='name' class='form-label'>Name</label>
<input
v-model="data.name"
type='text'
name='name'
class='form-control'
placeholder='Name' />
</div>
<div class='mb-3'>
<label htmlFor='message' class='form-label'>Message</label>
<textarea
v-model="data.message"
class='form-control'
name='message'
placeholder='Message'
rows='3'></textarea>
</div>
<div class='mb-3'>
<star-rating
v-model:rating="data.rating"
@update:rating="setRating"></star-rating>
</div>
<div class='mb-3' v-if="updating">
<button
@click.prevent="updateReview(reviewId)"
:disabled="disabled"
type='submit'
class='btn btn-warning'>
update
</button>
</div>
<div class='mb-3' v-else>
<button
@click.prevent="storeReview"
:disabled="disabled"
type='submit'
class='btn btn-primary'>
submit
</button>
</div>
</form>
</template>
<script setup>
//imports
import { computed, reactive, onMounted } from 'vue'
import StarRating from 'vue-star-rating'
import { useReviewStore } from '../stores'
import { v4 as uuidv4 } from 'uuid';
import { useRouter } from 'vue-router';
//get store
const store = useReviewStore();
//get routes
const router = useRouter();
//set data
const data = reactive({
name: '',
message: '',
rating: 0,
});
//set rating
const setRating = (number) => {
data.rating = number;
}
//add review
const storeReview = () => {
store.addReview({
id: uuidv4(),
name: data.name,
message: data.message,
rating: data.rating
});
data.name = '';
data.message = '';
data.rating = 0;
}
//update review
const updateReview = (reviewId) => {
store.updateReview({
id: reviewId,
name: data.name,
message: data.message,
rating: data.rating
});
data.name = '';
data.message = '';
data.rating = 0;
router.push('/');
}
//disable submit button when form is empty
const disabled = computed(() => {
if(!data.name || !data.message || data.rating === 0){
return true;
}
});
//define props
const props = defineProps({
updating: {
type: Boolean,
default: false
},
reviewId: {
type: String,
required: false
}
});
//fill review the form to update
onMounted(() => {
if(props.updating){
const reviewToEdit = store.getReview(props.reviewId);
data.name = reviewToEdit.name;
data.message = reviewToEdit.message;
data.rating = reviewToEdit.rating;
}
});
</script>
<style>
</style>
4- إضافة AverageRating Component
دائما ف dossier components زيد fichier سميه AverageRating.vue ولي فيه هاد الكود :
//
<template>
<div class='container my-4'>
<div class="d-flex justify-content-between align-items-center">
<h5>Reviews:
<span class="badge bg-dark rounded-pill">
{{store.reviewsLength}}
</span>
</h5>
<h5>Average:
<span class="badge bg-warning text-dark rounded-pill">
{{ store.calculateReviewsAverage }}
</span>
</h5>
</div>
</div>
</template>
<script setup>
import {useReviewStore} from '../stores'
//get store
const store = useReviewStore();
</script>
<style>
</style>