Your IP : 216.73.217.77


Current Path : /home/users/unlimited/www/egrocer.codeskitter.site/resources/js/views/Sellers/
Upload File :
Current File : /home/users/unlimited/www/egrocer.codeskitter.site/resources/js/views/Sellers/ReturnRequests.vue

<template>
    <div>
        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>{{ __('return_requests') }}</h3>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><router-link to="/seller/dashboard">{{ __('dashboard') }}</router-link></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ __('return_requests') }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <section class="section">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('return_requests') }}</h4>
                    </div>
                    <div class="card-body">
                        <b-row class="mb-2">
                            <b-col md="3" offset-md="8">
                                <h6 class="box-title">{{ __('search') }}</h6>
                                <b-form-input id="filter-input" v-model="filter" type="search"
                                              :placeholder="__('search')"></b-form-input>
                            </b-col>
                            <b-col md="1" class="text-center">
                                <button class="btn btn-primary btn_refresh" v-b-tooltip.hover :title="__('refresh')" @click="getReturnRequests()">
                                    <i class="fa fa-refresh" aria-hidden="true"></i>
                                </button>
                            </b-col>
                        </b-row>

                        <b-table
                            :items="returnRequests"
                            :fields="fields"
                            :current-page="currentPage"
                            :per-page="perPage"
                            :filter="filter"
                            :filter-included-fields="filterOn"
                            :sort-by.sync="sortBy"
                            :sort-desc.sync="sortDesc"
                            :sort-direction="sortDirection"
                            :bordered="true"
                            :busy="isLoading"
                            stacked="md"
                            show-empty
                            small>

                            <template #table-busy>
                                <div class="text-center text-black my-2">
                                    <b-spinner class="align-middle"></b-spinner>
                                    <strong>{{ __('loading') }}...</strong>
                                </div>
                            </template>

                            <template #head(price)="row">
                                {{'Price ('+$currency+')' }}
                            </template>
                            <template #head(discounted_price)="row">
                                {{'Discounted Price ('+$currency+')' }}
                            </template>

                            <template #cell(status)="row">
                                <span v-if="row.item.status === 0" class="badge bg-warning">{{ __('pending') }}</span>
                                <span v-else-if="row.item.status === 1" class="badge bg-success">{{ __('approved') }}</span>
                                <span v-else-if="row.item.status === 2" class="badge bg-danger">{{ __('cancelled') }}</span>
                                <span v-else class="badge bg-danger">{{ __('undefine') }}</span>
                            </template>
                            <template #cell(created_at)="row">
                                {{ new Date(row.item.created_at).toLocaleString() }}
                            </template>
                            <template #cell(actions)="row">
                                <button class="btn btn-sm btn-secondary" @click="edit_record = row.item" v-if="$can('return_request_update')">Edit{{ __('edit') }}</button>
                                <button class="btn btn-sm btn-danger" @click="deleteReturnRequests(row.index,row.item.id)" v-if="$can('return_request_delete')">Delete{{ __('delete') }}</button>
                            </template>

                        </b-table>

                        <b-row>
                            <b-col  md="2" class="my-1">
                                <b-form-group
                                    :label="__('per_page')"
                                    label-for="per-page-select"
                                    label-align-sm="right"
                                    label-size="sm"
                                    class="mb-0">
                                    <b-form-select
                                        id="per-page-select"
                                        v-model="perPage"
                                        :options="pageOptions"
                                        size="sm"
                                        class="form-control form-select"
                                    ></b-form-select>
                                </b-form-group>
                            </b-col>
                            <b-col  md="4" class="my-1" offset-md="6">
                                <b-pagination
                                    v-model="currentPage"
                                    :total-rows="totalRows"
                                    :per-page="perPage"
                                    align="fill"
                                    size="sm"
                                    class="my-0"
                                ></b-pagination>
                            </b-col>
                        </b-row>

                    </div>
                </div>
            </section>
        </div>

    </div>
</template>
<script>
export default {
    data: function() {
        return {
            fields: [
                { key: 'id', label:  __('id') , sortable: true, sortDirection: 'desc' },
                { key: 'user_id', label: __('user_id'), sortable: true, class: 'text-center' },
                { key: 'name', label: __('name'), sortable: true, class: 'text-center' },
                { key: 'product_name', label: __('product_name'), sortable: true, class: 'text-center' },
                { key: 'price', label: __('price'), sortable: true, class: 'text-center' },
                { key: 'discounted_price', label: __('discounted_price'), sortable: true, class: 'text-center' },
                { key: 'quantity', label: __('quantity'), sortable: true, class: 'text-center' },
                { key: 'balance', label: __('balance'), sortable: true,  class: 'text-center' },
                { key: 'status', label: __('status'), sortable: true, class: 'text-center' },
                { key: 'created_at', label: __('date'), sortable: true, class: 'text-center' }
            ],
            totalRows: 1,
            currentPage: 1,
            perPage: this.$perPage,
            pageOptions: this.$pageOptions,
            sortBy: '',
            sortDesc: false,
            sortDirection: 'asc',
            filter: null,
            filterOn: [],
            page: 1,

            isLoading: false,
            sectionStyle : 'style_1',
            max_visible_units : 12,
            max_col_in_single_row : 3,
            create_new : null,
            edit_record : null,
            returnRequests: [],
        }
    },
    computed: {
        sortOptions() {
            // Create an options list from our fields
            return this.fields
                .filter(f => f.sortable)
                .map(f => {
                    return { text: f.label, value: f.key }
                })
        }
    },
    mounted() {
        // Set the initial number of items
        this.totalRows = this.returnRequests.length
    },
    created: function() {
        this.getReturnRequests();
    },
    methods: {
        getReturnRequests(){
            this.isLoading = true
            axios.get(this.$sellerApiUrl + '/return_requests')
                .then((response) => {
                    this.returnRequests = response.data.data;
                    this.totalRows = this.returnRequests.length;
                    this.isLoading = false;
                });
        },
    }
};
</script>