Dashboard.vue

<template>
    <v-container fluid>
        <v-alert v-if="getError || errorGetReport" type="warning">
            <v-card-text>{{ getError || errorGetReport }}</v-card-text>
        </v-alert>
        <v-row>
            <v-col cols="12">
                <v-card>
                    <v-card-text>
                        <v-row align="center">
                            <v-col md="4" col="4">
                                <v-row align="center">
                                    <v-text-field
                                            hide-details
                                            label="3C3CFFGE0DT744811"
                                            single-line
                                            v-model="search"
                                            prepend-icon="mdi-database-search"
                                    ></v-text-field>
                                    <v-tooltip right>
                                        <template v-slot:activator="{ on }">
                                            <v-btn icon small v-on="on" @click="search = ''">
                                                <v-icon>mdi-close</v-icon>
                                            </v-btn>
                                        </template>
                                        <span>{{ $t('Dashboard.clear') }}</span>
                                    </v-tooltip>
                                </v-row>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col >
                                <v-btn
                                        color="primary"
                                        @click="getAutocheck()"
                                        small
                                        :disabled="isLoading"
                                >{{ $t('Dashboard.getAutocheck') }}
                                </v-btn>
                                <v-btn
                                        color="white"
                                        small
                                        @click="getCarfax()"
                                        :disabled="isLoading"
                                >
                                  {{ $t('Dashboard.getCarfax') }}
                                </v-btn>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>

        <v-row>
            <v-col cols="12" v-if="isLoading">
                <v-progress-linear
                        color="primary"
                        indeterminate
                        v-if="isLoading"
                ></v-progress-linear>
                <v-alert
                        border="top"
                        colored-border
                        type="info"
                        elevation="2"
                        width="100%"
                >
                  {{ $t('Dashboard.waitingForDown') }}
                </v-alert>
            </v-col>
            <v-col cols="12" v-if="! isLoading">
                <v-row justify="start" v-if="reportsPage.data.length !== 0">
                    <v-col xl="3" md="4" sm="6" xs="6" v-for="(item, key) in reportsPage.data" v-bind:key="key">
                        <v-card class="mx-auto" min-height="260">
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item>
                                        <div v-if="item.has_autocheck">
                                            <v-img max-width="128" max-height="34"
                                                   src="/img/autocheck-logo.svg"></v-img>
                                        </div>
                                        <div style="margin-left: 10px" v-if="item.has_carfax">
                                            <v-img max-width="128" max-height="24"
                                                   src="/carfax/img/vhr/CarfaxLogo.svg"></v-img>
                                        </div>
                                    </v-list-item>
                                </v-list-item-content>
                            </v-list-item>

                            <v-divider></v-divider>

                            <v-list-item two-line>
                                <v-list-item-content>
                                    <v-list-item-title class="headline">
                                        {{ item.vin }}
                                        <v-tooltip right>
                                            <template v-slot:activator="{ on }">
                                                <v-btn icon x-small v-on="on" v-clipboard="item.vin">
                                                    <v-icon>mdi-content-copy</v-icon>
                                                </v-btn>
                                            </template>
                                            <span>{{ $t('Dashboard.copyVIN') }}</span>
                                        </v-tooltip>
                                    </v-list-item-title>
                                    <v-list-item-subtitle>{{ $t('Dashboard.date') }} {{ item.updated_at }}</v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>

                            <v-divider></v-divider>
                            <v-card-actions>
                                <div v-if="item.has_carfax">
                                    <v-btn min-width="220" :href="goToCarfaxLink(item)" target="blank">
                                      {{ $t('Dashboard.checkCarfax') }}
                                    </v-btn>
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-btn x-small icon v-on="on" @click="getCarfax(item.vin)">
                                                <v-icon>mdi-refresh</v-icon>
                                            </v-btn>
                                        </template>
                                        <span>{{ $t('Dashboard.updateReport') }}</span>
                                    </v-tooltip>
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-btn x-small icon v-on="on" v-clipboard="goToCarfaxLink(item)">
                                                <v-icon>mdi-share-variant</v-icon>
                                            </v-btn>
                                        </template>
                                        <span>{{ $t('Dashboard.copyLinkCarfax') }}</span>
                                    </v-tooltip>
                                </div>
                                <v-btn block v-if="! item.has_carfax" @click="getCarfax(item.vin)">
                                  {{ $t('Dashboard.getCarfaxNow') }} - 1 CFX
                                </v-btn>
                            </v-card-actions>

                            <v-card-actions>
                                <div v-if="item.has_autocheck">
                                    <v-btn color="primary" :href="goToAutocheckLink(item)" target="blank">
                                      {{ $t('Dashboard.checkAutoCheck') }}
                                    </v-btn>
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-btn icon x-small v-on="on" @click="getAutocheck(item.vin)">
                                                <v-icon>mdi-refresh</v-icon>
                                            </v-btn>
                                        </template>
                                        <span>{{ $t('Dashboard.updateReportNow') }}</span>
                                    </v-tooltip>
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-btn icon x-small v-on="on" v-clipboard="goToAutocheckLink(item)">
                                                <v-icon>mdi-share-variant</v-icon>
                                            </v-btn>
                                        </template>
                                        <span>{{ $t('Dashboard.copyLinkAutoCheck') }}</span>
                                    </v-tooltip>
                                </div>
                                <v-btn color="primary" block v-if="! item.has_autocheck"
                                       @click="getAutocheck(item.vin)">
                                  {{ $t('Dashboard.getAutoCheckNow') }} - 1 CFX
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
                <v-row justify="start" v-if="reportsPage.data.length === 0">
                    <v-col>
                        <v-alert
                                border="top"
                                colored-border
                                type="info"
                                elevation="2"
                                width="100%"
                        >
                          {{ $t('Dashboard.forPeriod') }} {{ getFilterTitle }} {{ $t('Dashboard.notFoundReports') }}
                        </v-alert>
                    </v-col>
                </v-row>
            </v-col>
        </v-row>
        <v-row>
            <v-col xs12 class="text-center">
                <v-pagination
                        v-model="page"
                        :length="reportsPage.last_page"
                        circle
                        :total-visible="7"
                        @input="input()"
                ></v-pagination>
            </v-col>
        </v-row>

        <v-dialog v-model="dialog.isShow" max-width="600">
            <v-card>
                <v-card-title class="headline">{{ dialog.title }}</v-card-title>
                <v-card-text>
                    {{ dialog.message }}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                            color="primary"
                            text
                            @click="iAgree(dialog.type)"
                    >
                        {{ dialog.agreeButton }}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-container>
</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "Dashboard",
        data() {
            return {
                search: '',
                headers: [
                    {
                        text: 'Vincode',
                        align: 'left',
                        value: 'vin',
                    },
                    {text: 'Autocheck', value: 'has_autocheck', filterable: false},
                    {text: 'Carfax', value: 'has_carfax', filterable: false},
                    {text: this.$t('Dashboard.gettingTime'), value: 'updated_at', filterable: false},
                ],
                dialog: {
                    isShow: false,
                    title: '',
                    message: '',
                    type: 'carfax',
                    agreeButton: this.$t('Dashboard.agree'),
                },
                page: 1,
                activeFilter: 'all',
                dayFilters: [
                    {
                        name: 'today',
                        title: this.$t('Dashboard.today'),
                    },
                    {
                        name: 'yesterday',
                        title: this.$t('Dashboard.yesterday'),
                    },
                    {
                        name: 'month',
                        title: this.$t('Dashboard.month'),
                    },
                    {
                        name: 'all',
                        title: this.$t('Dashboard.allTime'),
                    },]
            }
        },

        computed: {
            ...mapGetters('reports', ['reportsPage', 'getError', 'isLoading', 'isReports', 'searchReports', 'errorGetReport']),
            ...mapGetters('auth', ['getUser']),
            getFilterTitle() {
                return this.dayFilters.filter(item => item.name === this.activeFilter)[0].title
            }
        },

        created() {
            this.findReportByFilter();
        },

        methods: {
            iAgree() {
              this.dialog.isShow = false;
              if (this.dialog.type === 'carfax') {
                  this.$store.dispatch('reports/getCarfax', this.search.trim());
              }
              if (this.dialog.type === 'autocheck') {
                this.$store.dispatch('reports/getAutoCheck', this.search.trim());
              }
            },

            getAutocheck(vin) {
                const vincode = vin === undefined ? this.search.trim() : vin;
                if (!this.checkValidVinCode(vincode)) {
                    this.showWarningModal();
                    return;
                }

                this.showAgreeModal(vincode, 'autocheck');
            },

            showWarningModal: function () {
                this.dialog.title = this.$t('Dashboard.failedVin');
                this.dialog.agreeButton = this.$t('Dashboard.meUnderstood');
                this.dialog.isShow = true;
                this.dialog.type = 'invalidVincode';
            },

            async getCarfax(vin) {
                const vincode = vin === undefined ? this.search.trim() : vin;
                if (!this.checkValidVinCode(vincode)) {
                    this.showWarningModal();
                    return;
                }

                this.showAgreeModal(vincode, 'carfax');
            },

            async showAgreeModal(vincode, type) {
              const existReportWithVincode = await this.isExistReportWithVincode(vincode);
              this.search = vincode
              if (existReportWithVincode) {
                this.dialog.title = this.$t('Dashboard.alreadyReport');
                this.dialog.agreeButton = this.$t('Dashboard.meUnderstood');
                this.dialog.isShow = true;
                this.dialog.type = type;
                return;
              }

              this.dialog.title = this.$t('Dashboard.requestToReport');
              this.dialog.message = this.$t('Dashboard.pricesForReload');
              this.dialog.type = type;
              this.dialog.isShow = true;
              this.dialog.agreeButton = this.$t('Dashboard.agree');
            },

            checkValidVinCode(vincode) {
                return vincode.length === 17;
            },

            input() {
                this.$store.dispatch('reports/findReportsPage', this.page);
            },

            async isExistReportWithVincode(vincode) {
                const response = await this.$store.dispatch('reports/searchReportsByVin', vincode);
                if (response === null) {
                    return false;
                }

                const reportIndex = response.data.findIndex(report => report.vin === vincode);
                if (reportIndex === -1) {
                    return false;
                }

                const report = response.data[reportIndex];
                return report.has_carfax;
            },

            goToAutocheckLink(item) {
                return process.env.VUE_APP_API_URL + 'view?type=autocheck&hash=' + item.hash
            },

            goToCarfaxLink(item) {
                return process.env.VUE_APP_API_URL + 'view?type=carfax&hash=' + item.hash
            },

            findReportByFilter() {
                if (this.activeFilter === 'all') {
                    this.$store.dispatch('reports/findReportsPage', 1);
                    return;
                }
                this.$store.dispatch('reports/searchReportsByDate', this.activeFilter);
            }
        },

        watch: {
            search(val) {
                const vin = val.trim();
                if (vin.length === 0) {
                    this.$store.dispatch('reports/findReportsPage', 1);
                }

                if (val === undefined || vin.length < 12) {
                    return;
                }

                this.$store.dispatch('reports/searchReportsByVin', vin);
            },
        },
    }
</script>

<style scoped>

</style>