Files
lms/frontend/src/components/Modals/ReviewModal.vue
2024-02-01 10:48:05 +05:30

91 lines
1.7 KiB
Vue

<template>
<Dialog
v-model="show"
:options="{
title: __('Write a Review'),
size: 'xl',
actions: [
{
label: 'Submit',
variant: 'solid',
onClick: (close) => submitReview(close),
},
],
}"
>
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<div class="mb-1.5 text-sm text-gray-600">
{{ __('Rating') }}
</div>
<Rating v-model="review.rating" />
</div>
<div>
<div class="mb-1.5 text-sm text-gray-600">
{{ __('Review') }}
</div>
<Textarea type="text" size="md" rows="5" v-model="review.review" />
</div>
</div>
</template>
</Dialog>
</template>
<script setup>
import { Dialog, Textarea, createResource } from 'frappe-ui'
import { defineModel, reactive } from 'vue'
import Rating from '@/components/Controls/Rating.vue'
import { createToast } from '@/utils/'
const show = defineModel()
const reviews = defineModel('reloadReviews')
const hasReviewed = defineModel('hasReviewed')
let review = reactive({
review: '',
rating: 0,
})
const props = defineProps({
courseName: {
type: String,
required: true,
},
})
const createReview = createResource({
url: 'frappe.client.insert',
makeParams(values) {
return {
doc: {
doctype: 'LMS Course Review',
course: props.courseName,
...values,
},
}
},
})
function submitReview(close) {
review.rating = review.rating / 5
createReview.submit(review, {
validate() {
if (!review.rating) {
return 'Please enter a rating.'
}
},
onSuccess() {
reviews.value.reload()
hasReviewed.value.reload()
},
onError(err) {
createToast({
text: err.messages?.[0] || err,
icon: 'x',
iconClasses: 'text-red-600 bg-red-300',
})
},
})
close()
}
</script>