exchange-2.0/resources/assets/vue/components/settings/elements/AffiliateSectionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoadingAffiliateSettings"></loading-component>
            <div class="row" v-show="!isLoadingAffiliateSettings">
                <div class="col">
                    <div class="row m-b-20">
                        <div class="col">
                            <affiliate-settings-component section="affiliateSettingsSection"></affiliate-settings-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-t-30" v-show="!isLoadingAffiliateSettings">
                <div class="col">
                    <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
                        <div class="col">
                            <div class="font-heading all-caps fs-10 hint-text">
                                Affiliate Codes
                            </div>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
                                <i class="fa fa-plus m-r-5"></i>
                                New Code
                            </button>
                            <button class="btn btn-xs btn-outline-success" @click="refreshAffiliateCodes">
                                <i class="fa fa-refresh m-r-5"></i>
                                Refresh
                            </button>
                            <modal-form-component section="affiliatesSection">
                                <template #form="{ section }">
                                    <affiliate-form-component :section="section"></affiliate-form-component>
                                </template>
                            </modal-form-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Search</label>
                                        <input type="text" class="form-control" v-model="searchTerm" @keyup.enter="search" placeholder="Search by campaign name, code, or description"/>
                                    </div>
                                </div>
                                <div class="col-auto p-l-0 p-r-0">
                                    <div class="btn btn-primary b-rad-none" @click="search">
                                        <i class="fa fa-search lh-40"></i>
                                    </div>
                                </div>
                                <div class="col-auto p-l-0">
                                    <div class="btn btn-secondary b-rad-none" @click="reset">
                                        <i class="fa fa-remove lh-40"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-10 b-b p-b-5" style="border-color: #e0e0e0 !important;">
                        <div class="col-2">
                            <div class="font-heading all-caps fs-9 muted">Campaign</div>
                        </div>
                        <div class="col-4">
                            <div class="font-heading all-caps fs-9 muted">Tracking Link</div>
                        </div>
                        <div class="col-3">
                            <div class="row">
                                <div class="col-4">
                                    <div class="font-heading all-caps fs-9 muted">Clicks</div>
                                </div>
                                <div class="col-4">
                                    <div class="font-heading all-caps fs-9 muted">Registers</div>
                                </div>
                                <div class="col-4">
                                    <div class="font-heading all-caps fs-9 muted">Orders</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="font-heading all-caps fs-9 muted">Status</div>
                        </div>
                        <div class="col-auto">
                            <div class="font-heading all-caps fs-9 muted">Actions</div>
                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col">
                            <list-component section="affiliatesSection" :endpoint="route('api.affiliate.list')" :key="refreshKey" :options="options">
                                <template #list="{ data }">
                                    <affiliate-single-item-component section="affiliatesSection" :data="data"></affiliate-single-item-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const uiStore = useUiStore();

const refreshKey = ref(1);
const searchTerm = ref('');
const options = ref<Record<string, string>>({});

const isLoadingAffiliateSettings = computed(() => uiStore.isLoading('affiliateSettingsSection'));

const refreshAffiliateCodes = () => {
    refreshKey.value += 1;
};

const search = () => {
    if (searchTerm.value && searchTerm.value.trim()) {
        options.value.affiliate_search = searchTerm.value.trim();
    } else {
        delete options.value.affiliate_search;
    }
    refreshKey.value += 1;
};

const reset = () => {
    searchTerm.value = '';
    delete options.value.affiliate_search;
    refreshKey.value += 1;
};
</script>