https://pacosmoda.es/assets/store/controllers/user_private/message_status_controller

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4
5    static values = {
6        url: String
7    }
8    connect(){
9        document.querySelectorAll('.update-status-message-form').forEach(form =>{
10            form.addEventListener('turbo:submit-end', (event)=>{
11                this.messageNotReaded(event.target)
12            })
13        })
14
15        document.querySelectorAll('.delete-message-form').forEach(form =>{
16            form.addEventListener('turbo:submit-end', ()=>{
17                this.deleteMessage()
18            })
19        })
20    }
21
22    updateStatus(event){
23        const btn = event.currentTarget
24        const messageId = btn.dataset.messageId
25        const status = btn.dataset.status
26        const csrfToken = document.querySelector('meta[name="csrf-token"]').content
27        const url = this.urlValue
28        const data = new FormData()
29        data.append('message_id', messageId)
30        data.append('readed', status)
31        fetch(url, {
32            method: 'POST',
33            body: data,
34            headers: {
35                'X-CSRF-Token': csrfToken
36            }
37        })
38        .then(response => response.json())
39        .then(data => {
40            btn.querySelector('.message-date').classList.remove('fw-bold')
41            btn.querySelector('.status-text').classList.remove('primary-color', 'fw-bold')
42            btn.querySelector('.status-text').innerText = window.I18n[window.I18n.locale].store.user_private.leido
43            const countersContainer = document.querySelectorAll('.nav-link-message-counter')
44            const counters = document.querySelectorAll('.nav-link-message-counter p')
45            if (data.counter === 0){
46                countersContainer.forEach(container => {
47                    container.classList.add('d-none')
48                })
49                
50            }
51            counters.forEach(counter =>{
52                counter.innerText = data.counter
53            })
54            
55        })
56    }
57
58    messageNotReaded(form){
59        const collapseMessage = new bootstrap.Collapse('#collapse_'+form.dataset.messageId)
60        collapseMessage.hide()
61        document.querySelector('#item_'+form.dataset.messageId+' .message-date').classList.add('fw-bold')
62        document.querySelector('#item_'+form.dataset.messageId+' .status-text').innerText=window.I18n[window.I18n.locale].store.user_private.pendiente_leer
63        document.querySelector('#item_'+form.dataset.messageId+' .status-text').classList.add('primary-color', 'fw-bold')
64        document.addEventListener('turbo:before-stream-render', (event)=>{
65            event.detail.render = (streamElement)=>{
66                streamElement.performAction()
67                if (streamElement.action === 'prepend'){
68                    const messagesCount = document.getElementById('message-counter-'+form.dataset.messageId).dataset.count
69                    if (parseInt(messagesCount) > 0){
70                            document.querySelectorAll('.nav-link-message-counter').forEach(counter =>{
71                                counter.classList.remove('d-none')
72                            })
73                    }
74
75                    document.querySelectorAll('.nav-link-message-counter p').forEach(counter =>{
76                        counter.innerText = messagesCount
77                    })
78                }
79            }
80        })
81    }
82
83    deleteMessage(){
84        const currentUrl = new URL(window.location.href)
85        document.addEventListener('turbo:before-stream-render', (event)=>{
86            event.detail.render = (streamElement)=>{
87                streamElement.performAction()
88                if (streamElement.action === 'replace'){
89                    const messsagesCounter = document.getElementById('hidden-counter').dataset.quantity
90                    if(parseInt(messsagesCounter) <= 15){
91                        if (currentUrl.searchParams.has('page')) {
92                            if(parseInt(currentUrl.searchParams.get('page')) > 1 ){
93                                console.log('ok')
94                                window.location.href = '/area-personal?messages=messages&commit=Bandeja+de+entrada'
95                            }
96                        }
97                    }
98                    
99                }
100                
101            }
102        })
103    }
104
105};