exchange-2.0/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-5" @keyup.enter="submitSearch">
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="v$.parameters.reference_no">
                        <label class="all-caps">Booking Reference</label>
                        <input type="text" class="form-control" v-model="parameters.reference_no">
                    </validation-wrapper-component>
                </div>
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="v$.parameters.startDate">
                        <label class="all-caps">Start Date</label>
                        <date-picker-component v-model.lazy="parameters.startDate" />
                    </validation-wrapper-component>
                </div>
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="v$.parameters.endDate">
                        <label class="all-caps">End Date</label>
                        <date-picker-component v-model.lazy="parameters.endDate" />
                    </validation-wrapper-component>
                </div>
                <div class="col col-md-auto d-flex justify-content-center align-items-center">
                    <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch">Search</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row padding-10">
                        <div class="col-3 fs-10">Date</div>
                        <div class="col fs-10">Description</div>
                        <div class="col-2 fs-10 text-center">Incoming</div>
                        <div class="col-2 fs-10 text-center">Outgoing</div>
                        <div class="col-2 fs-10 text-right">Balance</div>
                    </div>

                    <list-component :key="listKey" :section="`customerWalletTransactions-${wallet_id}-${decimals}`" :endpoint="route('api.transaction.wallet.list')" :options="options">
                        <template #list="{ data }">
                            <customer-wallet-transaction-component :data="data" :decimals="decimals" />
                        </template>
                    </list-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import route from '@/general/functions/router';

interface Props {
    decimals: number;
    showingTransactionCount: number | string;
    wallet_id: number;
}

const props = defineProps<Props>();

const listKey = ref(1);

const parameters = reactive({
    reference_no: null as string | null,
    startDate: null as string | null,
    endDate: null as string | null,
});

const options = reactive({
    status_in: [2, 3],
    owner_type: 'App\\Models\\Wallet',
    owner_id: props.wallet_id,
    per_page: props.showingTransactionCount,
    with_booking_marking_like: undefined as string | undefined,
    created_after_or_equal: undefined as string | undefined,
    created_before_or_equal: undefined as string | undefined,
});

const rules = {
    parameters: {
        reference_no: {},
        startDate: {},
        endDate: {},
    }
};

const v$ = useVuelidate(rules, { parameters });

watch(() => props.showingTransactionCount, (newVal) => {
    options.per_page = newVal;
    listKey.value++;
});

const submitSearch = () => {
    options.with_booking_marking_like = parameters.reference_no || undefined;
    options.created_after_or_equal = parameters.startDate || undefined;
    options.created_before_or_equal = parameters.endDate || undefined;

    listKey.value++;
};
</script>