pokhrelashok / vue-step-progress-indicator Goto Github PK

                <template>
                    <div class="accordion" role="tablist">
                        <b-card no-body class="mb-1" v-for="(ticket,i) in ticketsTable" :key="i">
                            <b-card-header header-tag="header" role="tab" >
                                <b-button block v-b-toggle="'accordion-'+i" variant="bg-transparent border-white" class="text-left">{{ ticket.code }}
                                    <vue-step-progress-indicator
                                        :steps="[
                                            'Recibido',
                                            'En Proceso',
                                            'Termiando'
                                        ]"
                                        :active-step="(ticket.status_id == 3 ? 2 : ticket.status_id+1)"
                                        :is-reactive="false"
                                        @onEnterFinalStep="return true;"
                                    />
                                </b-button>
                            </b-card-header>
                            <b-collapse :id="'accordion-'+i" visible accordion="my-accordion" role="tabpanel">
                                <b-card-body>
                                    <b-card-text><table>
                                        <tr>
                                            <td>{{ ticket.client_comment}}</td>
                                        </tr>
                                    </table></b-card-text>
                                </b-card-body>
                            </b-collapse>
                        </b-card>
                    </div>
                </template>

<script>
import VueStepProgressIndicator from "vue-step-progress-indicator";

export default {
    name: 'ClientComponent',
    components:{
        VueStepProgressIndicator
    },
    data(){
        return {
            ticketsTable: [],
            loading: false,
        }
    },
    created(){
        this.getTickets()
    },
    methods:{
        async getTickets(){
            this.loading = true;
            try {
                const { data } = await axios.get(route('clients.own_tickets'))
                this.ticketsTable = data.data
            } catch (e) {
                
            }finally{
                this.loading = false;
            }
        },
        onEnterFinalStep()
        {
            
        }
    }
}
</script>