exchange-2.0/resources/assets/vue/components/bookings/sections/SupplierPendingOrderPaymentSectionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col p-r-5">
                    <div class="row m-b-20">
                        <div class="col-12 col-md-7">
                            <div class="row m-b-15">
                                <div class="col">
                                    <div class="row m-b-5">
                                        <div class="col p-r-0">
                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" :class="{'disabled': sectionLoading}" @click="!sectionLoading && (dropdownOpen = !dropdownOpen)">
                                                <div class="row">
                                                    <div class="col p-t-5 p-b-5 fs-9">
                                                        {{selectedSupplier.name}} - {{selectedSupplier.reference}}
                                                    </div>
                                                    <div class="col-auto b-l b-success">
                                                        <div class="row h-100 align-items-center">
                                                            <div class="col">
                                                                <i class="fa" :class="[{'fa-angle-down': !dropdownOpen}, {'fa-angle-up': dropdownOpen}]"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="relative w-100">
                                                <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !dropdownOpen}]" style="top: 100%; right: 0; z-index: 1;">
                                                    <div class="row text-left no-margin bg-white">
                                                        <div class="col no-padding">
                                                            <div class="row no-margin" v-for="supplier in suppliers" :key="supplier.id" :data="supplier">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">{{supplier.name}} - {{supplier.reference}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-if="selectedSupplier.id !== ''">
                                <div class="col">
                                    <list-component :key="currencyOrderKey" section="transactionGroupsListPaymentSection" :options="{'per_page': 20, 'without_bill_group': true, ...(selectedSupplier.id == 4548 && { 'created_after_or_equal': '01-08-2024' }), 'issuer_in': [selectedSupplier.id]}" :endpoint="route('api.transaction.group.list')">
                                        <template #list="{data}">
                                            <transaction-group-payment-component section="transactionGroupsListPaymentSection" :data="data" :payments="payments" @update:modelValue="updateOrder($event)" :emptyPaymentList="emptyPaymentList"></transaction-group-payment-component>
                                        </template>
                                    </list-component>
                                </div>
                            </div>
                            <div class="row" v-else>
                                <div class="col">
                                    <loading-component style="height: 200px; top: 0;" key="1" color="success"></loading-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md">
                            <supplier-white-form-place-order-form-component :payments="payments" :refreshList="updateList" :supplier="selectedSupplier" section="transactionGroupsListPaymentSection"></supplier-white-form-place-order-form-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import route from '@/general/functions/router';
import { useUiStore } from '@/stores/ui';
import { useRequest } from '@/composables/useRequest';

const { submit } = useRequest();
const uiStore = useUiStore();

const sectionLoading = computed(() => uiStore.isLoading('transactionGroupsListPaymentSection'));

const suppliers = ref<any[]>([]);
const dropdownOpen = ref(false);
const selectedSupplier = ref<any>({
    id: '',
    name: ''
});
const payments = ref<any[]>([]);
const currencyOrderKey = ref(1);

const successHandler = (response: any) => {
    suppliers.value = response.payload.data;
    if (suppliers.value.length > 0) {
        selectedSupplier.value = { ...suppliers.value[0] };
    }
    updateList();
};

const updateSupplier = (supplier: any) => {
    dropdownOpen.value = false;
    if (supplier.id !== selectedSupplier.value.id) {
        selectedSupplier.value = { ...supplier };
        updateList();
    }
};

const updateList = () => {
    currencyOrderKey.value++;
    dropdownOpen.value = false;
    payments.value = [];
};

const emptyPaymentList = () => {
    payments.value = [];
};

const updateOrder = (payment: any) => {
    const exists = payments.value.some(item => item.id === payment.id);
    if (exists) {
        payments.value = payments.value.filter(item => item.id !== payment.id);
    } else {
        payments.value.push(payment);
    }
};

onMounted(() => {
    submit(route('api.company.list') + '?filters=' + JSON.stringify({ 'business_type': 3, 'status_in': [1, 2, 0] }), 'get', 'transactionGroupsListPaymentSection', false, false, undefined, { successHandler });
});
</script>