https://quomoshop.es/assets/store/controllers/reviews_controller

1import { Controller } from "@hotwired/stimulus"
2
3
4export default class extends Controller {
5
6    static targets = ["formOptions", "reportForm", "thanks"]
7    static values = {
8        userId: Number,
9        addReviewUrl: String,
10        productId: Number,
11        preselectedStars: Number
12    }
13
14    connect() {
15        if (this.preselectedStarsValue){
16            this.selectStars(this.preselectedStarsValue)
17        }
18
19        document.addEventListener('turbo:submit-end', (event) =>{
20            if (event.detail.formSubmission.formElement.id === 'product-review-form'){
21                setTimeout(() => {
22                    this.checkProductsReviews()
23                }, 100)
24            }
25        })
26    } 
27    
28    checkProductsReviews(){
29        const productReviewFrames = document.querySelectorAll('.product-review-frame')
30        if (this.thanksTarget && productReviewFrames.length === 0){
31            this.thanksTarget.classList.add('show')
32            document.querySelector('.review-container').classList.add('collapse')
33        }
34    }
35
36    filter(event){
37        const btn = event.currentTarget
38        var option = btn.dataset.option
39        document.querySelector('.select-stars').value = option
40
41        var url = this.formOptionsTarget.action + "?filter="+option
42
43        fetch(url, {
44            method: 'GET',
45            headers: {
46              'Accept': 'text/vnd.turbo-stream.html',
47            },
48        })
49        .then(response => response.text())
50        .then(html => Turbo.renderStreamMessage(html))
51        .catch(error => {
52        console.error("Error:", error);
53        });
54
55    }
56
57
58    likeReview(event){
59        const btn = event.currentTarget
60        var reviewId = btn.dataset.review
61        var todo_action = 'like';
62
63        if (btn.classList.contains('like-review-client')) {
64            todo_action = 'dislike'
65        }
66        const formData = new FormData();
67        formData.append('review_id', reviewId)
68        formData.append('user_id', this.userIdValue)
69        formData.append('todo_action', todo_action)
70        if (this.productIdValue){
71            formData.append('product_id', this.productIdValue)
72        }
73
74        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
75        fetch(this.addReviewUrlValue, {
76            method: 'POST',
77            headers: {
78              'Accept': 'text/vnd.turbo-stream.html',
79              'X-CSRF-Token': csrfToken
80            },
81            body: formData
82        })
83        .then(response => response.text())
84        .then(html => {
85            Turbo.renderStreamMessage(html);
86            this.connect()
87        })
88        .catch(error => {
89            console.error("Error:", error);
90        });
91    }
92
93    showReportCommentBox(event){
94        this.reportFormTarget
95        if (this.reportFormTarget){
96            this.reportFormTarget.querySelector('.report-comment').classList.add('show')
97        }
98    }
99
100    hideReportCommentBox(event){
101        this.reportFormTarget
102        if (this.reportFormTarget){
103            this.reportFormTarget.querySelector('.report-comment').classList.remove('show')
104        }
105    }
106
107    selectStars(limitOrEvent){
108        let limit
109        const storeReview = document.querySelector('.store-review')
110        if (typeof limitOrEvent === "number") {
111            limit = limitOrEvent; 
112            var starsParent = undefined
113            var productIndex = undefined
114        } else {
115            limit = parseInt(limitOrEvent.currentTarget.dataset.index, 10);
116            var starsParent = limitOrEvent.currentTarget.parentElement
117            var productIndex = limitOrEvent.currentTarget.dataset.productIndex
118        }
119
120        
121        if (productIndex){
122            document.getElementById('stars_'+productIndex).value = limit 
123        }else{
124            if (storeReview){
125                document.getElementById('stars').value = limit
126            }else{
127                document.querySelector('.form-active input[name="stars"]').value = limit 
128            }
129            
130        }
131        
132        if (starsParent){
133            var stars = starsParent.querySelectorAll('.star')
134        }else{
135            var stars = document.querySelectorAll('.star')
136        }

137        stars.forEach((star, i) =>{
138            if (i < limit) {
139                star.querySelector('rect').classList.add('cls-1-rellenada');
140                star.querySelector('path').classList.add('cls-2-rellenada');
141            } else {
142                star.querySelector('rect').classList.remove('cls-1-rellenada');
143                star.querySelector('path').classList.remove('cls-2-rellenada');
144            }
145        })
146    }
147
148    selectLabel(event){
149        document.querySelectorAll('.name-label').forEach(label => {
150            label.classList.remove('name-label-checked');
151        })
152        event.currentTarget.classList.add('name-label-checked');
153
154        const reviewIndex = event.currentTarget.dataset.reviewIndex
155
156        if (reviewIndex){
157            if (event.currentTarget.id === "showName_"+reviewIndex) {
158                document.getElementById('review-name-'+reviewIndex).removeAttribute('disabled');
159                document.getElementById('hideReviewName_'+reviewIndex).removeAttribute('checked');
160                document.getElementById('showReviewName_'+reviewIndex).setAttribute('checked', 'checked');
161            } else {
162                document.getElementById('review-name-'+reviewIndex).setAttribute('disabled', 'disabled');
163                document.getElementById('hideReviewName_'+reviewIndex).setAttribute('checked', 'checked');
164                document.getElementById('showReviewName_'+reviewIndex).removeAttribute('checked');
165            }
166        }else{
167            if (event.currentTarget.id === "showName"){
168                document.getElementById('review-name').removeAttribute('disabled');
169                document.getElementById('hideReviewName').removeAttribute('checked');
170                document.getElementById('showReviewName').setAttribute('checked', 'checked');
171            }else{
172                document.getElementById('review-name').setAttribute('disabled', 'disabled');
173                document.getElementById('hideReviewName').setAttribute('checked', 'checked');
174                document.getElementById('showReviewName').removeAttribute('checked');
175            }
176        }
177        
178    }
179};