feat: review modal

frontend/src/components/CourseReviews.vue

@@ -62,8 +62,7 @@
             </div>
         </div>
     </div>
-    {{ showReviewModal }}
+    <ReviewModal v-model="showReviewModal" v-model:reloadReviews="reviews"/>
-    <ReviewModal v-model="showReviewModal"/>
 </template>
 <script setup>
 import { Star } from 'lucide-vue-next'
@@ -83,6 +82,8 @@ const props = defineProps({
     },
 });
 
+
+
 const reversedRange = (count) => Array.from({ length: count }, (_, index) => count - index);
 
 const reviews = createResource({

frontend/src/components/Rating.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="flex text-center">
         <div v-for="index in 5">
-            <Star class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer hover:fill-orange-500" @input="handleChange"/>
+            <Star :class="{'fill-orange-500': index <= rating}"
+                class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer" @click="markRating(index)"/>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
-import { computed, useAttrs } from 'vue'
 import { Star } from 'lucide-vue-next'
-
+import { ref } from 'vue'
 const props = defineProps({
     id: {
         type: String,
@@ -17,18 +17,19 @@ const props = defineProps({
     },
     modelValue: {
         type: String,
-        default: '',
+        default: 0,
     },
 })
 
 const emit = defineEmits(['update:modelValue'])
-const attrs = useAttrs()
+let rating = ref(props.modelValue)
 
-let emitChange = (value: string) => {
+let emitChange = (value) => {
     emit('update:modelValue', value)
 }
 
-let handleChange = (e: Event) => {
+function markRating(index) {
-    emitChange((e.target as HTMLInputElement).value)
+    emitChange(index);
+    rating.value = index;
 }
 </script>

frontend/src/components/ReviewModal.vue

@@ -11,16 +11,56 @@
         ]
     }'>
         <template #body-content>
-            <Textarea type="text" size="md" rows="5" />
+            <div class="flex flex-col gap-4">
-            <Rating />
+                <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 } from 'frappe-ui'
+import { Dialog, Textarea, createResource } from 'frappe-ui'
-import { defineModel } from "vue"
+import { defineModel, ref } from "vue"
 import Rating from '@/components/Rating.vue';
 
 const show = defineModel()
-console.log(show)
+const reviews = defineModel("reloadReviews")
+let review = ref({})
+
+const createReview = createResource({
+    url: "frappe.client.insert",
+    makeParams(values) {
+        return {
+            doc: {
+                doctype: "LMS Course Review",
+                ...values,
+            }
+        }
+    }
+})
+function submitReview(close) {
+    createReview.submit(review, {
+        validate() {
+            /* if (!review.value.rating) {
+                return __("Please select a rating")
+            }
+            if (!review.value.review) {
+                return __("Please write a review")
+            } */
+        }, onSuccess() {
+            reviews.reload()
+        }
+    })
+    close();
+}
 </script>