Skip to content

Instantly share code, notes, and snippets.

@Avanger2512

Avanger2512/gist:b681fd2210d81b5241d048ee692dff39

Created February 27, 2020 22:11
Show Gist options
  • Save Avanger2512/b681fd2210d81b5241d048ee692dff39 to your computer and use it in GitHub Desktop.
Save Avanger2512/b681fd2210d81b5241d048ee692dff39 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Avanger2512 created this gist Feb 27, 2020.
    315 changes: 315 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,315 @@
    <template>
    <div id="payouts-transaction" class="payouts-transaction">
    <game-statistics
    :details="payoutDetails"
    ></game-statistics>

    <div class="">
    <div class="transaction">
    <transaction-search
    class="transaction__search"
    @searchEvent="searchForId"
    ></transaction-search>

    <transaction-table
    class="transaction__table"
    :transactions="allTransactions"
    :load="loading"
    :empty="emptyTransactions"
    ></transaction-table>

    <template v-if="!loadMoreBtn">
    <mq-layout :mq="['tabletSm', 'mobile']"
    class="transaction__more">
    <button
    type="button"
    name="button"
    @click="loadMoreTransactions">
    {{ lang.loadMore }} 10
    <span v-html="icons.dropdownArr"></span>
    </button>
    </mq-layout>
    </template>
    </div>

    <pagination
    class="transaction__pagination"
    :allPages="setPagesAmount"
    :lang="langPagination"
    @onPaginationLimitChange="onTransactionUpdateLimit"
    @onPaginationClickPage="onTransactionUpdatePage"
    v-if="!emptyTransactions"
    v-show="this.login.length === 0"
    ></pagination>

    </div>
    </div>
    </template>

    <script>

    import axios from 'axios';
    import exportedAPITransactions from '@/const/api-payouts-transaction';
    import SVG from '@/const/svg';

    import TransactionSearch from '@/components/PayoutsTransaction/Search/Search';
    import TransactionTable from '@/components/PayoutsTransaction/Table/Table';
    import Pagination from '@/components/Base/Pagination/Pagination';
    import GameStatistics from '@/components/Payouts/GameStatistics/GameStatistics';


    export default {
    name: 'PayoutsTransaction',
    components: {
    TransactionSearch,
    TransactionTable,
    Pagination,
    GameStatistics,
    },
    data() {
    return {
    langPagination: payoutsTransactionResources.pagination,
    lang: payoutsTransactionResources,
    icons: SVG,
    loading: false,
    error: false,
    emptyTransactions: false,
    allTransactions: null,
    gameCode: payoutsTransactionResources.gameCode,
    login: '',
    offsetTransaction: 0,
    limitTransaction: 10,
    pageAmount: 1,
    loadMoreBtn: false,
    scrollPos: 0,
    provider: payoutsTransactionResources.gameProvider,
    payoutDetails: {},
    shotProviderName: '',
    gameCode: payoutsTransactionResources.gameCode,
    loadingDetails: true,
    }
    },
    created() {
    this.getShotProviderName();
    },
    mounted() {
    this.getGameStatistics();
    this.getTransactionsInfo();
    this.getAmountTransactions();
    },
    methods: {
    onTransactionUpdateLimit(limit) {
    this.offsetTransaction = 0;
    this.limitTransaction = limit;

    this.getCurrentInfo();
    },

    onTransactionUpdatePage(offset) {
    this.offsetTransaction = (offset-1) * this.limitTransaction;
    this.getCurrentInfo();
    },

    searchForId(payload) {
    this.login = payload;
    this.allTransactions = null;

    this.getCurrentInfo();
    },

    getCurrentInfo() {
    if (this.login.length === 0) {
    this.getTransactionsInfo();
    } else {
    this.getSearchTransactions();
    }

    this.getAmountTransactions();
    },

    getTransactionsInfo(){
    this.loading = this.$mq === 'tabletSm' || this.$mq === 'mobile' ? false : true;

    axios.get(exportedAPITransactions.getPayoutTransactions(this.gameCode, this.provider, this.limitTransaction, this.offsetTransaction))
    .then(response =>{
    const data = response.data;
    this.allTransactions = data;
    this.emptyTransactions = false;

    if (this.allTransactions.length === 0) {
    this.emptyTransactions = true;
    } else {
    this.emptyTransactions = false;
    }

    if (this.$mq === 'tabletSm' || this.$mq === 'mobile') {
    if (this.limitTransaction > this.pageAmount) {
    this.loadMoreBtn = true;
    }
    }
    })
    .catch(error => {
    console.log(error)
    })
    .finally(()=>{
    this.loading = false;
    });
    },
    getSearchTransactions(){
    this.loading = true;

    axios.get(exportedAPITransactions.getPayoutTransactionsSearch(this.gameCode, this.provider, 100, 0, this.login))
    .then(response =>{
    const data = response.data;
    this.allTransactions = data;

    if (this.allTransactions.length === 0) {
    this.emptyTransactions = true;
    } else {
    this.emptyTransactions = false;
    }
    })
    .catch(error => {
    console.log(error)
    })
    .finally(()=>{
    this.loading = false;
    });
    },

    getAmountTransactions(){
    axios.get(exportedAPITransactions.getAmountTransactions(this.gameCode, this.provider))
    .then(response =>{
    const data = response.data;
    this.pageAmount = data;
    })
    .catch(error => {
    console.log(error)
    })
    .finally(()=>(this.loading = false));
    },

    loadMoreTransactions() {
    this.limitTransaction += 10;

    this.getTransactionsInfo();

    if (this.limitTransaction > this.pageAmount) {
    this.loadMoreBtn = true;
    }
    },

    getGameStatistics() {
    axios.get(exportedAPITransactions.getPayoutDetails(this.shotProviderName, this.gameCode))
    .then(response =>{
    const data = response.data;
    this.payoutDetails = data;
    this.loadingDetails = false;
    })
    .catch(error => {
    console.log(error)
    })
    .finally(()=>{
    this.loadingDetails = false;
    });
    },

    getShotProviderName() {
    let url = new URL(window.location.href);
    if (url.searchParams.get("gameProvider").length === 0) {
    this.shotProviderName = null;
    } else {
    this.shotProviderName = url.searchParams.get("gameProvider");
    }
    },
    },
    computed: {
    setPagesAmount() {
    // set amount pages for pagination
    let pages = Math.ceil(+this.pageAmount / +this.limitTransaction);

    if (pages === 0) {
    return 1;
    } else {
    return pages;
    }
    }
    },
    }
    </script>

    <style lang="less">
    @import '../../assets/less/variables/variables';

    .payouts-transaction {
    margin-bottom: 160px;
    margin-top: 24px;

    @media (max-width: 1100px) {
    margin-top: 0;
    }

    @media (max-width: 960px) {
    margin-bottom: 36px;
    }

    @media (max-width: 560px) {
    margin-bottom: 56px;
    }
    }

    .transaction {
    background: @black-two;
    border-radius: 8px;
    overflow: hidden;
    padding: 24px;
    margin-bottom: 4px;

    @media (max-width: 960px) {
    background: @grey-bg;
    padding: 16px 0;
    }

    &__search {
    margin-bottom: 48px;

    @media (max-width: 960px) {
    margin-bottom: 16px;
    }
    }

    &__pagination {
    background: transparent;
    }

    &__more {
    background: @black-two;
    margin-top: 16px;

    & > button {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 9px 0;
    background: transparent;
    color: #fff;
    transition: opacity .15s ease;

    &:hover {
    opacity: 0.8;
    }
    }

    span {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 12px;
    margin: 2px 0 0 8px;
    opacity: .7;
    }
    }
    }

    </style>