| marination | c842305 | 2021-04-07 23:49:04 +0530 | [diff] [blame^] | 1 | $(() => { |
| 2 | class CustomerReviews { |
| 3 | constructor() { |
| 4 | this.bind_button_actions(); |
| 5 | this.start = 0; |
| 6 | this.page_length = 10; |
| 7 | } |
| 8 | |
| 9 | bind_button_actions() { |
| 10 | this.write_review(); |
| 11 | this.view_more(); |
| 12 | } |
| 13 | |
| 14 | write_review() { |
| 15 | //TODO: make dialog popup on stray page |
| 16 | $('.page_content').on('click', '.btn-write-review', (e) => { |
| 17 | // Bind action on write a review button |
| 18 | const $btn = $(e.currentTarget); |
| 19 | |
| 20 | let d = new frappe.ui.Dialog({ |
| 21 | title: __("Write a Review"), |
| 22 | fields: [ |
| 23 | {fieldname: "title", fieldtype: "Data", label: "Headline", reqd: 1}, |
| 24 | {fieldname: "rating", fieldtype: "Rating", label: "Overall Rating", reqd: 1}, |
| 25 | {fieldtype: "Section Break"}, |
| 26 | {fieldname: "comment", fieldtype: "Small Text", label: "Your Review"} |
| 27 | ], |
| 28 | primary_action: function() { |
| 29 | let me = this; |
| 30 | let data = d.get_values(); |
| 31 | frappe.call({ |
| 32 | method: "erpnext.e_commerce.doctype.item_review.item_review.add_item_review", |
| 33 | args: { |
| 34 | web_item: $btn.attr('data-web-item'), |
| 35 | title: data.title, |
| 36 | rating: data.rating, |
| 37 | comment: data.comment |
| 38 | }, |
| 39 | freeze: true, |
| 40 | freeze_message: __("Submitting Review ..."), |
| 41 | callback: (r) => { |
| 42 | if(!r.exc) { |
| 43 | frappe.msgprint({ |
| 44 | message: __("Thank you for submitting your review"), |
| 45 | title: __("Review Submitted"), |
| 46 | indicator: "green" |
| 47 | }); |
| 48 | d.hide(); |
| 49 | location.reload(); |
| 50 | } |
| 51 | } |
| 52 | }); |
| 53 | }, |
| 54 | primary_action_label: __('Submit') |
| 55 | }); |
| 56 | d.show(); |
| 57 | }); |
| 58 | } |
| 59 | |
| 60 | view_more() { |
| 61 | $('.page_content').on('click', '.btn-view-more', (e) => { |
| 62 | // Bind action on view more button |
| 63 | const $btn = $(e.currentTarget); |
| 64 | $btn.prop('disabled', true); |
| 65 | |
| 66 | this.start += this.page_length; |
| 67 | let me = this; |
| 68 | |
| 69 | frappe.call({ |
| 70 | method: "erpnext.e_commerce.doctype.item_review.item_review.get_item_reviews", |
| 71 | args: { |
| 72 | web_item: $btn.attr('data-web-item'), |
| 73 | start: me.start, |
| 74 | end: me.page_length |
| 75 | }, |
| 76 | callback: (result) => { |
| 77 | if(result.message) { |
| 78 | let res = result.message; |
| 79 | me.get_user_review_html(res.reviews); |
| 80 | |
| 81 | $btn.prop('disabled', false); |
| 82 | if (res.total_reviews <= (me.start + me.page_length)) { |
| 83 | $btn.hide(); |
| 84 | } |
| 85 | |
| 86 | } |
| 87 | } |
| 88 | }) |
| 89 | }); |
| 90 | |
| 91 | } |
| 92 | |
| 93 | get_user_review_html(reviews) { |
| 94 | let me = this; |
| 95 | let $content = $('.user-reviews'); |
| 96 | |
| 97 | reviews.forEach((review) => { |
| 98 | $content.append(` |
| 99 | <div class="mb-3 review"> |
| 100 | <div style="display: flex;"> |
| 101 | <div class="rating"> |
| 102 | ${me.get_review_stars(review.rating)} |
| 103 | </div> |
| 104 | <p class="ml-4 user-review-title"> |
| 105 | <span>${__(review.review_title)}</span> |
| 106 | </p> |
| 107 | </div> |
| 108 | <div class="review-signature"> |
| 109 | <span class="reviewer">${__(review.customer)}</span> |
| 110 | <span>${__(review.published_on)}</span> |
| 111 | </div> |
| 112 | <div class="product-description mb-4 mt-4"> |
| 113 | <p> |
| 114 | ${__(review.comment)} |
| 115 | </p> |
| 116 | </div> |
| 117 | </div> |
| 118 | `); |
| 119 | }); |
| 120 | } |
| 121 | |
| 122 | get_review_stars(rating) { |
| 123 | let stars = ``; |
| 124 | for(let i = 1; i < 6; i++) { |
| 125 | let fill_class = i <= rating ? 'star-click' : ''; |
| 126 | stars += `<svg class="icon icon-md ${fill_class}"> |
| 127 | <use href="#icon-star"></use> |
| 128 | </svg>`; |
| 129 | } |
| 130 | return stars; |
| 131 | } |
| 132 | } |
| 133 | |
| 134 | new CustomerReviews(); |
| 135 | }); |